File browser as widget

src/apps/officer-web/Screens/Dashboard/Files/state/usePinnedFiles.ts

@@ -0,0 +1,23 @@
+import { useCallback } from 'react';
+import { useUserState } from '@/state/useUserState';
+
+type PinnedFile = { path: string; name: string; pinnedAt: number };
+
+export const usePinnedFiles = () => {
+  const [pinned, setPinned] = useUserState<PinnedFile[]>('pinnedFiles', []);
+
+  const togglePin = useCallback(
+    (path: string, name: string) => {
+      setPinned((prev) => {
+        const exists = prev.some((f) => f.path === path);
+        if (exists) return prev.filter((f) => f.path !== path);
+        return [{ path, name, pinnedAt: Date.now() }, ...prev];
+      });
+    },
+    [setPinned],
+  );
+
+  const isPinned = useCallback((path: string) => pinned.some((f) => f.path === path), [pinned]);
+
+  return { pinned, togglePin, isPinned };
+};

src/apps/officer-web/Screens/Dashboard/Files/state/useRecentFiles.ts

@@ -0,0 +1,22 @@
+import { useCallback } from 'react';
+import { useUserState } from '@/state/useUserState';
+
+type RecentFile = { path: string; name: string; openedAt: number };
+
+const MAX_RECENTS = 20;
+
+export const useRecentFiles = () => {
+  const [recents, setRecents] = useUserState<RecentFile[]>('recentFiles', []);
+
+  const addRecent = useCallback(
+    (path: string, name: string) => {
+      setRecents((prev) => {
+        const filtered = prev.filter((f) => f.path !== path);
+        return [{ path, name, openedAt: Date.now() }, ...filtered].slice(0, MAX_RECENTS);
+      });
+    },
+    [setRecents],
+  );
+
+  return { recents, addRecent };
+};