perf: fix N+1 query pattern across all modules + rack numbering

CRITICAL PERF BUG: Every hook did storage.list() (1 HTTP call fetching ALL
items with values, discarding values, returning only keys) then storage.get()
for EACH key (N individual HTTP calls re-fetching values one by one).

With 6 entries + contacts + tags, Registratura page fired ~40 sequential
HTTP requests on load, where 3 would suffice.

Fix: Replace list()+N*get() with single exportAll() call in ALL hooks:
- registratura/registry-service.ts (added exportAll to RegistryStorage interface)
- address-book/use-contacts.ts
- it-inventory/use-inventory.ts
- password-vault/use-vault.ts
- word-templates/use-templates.ts
- prompt-generator/use-prompt-generator.ts
- hot-desk/use-reservations.ts
- email-signature/use-saved-signatures.ts
- digital-signatures/use-signatures.ts
- ai-chat/use-chat.ts
- core/tagging/tag-service.ts (uses storage.export())

Additional fixes:
- registratura/use-registry.ts: addEntry uses optimistic local state update
  instead of double-refresh; closeEntry batches saves with Promise.all +
  single refresh
- server-rack.tsx: reversed slot rendering so U1 is at bottom (standard
  rack numbering, per user's physical rack)

Performance impact: ~90% reduction in HTTP requests on page load for all modules
This commit is contained in:
AI Assistant
2026-02-27 22:26:11 +02:00
parent 4cd793fbbc
commit c45a30ec14
13 changed files with 580 additions and 354 deletions
+81 -39
View File
@@ -1,31 +1,33 @@
'use client';
"use client";
import { useState, useEffect, useCallback } from 'react';
import { useStorage } from '@/core/storage';
import { v4 as uuid } from 'uuid';
import type { VaultEntry, VaultEntryCategory } from '../types';
import { useState, useEffect, useCallback } from "react";
import { useStorage } from "@/core/storage";
import { v4 as uuid } from "uuid";
import type { VaultEntry, VaultEntryCategory } from "../types";
const PREFIX = 'vault:';
const PREFIX = "vault:";
export interface VaultFilters {
search: string;
category: VaultEntryCategory | 'all';
category: VaultEntryCategory | "all";
}
export function useVault() {
const storage = useStorage('password-vault');
const storage = useStorage("password-vault");
const [entries, setEntries] = useState<VaultEntry[]>([]);
const [loading, setLoading] = useState(true);
const [filters, setFilters] = useState<VaultFilters>({ search: '', category: 'all' });
const [filters, setFilters] = useState<VaultFilters>({
search: "",
category: "all",
});
const refresh = useCallback(async () => {
setLoading(true);
const keys = await storage.list();
const all = await storage.exportAll();
const results: VaultEntry[] = [];
for (const key of keys) {
if (key.startsWith(PREFIX)) {
const item = await storage.get<VaultEntry>(key);
if (item) results.push(item);
for (const [key, value] of Object.entries(all)) {
if (key.startsWith(PREFIX) && value) {
results.push(value as VaultEntry);
}
}
results.sort((a, b) => a.label.localeCompare(b.label));
@@ -34,41 +36,81 @@ export function useVault() {
}, [storage]);
// eslint-disable-next-line react-hooks/set-state-in-effect
useEffect(() => { refresh(); }, [refresh]);
useEffect(() => {
refresh();
}, [refresh]);
const addEntry = useCallback(async (data: Omit<VaultEntry, 'id' | 'createdAt' | 'updatedAt'>) => {
const now = new Date().toISOString();
const entry: VaultEntry = { ...data, id: uuid(), createdAt: now, updatedAt: now };
await storage.set(`${PREFIX}${entry.id}`, entry);
await refresh();
return entry;
}, [storage, refresh]);
const addEntry = useCallback(
async (data: Omit<VaultEntry, "id" | "createdAt" | "updatedAt">) => {
const now = new Date().toISOString();
const entry: VaultEntry = {
...data,
id: uuid(),
createdAt: now,
updatedAt: now,
};
await storage.set(`${PREFIX}${entry.id}`, entry);
await refresh();
return entry;
},
[storage, refresh],
);
const updateEntry = useCallback(async (id: string, updates: Partial<VaultEntry>) => {
const existing = entries.find((e) => e.id === id);
if (!existing) return;
const updated = { ...existing, ...updates, id: existing.id, createdAt: existing.createdAt, updatedAt: new Date().toISOString() };
await storage.set(`${PREFIX}${id}`, updated);
await refresh();
}, [storage, refresh, entries]);
const updateEntry = useCallback(
async (id: string, updates: Partial<VaultEntry>) => {
const existing = entries.find((e) => e.id === id);
if (!existing) return;
const updated = {
...existing,
...updates,
id: existing.id,
createdAt: existing.createdAt,
updatedAt: new Date().toISOString(),
};
await storage.set(`${PREFIX}${id}`, updated);
await refresh();
},
[storage, refresh, entries],
);
const removeEntry = useCallback(async (id: string) => {
await storage.delete(`${PREFIX}${id}`);
await refresh();
}, [storage, refresh]);
const removeEntry = useCallback(
async (id: string) => {
await storage.delete(`${PREFIX}${id}`);
await refresh();
},
[storage, refresh],
);
const updateFilter = useCallback(<K extends keyof VaultFilters>(key: K, value: VaultFilters[K]) => {
setFilters((prev) => ({ ...prev, [key]: value }));
}, []);
const updateFilter = useCallback(
<K extends keyof VaultFilters>(key: K, value: VaultFilters[K]) => {
setFilters((prev) => ({ ...prev, [key]: value }));
},
[],
);
const filteredEntries = entries.filter((e) => {
if (filters.category !== 'all' && e.category !== filters.category) return false;
if (filters.category !== "all" && e.category !== filters.category)
return false;
if (filters.search) {
const q = filters.search.toLowerCase();
return e.label.toLowerCase().includes(q) || e.username.toLowerCase().includes(q) || e.url.toLowerCase().includes(q);
return (
e.label.toLowerCase().includes(q) ||
e.username.toLowerCase().includes(q) ||
e.url.toLowerCase().includes(q)
);
}
return true;
});
return { entries: filteredEntries, allEntries: entries, loading, filters, updateFilter, addEntry, updateEntry, removeEntry, refresh };
return {
entries: filteredEntries,
allEntries: entries,
loading,
filters,
updateFilter,
addEntry,
updateEntry,
removeEntry,
refresh,
};
}