update ui update and fix layout issue

src/features/stores/hooks/useStoreDirectory.ts

@@ -0,0 +1,38 @@
+'use client';
+
+import {useCallback} from 'react';
+import {
+  resolveScopeLabel,
+  resolveStoreName,
+} from '@/features/stores/services/storeService';
+import {useWorkspace} from '@/shared/providers/WorkspaceProvider';
+
+/**
+ * Resolving a store id to a name, without reaching into fixtures.
+ *
+ * ── The violation this replaces ───────────────────────────────────────────
+ * Four pages and two components imported `storeName()` straight out of
+ * `lib/mock/stores`, which meant rendered output depended on a fixture module:
+ * the day the mock is deleted, every one of those files breaks. That is
+ * exactly the coupling the "no mock data in components" rule exists to stop.
+ *
+ * The directory to ask is the one the store SWITCHER already reads —
+ * WorkspaceProvider's list. Today it is a constant; when it comes from
+ * `/api/stores`, neither this hook nor its callers change.
+ *
+ * The hook is only the React binding; the rules are in storeService, so a
+ * server component or a test can resolve the same names without it.
+ */
+export function useStoreName(): (storeId: string) => string {
+  const {stores} = useWorkspace();
+  return useCallback(
+    (storeId: string) => resolveStoreName(stores, storeId),
+    [stores],
+  );
+}
+
+/** "all stores", or the selected store's name. */
+export function useScopeLabel(): string {
+  const {stores, storeId} = useWorkspace();
+  return resolveScopeLabel(stores, storeId);
+}

src/features/stores/hooks/useStores.ts

@@ -0,0 +1,28 @@
+'use client';
+
+import {storeRepository} from '@/features/stores/repositories/storeRepository';
+import {useResource} from '@/shared/hooks/useResource';
+import {useScope} from '@/shared/hooks/useScope';
+
+/**
+ * Store data access. See features/dashboard/hooks/useDashboard for the pattern.
+ */
+
+/**
+ * The directory always asks for ALL stores regardless of the workspace filter:
+ * a page whose job is to compare locations cannot be filtered down to one, or
+ * it has nothing to compare. The period still applies.
+ */
+export function useStoreList() {
+  const {range} = useScope();
+  return useResource(storeRepository.list({range, storeId: 'all'}));
+}
+
+export function useStore(storeId: string) {
+  const {range} = useScope();
+  return useResource(storeRepository.byId({range, storeId}, storeId), {
+    // A single object is never "empty" — without this, useResource's default
+    // array check would call a populated store empty.
+    isEmpty: () => false,
+  });
+}