Silo Server Migration
98ea57ead8
- Add plans for date-named episodes and Jellyfin autoscan compat - Update requests handlers, service, and UI hooks - Remove Makefile.local.example
823 lines
32 KiB
TypeScript
823 lines
32 KiB
TypeScript
import { useState, useCallback, useEffect, useMemo, useRef } from "react";
|
|
import type { ReactNode } from "react";
|
|
import { Link, useLocation, useParams } from "react-router";
|
|
import ViewTransitionLink from "@/components/ViewTransitionLink";
|
|
import { getProfileMenuSide, isSidebarExpanded } from "@/components/AppSidebar.logic";
|
|
import { SiloBrand } from "@/components/SiloBrand";
|
|
import { useAuth } from "@/hooks/useAuth";
|
|
import { useCurrentProfile } from "@/hooks/useCurrentProfile";
|
|
import { navigateToPluginRoute } from "@/lib/buildPluginHref";
|
|
import { useUserLibraries } from "@/hooks/queries/libraries";
|
|
import { usePluginSettingsList } from "@/hooks/queries/pluginSettings";
|
|
import { useRequestFeatureStatus } from "@/hooks/queries/useRequests";
|
|
import { useSidebarPins, useToggleSidebarPin } from "@/hooks/queries/sidebarPins";
|
|
import { useViewTransitionNavigate } from "@/hooks/useViewTransition";
|
|
import { pluginRouteHref } from "@/lib/pluginRouteHref";
|
|
import {
|
|
buildLibraryCollectionCatalogHref,
|
|
buildPersonalCatalogHref,
|
|
buildQueryCatalogHref,
|
|
buildSectionCatalogHref,
|
|
parseCatalogSearchParams,
|
|
} from "@/pages/catalogSearchParams";
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import {
|
|
Film,
|
|
Tv,
|
|
Library,
|
|
Search,
|
|
Heart,
|
|
List,
|
|
Clock,
|
|
FolderOpen,
|
|
LogOut,
|
|
UserCircle,
|
|
Shield,
|
|
Settings,
|
|
Sparkles,
|
|
CalendarDays,
|
|
Home,
|
|
UsersRound,
|
|
ChevronDown,
|
|
ChevronRight,
|
|
PinOff,
|
|
LayoutGrid,
|
|
Puzzle,
|
|
Send,
|
|
} from "lucide-react";
|
|
import { useTheme } from "@/hooks/useTheme";
|
|
import { CURATED_THEME_IDS, THEMES } from "@/lib/themes";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
function getLibraryIcon(type: string) {
|
|
switch (type) {
|
|
case "movies":
|
|
return <Film className="h-[18px] w-[18px]" />;
|
|
case "series":
|
|
return <Tv className="h-[18px] w-[18px]" />;
|
|
default:
|
|
return <Library className="h-[18px] w-[18px]" />;
|
|
}
|
|
}
|
|
|
|
function SidebarLabel({ children, show }: { children: ReactNode; show: boolean }) {
|
|
return (
|
|
<span
|
|
className={`truncate transition-[opacity,max-width] duration-200 ease-out ${
|
|
show ? "max-w-[180px] opacity-100 delay-[50ms]" : "max-w-0 overflow-hidden opacity-0"
|
|
}`}
|
|
>
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
function SidebarSectionHeader({
|
|
children,
|
|
show,
|
|
collapsible = false,
|
|
expanded = false,
|
|
onToggle,
|
|
}: {
|
|
children: ReactNode;
|
|
show: boolean;
|
|
collapsible?: boolean;
|
|
expanded?: boolean;
|
|
onToggle?: () => void;
|
|
}) {
|
|
const textClass = "text-muted-foreground text-[10px] font-semibold tracking-[0.22em] uppercase";
|
|
|
|
const collapsedDivider = (
|
|
<div
|
|
className={`absolute inset-0 flex items-center justify-center transition-opacity duration-150 ${
|
|
show ? "pointer-events-none opacity-0" : "opacity-100"
|
|
}`}
|
|
aria-hidden="true"
|
|
>
|
|
<div className="bg-sidebar-section-divider h-px w-5 rounded-full" />
|
|
</div>
|
|
);
|
|
|
|
if (collapsible) {
|
|
return (
|
|
<div className="relative mb-2">
|
|
{collapsedDivider}
|
|
<button
|
|
type="button"
|
|
onClick={onToggle}
|
|
disabled={!show}
|
|
aria-hidden={!show}
|
|
aria-expanded={expanded}
|
|
aria-label={expanded ? `Collapse ${String(children)}` : `Expand ${String(children)}`}
|
|
tabIndex={show ? 0 : -1}
|
|
className={`${textClass} hover:text-sidebar-foreground flex h-5 w-full items-center gap-1 px-3 transition-opacity duration-150 ${
|
|
show ? "opacity-100" : "pointer-events-none opacity-0"
|
|
}`}
|
|
>
|
|
{expanded ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
|
|
<span>{children}</span>
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="relative mb-2 px-3">
|
|
{collapsedDivider}
|
|
<div
|
|
aria-hidden={!show}
|
|
className={`${textClass} flex h-5 items-center transition-opacity duration-150 ${
|
|
show ? "opacity-100" : "opacity-0"
|
|
}`}
|
|
>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface AppSidebarProps {
|
|
onNavigate?: () => void;
|
|
collapsed?: boolean;
|
|
}
|
|
|
|
export default function AppSidebar({ onNavigate, collapsed = false }: AppSidebarProps) {
|
|
const location = useLocation();
|
|
const navigate = useViewTransitionNavigate();
|
|
const params = useParams<{ libraryId: string }>();
|
|
const { user, logout, clearProfile } = useAuth();
|
|
const { profile } = useCurrentProfile();
|
|
const { theme, setTheme, previewTheme, resetPreviewTheme } = useTheme();
|
|
const isAdmin = user?.role === "admin";
|
|
const { data: libraries } = useUserLibraries();
|
|
const { pins } = useSidebarPins();
|
|
const { togglePin } = useToggleSidebarPin();
|
|
const { data: pluginSettings } = usePluginSettingsList();
|
|
const requestStatus = useRequestFeatureStatus();
|
|
const showRequestsNav = requestStatus.data?.requests_enabled === true;
|
|
const pluginNavLinks = useMemo(() => {
|
|
const installations = pluginSettings?.installations ?? [];
|
|
const links: { id: string; basePath: string; label: string; pluginId: string }[] = [];
|
|
for (const inst of installations) {
|
|
for (const route of inst.routes) {
|
|
if (!route.navigable || route.navigation_kind !== "user") continue;
|
|
links.push({
|
|
id: `${inst.id}:${route.id || route.path}`,
|
|
basePath: pluginRouteHref(inst.id, route.path),
|
|
label: route.navigation_label || inst.plugin_id,
|
|
pluginId: inst.plugin_id,
|
|
});
|
|
}
|
|
}
|
|
return links;
|
|
}, [pluginSettings]);
|
|
|
|
const catalogState = useMemo(
|
|
() =>
|
|
location.pathname === "/catalog"
|
|
? parseCatalogSearchParams(new URLSearchParams(location.search))
|
|
: null,
|
|
[location.pathname, location.search],
|
|
);
|
|
const activeLibraryId = params.libraryId
|
|
? Number(params.libraryId)
|
|
: catalogState?.source === "section" && catalogState.scope === "library"
|
|
? (catalogState.library_id ?? null)
|
|
: catalogState?.source === "library_collection"
|
|
? (catalogState.library_id ?? null)
|
|
: null;
|
|
// Hover-to-expand when collapsed (150ms enter delay prevents accidental expansion)
|
|
const [hovered, setHovered] = useState(false);
|
|
const [profileMenuOpen, setProfileMenuOpen] = useState(false);
|
|
const hoverTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
|
const handleMouseEnter = useCallback(() => {
|
|
if (!collapsed) return;
|
|
hoverTimerRef.current = setTimeout(() => setHovered(true), 150);
|
|
}, [collapsed]);
|
|
const handleMouseLeave = useCallback(() => {
|
|
if (hoverTimerRef.current) clearTimeout(hoverTimerRef.current);
|
|
hoverTimerRef.current = null;
|
|
if (profileMenuOpen) return;
|
|
setHovered(false);
|
|
}, [profileMenuOpen]);
|
|
useEffect(() => {
|
|
return () => {
|
|
if (hoverTimerRef.current) clearTimeout(hoverTimerRef.current);
|
|
};
|
|
}, []);
|
|
|
|
const sidebarExpanded = isSidebarExpanded(collapsed, hovered, profileMenuOpen);
|
|
const showLabels = sidebarExpanded;
|
|
const [librariesExpanded, setLibrariesExpanded] = useState(true);
|
|
const [expandedLibraries, setExpandedLibraries] = useState<Set<number>>(
|
|
() =>
|
|
new Set(
|
|
Object.keys(pins)
|
|
.map(Number)
|
|
.filter((id) => Number.isInteger(id) && id > 0),
|
|
),
|
|
);
|
|
|
|
const toggleLibraryExpand = useCallback((libId: number) => {
|
|
setExpandedLibraries((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(libId)) {
|
|
next.delete(libId);
|
|
} else {
|
|
next.add(libId);
|
|
}
|
|
return next;
|
|
});
|
|
}, []);
|
|
|
|
function isActive(href: string, exact?: boolean) {
|
|
if (exact) return location.pathname === href;
|
|
return location.pathname === href || location.pathname.startsWith(`${href}/`);
|
|
}
|
|
|
|
function isCatalogSourceActive(source: "query" | "favorites" | "watchlist" | "history") {
|
|
return location.pathname === "/catalog" && catalogState?.source === source;
|
|
}
|
|
|
|
function isPinnedCatalogActive(
|
|
libId: number,
|
|
pin: { type: "collection" | "section"; id: string },
|
|
) {
|
|
if (location.pathname !== "/catalog" || !catalogState) {
|
|
return false;
|
|
}
|
|
|
|
if (pin.type === "collection") {
|
|
return catalogState.source === "library_collection" && catalogState.collection_id === pin.id;
|
|
}
|
|
|
|
return (
|
|
catalogState.source === "section" &&
|
|
catalogState.scope === "library" &&
|
|
catalogState.library_id === libId &&
|
|
catalogState.section_id === pin.id
|
|
);
|
|
}
|
|
|
|
const navLinkClass = (href: string, exact?: boolean) =>
|
|
navLinkClassForState(isActive(href, exact));
|
|
|
|
const navLinkClassForState = (active: boolean) =>
|
|
`relative flex items-center gap-2.5 rounded-xl px-3 py-3 text-[13px] font-medium transition-all duration-200 ${
|
|
active
|
|
? "text-sidebar-accent-foreground bg-sidebar-accent/90 shadow-[0_16px_30px_-24px_rgba(0,0,0,0.7)]"
|
|
: "text-muted-foreground hover:text-sidebar-foreground hover:bg-sidebar-accent/70"
|
|
}`;
|
|
|
|
return (
|
|
<aside
|
|
className={`border-sidebar-border/70 bg-sidebar/88 sidebar-transition fixed top-0 bottom-0 left-0 z-40 flex flex-col border-r backdrop-blur-2xl ${collapsed && !sidebarExpanded ? "w-16" : "w-[260px]"}`}
|
|
onMouseEnter={handleMouseEnter}
|
|
onMouseLeave={handleMouseLeave}
|
|
style={
|
|
collapsed && sidebarExpanded
|
|
? { zIndex: 45, boxShadow: "0 25px 50px -12px rgb(0 0 0 / 0.5)" }
|
|
: undefined
|
|
}
|
|
>
|
|
{/* Logo */}
|
|
<div
|
|
className={`sidebar-logo flex items-center py-6 ${showLabels ? "px-5" : "justify-center px-2"}`}
|
|
>
|
|
<SiloBrand
|
|
variant={showLabels ? "wordmark" : "mark"}
|
|
className={showLabels ? "h-12 w-[112px]" : "h-9 w-9"}
|
|
/>
|
|
</div>
|
|
|
|
{/* Main nav */}
|
|
<nav
|
|
aria-label="Main navigation"
|
|
className="sidebar-nav sidebar-scroll flex-1 space-y-7 overflow-y-auto px-3 pb-5"
|
|
>
|
|
{/* Home */}
|
|
<ul className="list-none space-y-0.5">
|
|
<li>
|
|
<ViewTransitionLink
|
|
to="/"
|
|
onClick={onNavigate}
|
|
className={navLinkClass("/", true)}
|
|
aria-current={isActive("/", true) ? "page" : undefined}
|
|
>
|
|
{isActive("/", true) && (
|
|
<span
|
|
className="absolute top-1/2 left-0 h-[18px] w-[3px] -translate-y-1/2 rounded-r-sm"
|
|
style={{ background: "var(--primary)" }}
|
|
/>
|
|
)}
|
|
<Home className="h-[18px] w-[18px] shrink-0" />
|
|
<SidebarLabel show={showLabels}>Home</SidebarLabel>
|
|
</ViewTransitionLink>
|
|
</li>
|
|
</ul>
|
|
|
|
{/* Libraries */}
|
|
{libraries && libraries.length > 0 && (
|
|
<div className="sidebar-libraries">
|
|
<SidebarSectionHeader
|
|
show={showLabels}
|
|
collapsible
|
|
expanded={librariesExpanded}
|
|
onToggle={() => setLibrariesExpanded((v) => !v)}
|
|
>
|
|
Libraries
|
|
</SidebarSectionHeader>
|
|
{(showLabels ? librariesExpanded : true) && (
|
|
<ul className="list-none space-y-0.5">
|
|
{libraries.map((lib) => {
|
|
const href = `/library/${lib.id}`;
|
|
const active = activeLibraryId === lib.id;
|
|
const libraryPins = pins[String(lib.id)] ?? [];
|
|
const hasPins = libraryPins.length > 0;
|
|
const isExpanded = hasPins && !expandedLibraries.has(lib.id);
|
|
|
|
return (
|
|
<li key={lib.id}>
|
|
{/* Library row: chevron (if pins) + icon + name link */}
|
|
<div
|
|
className={`relative flex items-center rounded-lg text-[13px] font-medium transition-colors duration-150 ${
|
|
active
|
|
? "text-sidebar-accent-foreground bg-sidebar-accent"
|
|
: "text-muted-foreground hover:text-sidebar-foreground hover:bg-sidebar-accent"
|
|
}`}
|
|
>
|
|
{active && (
|
|
<span
|
|
className="absolute top-1/2 left-0 h-[18px] w-[3px] -translate-y-1/2 rounded-r-sm"
|
|
style={{ background: "var(--primary)" }}
|
|
/>
|
|
)}
|
|
{showLabels && hasPins ? (
|
|
<button
|
|
type="button"
|
|
onClick={() => toggleLibraryExpand(lib.id)}
|
|
className="flex h-full items-center py-3 pr-1 pl-3"
|
|
aria-label={isExpanded ? `Collapse ${lib.name}` : `Expand ${lib.name}`}
|
|
aria-expanded={isExpanded}
|
|
>
|
|
{isExpanded ? (
|
|
<ChevronDown className="h-3.5 w-3.5 opacity-60" />
|
|
) : (
|
|
<ChevronRight className="h-3.5 w-3.5 opacity-60" />
|
|
)}
|
|
</button>
|
|
) : showLabels ? (
|
|
<span className="w-3 shrink-0 pl-3" />
|
|
) : null}
|
|
<ViewTransitionLink
|
|
to={href}
|
|
onClick={onNavigate}
|
|
className={`flex items-center gap-2.5 py-2.5 ${
|
|
showLabels ? "flex-1 pr-3" : "w-full px-3"
|
|
}`}
|
|
aria-current={active ? "page" : undefined}
|
|
>
|
|
<span className="flex w-[18px] flex-shrink-0 items-center justify-center">
|
|
{getLibraryIcon(lib.type)}
|
|
</span>
|
|
<SidebarLabel show={showLabels}>{lib.name}</SidebarLabel>
|
|
</ViewTransitionLink>
|
|
</div>
|
|
|
|
{/* Pinned items under this library — hidden when collapsed */}
|
|
{showLabels && hasPins && isExpanded && (
|
|
<div className="border-sidebar-border ml-3 space-y-0.5 border-l pl-2">
|
|
{libraryPins.map((pin) => {
|
|
const pinHref =
|
|
pin.type === "collection"
|
|
? buildLibraryCollectionCatalogHref(pin.id, pin.label)
|
|
: buildSectionCatalogHref({
|
|
scope: "library",
|
|
libraryId: lib.id,
|
|
sectionId: pin.id,
|
|
title: pin.label,
|
|
});
|
|
const pinActive = isPinnedCatalogActive(lib.id, pin);
|
|
|
|
return (
|
|
<div
|
|
key={`${pin.type}-${pin.id}`}
|
|
className="group/pin relative flex items-center"
|
|
>
|
|
<ViewTransitionLink
|
|
to={pinHref}
|
|
onClick={onNavigate}
|
|
className={`flex flex-1 items-center gap-2 rounded-xl px-2.5 py-2.5 text-[12.5px] font-medium transition-colors duration-150 ${
|
|
pinActive
|
|
? "text-sidebar-accent-foreground bg-sidebar-accent/90"
|
|
: "text-muted-foreground hover:text-sidebar-foreground hover:bg-sidebar-accent/70"
|
|
}`}
|
|
>
|
|
{pin.type === "collection" ? (
|
|
<FolderOpen className="h-3.5 w-3.5 opacity-60" />
|
|
) : (
|
|
<LayoutGrid className="h-3.5 w-3.5 opacity-60" />
|
|
)}
|
|
<span className="truncate">{pin.label}</span>
|
|
</ViewTransitionLink>
|
|
<button
|
|
type="button"
|
|
onClick={() =>
|
|
togglePin(lib.id, {
|
|
type: pin.type,
|
|
id: pin.id,
|
|
label: pin.label,
|
|
})
|
|
}
|
|
className="text-muted-foreground hover:text-destructive absolute right-1 rounded p-1 opacity-0 transition-opacity group-hover/pin:opacity-100"
|
|
title="Unpin"
|
|
>
|
|
<PinOff className="h-3 w-3" />
|
|
</button>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Discover */}
|
|
<div>
|
|
<SidebarSectionHeader show={showLabels}>Discover</SidebarSectionHeader>
|
|
<ul className="list-none space-y-0.5">
|
|
<li>
|
|
<ViewTransitionLink
|
|
to={buildQueryCatalogHref()}
|
|
onClick={onNavigate}
|
|
className={navLinkClassForState(isCatalogSourceActive("query"))}
|
|
aria-current={isCatalogSourceActive("query") ? "page" : undefined}
|
|
>
|
|
{isCatalogSourceActive("query") && (
|
|
<span
|
|
className="absolute top-1/2 left-0 h-[18px] w-[3px] -translate-y-1/2 rounded-r-sm"
|
|
style={{ background: "var(--primary)" }}
|
|
/>
|
|
)}
|
|
<Search className="h-[18px] w-[18px] shrink-0" />
|
|
<SidebarLabel show={showLabels}>Search</SidebarLabel>
|
|
{showLabels && (
|
|
<kbd className="bg-muted text-muted-foreground pointer-events-none ml-auto hidden rounded border px-1.5 py-0.5 text-[10px] font-medium select-none lg:inline-flex">
|
|
{"\u2318"}K
|
|
</kbd>
|
|
)}
|
|
</ViewTransitionLink>
|
|
</li>
|
|
<li>
|
|
<ViewTransitionLink
|
|
to="/recommendations"
|
|
onClick={onNavigate}
|
|
className={navLinkClass("/recommendations")}
|
|
aria-current={isActive("/recommendations") ? "page" : undefined}
|
|
>
|
|
{isActive("/recommendations") && (
|
|
<span
|
|
className="absolute top-1/2 left-0 h-[18px] w-[3px] -translate-y-1/2 rounded-r-sm"
|
|
style={{ background: "var(--primary)" }}
|
|
/>
|
|
)}
|
|
<Sparkles className="h-[18px] w-[18px] shrink-0" />
|
|
<SidebarLabel show={showLabels}>Recommendations</SidebarLabel>
|
|
</ViewTransitionLink>
|
|
</li>
|
|
{showRequestsNav && (
|
|
<li>
|
|
<ViewTransitionLink
|
|
to="/requests"
|
|
onClick={onNavigate}
|
|
className={navLinkClass("/requests")}
|
|
aria-current={isActive("/requests") ? "page" : undefined}
|
|
>
|
|
{isActive("/requests") && (
|
|
<span
|
|
className="absolute top-1/2 left-0 h-[18px] w-[3px] -translate-y-1/2 rounded-r-sm"
|
|
style={{ background: "var(--primary)" }}
|
|
/>
|
|
)}
|
|
<Send className="h-[18px] w-[18px] shrink-0" />
|
|
<SidebarLabel show={showLabels}>Requests</SidebarLabel>
|
|
</ViewTransitionLink>
|
|
</li>
|
|
)}
|
|
<li>
|
|
<ViewTransitionLink
|
|
to="/calendar"
|
|
onClick={onNavigate}
|
|
className={navLinkClass("/calendar")}
|
|
aria-current={isActive("/calendar") ? "page" : undefined}
|
|
>
|
|
{isActive("/calendar") && (
|
|
<span
|
|
className="absolute top-1/2 left-0 h-[18px] w-[3px] -translate-y-1/2 rounded-r-sm"
|
|
style={{ background: "var(--primary)" }}
|
|
/>
|
|
)}
|
|
<CalendarDays className="h-[18px] w-[18px] shrink-0" />
|
|
<SidebarLabel show={showLabels}>Calendar</SidebarLabel>
|
|
</ViewTransitionLink>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Your Stuff */}
|
|
<div className="sidebar-personal">
|
|
<SidebarSectionHeader show={showLabels}>Your Stuff</SidebarSectionHeader>
|
|
<ul className="list-none space-y-0.5">
|
|
<li>
|
|
<ViewTransitionLink
|
|
to={buildPersonalCatalogHref("favorites")}
|
|
onClick={onNavigate}
|
|
className={navLinkClassForState(isCatalogSourceActive("favorites"))}
|
|
aria-current={isCatalogSourceActive("favorites") ? "page" : undefined}
|
|
>
|
|
{isCatalogSourceActive("favorites") && (
|
|
<span
|
|
className="absolute top-1/2 left-0 h-[18px] w-[3px] -translate-y-1/2 rounded-r-sm"
|
|
style={{ background: "var(--primary)" }}
|
|
/>
|
|
)}
|
|
<Heart className="h-[18px] w-[18px] shrink-0" />
|
|
<SidebarLabel show={showLabels}>Favorites</SidebarLabel>
|
|
</ViewTransitionLink>
|
|
</li>
|
|
<li>
|
|
<ViewTransitionLink
|
|
to={buildPersonalCatalogHref("watchlist")}
|
|
onClick={onNavigate}
|
|
className={navLinkClassForState(isCatalogSourceActive("watchlist"))}
|
|
aria-current={isCatalogSourceActive("watchlist") ? "page" : undefined}
|
|
>
|
|
{isCatalogSourceActive("watchlist") && (
|
|
<span
|
|
className="absolute top-1/2 left-0 h-[18px] w-[3px] -translate-y-1/2 rounded-r-sm"
|
|
style={{ background: "var(--primary)" }}
|
|
/>
|
|
)}
|
|
<List className="h-[18px] w-[18px] shrink-0" />
|
|
<SidebarLabel show={showLabels}>Watchlist</SidebarLabel>
|
|
</ViewTransitionLink>
|
|
</li>
|
|
<li>
|
|
<ViewTransitionLink
|
|
to="/rooms/join"
|
|
onClick={onNavigate}
|
|
className={navLinkClass("/rooms/join")}
|
|
aria-current={isActive("/rooms/join") ? "page" : undefined}
|
|
>
|
|
{isActive("/rooms/join") && (
|
|
<span
|
|
className="absolute top-1/2 left-0 h-[18px] w-[3px] -translate-y-1/2 rounded-r-sm"
|
|
style={{ background: "var(--primary)" }}
|
|
/>
|
|
)}
|
|
<UsersRound className="h-[18px] w-[18px] shrink-0" />
|
|
<SidebarLabel show={showLabels}>Watch Party</SidebarLabel>
|
|
</ViewTransitionLink>
|
|
</li>
|
|
<li>
|
|
<ViewTransitionLink
|
|
to="/collections"
|
|
onClick={onNavigate}
|
|
className={navLinkClass("/collections")}
|
|
aria-current={isActive("/collections") ? "page" : undefined}
|
|
>
|
|
{isActive("/collections") && (
|
|
<span
|
|
className="absolute top-1/2 left-0 h-[18px] w-[3px] -translate-y-1/2 rounded-r-sm"
|
|
style={{ background: "var(--primary)" }}
|
|
/>
|
|
)}
|
|
<FolderOpen className="h-[18px] w-[18px] shrink-0" />
|
|
<SidebarLabel show={showLabels}>Collections</SidebarLabel>
|
|
</ViewTransitionLink>
|
|
</li>
|
|
<li>
|
|
<ViewTransitionLink
|
|
to={buildPersonalCatalogHref("history")}
|
|
onClick={onNavigate}
|
|
className={navLinkClassForState(isCatalogSourceActive("history"))}
|
|
aria-current={isCatalogSourceActive("history") ? "page" : undefined}
|
|
>
|
|
{isCatalogSourceActive("history") && (
|
|
<span
|
|
className="absolute top-1/2 left-0 h-[18px] w-[3px] -translate-y-1/2 rounded-r-sm"
|
|
style={{ background: "var(--primary)" }}
|
|
/>
|
|
)}
|
|
<Clock className="h-[18px] w-[18px] shrink-0" />
|
|
<SidebarLabel show={showLabels}>History</SidebarLabel>
|
|
</ViewTransitionLink>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Apps (plugin-supplied user navigation) */}
|
|
{pluginNavLinks.length > 0 && (
|
|
<div className="sidebar-apps">
|
|
<SidebarSectionHeader show={showLabels}>Apps</SidebarSectionHeader>
|
|
<ul className="list-none space-y-0.5">
|
|
{pluginNavLinks.map((link) => (
|
|
<li key={link.id}>
|
|
<a
|
|
href={link.basePath}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
void navigateToPluginRoute(link.basePath);
|
|
onNavigate?.();
|
|
}}
|
|
className={navLinkClassForState(false)}
|
|
title={link.pluginId}
|
|
>
|
|
<Puzzle className="h-[18px] w-[18px] shrink-0" />
|
|
<SidebarLabel show={showLabels}>{link.label}</SidebarLabel>
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</nav>
|
|
|
|
{/* Footer */}
|
|
<div className="sidebar-footer border-sidebar-border/70 space-y-2 border-t px-3 py-3">
|
|
{isAdmin && (
|
|
<Link
|
|
to="/admin"
|
|
onClick={onNavigate}
|
|
className={navLinkClass("/admin")}
|
|
aria-current={isActive("/admin") ? "page" : undefined}
|
|
>
|
|
<Shield className="h-[18px] w-[18px] shrink-0" />
|
|
<SidebarLabel show={showLabels}>Admin</SidebarLabel>
|
|
</Link>
|
|
)}
|
|
|
|
{/* User profile dropdown */}
|
|
<DropdownMenu
|
|
onOpenChange={(open) => {
|
|
if (hoverTimerRef.current) clearTimeout(hoverTimerRef.current);
|
|
hoverTimerRef.current = null;
|
|
setProfileMenuOpen(open);
|
|
if (!open && !collapsed) return;
|
|
setHovered(open);
|
|
}}
|
|
>
|
|
<DropdownMenuTrigger asChild>
|
|
<button
|
|
type="button"
|
|
aria-label={`${profile?.name ?? user?.username ?? "User"} menu`}
|
|
className={`hover:bg-sidebar-accent/70 flex items-center rounded-xl py-3 transition-colors duration-150 ${
|
|
showLabels ? "w-full gap-2.5 px-3" : "mx-auto h-10 w-10 justify-center px-0"
|
|
}`}
|
|
>
|
|
<Avatar className="h-7 w-7 shrink-0">
|
|
{profile?.avatar_url ? (
|
|
<AvatarImage src={profile.avatar_url} alt={profile.name} />
|
|
) : null}
|
|
<AvatarFallback className="bg-primary text-primary-foreground text-xs font-bold shadow-[0_14px_32px_-20px_rgba(0,0,0,0.8)]">
|
|
{profile?.name?.charAt(0).toUpperCase() ??
|
|
user?.username?.charAt(0).toUpperCase() ??
|
|
"?"}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<span
|
|
className={`text-sidebar-foreground truncate text-[13px] font-medium transition-[opacity,max-width] duration-200 ease-out ${
|
|
showLabels
|
|
? "max-w-[180px] opacity-100 delay-[50ms]"
|
|
: "max-w-0 overflow-hidden opacity-0"
|
|
}`}
|
|
>
|
|
{profile?.name ?? user?.username ?? "User"}
|
|
</span>
|
|
</button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent
|
|
side={getProfileMenuSide(collapsed)}
|
|
align="start"
|
|
className="w-[min(20rem,calc(100vw-1.5rem))] rounded-2xl p-2"
|
|
>
|
|
<DropdownMenuLabel className="flex items-center gap-3 px-2 py-2">
|
|
<Avatar className="h-10 w-10">
|
|
{profile?.avatar_url ? (
|
|
<AvatarImage src={profile.avatar_url} alt={profile.name} />
|
|
) : null}
|
|
<AvatarFallback className="bg-primary text-primary-foreground text-sm font-bold">
|
|
{(profile?.name ?? user?.username ?? "?").charAt(0).toUpperCase()}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<div className="flex min-w-0 flex-col">
|
|
<span className="truncate text-[14px] font-semibold">
|
|
{profile?.name ?? user?.username ?? "User"}
|
|
</span>
|
|
{profile && user?.username && user.username !== profile.name && (
|
|
<span className="text-muted-foreground truncate text-[11px] font-normal">
|
|
{user.username}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</DropdownMenuLabel>
|
|
|
|
<div
|
|
className="flex items-center justify-between gap-2 px-2.5 pt-1 pb-1.5"
|
|
role="group"
|
|
aria-label="Theme"
|
|
>
|
|
<span className="text-muted-foreground text-[10px] font-medium tracking-[0.14em] uppercase">
|
|
Theme
|
|
</span>
|
|
<div className="flex items-center gap-1.5">
|
|
{CURATED_THEME_IDS.map((id) => {
|
|
const def = THEMES[id];
|
|
const isActive = theme === id;
|
|
return (
|
|
<DropdownMenuItem
|
|
key={id}
|
|
onSelect={(event) => {
|
|
event.preventDefault();
|
|
setTheme(id);
|
|
}}
|
|
onMouseEnter={() => previewTheme(id)}
|
|
onMouseLeave={resetPreviewTheme}
|
|
onFocus={() => previewTheme(id)}
|
|
onBlur={resetPreviewTheme}
|
|
aria-label={def.label}
|
|
title={def.label}
|
|
className={cn(
|
|
"relative h-6 w-6 flex-none cursor-pointer rounded-full border p-0 transition-transform hover:scale-110 focus:scale-110",
|
|
isActive
|
|
? "ring-primary ring-offset-popover border-transparent ring-2 ring-offset-2"
|
|
: "border-border/60",
|
|
)}
|
|
style={{ backgroundColor: def.previewBg }}
|
|
>
|
|
<span
|
|
aria-hidden="true"
|
|
className="absolute top-1/2 left-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full"
|
|
style={{ backgroundColor: def.previewAccent }}
|
|
/>
|
|
</DropdownMenuItem>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
<DropdownMenuSeparator />
|
|
|
|
<DropdownMenuItem
|
|
onClick={() => {
|
|
navigate("/settings/playback");
|
|
}}
|
|
className="gap-2.5 rounded-lg px-2.5 py-2 text-[13px]"
|
|
>
|
|
<Settings className="h-[18px] w-[18px]" />
|
|
Settings
|
|
</DropdownMenuItem>
|
|
|
|
<DropdownMenuSeparator />
|
|
|
|
<div className="flex flex-col gap-1 pt-0.5">
|
|
{profile && (
|
|
<DropdownMenuItem
|
|
onClick={() => {
|
|
clearProfile();
|
|
navigate("/profiles");
|
|
}}
|
|
className="border-sidebar-border/60 bg-sidebar-accent/40 hover:bg-sidebar-accent focus:bg-sidebar-accent gap-3 rounded-xl border px-3 py-3 text-[13px] font-semibold"
|
|
>
|
|
<UserCircle className="h-[18px] w-[18px]" />
|
|
Switch Profile
|
|
</DropdownMenuItem>
|
|
)}
|
|
<DropdownMenuItem
|
|
onClick={logout}
|
|
className="border-sidebar-border/60 bg-sidebar-accent/40 hover:bg-sidebar-accent focus:bg-sidebar-accent gap-3 rounded-xl border px-3 py-3 text-[13px] font-semibold"
|
|
>
|
|
<LogOut className="h-[18px] w-[18px]" />
|
|
Logout
|
|
</DropdownMenuItem>
|
|
</div>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|