Project started 🥂

2026-06-02 01:13:22 +03:00
commit 612d0f0125
146 changed files with 15242 additions and 0 deletions
@@ -0,0 +1,113 @@
+import { Badge } from 'modern-sk';
+import { NavLink, useNavigate } from 'react-router';
+import { ConnectionStatus } from '../common/ConnectionStatus';
+import { useAppSelector, useAppDispatch } from '../../hooks/useAppDispatch';
+import { usePermissions } from '../../hooks/usePermissions';
+import { logout } from '../../store/slices/auth';
+
+const NAV_ITEMS = [
+  { to: '/', label: 'Home', icon: '⌂' },
+  { to: '/library', label: 'Library', icon: '♫' },
+  { to: '/search', label: 'Search & Download', icon: '⊕' },
+  { to: '/downloads', label: 'Downloads', icon: '↓' },
+  { to: '/storage', label: 'Storage', icon: '⊞' },
+  { to: '/settings', label: 'Settings', icon: '⚙' },
+] as const;
+
+const ADMIN_ITEMS = [
+  { to: '/admin', label: 'Admin', icon: '🔑' },
+] as const;
+
+export function Sidebar() {
+  const dispatch = useAppDispatch();
+  const navigate = useNavigate();
+  const { user, isAdmin } = usePermissions();
+  const collapsed = useAppSelector((s) => s.ui.sidebarCollapsed);
+
+  const handleLogout = () => {
+    dispatch(logout());
+    void navigate('/connect');
+  };
+
+  return (
+    <nav style={{ width: collapsed ? '3.5rem' : '14rem', flexShrink: 0, borderRight: '1px solid var(--color-border)', display: 'flex', flexDirection: 'column', padding: '0.75rem 0', background: 'var(--color-surface-1)', transition: 'width 0.2s', overflow: 'hidden' }}>
+      <div style={{ padding: collapsed ? '0 0.5rem' : '0 0.75rem', marginBottom: '1.5rem' }}>
+        <span style={{ fontWeight: 700, fontSize: '1.125rem', color: 'var(--color-accent)', whiteSpace: 'nowrap' }}>
+          {collapsed ? '♫' : '♫ MCMA'}
+        </span>
+      </div>
+
+      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '2px' }}>
+        {NAV_ITEMS.map(({ to, label, icon }) => (
+          <NavLink
+            key={to}
+            to={to}
+            end={to === '/'}
+            style={({ isActive }) => ({
+              display: 'flex',
+              alignItems: 'center',
+              gap: '0.75rem',
+              padding: collapsed ? '0.625rem 0.75rem' : '0.625rem 1rem',
+              borderRadius: 6,
+              margin: '0 0.375rem',
+              color: isActive ? 'var(--color-accent)' : 'var(--color-text-2)',
+              background: isActive ? 'var(--color-surface-2)' : undefined,
+              fontWeight: isActive ? 600 : 400,
+              textDecoration: 'none',
+              fontSize: '0.875rem',
+              whiteSpace: 'nowrap',
+              transition: 'background 0.1s, color 0.1s',
+            })}
+          >
+            <span style={{ flexShrink: 0, fontSize: '1rem' }}>{icon}</span>
+            {!collapsed && label}
+          </NavLink>
+        ))}
+
+        {isAdmin && (
+          <>
+            <div style={{ height: 1, background: 'var(--color-border)', margin: '0.5rem 0.75rem' }} />
+            {ADMIN_ITEMS.map(({ to, label, icon }) => (
+              <NavLink
+                key={to}
+                to={to}
+                style={({ isActive }) => ({
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '0.75rem',
+                  padding: collapsed ? '0.625rem 0.75rem' : '0.625rem 1rem',
+                  borderRadius: 6,
+                  margin: '0 0.375rem',
+                  color: isActive ? 'var(--color-accent)' : 'var(--color-text-2)',
+                  background: isActive ? 'var(--color-surface-2)' : undefined,
+                  fontWeight: isActive ? 600 : 400,
+                  textDecoration: 'none',
+                  fontSize: '0.875rem',
+                  whiteSpace: 'nowrap',
+                })}
+              >
+                <span style={{ flexShrink: 0 }}>{icon}</span>
+                {!collapsed && label}
+              </NavLink>
+            ))}
+          </>
+        )}
+      </div>
+
+      <div style={{ padding: collapsed ? '0 0.5rem' : '0 0.75rem', display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+        {!collapsed && <ConnectionStatus />}
+        {!collapsed && user && (
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0.5rem 0.25rem' }}>
+            <div>
+              <div style={{ fontSize: '0.8125rem', fontWeight: 600, color: 'var(--color-text-1)' }}>{user.username}</div>
+              <Badge variant={user.role === 'admin' ? 'lime' : 'neutral'} style={{ marginTop: 2 }}>{user.role}</Badge>
+            </div>
+            <button onClick={handleLogout} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--color-text-3)', fontSize: '0.75rem', padding: '0.25rem' }}>
+              Sign out
+            </button>
+          </div>
+        )}
+      </div>
+    </nav>
+  );
+}