From 2b9129591cd448174584790f94c33d419f26f61e Mon Sep 17 00:00:00 2001
From: Michele <michele@leopost.it>
Date: Tue, 7 Apr 2026 10:34:09 +0200
Subject: [PATCH] refactor: restructure sidebar navigation with logical groups

Sidebar reorganized from 9 flat items to 7 items in 3 groups:

CREA: Genera, Libreria, Idee
PIANIFICA: Calendario, Programmati
GESTISCI: Personaggi

Removed from primary nav:
- Link Affiliati (secondary, move to Settings later)
- Social (setup, accessible via Settings)
- Commenti (unused, future Pro feature)

Other changes:
- /content/library route added (replaces /content/archive as primary)
- /content/archive kept as fallback route
- All links updated to point to /content/library
- "Contenuti" renamed to "Genera"
- "Pianificazione" renamed to "Calendario"
- "Schedulazione" renamed to "Programmati"
- "Nuovo piano" button removed from Dashboard
- Nav group headers with uppercase labels
- end prop on /content to avoid highlighting on /content/library

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/App.jsx                    |   1 +
 frontend/src/components/ContentPage.jsx |   2 +-
 frontend/src/components/Dashboard.jsx   |   3 +-
 frontend/src/components/Layout.jsx      | 102 ++++++++++++++----------
 4 files changed, 61 insertions(+), 47 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 3d49735..7a970c7 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -52,6 +52,7 @@ export default function App() {
               <Route path="/characters/new" element={<CharacterForm />} />
               <Route path="/characters/:id/edit" element={<CharacterForm />} />
               <Route path="/content" element={<ContentPage />} />
+              <Route path="/content/library" element={<ContentArchive />} />
               <Route path="/content/archive" element={<ContentArchive />} />
               <Route path="/ideas" element={<SavedIdeas />} />
               <Route path="/affiliates" element={<AffiliateList />} />
diff --git a/frontend/src/components/ContentPage.jsx b/frontend/src/components/ContentPage.jsx
index a7cc119..2099b99 100644
--- a/frontend/src/components/ContentPage.jsx
+++ b/frontend/src/components/ContentPage.jsx
@@ -212,7 +212,7 @@ export default function ContentPage() {
           <p style={{ fontSize: '0.875rem', color: 'var(--ink-muted)', margin: 0 }}>
             Definisci un brief editoriale, scegli piattaforma e tipo, poi genera. L'AI terrà conto del tono e dei topic del personaggio selezionato.
           </p>
-          <Link to="/content/archive" style={{ fontSize: '0.8rem', color: 'var(--accent)', whiteSpace: 'nowrap', textDecoration: 'none', fontWeight: 600 }}>
+          <Link to="/content/library" style={{ fontSize: '0.8rem', color: 'var(--accent)', whiteSpace: 'nowrap', textDecoration: 'none', fontWeight: 600 }}>
             Libreria →
           </Link>
         </div>
diff --git a/frontend/src/components/Dashboard.jsx b/frontend/src/components/Dashboard.jsx
index e210a28..6144019 100644
--- a/frontend/src/components/Dashboard.jsx
+++ b/frontend/src/components/Dashboard.jsx
@@ -145,7 +145,6 @@ export default function Dashboard() {
           <Link to="/content"       className="btn-primary">Genera contenuto</Link>
           <Link to="/editorial"     className="btn-outline">Calendario AI</Link>
           <Link to="/characters/new" className="btn-outline">Nuovo personaggio</Link>
-          <Link to="/plans/new"     className="btn-outline">Nuovo piano</Link>
         </div>
       </div>
 
@@ -235,7 +234,7 @@ export default function Dashboard() {
         <div>
           <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '0.75rem' }}>
             <span className="editorial-tag">Post recenti</span>
-            <Link to="/content/archive" style={{ fontSize: '0.78rem', color: 'var(--accent)', textDecoration: 'underline', textUnderlineOffset: '3px' }}>
+            <Link to="/content/library" style={{ fontSize: '0.78rem', color: 'var(--accent)', textDecoration: 'underline', textUnderlineOffset: '3px' }}>
               Vedi tutti
             </Link>
           </div>
diff --git a/frontend/src/components/Layout.jsx b/frontend/src/components/Layout.jsx
index e33ebdc..1609dae 100644
--- a/frontend/src/components/Layout.jsx
+++ b/frontend/src/components/Layout.jsx
@@ -6,15 +6,16 @@ import OnboardingWizard, { useOnboarding } from './OnboardingWizard'
 import { useAuth } from '../AuthContext'
 
 const nav = [
-  { to: '/',          label: 'Dashboard' },
-  { to: '/characters',label: 'Personaggi' },
-  { to: '/content',   label: 'Contenuti' },
-  { to: '/ideas',     label: 'Idee' },
-  { to: '/affiliates',label: 'Link Affiliati' },
-  { to: '/editorial', label: 'Pianificazione' },
-  { to: '/schedule',  label: 'Schedulazione' },
-  { to: '/social',    label: 'Social' },
-  { to: '/comments',  label: 'Commenti' },
+  { to: '/', label: 'Dashboard' },
+  { group: 'Crea' },
+  { to: '/content',         label: 'Genera' },
+  { to: '/content/library', label: 'Libreria' },
+  { to: '/ideas',           label: 'Idee' },
+  { group: 'Pianifica' },
+  { to: '/editorial', label: 'Calendario' },
+  { to: '/schedule',  label: 'Programmati' },
+  { group: 'Gestisci' },
+  { to: '/characters', label: 'Personaggi' },
 ]
 
 export default function Layout() {
@@ -69,41 +70,54 @@ export default function Layout() {
         </div>
 
         {/* Nav */}
-        <nav style={{ flex: 1, padding: '0.75rem 0.5rem', overflowY: 'auto' }}>
-          {nav.map(({ to, label }) => (
-            <NavLink
-              key={to}
-              to={to}
-              end={to === '/'}
-              onClick={() => isMobile && setSidebarOpen(false)}
-              style={({ isActive }) => ({
-                display: 'block',
-                padding: '0.7rem 0.875rem',
-                fontSize: '0.84rem',
-                fontWeight: isActive ? 600 : 400,
-                color: isActive ? 'var(--accent)' : 'var(--ink-light)',
-                borderLeft: isActive ? '3px solid var(--accent)' : '3px solid transparent',
-                backgroundColor: isActive ? 'var(--accent-light)' : 'transparent',
-                textDecoration: 'none',
-                transition: 'background-color 0.15s, color 0.15s',
-                marginBottom: '0.1rem',
-              })}
-              onMouseEnter={(e) => {
-                if (!e.currentTarget.getAttribute('aria-current')) {
-                  e.currentTarget.style.backgroundColor = 'var(--border)'
-                  e.currentTarget.style.color = 'var(--ink)'
-                }
-              }}
-              onMouseLeave={(e) => {
-                if (!e.currentTarget.getAttribute('aria-current')) {
-                  e.currentTarget.style.backgroundColor = 'transparent'
-                  e.currentTarget.style.color = 'var(--ink-light)'
-                }
-              }}
-            >
-              {label}
-            </NavLink>
-          ))}
+        <nav style={{ flex: 1, padding: '0.5rem 0.5rem', overflowY: 'auto' }}>
+          {nav.map((item, idx) => {
+            if (item.group) {
+              return (
+                <p key={`g-${idx}`} style={{
+                  fontSize: '0.62rem', fontWeight: 700, letterSpacing: '0.12em',
+                  textTransform: 'uppercase', color: 'var(--ink-muted)',
+                  padding: '0.75rem 0.875rem 0.25rem', margin: 0,
+                }}>
+                  {item.group}
+                </p>
+              )
+            }
+            return (
+              <NavLink
+                key={item.to}
+                to={item.to}
+                end={item.to === '/' || item.to === '/content'}
+                onClick={() => isMobile && setSidebarOpen(false)}
+                style={({ isActive }) => ({
+                  display: 'block',
+                  padding: '0.6rem 0.875rem',
+                  fontSize: '0.84rem',
+                  fontWeight: isActive ? 600 : 400,
+                  color: isActive ? 'var(--accent)' : 'var(--ink-light)',
+                  borderLeft: isActive ? '3px solid var(--accent)' : '3px solid transparent',
+                  backgroundColor: isActive ? 'var(--accent-light)' : 'transparent',
+                  textDecoration: 'none',
+                  transition: 'background-color 0.15s, color 0.15s',
+                  marginBottom: '0.1rem',
+                })}
+                onMouseEnter={(e) => {
+                  if (!e.currentTarget.getAttribute('aria-current')) {
+                    e.currentTarget.style.backgroundColor = 'var(--border)'
+                    e.currentTarget.style.color = 'var(--ink)'
+                  }
+                }}
+                onMouseLeave={(e) => {
+                  if (!e.currentTarget.getAttribute('aria-current')) {
+                    e.currentTarget.style.backgroundColor = 'transparent'
+                    e.currentTarget.style.color = 'var(--ink-light)'
+                  }
+                }}
+              >
+                {item.label}
+              </NavLink>
+            )
+          })}
         </nav>
 
         {/* User card + logout */}