auramaxx 0.0.1

package/src/components/vault/VaultSidebar.tsx

@@ -0,0 +1,881 @@
+'use client';
+
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { Layers, Key, CreditCard, FileText, Star, Tag, Lock, Unlock, Plus, RefreshCw, Terminal, ShieldCheck, Archive, Trash2, ChevronRight, Wallet } from 'lucide-react';
+import { Button, DownloadButton } from '@/components/design-system';
+import type { VaultInfo, VaultFilters, CategoryFilter, CredentialType } from './types';
+
+type VaultSurface = 'credentials' | 'audit' | 'apiKeys';
+type CredentialCreateStart = 'default' | 'type-picker';
+type CredentialCreatePrefillType = Exclude<CredentialType, 'api' | 'passkey'>;
+
+interface VaultSidebarProps {
+  vaults: VaultInfo[];
+  filters: VaultFilters;
+  categoryCounts: Record<CategoryFilter, number>;
+  tags: string[];
+  favoritesCount: number;
+  onFilterChange: (filters: Partial<VaultFilters>) => void;
+  onLock: () => void;
+  onLockVault?: (vaultId: string) => void;
+  onUnlockVault?: (vault: VaultInfo) => void;
+  onCreateCredential: (start?: CredentialCreateStart, prefillType?: CredentialCreatePrefillType) => void;
+  onCreateVault: (parentVaultId?: string) => void;
+  mode?: 'desktop' | 'tablet' | 'mobile';
+  onNavigate?: () => void;
+  notifications?: unknown[];
+  onDismissNotification?: (id: string) => void;
+  pendingActionCount?: number;
+  surface?: VaultSurface;
+  onSurfaceChange?: (surface: VaultSurface) => void;
+  onSettings?: () => void;
+  onDeleteVault?: (vault: VaultInfo) => void;
+}
+
+const categories: { key: CategoryFilter; label: string; icon: React.FC<{ size: number; className?: string }> }[] = [
+  { key: 'all', label: 'All Credentials', icon: Layers },
+  { key: 'login', label: 'Logins', icon: Key },
+  { key: 'card', label: 'Cards', icon: CreditCard },
+  { key: 'plain_note', label: 'Plain Notes', icon: FileText },
+  { key: 'note', label: 'Secret Notes', icon: FileText },
+  { key: 'hot_wallet', label: 'Hot Wallets', icon: Wallet },
+  { key: 'oauth2', label: 'OAuth2', icon: RefreshCw },
+  { key: 'ssh', label: 'SSH Keys', icon: Terminal },
+  { key: 'gpg', label: 'GPG Keys', icon: ShieldCheck },
+];
+
+const CATEGORY_CREATE_TYPE: Partial<Record<CategoryFilter, CredentialCreatePrefillType>> = {
+  login: 'login',
+  card: 'card',
+  plain_note: 'plain_note',
+  note: 'note',
+  hot_wallet: 'hot_wallet',
+  oauth2: 'oauth2',
+  ssh: 'ssh',
+  gpg: 'gpg',
+};
+
+const lifecycleFilters: {
+  key: VaultFilters['lifecycle'];
+  label: string;
+  icon: React.FC<{ size: number; className?: string }>;
+}[] = [
+  { key: 'archive', label: 'Archived', icon: Archive },
+  { key: 'recently_deleted', label: 'Recently Deleted', icon: Trash2 },
+];
+
+const KEYBOARD_SHORTCUTS: Array<{ combo: string; action: string }> = [
+  { combo: 'Cmd/Ctrl + K', action: 'Focus search' },
+  { combo: '/', action: 'Focus search (while not typing)' },
+  { combo: 'Cmd/Ctrl + Alt + N', action: 'Create new credential' },
+  { combo: '↑ / ↓', action: 'Navigate list selection' },
+  { combo: 'Enter', action: 'Open selected credential' },
+];
+
+type SidebarSectionKey = 'vaults' | 'categories' | 'favorites' | 'tags' | 'lifecycle';
+
+type SidebarSectionState = Record<SidebarSectionKey, boolean>;
+type VaultNodeCollapseState = Record<string, boolean>;
+
+const SIDEBAR_SECTION_STORAGE_KEY = 'auramaxx:vault-sidebar-collapsible-sections';
+const SIDEBAR_VAULT_NODE_STORAGE_KEY = 'auramaxx:vault-sidebar-collapsed-vault-nodes';
+
+const DEFAULT_SECTION_STATE: SidebarSectionState = {
+  vaults: false,
+  categories: true,
+  favorites: true,
+  tags: true,
+  lifecycle: true,
+};
+
+function normalizeSectionState(input: unknown): SidebarSectionState | null {
+  if (!input || typeof input !== 'object') return null;
+
+  return {
+    vaults: Boolean((input as Partial<SidebarSectionState>).vaults),
+    categories: Boolean((input as Partial<SidebarSectionState>).categories),
+    favorites: Boolean((input as Partial<SidebarSectionState>).favorites),
+    tags: Boolean((input as Partial<SidebarSectionState>).tags),
+    lifecycle: Boolean((input as Partial<SidebarSectionState>).lifecycle),
+  };
+}
+
+function normalizeVaultNodeState(input: unknown): VaultNodeCollapseState | null {
+  if (!input || typeof input !== 'object') return null;
+  const next: VaultNodeCollapseState = {};
+  for (const [key, value] of Object.entries(input as Record<string, unknown>)) {
+    if (!key) continue;
+    next[key] = Boolean(value);
+  }
+  return next;
+}
+
+type RenderedVaultEntry = {
+  vault: VaultInfo;
+  depth: number;
+};
+
+function getParentVaultId(vault: VaultInfo): string | undefined {
+  return vault.parentVaultId || vault.linkedTo;
+}
+
+function buildRenderedVaultEntries(vaults: VaultInfo[]): RenderedVaultEntry[] {
+  const byId = new Map(vaults.map((vault) => [vault.id, vault]));
+  const byOrder = new Map(vaults.map((vault, index) => [vault.id, index]));
+  const childrenByParent = new Map<string, VaultInfo[]>();
+
+  for (const vault of vaults) {
+    const parentVaultId = getParentVaultId(vault);
+    if (!parentVaultId || !byId.has(parentVaultId) || parentVaultId === vault.id) continue;
+    const bucket = childrenByParent.get(parentVaultId) || [];
+    bucket.push(vault);
+    childrenByParent.set(parentVaultId, bucket);
+  }
+
+  const sortByInputOrder = (a: VaultInfo, b: VaultInfo) => {
+    return (byOrder.get(a.id) || 0) - (byOrder.get(b.id) || 0);
+  };
+  for (const children of childrenByParent.values()) {
+    children.sort(sortByInputOrder);
+  }
+
+  const roots = vaults
+    .filter((vault) => {
+      const parentVaultId = getParentVaultId(vault);
+      return !parentVaultId || !byId.has(parentVaultId) || parentVaultId === vault.id;
+    })
+    .sort(sortByInputOrder);
+
+  const ordered: RenderedVaultEntry[] = [];
+  const visited = new Set<string>();
+  const walk = (vault: VaultInfo, depth: number) => {
+    if (visited.has(vault.id)) return;
+    visited.add(vault.id);
+    ordered.push({ vault, depth });
+    for (const child of childrenByParent.get(vault.id) || []) {
+      walk(child, depth + 1);
+    }
+  };
+
+  for (const root of roots) {
+    walk(root, 0);
+  }
+  for (const vault of [...vaults].sort(sortByInputOrder)) {
+    walk(vault, 0);
+  }
+  return ordered;
+}
+
+function buildTreeMaps(vaults: VaultInfo[]) {
+  const parentByChild = new Map<string, string>();
+  const childCountByParent = new Map<string, number>();
+
+  for (const vault of vaults) {
+    const parent = getParentVaultId(vault);
+    if (!parent || parent === vault.id) continue;
+    parentByChild.set(vault.id, parent);
+    childCountByParent.set(parent, (childCountByParent.get(parent) || 0) + 1);
+  }
+
+  return { parentByChild, childCountByParent };
+}
+
+export const VaultSidebar: React.FC<VaultSidebarProps> = ({
+  vaults,
+  filters,
+  categoryCounts,
+  tags,
+  favoritesCount,
+  onFilterChange,
+  onLock,
+  onLockVault,
+  onUnlockVault,
+  onCreateCredential,
+  onCreateVault,
+  mode = 'desktop',
+  onNavigate,
+  notifications = [],
+  onDismissNotification,
+  pendingActionCount = 0,
+  surface = 'credentials',
+  onSurfaceChange,
+  onSettings,
+  onDeleteVault,
+}) => {
+  const isCompact = mode === 'tablet';
+  const sidebarWidth = mode === 'tablet'
+    ? 'calc(48px * var(--ui-scale-factor, 1))'
+    : mode === 'mobile'
+      ? 'calc(220px * var(--ui-scale-factor, 1))'
+      : 'calc(200px * var(--ui-scale-factor, 1))';
+  const createDisabled = filters.lifecycle !== 'active';
+  const renderedVaults = useMemo(() => buildRenderedVaultEntries(vaults), [vaults]);
+  const { parentByChild, childCountByParent } = useMemo(() => buildTreeMaps(vaults), [vaults]);
+  const [collapsedSections, setCollapsedSections] = useState<SidebarSectionState>(DEFAULT_SECTION_STATE);
+  const [sectionStateHydrated, setSectionStateHydrated] = useState(false);
+  const [collapsedVaultNodes, setCollapsedVaultNodes] = useState<VaultNodeCollapseState>({});
+  const [nodeStateHydrated, setNodeStateHydrated] = useState(false);
+  const [shortcutPopoverOpen, setShortcutPopoverOpen] = useState(false);
+  const shortcutPopoverRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    try {
+      const raw = window.localStorage.getItem(SIDEBAR_SECTION_STORAGE_KEY);
+      if (!raw) return;
+      const parsed = normalizeSectionState(JSON.parse(raw));
+      if (!parsed) return;
+      setCollapsedSections(parsed);
+    } catch {
+      // Ignore malformed localStorage payloads and use defaults.
+    } finally {
+      setSectionStateHydrated(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!sectionStateHydrated) return;
+    try {
+      window.localStorage.setItem(SIDEBAR_SECTION_STORAGE_KEY, JSON.stringify(collapsedSections));
+    } catch {
+      // Ignore localStorage failures (private mode / quota).
+    }
+  }, [collapsedSections, sectionStateHydrated]);
+
+  useEffect(() => {
+    try {
+      const raw = window.localStorage.getItem(SIDEBAR_VAULT_NODE_STORAGE_KEY);
+      if (!raw) return;
+      const parsed = normalizeVaultNodeState(JSON.parse(raw));
+      if (!parsed) return;
+      setCollapsedVaultNodes(parsed);
+    } catch {
+      // Ignore malformed localStorage payloads and use defaults.
+    } finally {
+      setNodeStateHydrated(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!nodeStateHydrated) return;
+    try {
+      window.localStorage.setItem(SIDEBAR_VAULT_NODE_STORAGE_KEY, JSON.stringify(collapsedVaultNodes));
+    } catch {
+      // Ignore localStorage failures.
+    }
+  }, [collapsedVaultNodes, nodeStateHydrated]);
+
+  useEffect(() => {
+    const selectedVaultId = filters.vaultId;
+    if (!selectedVaultId) return;
+    const ancestors: string[] = [];
+    let cursor = parentByChild.get(selectedVaultId);
+    while (cursor) {
+      ancestors.push(cursor);
+      cursor = parentByChild.get(cursor);
+    }
+    if (ancestors.length === 0) return;
+    setCollapsedVaultNodes((prev) => {
+      let changed = false;
+      const next = { ...prev };
+      for (const id of ancestors) {
+        if (next[id]) {
+          delete next[id];
+          changed = true;
+        }
+      }
+      return changed ? next : prev;
+    });
+  }, [filters.vaultId, parentByChild]);
+
+  useEffect(() => {
+    if (!shortcutPopoverOpen) return;
+    const onPointerDown = (event: MouseEvent) => {
+      const target = event.target as Node;
+      if (shortcutPopoverRef.current && !shortcutPopoverRef.current.contains(target)) {
+        setShortcutPopoverOpen(false);
+      }
+    };
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') setShortcutPopoverOpen(false);
+    };
+    document.addEventListener('mousedown', onPointerDown);
+    document.addEventListener('keydown', onKeyDown);
+    return () => {
+      document.removeEventListener('mousedown', onPointerDown);
+      document.removeEventListener('keydown', onKeyDown);
+    };
+  }, [shortcutPopoverOpen]);
+
+  const visibleRenderedVaults = useMemo(() => {
+    const hiddenAncestorStack: string[] = [];
+    const visible: RenderedVaultEntry[] = [];
+
+    for (const entry of renderedVaults) {
+      while (hiddenAncestorStack.length > entry.depth) hiddenAncestorStack.pop();
+      if (hiddenAncestorStack.length > 0) continue;
+      visible.push(entry);
+      if (collapsedVaultNodes[entry.vault.id]) hiddenAncestorStack.push(entry.vault.id);
+    }
+    return visible;
+  }, [renderedVaults, collapsedVaultNodes]);
+
+  const toggleSection = (section: SidebarSectionKey) => {
+    setCollapsedSections((prev) => ({ ...prev, [section]: !prev[section] }));
+  };
+
+  const toggleVaultNode = (vaultId: string) => {
+    setCollapsedVaultNodes((prev) => ({ ...prev, [vaultId]: !prev[vaultId] }));
+  };
+
+  const handleSectionToggleKeyDown = (
+    event: React.KeyboardEvent<HTMLButtonElement>,
+    section: SidebarSectionKey,
+  ) => {
+    if (event.key !== 'Enter' && event.key !== ' ') return;
+    event.preventDefault();
+    toggleSection(section);
+  };
+
+  const handleFilterAction = (partial: Partial<VaultFilters>) => {
+    onSurfaceChange?.('credentials');
+    onFilterChange(partial);
+    onNavigate?.();
+  };
+
+  const handleCreateCredential = (
+    start: CredentialCreateStart = 'default',
+    prefillType?: CredentialCreatePrefillType,
+  ) => {
+    onSurfaceChange?.('credentials');
+    if (prefillType) {
+      onCreateCredential(start, prefillType);
+    } else {
+      onCreateCredential(start);
+    }
+    onNavigate?.();
+  };
+
+  const handleCreateVault = (parentVaultId?: string) => {
+    onSurfaceChange?.('credentials');
+    onCreateVault(parentVaultId);
+    onNavigate?.();
+  };
+
+  const handleLock = () => {
+    onLock();
+    onNavigate?.();
+  };
+
+  const handleOpenAudit = () => {
+    onSurfaceChange?.('audit');
+    onNavigate?.();
+  };
+
+  const handleOpenApiKeys = () => {
+    onSurfaceChange?.('apiKeys');
+    onNavigate?.();
+  };
+
+  const renderSectionToggle = (section: SidebarSectionKey, label: string, className = '') => (
+    <button
+      type="button"
+      onClick={() => toggleSection(section)}
+      onKeyDown={(event) => handleSectionToggleKeyDown(event, section)}
+      aria-expanded={!collapsedSections[section]}
+      aria-controls={`vault-sidebar-section-${section}`}
+      aria-label={`${label} section`}
+      className={`w-full flex items-center transition-colors hover:bg-[var(--color-background-alt,#f4f4f5)] ${isCompact ? 'justify-center py-1' : 'justify-between px-2 py-1'} ${className}`}
+      title={`${label} section`}
+    >
+      {!isCompact && (
+        <span className="text-[8px] tracking-widest uppercase text-[var(--color-text-muted,#6b7280)] font-bold">
+          {label}
+        </span>
+      )}
+      <ChevronRight
+        size={10}
+        className={`text-[var(--color-text-faint,#9ca3af)] transition-transform ${collapsedSections[section] ? '' : 'rotate-90'}`}
+      />
+    </button>
+  );
+
+  return (
+    <div
+      className="h-full flex flex-col border-r border-[var(--color-border,#d4d4d8)] font-mono relative overflow-hidden shrink-0"
+      style={{
+        width: sidebarWidth,
+        minWidth: sidebarWidth,
+        background: 'var(--color-surface, #f4f4f2)',
+        fontSize: 'var(--font-size-sm)',
+      }}
+    >
+      {/* Subtle dot texture (matches WalletSidebar) */}
+      <div className="absolute inset-0 opacity-[0.02] pointer-events-none bg-[radial-gradient(var(--color-text,#000)_1px,transparent_1px)] bg-[size:4px_4px]" />
+
+      {/* Header */}
+      <div className={`flex items-center justify-between border-b border-[var(--color-border,#d4d4d8)] relative z-10 ${isCompact ? 'px-2 py-2' : 'px-3 py-3'}`}>
+        <div className={`flex items-center ${isCompact ? 'justify-center w-full' : 'gap-2'}`}>
+          <img src="/logo.webp" alt="Aura" className="w-[length:var(--font-size-sm)] h-[length:var(--font-size-sm)] object-contain" />
+          {!isCompact && (
+            <span
+              data-testid="vault-sidebar-header-brand"
+              className="text-[length:var(--font-size-sm)] font-bold tracking-widest uppercase text-[var(--color-text,#0a0a0a)]"
+            >
+              AURAMAXX
+            </span>
+          )}
+        </div>
+        {/* <DownloadButton compact={isCompact} /> — waiting for Apple to approve cert */}
+      </div>
+
+      {/* Scrollable content */}
+      <div className="flex-1 overflow-y-auto overflow-x-hidden relative z-10">
+      {/* Vault list */}
+      <div className="border-b border-[var(--color-border,#d4d4d8)]">
+        {renderSectionToggle('vaults', 'Vaults')}
+        {!collapsedSections.vaults && (
+          <div
+            id="vault-sidebar-section-vaults"
+            className={`${isCompact ? 'px-1 pb-2' : 'px-2 pb-2'} overflow-x-hidden`}
+          >
+            <div
+              className={`flex items-center ${isCompact ? 'gap-1' : 'gap-1.5'}`}
+              style={{
+                borderLeft: filters.vaultId === null ? '2px solid var(--color-accent, #ccff00)' : '2px solid transparent',
+              }}
+            >
+              <button
+                onClick={() => handleFilterAction({ vaultId: null, lifecycle: 'active', tag: null })}
+                className={`flex-1 flex items-center transition-colors hover:bg-[var(--color-background-alt,#f4f4f5)] ${isCompact ? 'justify-center px-1 py-1.5' : 'gap-2 px-2 py-1.5 text-left'}`}
+                title="All Vaults (Active)"
+              >
+                {isCompact ? (
+                  <Layers size={11} className="text-[var(--color-text-muted,#6b7280)]" />
+                ) : (
+                  <span className="text-[9px] tracking-widest uppercase text-[var(--color-text,#0a0a0a)] font-bold">
+                    All Vaults
+                  </span>
+                )}
+              </button>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleLock}
+                className={isCompact ? '!px-0 !h-6 !w-6' : '!px-1.5 !h-6'}
+                title="Lock all vaults"
+              >
+                <Lock size={10} />
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => handleCreateVault()}
+                className={isCompact ? '!px-0 !h-6 !w-6' : '!px-1.5 !h-6'}
+                title="Create vault"
+              >
+                <Plus size={10} />
+              </Button>
+            </div>
+            {visibleRenderedVaults.map(({ vault, depth }) => {
+              const displayName = vault.name || (vault.isPrimary ? 'Primary' : `Vault ${vault.id.slice(0, 6)}`);
+              const isTopLevel = !getParentVaultId(vault);
+              const canLockTopLevel = isTopLevel && !vault.isPrimary && vault.isUnlocked && Boolean(onLockVault);
+              const hasChildren = (childCountByParent.get(vault.id) || 0) > 0;
+              const parentId = parentByChild.get(vault.id);
+              const parentName = parentId ? (vaults.find((v) => v.id === parentId)?.name || parentId.slice(0, 6)) : null;
+              const isVaultActive = filters.vaultId === vault.id;
+
+              return (
+                <div
+                  key={vault.id}
+                  className="w-full min-w-0 flex items-center group"
+                  style={{
+                    borderLeft: isVaultActive ? '2px solid var(--color-accent, #ccff00)' : '2px solid transparent',
+                  }}
+                >
+                  <div className="ml-0.5 flex items-center">
+                    {hasChildren ? (
+                      <button
+                        type="button"
+                        data-testid={`vault-toggle-${vault.id}`}
+                        aria-label={`Toggle children for ${displayName}`}
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          toggleVaultNode(vault.id);
+                        }}
+                        className="w-5 h-5 flex items-center justify-center text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)]"
+                      >
+                        <ChevronRight size={9} className={`transition-transform ${collapsedVaultNodes[vault.id] ? '' : 'rotate-90'}`} />
+                      </button>
+                    ) : (
+                      <span className="w-5" />
+                    )}
+                  </div>
+                  <button
+                    data-testid={`vault-item-${vault.id}`}
+                    data-vault-depth={depth}
+                    onClick={() => {
+                      if (!vault.isUnlocked) {
+                        onUnlockVault?.(vault);
+                        return;
+                      }
+                      handleFilterAction({ vaultId: vault.id });
+                    }}
+                    className={`flex-1 min-w-0 flex items-center transition-colors hover:bg-[var(--color-background-alt,#f4f4f5)] ${isCompact ? 'justify-center py-1.5 pr-1' : 'gap-2 py-1.5 pr-2 text-left'}`}
+                    style={{
+                      paddingLeft: isCompact
+                        ? `${Math.max(2, 2 + depth * 4)}px`
+                        : `${8 + depth * 12}px`,
+                    }}
+                    title={displayName}
+                  >
+                    {isCompact ? (
+                      <div className="flex items-center gap-1">
+                        <div className="w-4 h-4 border border-[var(--color-border,#d4d4d8)] rounded-full flex items-center justify-center text-[7px] uppercase text-[var(--color-text-muted,#6b7280)]">
+                          {(vault.name || 'V').slice(0, 1)}
+                        </div>
+                        {vault.isUnlocked ? (
+                          <Unlock size={8} className="text-[var(--color-text-muted,#6b7280)]" />
+                        ) : (
+                          <Lock size={8} className="text-[var(--color-text-faint,#9ca3af)]" />
+                        )}
+                      </div>
+                    ) : (
+                      <>
+                        {depth > 0 && (
+                          <span data-testid={`vault-lineage-${vault.id}`} className="text-[8px] text-[var(--color-text-faint,#9ca3af)]" title={parentName ? `Child of ${parentName}` : 'Child vault'}>
+                            ↳
+                          </span>
+                        )}
+                        <span className="min-w-0 flex-1 text-[9px] tracking-widest uppercase text-[var(--color-text-muted,#6b7280)] truncate">
+                          {displayName}
+                        </span>
+                        <span
+                          className="shrink-0 text-[8px] text-[var(--color-text-faint,#9ca3af)] tabular-nums"
+                          title={`${vault.credentialCount ?? 0} credentials`}
+                        >
+                          {vault.credentialCount ?? 0}
+                        </span>
+                      </>
+                    )}
+                  </button>
+                  {!isCompact && (
+                    <div className="mr-1 flex items-center gap-0.5">
+                      {canLockTopLevel && (
+                        <button
+                          type="button"
+                          data-testid={`vault-status-lock-${vault.id}`}
+                          title={vault.isPrimary ? 'Lock all vaults' : `Lock vault ${displayName}`}
+                          aria-label={vault.isPrimary ? 'Lock all vaults' : `Lock vault ${displayName}`}
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            if (vault.isPrimary) {
+                              handleLock();
+                              return;
+                            }
+                            onLockVault?.(vault.id);
+                          }}
+                          className="w-5 h-5 flex items-center justify-center text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] hover:bg-[var(--color-background-alt,#f4f4f5)] opacity-0 group-hover:opacity-100 transition-opacity"
+                        >
+                          <Lock size={9} />
+                        </button>
+                      )}
+                      {onDeleteVault && (
+                        <button
+                          type="button"
+                          title={`Delete vault ${displayName}`}
+                          aria-label={`Delete vault ${displayName}`}
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            onDeleteVault(vault);
+                          }}
+                          className="w-5 h-5 flex items-center justify-center text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] hover:bg-[var(--color-background-alt,#f4f4f5)] opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity"
+                        >
+                          <Trash2 size={9} />
+                        </button>
+                      )}
+                      <button
+                        type="button"
+                        title={`Create child vault in ${displayName}`}
+                        aria-label={`Create child vault in ${displayName}`}
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          handleCreateVault(vault.id);
+                        }}
+                        className="w-5 h-5 shrink-0 flex items-center justify-center text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] hover:bg-[var(--color-background-alt,#f4f4f5)]"
+                      >
+                        <Plus size={9} />
+                      </button>
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* Categories */}
+      <div className="border-b border-[var(--color-border,#d4d4d8)]">
+        {renderSectionToggle('categories', 'Categories')}
+        {!collapsedSections.categories && (
+          <div
+            id="vault-sidebar-section-categories"
+            className={isCompact ? 'px-1 pb-2' : 'px-2 pb-2'}
+          >
+            {categories.map(({ key, label, icon: Icon }) => {
+              const showCreateCredential = true;
+              return (
+                <div key={key} className="w-full flex items-center gap-1 group">
+                  <button
+                    onClick={() => handleFilterAction({ category: key })}
+                    className={`${showCreateCredential ? 'flex-1 min-w-0' : 'w-full'} flex items-center transition-colors hover:bg-[var(--color-background-alt,#f4f4f5)] ${isCompact ? 'justify-center px-1 py-1.5' : 'gap-2 px-2 py-1.5 text-left'}`}
+                    style={{
+                      borderLeft: filters.category === key ? '2px solid var(--color-accent, #ccff00)' : '2px solid transparent',
+                    }}
+                    title={label}
+                  >
+                    <Icon size={11} className={filters.category === key ? 'text-[var(--color-text,#0a0a0a)]' : 'text-[var(--color-text-muted,#6b7280)]'} />
+                    {!isCompact && (
+                      <>
+                        <span className={`text-[9px] tracking-widest uppercase flex-1 ${filters.category === key ? 'text-[var(--color-text,#0a0a0a)] font-bold' : 'text-[var(--color-text-muted,#6b7280)]'}`}>
+                          {label}
+                        </span>
+                        <span className="text-[8px] text-[var(--color-text-faint,#9ca3af)]">
+                          {categoryCounts[key]}
+                        </span>
+                      </>
+                    )}
+                  </button>
+                  {showCreateCredential && (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => {
+                        const createType = CATEGORY_CREATE_TYPE[key];
+                        if (createType) {
+                          handleCreateCredential('default', createType);
+                          return;
+                        }
+                        handleCreateCredential('type-picker');
+                      }}
+                      className={`${isCompact ? '!px-0 !h-6 !w-6' : '!px-1.5 !h-6'} opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity`}
+                      title={createDisabled ? `Click All Credentials to return to Active and create ${label}` : `Create ${label}`}
+                      disabled={createDisabled}
+                    >
+                      <Plus size={10} />
+                    </Button>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* Favorites */}
+      <div className="border-b border-[var(--color-border,#d4d4d8)]">
+        {renderSectionToggle('favorites', 'Favorites')}
+        {!collapsedSections.favorites && (
+          <div
+            id="vault-sidebar-section-favorites"
+            className={isCompact ? 'px-1 pb-2' : 'px-2 pb-2'}
+          >
+            <button
+              onClick={() => handleFilterAction({ favoritesOnly: !filters.favoritesOnly })}
+              className={`w-full flex items-center transition-colors hover:bg-[var(--color-background-alt,#f4f4f5)] ${isCompact ? 'justify-center px-1 py-1.5' : 'gap-2 px-2 py-1.5 text-left'}`}
+              style={{
+                borderLeft: filters.favoritesOnly ? '2px solid var(--color-accent, #ccff00)' : '2px solid transparent',
+              }}
+              title="Favorites"
+            >
+              <Star
+                size={11}
+                className={filters.favoritesOnly ? 'text-[var(--color-text,#0a0a0a)]' : 'text-[var(--color-text-muted,#6b7280)]'}
+                style={filters.favoritesOnly ? { fill: 'var(--color-accent,#ccff00)', color: 'var(--color-accent,#ccff00)' } : undefined}
+              />
+              {!isCompact && (
+                <>
+                  <span className={`text-[9px] tracking-widest uppercase flex-1 ${filters.favoritesOnly ? 'text-[var(--color-text,#0a0a0a)] font-bold' : 'text-[var(--color-text-muted,#6b7280)]'}`}>
+                    Favorites
+                  </span>
+                  <span className="text-[8px] text-[var(--color-text-faint,#9ca3af)]">
+                    {favoritesCount}
+                  </span>
+                </>
+              )}
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Tags */}
+      {!isCompact && tags.length > 0 && (
+        <div className="border-b border-[var(--color-border,#d4d4d8)]">
+          {renderSectionToggle('tags', 'Tags')}
+          {!collapsedSections.tags && (
+            <div id="vault-sidebar-section-tags" className="px-2 pb-2 overflow-y-auto">
+              {tags.map((tag) => (
+                <button
+                  key={tag}
+                  onClick={() => handleFilterAction({ tag: filters.tag === tag ? null : tag })}
+                  className="w-full flex items-center gap-2 px-2 py-1 text-left transition-colors hover:bg-[var(--color-background-alt,#f4f4f5)]"
+                  style={{
+                    borderLeft: filters.tag === tag ? '2px solid var(--color-accent, #ccff00)' : '2px solid transparent',
+                  }}
+                >
+                  <Tag size={9} className={filters.tag === tag ? 'text-[var(--color-text,#0a0a0a)]' : 'text-[var(--color-text-faint,#9ca3af)]'} />
+                  <span className={`text-[9px] tracking-widest uppercase truncate ${filters.tag === tag ? 'text-[var(--color-text,#0a0a0a)] font-bold' : 'text-[var(--color-text-muted,#6b7280)]'}`}>
+                    {tag}
+                  </span>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Lifecycle */}
+      {!isCompact && (
+        <div className="border-b border-[var(--color-border,#d4d4d8)]">
+          {renderSectionToggle('lifecycle', 'Lifecycle')}
+          {!collapsedSections.lifecycle && (
+            <div id="vault-sidebar-section-lifecycle" className="px-2 pb-2">
+              {lifecycleFilters.map(({ key, label, icon: Icon }) => (
+                <button
+                  key={key}
+                  onClick={() => handleFilterAction({ lifecycle: key, tag: null })}
+                  className="w-full flex items-center gap-2 px-2 py-1 text-left transition-colors hover:bg-[var(--color-background-alt,#f4f4f5)]"
+                  style={{
+                    borderLeft: filters.lifecycle === key ? '2px solid var(--color-accent, #ccff00)' : '2px solid transparent',
+                  }}
+                >
+                  <Icon size={9} className={filters.lifecycle === key ? 'text-[var(--color-text,#0a0a0a)]' : 'text-[var(--color-text-faint,#9ca3af)]'} />
+                  <span className={`text-[9px] tracking-widest uppercase truncate ${filters.lifecycle === key ? 'text-[var(--color-text,#0a0a0a)] font-bold' : 'text-[var(--color-text-muted,#6b7280)]'}`}>
+                    {label}
+                  </span>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      </div>{/* end scrollable content */}
+
+      {/* Bottom */}
+      <div className={`border-t border-[var(--color-border,#d4d4d8)] ${isCompact ? 'px-1 py-2' : 'px-3 py-3'}`}>
+        {pendingActionCount > 0 && (
+          <div className={`flex items-center gap-1.5 mb-2 ${isCompact ? 'justify-center' : 'px-1'}`}>
+            <span
+              className="min-w-[16px] h-[16px] flex items-center justify-center px-1 font-mono text-[8px] font-bold"
+              style={{
+                background: 'var(--color-danger, #ef4444)',
+                color: 'var(--color-danger-foreground, #ffffff)',
+                borderRadius: 'var(--radius-sm)',
+              }}
+            >
+              {pendingActionCount > 9 ? '9+' : pendingActionCount}
+            </span>
+            {!isCompact && (
+              <span className="font-mono text-[8px] font-bold tracking-widest uppercase text-[var(--color-danger,#ef4444)]">
+                PENDING
+              </span>
+            )}
+          </div>
+        )}
+        {isCompact && (
+          <div className="mb-2 flex items-center gap-1">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleOpenApiKeys}
+              icon={<Key size={10} />}
+              className="flex-1 !px-0"
+              title="API Keys"
+            />
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleLock}
+              icon={<Lock size={10} />}
+              className="flex-1 !px-0"
+              title="Lock"
+            />
+          </div>
+        )}
+        {!isCompact && (
+          <div className="flex items-center gap-2 mt-2 justify-center">
+            <button
+              type="button"
+              onClick={handleOpenAudit}
+              className={`text-[8px] tracking-widest uppercase transition-colors ${
+                surface === 'audit'
+                  ? 'text-[var(--color-text,#0a0a0a)] font-bold'
+                  : 'text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)]'
+              }`}
+              aria-current={surface === 'audit' ? 'page' : undefined}
+            >
+              AUDIT
+            </button>
+            <button
+              type="button"
+              onClick={handleOpenApiKeys}
+              className={`text-[8px] tracking-widest uppercase transition-colors ${
+                surface === 'apiKeys'
+                  ? 'text-[var(--color-text,#0a0a0a)] font-bold'
+                  : 'text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)]'
+              }`}
+              aria-current={surface === 'apiKeys' ? 'page' : undefined}
+            >
+              API KEYS
+            </button>
+            <button
+              type="button"
+              onClick={handleLock}
+              className="text-[8px] tracking-widest uppercase transition-colors text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)]"
+            >
+              LOCK
+            </button>
+          </div>
+        )}
+        <div
+          className={`flex items-center gap-2 ${isCompact ? 'mt-2' : 'mt-3'}`}
+          data-testid="vault-sidebar-footer-barcode"
+        >
+          <div className="h-4 flex-1 bg-[repeating-linear-gradient(90deg,var(--color-text,#000),var(--color-text,#000)_1px,transparent_1px,transparent_3px)] opacity-30" />
+          {!isCompact && (
+            <div className="relative" ref={shortcutPopoverRef}>
+              <button
+                type="button"
+                data-testid="shortcut-hint-trigger"
+                onClick={() => setShortcutPopoverOpen((prev) => !prev)}
+                className="font-mono text-[8px] text-[var(--color-text-faint,#9ca3af)] tracking-widest hover:text-[var(--color-text-muted,#6b7280)] transition-colors"
+                aria-expanded={shortcutPopoverOpen ? 'true' : 'false'}
+                aria-label="Keyboard shortcuts"
+              >
+                Cmd/Ctrl+K
+              </button>
+              {shortcutPopoverOpen && (
+                <div
+                  data-testid="shortcut-hint-popover"
+                  className="absolute bottom-full right-0 mb-1 border border-[var(--color-border-focus,#0a0a0a)] bg-[var(--color-surface,#ffffff)] shadow-mech z-30 p-2 w-[170px]"
+                >
+                  <div className="text-[8px] tracking-widest uppercase text-[var(--color-text-muted,#6b7280)] mb-1">Keyboard Shortcuts</div>
+                  <div className="space-y-1">
+                    {KEYBOARD_SHORTCUTS.map((shortcut) => (
+                      <div key={shortcut.combo} className="flex items-center justify-between gap-2">
+                        <span className="text-[8px] tracking-widest uppercase text-[var(--color-text,#0a0a0a)]">{shortcut.combo}</span>
+                        <span className="text-[8px] text-[var(--color-text-muted,#6b7280)]">{shortcut.action}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};