refactor(sidebar): co-locate sidebar feature into features/sidebar

2026-07-22 15:25:46 +00:00 · 2026-06-29 23:26:00 +02:00
parent e6269c7b85
commit e0e10e0034
34 changed files with 117 additions and 108 deletions
@@ -0,0 +1,129 @@
+import { useAuthStore } from '@/store/authStore';
+import { usePlayerStore } from '@/store/playerStore';
+import { useConnectionStatus } from '@/hooks/useConnectionStatus';
+import { useNavidromeAdminRole } from '@/hooks/useNavidromeAdminRole';
+import { serverListDisplayLabel } from '@/utils/server/serverDisplayName';
+import { findServerByIdOrIndexKey } from '@/utils/server/serverLookup';
+import { PerfProbeMetricSection } from '@/features/sidebar/components/perfProbe/PerfProbeMetricCard';
+import PerfProbeDetailList from '@/features/sidebar/components/perfProbe/PerfProbeDetailList';
+import PerfProbeStatusBadge, { type PerfProbeBadgeTone } from '@/features/sidebar/components/perfProbe/PerfProbeStatusBadge';
+import SidebarPerfProbeServerSection from '@/features/sidebar/components/perfProbe/SidebarPerfProbeServerSection';
+
+function connectionStatusBadge(status: string): { tone: PerfProbeBadgeTone; label: string } {
+  switch (status) {
+    case 'connected': return { tone: 'ok', label: 'Connected' };
+    case 'disconnected': return { tone: 'error', label: 'Disconnected' };
+    case 'checking': return { tone: 'warn', label: 'Checking…' };
+    default: return { tone: 'muted', label: status };
+  }
+}
+
+function sessionBadge(loggedIn: boolean): { tone: PerfProbeBadgeTone; label: string } {
+  return loggedIn
+    ? { tone: 'ok', label: 'Logged in' }
+    : { tone: 'muted', label: 'Not logged in' };
+}
+
+function adminRoleBadge(role: ReturnType<typeof useNavidromeAdminRole>): { tone: PerfProbeBadgeTone; label: string } {
+  switch (role) {
+    case 'admin': return { tone: 'ok', label: 'Admin' };
+    case 'user': return { tone: 'neutral', label: 'Standard user' };
+    case 'checking':
+    case 'idle': return { tone: 'warn', label: 'Checking…' };
+    case 'error': return { tone: 'error', label: 'Could not verify' };
+    case 'na':
+    default: return { tone: 'muted', label: 'N/A (not Navidrome)' };
+  }
+}
+
+function endpointBadge(isLan: boolean): { tone: PerfProbeBadgeTone; label: string } {
+  return isLan
+    ? { tone: 'ok', label: 'LAN' }
+    : { tone: 'neutral', label: 'Public / remote' };
+}
+
+export default function SidebarPerfProbeConnectionsTab() {
+  const { status, isLan, serverName } = useConnectionStatus();
+  const isLoggedIn = useAuthStore(s => s.isLoggedIn);
+  const activeServerId = useAuthStore(s => s.activeServerId);
+  const servers = useAuthStore(s => s.servers);
+  const connectUrl = useAuthStore(s => s.getBaseUrl());
+  const queueServerId = usePlayerStore(s => s.queueServerId);
+  const adminRole = useNavidromeAdminRole();
+
+  const queueServer = queueServerId ? findServerByIdOrIndexKey(queueServerId) : undefined;
+  const queueDiffersFromActive = Boolean(
+    queueServerId && activeServerId && queueServerId !== activeServerId,
+  );
+
+  const connBadge = connectionStatusBadge(status);
+  const sessBadge = sessionBadge(isLoggedIn);
+  const roleBadge = adminRoleBadge(adminRole);
+
+  return (
+    <div className="perf-monitor">
+      <div className="perf-conn-summary" aria-label="Connection overview">
+        <div className="perf-conn-summary__item">
+          <span className="perf-conn-summary__label">Link</span>
+          <PerfProbeStatusBadge tone={connBadge.tone}>{connBadge.label}</PerfProbeStatusBadge>
+        </div>
+        <div className="perf-conn-summary__item">
+          <span className="perf-conn-summary__label">Session</span>
+          <PerfProbeStatusBadge tone={sessBadge.tone}>{sessBadge.label}</PerfProbeStatusBadge>
+        </div>
+        {isLoggedIn && (
+          <div className="perf-conn-summary__item">
+            <span className="perf-conn-summary__label">Role</span>
+            <PerfProbeStatusBadge tone={roleBadge.tone}>{roleBadge.label}</PerfProbeStatusBadge>
+          </div>
+        )}
+      </div>
+
+      <PerfProbeMetricSection title="Connection" defaultOpen layout="stack">
+        <PerfProbeDetailList
+          rows={[
+            {
+              label: 'Status',
+              value: <PerfProbeStatusBadge tone={connBadge.tone}>{connBadge.label}</PerfProbeStatusBadge>,
+            },
+            {
+              label: 'Session',
+              value: <PerfProbeStatusBadge tone={sessBadge.tone}>{sessBadge.label}</PerfProbeStatusBadge>,
+            },
+            ...(isLoggedIn
+              ? [{
+                  label: 'Navidrome role',
+                  value: <PerfProbeStatusBadge tone={roleBadge.tone}>{roleBadge.label}</PerfProbeStatusBadge>,
+                }]
+              : []),
+            ...(serverName ? [{ label: 'Browse label', value: serverName }] : []),
+            ...(connectUrl ? [{ label: 'Connect URL', value: <code className="perf-server-dl__code">{connectUrl}</code> }] : []),
+            ...(status === 'connected'
+              ? [{
+                  label: 'Endpoint',
+                  value: (
+                    <PerfProbeStatusBadge tone={endpointBadge(isLan).tone}>
+                      {endpointBadge(isLan).label}
+                    </PerfProbeStatusBadge>
+                  ),
+                }]
+              : []),
+          ]}
+        />
+      </PerfProbeMetricSection>
+
+      <SidebarPerfProbeServerSection adminRole={adminRole} />
+
+      {queueDiffersFromActive && queueServer && (
+        <PerfProbeMetricSection title="Queue playback server" defaultOpen={false} layout="stack">
+          <PerfProbeDetailList
+            rows={[
+              { label: 'Name', value: serverListDisplayLabel(queueServer, servers) },
+              { label: 'Scope key', value: <code className="perf-server-dl__code">{queueServerId}</code> },
+            ]}
+          />
+        </PerfProbeMetricSection>
+      )}
+    </div>
+  );
+}