From 5442a07ced9613424960d828f735b45d7f23221a Mon Sep 17 00:00:00 2001
From: mptyl <mp@tylconsulting.it>
Date: Mon, 29 Jun 2026 21:26:52 +0200
Subject: [PATCH] feat(frontend): Active/Archive as independent accordions
 (replaces toggle)

---
 .../src/shell/AppShell.session-mgmt.test.tsx  |  9 ++++--
 frontend/src/shell/AppShell.tsx               | 31 ++++++++++++++-----
 2 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/frontend/src/shell/AppShell.session-mgmt.test.tsx b/frontend/src/shell/AppShell.session-mgmt.test.tsx
index 19adf332..1ecf8623 100644
--- a/frontend/src/shell/AppShell.session-mgmt.test.tsx
+++ b/frontend/src/shell/AppShell.session-mgmt.test.tsx
@@ -41,10 +41,15 @@ test("opening the panel shows the session documents", async () => {
   expect(await screen.findByText("Domanda originale")).toBeInTheDocument();
 });
 
-test("Archive toggle reveals archived sessions", async () => {
+test("Archive accordion expands to reveal archived sessions", async () => {
   wrap();
-  await userEvent.click(await screen.findByRole("button", { name: /archive/i }));
+  // archived hidden until the Archive accordion is expanded
+  expect(await screen.findByText("Attiva uno")).toBeInTheDocument();
+  expect(screen.queryByText("Archiviata due")).not.toBeInTheDocument();
+  await userEvent.click(screen.getByRole("button", { name: /archive/i }));
   expect(await screen.findByText("Archiviata due")).toBeInTheDocument();
+  // Active sessions remain visible (it is a separate accordion, not a swap)
+  expect(screen.getByText("Attiva uno")).toBeInTheDocument();
 });
 
 test("Resume from the panel activates the session and closes the panel", async () => {
diff --git a/frontend/src/shell/AppShell.tsx b/frontend/src/shell/AppShell.tsx
index 499229e1..2274c1f4 100644
--- a/frontend/src/shell/AppShell.tsx
+++ b/frontend/src/shell/AppShell.tsx
@@ -35,7 +35,8 @@ export function AppShell() {
 
   const queryClient = useQueryClient();
   const [panelSession, setPanelSession] = useState<SessionSummary | null>(null);
-  const [showArchive, setShowArchive] = useState(false);
+  const [activeOpen, setActiveOpen] = useState(true);
+  const [archiveOpen, setArchiveOpen] = useState(false);
   const [renameTarget, setRenameTarget] = useState<SessionSummary | null>(null);
   const [deleteTarget, setDeleteTarget] = useState<SessionSummary | null>(null);
   const [collapsedGroups, setCollapsedGroups] = useState<Record<string, boolean>>({});
@@ -211,10 +212,17 @@ export function AppShell() {
           </span>
         </div>
         <div className="flex-1 overflow-y-auto px-2 pb-4">
-          {showArchive ? (
-            <NavSessions sessions={archivedList} activeSessionId={activeSessionId} onOpenPanel={openPanel} menuFor={menuFor} />
-          ) : (
-            <div className="flex flex-col gap-3">
+          <button
+            type="button"
+            onClick={() => setActiveOpen((v) => !v)}
+            aria-expanded={activeOpen}
+            className="flex w-full items-center gap-1 px-1 pb-1 pt-1 text-left text-[0.7rem] font-bold uppercase tracking-wide text-primary hover:text-primary/80"
+          >
+            <span className="select-none">{activeOpen ? "▾" : "▸"}</span>
+            <span>Active sessions</span>
+          </button>
+          {activeOpen && (
+            <div className="flex flex-col gap-3 pb-2">
               {groups.map((g) => (
                 <div key={g}>
                   <button
@@ -249,12 +257,19 @@ export function AppShell() {
               </div>
             </div>
           )}
+
           <button
-            onClick={() => setShowArchive((v) => !v)}
-            className="mt-3 w-full rounded-md px-2 py-1.5 text-left text-[0.7rem] font-semibold uppercase tracking-wide text-muted-foreground hover:bg-accent"
+            type="button"
+            onClick={() => setArchiveOpen((v) => !v)}
+            aria-expanded={archiveOpen}
+            className="mt-2 flex w-full items-center gap-1 px-1 pb-1 pt-1 text-left text-[0.7rem] font-bold uppercase tracking-wide text-muted-foreground hover:text-foreground"
           >
-            {showArchive ? "← Active sessions" : `Archive (${archivedList.length})`}
+            <span className="select-none">{archiveOpen ? "▾" : "▸"}</span>
+            <span>Archive ({archivedList.length})</span>
           </button>
+          {archiveOpen && (
+            <NavSessions sessions={archivedList} activeSessionId={activeSessionId} onOpenPanel={openPanel} menuFor={menuFor} />
+          )}
         </div>
       </aside>