[codex] Persist vault host sort mode (#1021)

* Persist vault host sort mode

* Harden vault host sort persistence tests

components/VaultView.sortPersistence.test.tsx

@@ -0,0 +1,142 @@
+import test from "node:test";
+import assert from "node:assert/strict";
+import React from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+
+import { I18nProvider } from "../application/i18n/I18nProvider.tsx";
+import { STORAGE_KEY_VAULT_HOSTS_SORT_MODE } from "../infrastructure/config/storageKeys.ts";
+import type { Host, SSHKey } from "../types.ts";
+import { VaultView } from "./VaultView.tsx";
+import { TooltipProvider } from "./ui/tooltip.tsx";
+
+const installStorageStub = (sortMode: string | null) => {
+  const values = new Map<string, string>();
+  if (sortMode !== null) {
+    values.set(STORAGE_KEY_VAULT_HOSTS_SORT_MODE, sortMode);
+  }
+
+  Object.defineProperty(globalThis, "localStorage", {
+    configurable: true,
+    value: {
+      getItem: (key: string) => values.get(key) ?? null,
+      setItem: (key: string, value: string) => {
+        values.set(key, value);
+      },
+      removeItem: (key: string) => {
+        values.delete(key);
+      },
+    },
+  });
+};
+
+const host = (id: string, label: string, createdAt: number, group = ""): Host => ({
+  id,
+  label,
+  hostname: `${id}.example.com`,
+  username: "root",
+  tags: [],
+  os: "linux",
+  port: 22,
+  protocol: "ssh",
+  authMethod: "password",
+  createdAt,
+  group,
+});
+
+const fallbackKey: SSHKey = {
+  id: "key-1",
+  label: "Fallback key",
+  type: "ED25519",
+  privateKey: "",
+  source: "generated",
+  category: "key",
+  created: 1,
+};
+
+const renderVault = (sortMode: string | null, hosts: Host[]) => {
+  installStorageStub(sortMode);
+  const noop = () => {};
+
+  return renderToStaticMarkup(
+    React.createElement(
+      I18nProvider,
+      { locale: "en" },
+      React.createElement(
+        TooltipProvider,
+        null,
+        React.createElement(VaultView, {
+          hosts,
+          keys: [],
+          identities: [],
+          proxyProfiles: [],
+          snippets: [],
+          snippetPackages: [],
+          customGroups: [],
+          knownHosts: [],
+          shellHistory: [],
+          connectionLogs: [],
+          managedSources: [],
+          sessionCount: 0,
+          hotkeyScheme: "mac",
+          keyBindings: [],
+          terminalThemeId: "default",
+          terminalFontSize: 14,
+          onOpenSettings: noop,
+          onOpenQuickSwitcher: noop,
+          onCreateLocalTerminal: noop,
+          onDeleteHost: noop,
+          onConnect: noop,
+          onUpdateHosts: noop,
+          onUpdateKeys: noop,
+          onImportOrReuseKey: () => fallbackKey,
+          onUpdateIdentities: noop,
+          onUpdateProxyProfiles: noop,
+          onUpdateSnippets: noop,
+          onUpdateSnippetPackages: noop,
+          onUpdateCustomGroups: noop,
+          onUpdateKnownHosts: noop,
+          onUpdateManagedSources: noop,
+          onConvertKnownHost: noop,
+          onToggleConnectionLogSaved: noop,
+          onDeleteConnectionLog: noop,
+          onClearUnsavedConnectionLogs: noop,
+          onOpenLogView: noop,
+          groupConfigs: [],
+          onUpdateGroupConfigs: noop,
+          showRecentHosts: false,
+          showOnlyUngroupedHostsInRoot: false,
+        }),
+      ),
+    ),
+  );
+};
+
+test("Hosts sort mode is restored from storage", () => {
+  const markup = renderVault("za", [
+    host("alpha", "Alpha Host", 1),
+    host("zulu", "Zulu Host", 2),
+  ]);
+
+  assert.ok(markup.indexOf("Zulu Host") < markup.indexOf("Alpha Host"));
+});
+
+test("Hosts grouped sort mode is restored from storage", () => {
+  const markup = renderVault("group", [
+    host("beta", "Beta Host", 1, "Beta Group"),
+    host("alpha", "Alpha Host", 2, "Alpha Group"),
+  ]);
+
+  assert.match(
+    markup,
+    /<span class="text-sm font-medium text-muted-foreground">Alpha Group<\/span><span class="text-xs text-muted-foreground\/60">\(1\)<\/span>/,
+  );
+});
+
+test("Hosts sort mode falls back safely when storage contains an invalid value", () => {
+  const markup = renderVault("unknown-sort", [
+    host("zulu", "Zulu Host", 2),
+    host("alpha", "Alpha Host", 1),
+  ]);
+
+  assert.ok(markup.indexOf("Alpha Host") < markup.indexOf("Zulu Host"));
+});

components/VaultView.tsx

@@ -35,6 +35,7 @@ import React, { Suspense, lazy, memo, startTransition, useCallback, useEffect, u
 import { useI18n } from "../application/i18n/I18nProvider";
 import { useStoredViewMode } from "../application/state/useStoredViewMode";
 import { useStoredBoolean } from "../application/state/useStoredBoolean";
+import { useStoredString } from "../application/state/useStoredString";
 import { useTreeExpandedState } from "../application/state/useTreeExpandedState";
 import { sanitizeCredentialValue } from "../domain/credentials";
 import { resolveGroupDefaults, applyGroupDefaults } from "../domain/groupConfig";
@@ -50,6 +51,7 @@ import { upsertKnownHost } from "../domain/knownHosts";
 import { importVaultHostsFromText, exportHostsToCsvWithStats } from "../domain/vaultImport";
 import type { VaultImportFormat } from "../domain/vaultImport";
 import {
+  STORAGE_KEY_VAULT_HOSTS_SORT_MODE,
   STORAGE_KEY_VAULT_HOSTS_TREE_EXPANDED,
   STORAGE_KEY_VAULT_HOSTS_VIEW_MODE,
   STORAGE_KEY_VAULT_SIDEBAR_COLLAPSED,
@@ -121,6 +123,13 @@ type DropTarget =
   | { kind: "root" }
   | { kind: "group"; path: string };
 
+const isSortMode = (value: string): value is SortMode =>
+  value === "az" ||
+  value === "za" ||
+  value === "newest" ||
+  value === "oldest" ||
+  value === "group";
+
 // Props without isActive - it's now subscribed internally
 interface VaultViewProps {
   hosts: Host[];
@@ -280,7 +289,11 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
     "grid",
   );
   const treeExpandedState = useTreeExpandedState(STORAGE_KEY_VAULT_HOSTS_TREE_EXPANDED);
-  const [sortMode, setSortMode] = useState<SortMode>("az");
+  const [sortMode, setSortMode] = useStoredString<SortMode>(
+    STORAGE_KEY_VAULT_HOSTS_SORT_MODE,
+    "az",
+    isSortMode,
+  );
   const [selectedTags, setSelectedTags] = useState<string[]>([]);
   const [selectedHostIds, setSelectedHostIds] = useState<Set<string>>(new Set());
   const [isMultiSelectMode, setIsMultiSelectMode] = useState(false);

infrastructure/config/storageKeys.ts

@@ -30,6 +30,7 @@ export const STORAGE_KEY_CONNECTION_LOGS = 'netcatty_connection_logs_v1';
 export const STORAGE_KEY_IDENTITIES = 'netcatty_identities_v1';
 export const STORAGE_KEY_PROXY_PROFILES = 'netcatty_proxy_profiles_v1';
 export const STORAGE_KEY_VAULT_HOSTS_VIEW_MODE = 'netcatty_vault_hosts_view_mode_v1';
+export const STORAGE_KEY_VAULT_HOSTS_SORT_MODE = 'netcatty_vault_hosts_sort_mode_v1';
 export const STORAGE_KEY_VAULT_HOSTS_TREE_EXPANDED = 'netcatty_vault_hosts_tree_expanded_v1';
 export const STORAGE_KEY_VAULT_SIDEBAR_COLLAPSED = 'netcatty_vault_sidebar_collapsed_v1';
 export const STORAGE_KEY_VAULT_KEYS_VIEW_MODE = 'netcatty_vault_keys_view_mode_v1';