AppLayout.tsx

import {
  lazy,
  Suspense,
  useState,
  useCallback,
  useEffect,
  useRef,
} from "react";
import type { ViewId, LibraryTab, SidebarMode } from "../../types";
import { useLibrary } from "../../hooks/useLibrary";
import { useProfile } from "../../hooks/useProfile";
import { usePlayer } from "../../hooks/usePlayer";
import { getProfileSetting, setProfileSetting } from "../../lib/tauri/profile";
import { Sidebar } from "./Sidebar";
import { SkinAmbientBackdrop } from "./SkinAmbientBackdrop";
import { SkinPlayingState } from "./SkinPlayingState";
import { SkinMotionWrapper } from "./SkinMotionWrapper";
import { useDragDropImport } from "../../hooks/useDragDropImport";
import { DropTargetsOverlay } from "./DropTargetsOverlay";
import { useGlobalShortcuts } from "../../hooks/useGlobalShortcuts";
import { useUiZoom } from "../../hooks/useUiZoom";
import { useWindowChrome } from "../../hooks/useWindowChrome";
import { AppTitleBar } from "./AppTitleBar";
import { useMainWindowBounds } from "../../hooks/useMainWindowBounds";
import { AnimatePresence, motion } from "framer-motion";
import { TopBar } from "./TopBar";
import { QueuePanel } from "./QueuePanel";
import { NowPlayingPanel } from "./NowPlayingPanel";
import { LyricsPanel } from "./LyricsPanel";
import { NowPlayingChevronTab } from "./NowPlayingChevronTab";
import { FluidSidePanel } from "./fluid/FluidSidePanel";
import { useSkin } from "../../hooks/useSkin";
import { DeviceMenu } from "./DeviceMenu";
import { PlayerBar } from "../player/PlayerBar";
import { ProfileSelectorModal } from "../common/ProfileSelectorModal";
import { LastfmReauthBanner } from "../common/LastfmReauthBanner";
import { SoftwareRenderingBanner } from "../common/SoftwareRenderingBanner";
import { SkinRecoveryBanner } from "../common/SkinRecoveryBanner";
import { UpdateBanner } from "../common/UpdateBanner";
import { ScanProgressToast } from "../common/ScanProgressToast";
import { ImportNoticeToast } from "../common/ImportNoticeToast";
import { TaskStatusBar } from "./TaskStatusBar";
import { PlaybackAlertToast } from "../common/PlaybackAlertToast";
import { QueueToast } from "../common/QueueToast";
import { PluginAttentionToast } from "../common/PluginAttentionToast";
import { OnboardingModal } from "../common/OnboardingModal";
import { ViewSuspenseFallback } from "../common/ViewSuspenseFallback";
import { PageScrollContext } from "../../contexts/PageScrollContext";

const HomeView = lazy(() =>
  import("../views/HomeView").then((module) => ({ default: module.HomeView })),
);
const LibraryView = lazy(() =>
  import("../views/LibraryView").then((module) => ({
    default: module.LibraryView,
  })),
);
// Type-only, so it does not pull the lazily-loaded module into this
// bundle: the entry below carries a category and has to spell it the
// same way Settings does.
import type { SettingsCategory } from "../views/SettingsView";

const SettingsView = lazy(() =>
  import("../views/SettingsView").then((module) => ({
    default: module.SettingsView,
  })),
);
const WebRadioView = lazy(() =>
  import("../views/WebRadioView").then((module) => ({
    default: module.WebRadioView,
  })),
);
const ExtensionsView = lazy(() =>
  import("../views/ExtensionsView").then((module) => ({
    default: module.ExtensionsView,
  })),
);
const PluginUIView = lazy(() =>
  import("../views/PluginUIView").then((module) => ({
    default: module.PluginUIView,
  })),
);
const AboutView = lazy(() =>
  import("../views/AboutView").then((module) => ({
    default: module.AboutView,
  })),
);
const FeedbackView = lazy(() =>
  import("../views/FeedbackView").then((module) => ({
    default: module.FeedbackView,
  })),
);
const StatisticsView = lazy(() =>
  import("../views/StatisticsView").then((module) => ({
    default: module.StatisticsView,
  })),
);
const WrappedView = lazy(() =>
  import("../views/WrappedView").then((module) => ({
    default: module.WrappedView,
  })),
);
const LikedView = lazy(() =>
  import("../views/LikedView").then((module) => ({
    default: module.LikedView,
  })),
);
const HistoryView = lazy(() =>
  import("../views/HistoryView").then((module) => ({
    default: module.HistoryView,
  })),
);
const PlaylistView = lazy(() =>
  import("../views/PlaylistView").then((module) => ({
    default: module.PlaylistView,
  })),
);
const AlbumDetailView = lazy(() =>
  import("../views/AlbumDetailView").then((module) => ({
    default: module.AlbumDetailView,
  })),
);
const ArtistDetailView = lazy(() =>
  import("../views/ArtistDetailView").then((module) => ({
    default: module.ArtistDetailView,
  })),
);
const GenreDetailView = lazy(() =>
  import("../views/GenreDetailView").then((module) => ({
    default: module.GenreDetailView,
  })),
);
const YearDetailView = lazy(() =>
  import("../views/YearDetailView").then((module) => ({
    default: module.YearDetailView,
  })),
);
// Each entry in the navigation history pairs a view id with its payload
// (when relevant) so back/forward can restore the exact target the user
// visited. Payload fields are optional so callers without a target (e.g.
// the initial "home" entry, or navigating to "wrapped" without a year)
// stay valid.
type HistoryEntry =
  | { id: "home" }
  // Same reasoning as `settingsCategory` below: the tab travels on the
  // entry, so Back and Forward restore the one that was open instead of
  // whatever the tab bar happens to hold now (#745). Optional, so a
  // plain visit lands on the last tab the user chose.
  | { id: "library"; tab?: LibraryTab }
  // `settingsCategory` is for the surfaces that send someone to one
  // card in particular. Carried on the entry rather than in a piece of
  // state beside it, so it expires the way every other payload here
  // does: the next plain visit to Settings pushes an entry without it
  // and lands on whatever the user last had open.
  | { id: "settings"; settingsCategory?: SettingsCategory }
  | { id: "web-radio" }
  | { id: "extensions" }
  | { id: "about" }
  | { id: "feedback" }
  | { id: "statistics" }
  | { id: "liked" }
  | { id: "recent" }
  | { id: "wrapped"; year?: number | null }
  | { id: "playlist"; playlistId?: number | null }
  // Remote playlists key on the server's string id (opaque `wfa_`-style),
  // not a local rowid — kept distinct from the local "playlist" entry.
  | { id: "remote-playlist"; remotePlaylistId?: string | null }
  | { id: "remote-album"; remoteAlbumId?: string | null }
  | { id: "remote-artist"; remoteArtistId?: string | null }
  | { id: "album-detail"; albumId?: number | null }
  | { id: "artist-detail"; artistId?: number | null }
  | { id: "genre-detail"; genreId?: number | null }
  // `year: null` is the "Unknown year" bucket, not a missing payload.
  | { id: "year-detail"; year: number | null }
  | {
      id: "plugin-ui";
      pluginId: string;
      initialPath?: string | null;
      icon?: string | null;
    };

export function AppLayout() {
  const { activeRightPanel } = usePlayer();
  // The Fluid skin shows the three right-edge panels as the tabs of
  // one shell; every other skin mounts them one at a time, as before.
  const { skin } = useSkin();
  const fluidPanel = skin.layout === "fluid";
  const dragDrop = useDragDropImport();
  // Global keyboard shortcuts. The hook itself attaches the keydown
  // listener and re-reads bindings whenever Settings emits the
  // shortcuts-changed event.
  useGlobalShortcuts();
  // UI zoom: hydrate the persisted level on boot, apply through
  // Tauri's WebView `setZoom`, and listen for Ctrl+= / Ctrl+- /
  // Ctrl+0 so users can tune density without diving into Settings.
  useUiZoom();
  // Who draws the frame around the window (#696). The backend resolved the
  // stored choice for this platform already, so there is one instruction to
  // follow here rather than a platform test.
  const windowChrome = useWindowChrome();
  // Main-window size + position persistence. Saves on every move/resize
  // (debounced 300 ms); restoration is done by the Rust boot path before
  // the window is revealed so there is no visible jump.
  useMainWindowBounds();
  // History entries carry their payload (album/artist/genre/playlist id,
  // wrapped year) directly so back/forward restore the exact target the
  // user visited — not whatever target was set most recently. Without
  // this, navigating album A → home → album B → back → back lands on
  // "album-detail" with activeAlbumId still pointing at B.
  //
  // History + index live in a single state object so push/replace can
  // update both atomically inside one functional setter. Splitting them
  // would let rapid back-to-back navigations queue setters that all read
  // the same stale index, losing entries and leaving `index` past
  // `history.length - 1`.
  const [navState, setNavState] = useState<{
    history: HistoryEntry[];
    index: number;
  }>({ history: [{ id: "home" }], index: 0 });
  const viewHistory = navState.history;
  const historyIndex = navState.index;
  const [isProfileModalOpen, setIsProfileModalOpen] = useState(false);
  // What a library entry WITHOUT a tab falls back to: the last one the
  // user picked. The rendered tab is derived below — the entry wins
  // whenever it names one.
  const [lastLibraryTab, setLastLibraryTab] = useState<LibraryTab>("tracks");

  // Sidebar width (#167): full, icons only, or hidden, cycled in that
  // order by the top bar's one button. Persisted in localStorage rather
  // than `profile_setting` because it's a UI affordance — not data — and
  // users on 1080p screens typically pick once and forget. The Sidebar
  // component stays mounted at `width: 0` so its data fetches / event
  // listeners don't tear down on every toggle. Hydration happens lazily
  // so the initial render matches the persisted choice without a flash.
  const [sidebarMode, setSidebarMode] = useState<SidebarMode>(() => {
    try {
      const mode = localStorage.getItem("waveflow.sidebar.mode");
      if (mode === "full" || mode === "icons" || mode === "hidden") {
        return mode;
      }
      // Before the icons-only width, the button only hid the sidebar,
      // under this key: someone who hid it finds it hidden still.
      return localStorage.getItem("waveflow.sidebar.hidden") === "1"
        ? "hidden"
        : "full";
    } catch {
      return "full";
    }
  });
  const cycleSidebar = useCallback(() => {
    setSidebarMode((prev) =>
      prev === "full" ? "icons" : prev === "icons" ? "hidden" : "full",
    );
  }, []);
  // Persisted here rather than in the updater, which React may run twice
  // and which has to stay pure.
  useEffect(() => {
    try {
      localStorage.setItem("waveflow.sidebar.mode", sidebarMode);
    } catch {
      // Private mode / quota — UI still works for this session.
    }
  }, [sidebarMode]);
  const isSidebarHidden = sidebarMode === "hidden";

  // First-run onboarding: prompt the user to point WaveFlow at a
  // music folder when no library has been populated yet.
  //
  // The decision is **latched once per profile** at the end of the
  // initial fetch and persisted across sessions via the
  // `onboarding.dismissed` profile setting. Concretely:
  //   1. wait for ProfileProvider + LibraryProvider to settle their
  //      first fetch with a non-null `activeProfile`;
  //   2. read `profile_setting['onboarding.dismissed']`. If `true`,
  //      the user has already said "configure later" or completed
  //      the flow on a previous launch — never bother them again
  //      for this profile;
  //   3. otherwise, show the modal iff the library is empty.
  //
  // Why a latched state and not a memo: the loading flags
  // transition through several intermediate values during boot, and
  // a memo recomputed on every render would briefly satisfy "show"
  // mid-boot before flipping back — that's the flash the modal
  // used to do.
  const {
    libraries,
    isLoading: isLibraryLoading,
    loadedProfileId: librariesLoadedFor,
  } = useLibrary();
  const { activeProfile, isLoading: isProfileLoading } = useProfile();
  const [showOnboarding, setShowOnboarding] = useState(false);
  // Tracks the active profile id we've already evaluated against, so
  // a profile switch re-runs the gate exactly once.
  const evaluatedProfileId = useRef<number | null>(null);
  // Ref handed down to virtualized tables so they share the page-level
  // scroller instead of nesting their own.
  const pageScrollRef = useRef<HTMLDivElement>(null);

  // Idle-time chunk warm-up for every lazily-loaded view. Once these
  // imports resolve they're cached in the module registry, so a later
  // navigation hits the Suspense fallback for zero ms instead of
  // pausing for the network round-trip on the first click.
  useEffect(() => {
    const warmup = () => {
      void import("../views/LibraryView");
      void import("../views/LikedView");
      void import("../views/HistoryView");
      void import("../views/PlaylistView");
      void import("../views/AlbumDetailView");
      void import("../views/ArtistDetailView");
      void import("../views/GenreDetailView");
      void import("../views/YearDetailView");
      void import("../views/StatisticsView");
      void import("../views/WrappedView");
      void import("../views/SettingsView");
      void import("../views/WebRadioView");
      void import("../views/AboutView");
      void import("../views/FeedbackView");
    };
    type IdleWindow = Window & {
      requestIdleCallback?: (
        cb: () => void,
        opts?: { timeout?: number },
      ) => number;
      cancelIdleCallback?: (handle: number) => void;
    };
    const w = window as IdleWindow;
    if (typeof w.requestIdleCallback === "function") {
      const handle = w.requestIdleCallback(warmup, { timeout: 2000 });
      return () => w.cancelIdleCallback?.(handle);
    }
    const timer = setTimeout(warmup, 300);
    return () => clearTimeout(timer);
  }, []);

  useEffect(() => {
    if (isProfileLoading || isLibraryLoading) return;
    if (!activeProfile) return;
    // Defer until LibraryContext has refetched FOR this profile. Without
    // this check the gate would evaluate with the previous profile's
    // libraries during a switch — a fresh profile would silently skip
    // onboarding if the previous one happened to have folders.
    if (librariesLoadedFor !== activeProfile.id) return;
    if (evaluatedProfileId.current === activeProfile.id) return;

    const profileId = activeProfile.id;
    evaluatedProfileId.current = profileId;

    let cancelled = false;
    (async () => {
      let dismissed = false;
      try {
        const raw = await getProfileSetting("onboarding.dismissed");
        dismissed = raw === "true";
      } catch (err) {
        // Read failure is non-fatal — fall back to "not dismissed"
        // so a brand new profile still gets the prompt.
        console.error("[AppLayout] read onboarding.dismissed failed", err);
      }
      if (cancelled || evaluatedProfileId.current !== profileId) return;
      if (dismissed) {
        setShowOnboarding(false);
        return;
      }
      const isEmpty =
        libraries.length === 0 || libraries.every((l) => l.folder_count === 0);
      setShowOnboarding(isEmpty);
    })();

    return () => {
      cancelled = true;
    };
  }, [
    activeProfile,
    isProfileLoading,
    isLibraryLoading,
    librariesLoadedFor,
    libraries,
  ]);

  const dismissOnboarding = useCallback(() => {
    // Persist the choice so the modal doesn't reappear on next
    // launch — the user already told us to leave them alone, even
    // if their library is still empty.
    setShowOnboarding(false);
    setProfileSetting("onboarding.dismissed", "true", "bool").catch((err) =>
      console.error("[AppLayout] persist onboarding.dismissed failed", err),
    );
  }, []);

  const currentEntry = viewHistory[historyIndex];
  const activeView: ViewId = currentEntry.id;
  // Derived from the current history entry so back/forward restore the
  // correct payload. `null` for views without a payload.
  const activeAlbumId =
    currentEntry.id === "album-detail" ? (currentEntry.albumId ?? null) : null;
  const activeArtistId =
    currentEntry.id === "artist-detail"
      ? (currentEntry.artistId ?? null)
      : null;
  const activeGenreId =
    currentEntry.id === "genre-detail" ? (currentEntry.genreId ?? null) : null;
  const activeYear =
    currentEntry.id === "year-detail" ? currentEntry.year : undefined;
  const activePlaylistId =
    currentEntry.id === "playlist" ? (currentEntry.playlistId ?? null) : null;
  const activeRemotePlaylistId =
    currentEntry.id === "remote-playlist"
      ? (currentEntry.remotePlaylistId ?? null)
      : null;
  const activeRemoteAlbumId =
    currentEntry.id === "remote-album"
      ? (currentEntry.remoteAlbumId ?? null)
      : null;
  const activeRemoteArtistId =
    currentEntry.id === "remote-artist"
      ? (currentEntry.remoteArtistId ?? null)
      : null;
  const activeWrappedYear =
    currentEntry.id === "wrapped" ? (currentEntry.year ?? null) : null;
  const activePluginId =
    currentEntry.id === "plugin-ui" ? currentEntry.pluginId : null;
  const activePluginPath =
    currentEntry.id === "plugin-ui" ? (currentEntry.initialPath ?? "/") : "/";
  const activePluginIcon =
    currentEntry.id === "plugin-ui" ? (currentEntry.icon ?? null) : null;
  const libraryTab: LibraryTab =
    currentEntry.id === "library"
      ? (currentEntry.tab ?? lastLibraryTab)
      : lastLibraryTab;

  const pushEntry = useCallback((entry: HistoryEntry) => {
    setNavState(({ history, index }) => ({
      history: [...history.slice(0, index + 1), entry],
      index: index + 1,
    }));
  }, []);

  // Replace the current entry in place (no index bump). Used when the
  // current target no longer exists — e.g. a playlist that was just
  // deleted — so Back doesn't return to a ghost page.
  const replaceEntry = useCallback((entry: HistoryEntry) => {
    setNavState(({ history, index }) => {
      const next = [...history];
      next[index] = entry;
      return { history: next, index };
    });
  }, []);

  // Wrapper used by views that only need a plain id (Home, Settings, …).
  // The cast is safe because every `ViewId` matches a HistoryEntry whose
  // payload fields are optional.
  const setActiveView = useCallback(
    (view: ViewId) => {
      pushEntry({ id: view } as HistoryEntry);
    },
    [pushEntry],
  );

  /** Go to the library, on `tab`. Every entry point that names a tab —
   *  the sidebar's five, Home's Playlists card — goes through here, so
   *  they all push an entry that remembers which one. */
  const navigateToLibraryTab = useCallback(
    (tab: LibraryTab) => {
      setLastLibraryTab(tab);
      pushEntry({ id: "library", tab });
    },
    [pushEntry],
  );

  /** The tab bar inside the library. It REPLACES the current entry
   *  rather than pushing one: a tab is a filter on the page you are
   *  already on, and pushing would turn every tab click into a step
   *  Back has to undo. */
  const selectLibraryTab = useCallback(
    (tab: LibraryTab) => {
      setLastLibraryTab(tab);
      replaceEntry({ id: "library", tab });
    },
    [replaceEntry],
  );

  const openSettingsAt = useCallback(
    (settingsCategory: SettingsCategory) => {
      pushEntry({ id: "settings", settingsCategory });
    },
    [pushEntry],
  );

  const canGoBack = historyIndex > 0;
  const canGoForward = historyIndex < viewHistory.length - 1;

  const goBack = useCallback(() => {
    setNavState(({ history, index }) =>
      index > 0 ? { history, index: index - 1 } : { history, index },
    );
  }, []);

  const goForward = useCallback(() => {
    setNavState(({ history, index }) =>
      index < history.length - 1
        ? { history, index: index + 1 }
        : { history, index },
    );
  }, []);

  const navigateToAlbum = useCallback(
    (albumId: number) => {
      pushEntry({ id: "album-detail", albumId });
    },
    [pushEntry],
  );

  const navigateToArtist = useCallback(
    (artistId: number) => {
      pushEntry({ id: "artist-detail", artistId });
    },
    [pushEntry],
  );

  const navigateToGenre = useCallback(
    (genreId: number) => {
      pushEntry({ id: "genre-detail", genreId });
    },
    [pushEntry],
  );

  const navigateToYear = useCallback(
    (year: number | null) => {
      pushEntry({ id: "year-detail", year });
    },
    [pushEntry],
  );

  const navigateToPlaylist = useCallback(
    (playlistId: number) => {
      pushEntry({ id: "playlist", playlistId });
    },
    [pushEntry],
  );

  const navigateToRemotePlaylist = useCallback(
    (remotePlaylistId: string) => {
      pushEntry({ id: "remote-playlist", remotePlaylistId });
    },
    [pushEntry],
  );

  const navigateToRemoteAlbum = useCallback(
    (remoteAlbumId: string) => {
      pushEntry({ id: "remote-album", remoteAlbumId });
    },
    [pushEntry],
  );

  const navigateToRemoteArtist = useCallback(
    (remoteArtistId: string) => {
      pushEntry({ id: "remote-artist", remoteArtistId });
    },
    [pushEntry],
  );

  const navigateToWrapped = useCallback(
    (year: number | null) => {
      pushEntry({ id: "wrapped", year });
    },
    [pushEntry],
  );

  const navigateToPluginUi = useCallback(
    (pluginId: string, initialPath: string, icon: string | null) => {
      pushEntry({ id: "plugin-ui", pluginId, initialPath, icon });
    },
    [pushEntry],
  );

  function renderView() {
    switch (activeView) {
      case "home":
        return (
          <HomeView
            onNavigate={setActiveView}
            onNavigateToPlaylists={() => navigateToLibraryTab("playlists")}
            onNavigateToAlbum={navigateToAlbum}
            onNavigateToArtist={navigateToArtist}
            onNavigateToPlaylist={navigateToPlaylist}
            onNavigateToWrapped={navigateToWrapped}
          />
        );
      case "wrapped":
        return (
          <WrappedView
            onNavigate={setActiveView}
            initialYear={activeWrappedYear}
            onNavigateToAlbum={navigateToAlbum}
            onNavigateToArtist={navigateToArtist}
          />
        );
      case "library":
        return (
          <LibraryView
            activeTab={libraryTab}
            setActiveTab={selectLibraryTab}
            onNavigateToAlbum={navigateToAlbum}
            onNavigateToRemoteAlbum={navigateToRemoteAlbum}
            onNavigateToArtist={navigateToArtist}
            onNavigateToRemoteArtist={navigateToRemoteArtist}
            onNavigateToRemotePlaylist={navigateToRemotePlaylist}
            onNavigateToGenre={navigateToGenre}
            onNavigateToYear={navigateToYear}
            onNavigateToPlaylist={navigateToPlaylist}
          />
        );
      case "settings":
        return (
          <SettingsView
            onNavigate={setActiveView}
            initialCategory={
              currentEntry.id === "settings"
                ? currentEntry.settingsCategory
                : undefined
            }
          />
        );
      case "web-radio":
        return <WebRadioView />;
      case "extensions":
        return <ExtensionsView />;
      case "plugin-ui":
        // `key` forces a fresh mount per plugin so switching between two
        // ui plugins reloads cleanly instead of reusing the last view.
        return activePluginId ? (
          <PluginUIView
            key={activePluginId}
            pluginId={activePluginId}
            initialPath={activePluginPath}
            icon={activePluginIcon}
          />
        ) : null;
      case "about":
        return <AboutView onNavigate={setActiveView} />;
      case "feedback":
        return <FeedbackView onNavigate={setActiveView} />;
      case "statistics":
        return (
          <StatisticsView
            onNavigate={setActiveView}
            onNavigateToAlbum={navigateToAlbum}
            onNavigateToArtist={navigateToArtist}
          />
        );
      case "liked":
        return (
          <LikedView
            onNavigateToAlbum={navigateToAlbum}
            onNavigateToArtist={navigateToArtist}
          />
        );
      case "recent":
        return (
          <HistoryView
            onNavigateToAlbum={navigateToAlbum}
            onNavigateToArtist={navigateToArtist}
          />
        );
      case "playlist":
        return (
          <PlaylistView
            playlistId={activePlaylistId}
            onAfterDelete={() => replaceEntry({ id: "home" })}
            onNavigateToAlbum={navigateToAlbum}
            onNavigateToArtist={navigateToArtist}
          />
        );
      case "remote-playlist":
        return (
          <PlaylistView
            playlistId={null}
            remotePlaylistId={activeRemotePlaylistId}
            onAfterDelete={() => replaceEntry({ id: "home" })}
            onNavigateToAlbum={navigateToAlbum}
            onNavigateToArtist={navigateToArtist}
            onNavigateToRemoteAlbum={navigateToRemoteAlbum}
            onNavigateToRemoteArtist={navigateToRemoteArtist}
          />
        );
      case "remote-album":
        return (
          <AlbumDetailView
            albumId={null}
            remoteAlbumId={activeRemoteAlbumId}
            onNavigateToArtist={navigateToArtist}
            onNavigateToRemoteArtist={navigateToRemoteArtist}
          />
        );
      case "remote-artist":
        return (
          <ArtistDetailView
            artistId={null}
            remoteArtistId={activeRemoteArtistId}
            onNavigateToAlbum={navigateToAlbum}
            onNavigateToRemoteAlbum={navigateToRemoteAlbum}
            onNavigateToArtist={navigateToArtist}
          />
        );
      case "album-detail":
        return (
          <AlbumDetailView
            albumId={activeAlbumId}
            onNavigateToArtist={navigateToArtist}
          />
        );
      case "artist-detail":
        return (
          <ArtistDetailView
            artistId={activeArtistId}
            onNavigateToAlbum={navigateToAlbum}
            onNavigateToArtist={navigateToArtist}
          />
        );
      case "genre-detail":
        return (
          <GenreDetailView
            genreId={activeGenreId}
            onNavigateToAlbum={navigateToAlbum}
            onNavigateToArtist={navigateToArtist}
          />
        );
      case "year-detail":
        return (
          <YearDetailView
            year={activeYear}
            onNavigateToAlbum={navigateToAlbum}
            onNavigateToArtist={navigateToArtist}
          />
        );
    }
  }

  return (
    <SkinMotionWrapper>
      <SkinAmbientBackdrop />
      <SkinPlayingState />
      <div className="flex flex-col h-screen font-sans">
        <div className="flex flex-col h-screen bg-app-ambient text-zinc-600 dark:text-zinc-300 relative">
          {/* Linux with the decorations turned off: the strip that
              replaces them. */}
          {windowChrome.draw === "titlebar" && <AppTitleBar />}
          {/* macOS with the overlay title bar: the frame is still the
              system's, just transparent over our content, so all this
              needs to be is the room the traffic lights sit in -- and a
              drag region, which an overlay title bar does not provide by
              itself (the window would have nothing to move it by). */}
          {windowChrome.draw === "overlay" && (
            <div data-tauri-drag-region className="h-7 shrink-0" />
          )}
          {/* Drag-and-drop: two targets while files are dragged over the
            window — play them now without importing them, or add them to
            the library. An import's scan then reports in the status bar. */}
          {dragDrop.isDraggingOver && (
            <DropTargetsOverlay
              hoveredTarget={dragDrop.hoveredTarget}
              targetsRef={dragDrop.targetsRef}
            />
          )}

          {/* Main Container */}
          <div className="flex flex-1 overflow-hidden">
            {/* Sidebar wrapper. Animates `width` between 0 and the
              Sidebar's intrinsic `w-64` (256 px) so the toggle
              actually frees the screen real estate instead of just
              hiding the content. The Sidebar itself stays mounted at
              full width — `overflow-hidden` on the wrapper clips it
              when collapsed. `shrink-0` keeps the wrapper from
              participating in the flex shrink algorithm during the
              animation.

              `inert` removes the collapsed subtree from the focus
              order and pointer events in one step (no `tabIndex=-1`
              cascade needed). `aria-hidden` is set in parallel for
              older screen-reader engines that don't follow `inert`
              yet. React 19 supports `inert` as a boolean prop. */}
            {/* Was `<motion.aside>` — collapsed to `<motion.div>`
                because the inner `<Sidebar>` already renders its own
                `<aside>` landmark; nesting two created an invalid
                duplicate-landmark for screen-reader landmark
                navigation. The wrapper's only job is the
                width-animation envelope, no landmark semantics
                required. */}
            <motion.div
              initial={false}
              animate={{
                width: isSidebarHidden ? 0 : sidebarMode === "icons" ? 80 : 256,
              }}
              transition={{ duration: 0.22, ease: "easeOut" }}
              className="skin-sidebar-shell shrink-0 overflow-hidden"
              // The skins narrow their padding on it: theirs is sized for
              // 256 px and would leave the icons no room at 80.
              data-collapsed={sidebarMode === "icons" ? "" : undefined}
              aria-hidden={isSidebarHidden}
              inert={isSidebarHidden}
            >
              <Sidebar
                activeView={activeView}
                setActiveView={setActiveView}
                libraryTab={libraryTab}
                navigateToLibraryTab={navigateToLibraryTab}
                activePlaylistId={activePlaylistId}
                navigateToPlaylist={navigateToPlaylist}
                activeRemotePlaylistId={activeRemotePlaylistId}
                navigateToRemotePlaylist={navigateToRemotePlaylist}
                activePluginId={activePluginId}
                navigateToPluginUi={navigateToPluginUi}
                collapsed={sidebarMode === "icons"}
              />
            </motion.div>

            {/* Center Content. `min-w-0` is required so a long playlist
              title or wide table doesn't blow the flex item's intrinsic
              width past `flex-1` and push the right panel off-screen.
              Background uses `/50` opacity so the theme ambient bleeds
              through both modes — without `/50` on the light side, the
              solid `bg-zinc-50` covered the ambient and themed light
              presets (Sunset Light / Lavender Light…) looked stark
              white in the main area. */}
            <div className="flex flex-col flex-1 min-w-0 relative bg-zinc-50/50 dark:bg-zinc-900/50 overflow-hidden">
              <TopBar
                activeView={activeView}
                setActiveView={setActiveView}
                onOpenProfileSelector={() => setIsProfileModalOpen(true)}
                onNavigateToAlbum={navigateToAlbum}
                onNavigateToArtist={navigateToArtist}
                canGoBack={canGoBack}
                canGoForward={canGoForward}
                onGoBack={goBack}
                onGoForward={goForward}
                sidebarMode={sidebarMode}
                onCycleSidebar={cycleSidebar}
              />

              {/* Main Scrollable Content */}
              <main
                ref={pageScrollRef}
                className="flex-1 overflow-y-auto p-8 relative"
              >
                <PageScrollContext.Provider value={pageScrollRef}>
                  <Suspense fallback={<ViewSuspenseFallback />}>
                    {/* Crossfade + slight slide between views. Keyed on
                      the structural view id (album/artist/genre/playlist
                      keep a single key so the inner view handles its own
                      internal navigation — re-keying on every payload
                      change would jank the transition). */}
                    <AnimatePresence mode="wait" initial={false}>
                      <motion.div
                        key={activeView}
                        initial={{ opacity: 0, y: 6 }}
                        animate={{ opacity: 1, y: 0 }}
                        exit={{ opacity: 0, y: -4 }}
                        transition={{ duration: 0.18, ease: "easeOut" }}
                      >
                        {renderView()}
                      </motion.div>
                    </AnimatePresence>
                  </Suspense>
                </PageScrollContext.Provider>
              </main>

              {/* Floating overlays anchored to the center column.
                DeviceMenu = popup from the player bar's speaker icon;
                NowPlayingChevronTab = right-edge handle, hidden only when
                Now Playing is itself the open panel so it can switch to
                it from Lyrics or Queue. Both must stay inside the center
                container so their `right-0` anchors to the content edge,
                not to the right panel when one is mounted as a sibling —
                which is also what lands the handle on the seam between
                the content and an open panel rather than under it. */}
              <DeviceMenu />
              <NowPlayingChevronTab />
            </div>

            {/* Right Panels — siblings of the center column so opening
              one shrinks the content area instead of overlapping it
              (Spotify-style responsive layout). Only one is mounted at
              a time; the conditional render is the structural mutex.
              Wrapped in AnimatePresence so width/opacity exit animations
              play before unmount. */}
            <AnimatePresence initial={false}>
              {fluidPanel && activeRightPanel != null && (
                <FluidSidePanel
                  onNavigateToArtist={navigateToArtist}
                  onNavigateToRemoteArtist={navigateToRemoteArtist}
                />
              )}
              {!fluidPanel && activeRightPanel === "queue" && <QueuePanel />}
              {!fluidPanel && activeRightPanel === "nowPlaying" && (
                <NowPlayingPanel
                  onNavigateToArtist={navigateToArtist}
                  onNavigateToRemoteArtist={navigateToRemoteArtist}
                />
              )}
              {!fluidPanel && activeRightPanel === "lyrics" && <LyricsPanel />}
            </AnimatePresence>
          </div>

          {/* One line saying what is running, above the player bar
            (#601). A flex sibling rather than an overlay: it pushes the
            content up instead of covering the last row of a list, and
            it renders nothing at all when nothing is running. */}
          <TaskStatusBar />

          {/* Bottom Player Bar */}
          <PlayerBar onNavigateToArtist={navigateToArtist} />
        </div>

        <ProfileSelectorModal
          isOpen={isProfileModalOpen}
          onClose={() => setIsProfileModalOpen(false)}
        />

        <LastfmReauthBanner onGoToSettings={() => setActiveView("settings")} />
        <SoftwareRenderingBanner
          onGoToSettings={() => openSettingsAt("diagnostics")}
        />
        <SkinRecoveryBanner />
        <UpdateBanner />
        <ScanProgressToast />
        <ImportNoticeToast />
        <PlaybackAlertToast />
        <QueueToast />
        <PluginAttentionToast />
        {showOnboarding && <OnboardingModal onSkip={dismissOnboarding} />}
      </div>
    </SkinMotionWrapper>
  );
}