Code cleanup and deduplication

src/features/files/FilesPage.tsx

@@ -3,6 +3,7 @@ import Button from "../../components/Button";
 import Card from "../../components/Card";
 import PageTitle from "../../components/PageTitle";
 import StatusBadge from "../../components/StatusBadge";
+import ModuleSubnav, { type ModuleSubnavGroup } from "../../layout/ModuleSubnav";
 
 type StorageRecord = {
   id: string;
@@ -58,13 +59,21 @@ const storages: StorageRecord[] = [
   }
 ];
 
-const storageSections: { id: StorageSection; label: string }[] = [
-  { id: "browse", label: "Browse" },
-  { id: "upload", label: "Upload" },
-  { id: "settings", label: "Settings" },
-  { id: "retention", label: "Retention" },
-  { id: "bulk", label: "Bulk actions" },
-  { id: "activity", label: "Activity" }
+const storageSubnav = (onBack: () => void): ModuleSubnavGroup<StorageSection>[] => [
+  {
+    items: [{ actionId: "file-storages", label: "← File storages", primary: true, onClick: onBack }]
+  },
+  {
+    title: "STORAGE",
+    items: [
+      { id: "browse", label: "Browse" },
+      { id: "upload", label: "Upload" },
+      { id: "settings", label: "Settings" },
+      { id: "retention", label: "Retention" },
+      { id: "bulk", label: "Bulk actions" },
+      { id: "activity", label: "Activity" }
+    ]
+  }
 ];
 
 const demoFiles = [
@@ -89,21 +98,7 @@ export default function FilesPage() {
   if (selectedStorage) {
     return (
       <div className="workspace module-workspace">
-        <aside className="section-sidebar">
-          <button className="section-link section-link-primary" onClick={() => setSelectedStorageId(null)}>
-            ← File storages
-          </button>
-          <div className="section-title section-title-lower">STORAGE</div>
-          {storageSections.map((section) => (
-            <button
-              key={section.id}
-              className={`section-link ${active === section.id ? "active" : ""}`}
-              onClick={() => setActive(section.id)}
-            >
-              {section.label}
-            </button>
-          ))}
-        </aside>
+        <ModuleSubnav active={active} groups={storageSubnav(() => setSelectedStorageId(null))} onSelect={setActive} />
         <section className="workspace-content">
           <div className="content-pad workspace-data-page">
             <div className="page-heading split workspace-heading">