SoulStream/src/App.svelte

<script>
    import Sidebar from "./components/Sidebar.svelte";
    import TitleBar from "./components/TitleBar.svelte";
    import PlayerBar from "./components/PlayerBar.svelte";
    import NowPlaying from "./components/NowPlaying.svelte";
    import ArtworkViewer from "./components/ArtworkViewer.svelte";
    import LoginModal from "./components/LoginModal.svelte";
    import PreviewOverlay from "./components/PreviewOverlay.svelte";
    import DebugOverlay from "./components/DebugOverlay.svelte";
    import { previewUi } from "./lib/preview/previewSession.svelte.js";
    import Home from "./views/Home.svelte";
    import Search from "./views/Search.svelte";
    import Library from "./views/Library.svelte";
    import Downloads from "./views/Downloads.svelte";
    import Settings from "./views/Settings.svelte";
    import Playlist from "./views/Playlist.svelte";
    import CatalogSearch from "./views/CatalogSearch.svelte";
    import CatalogArtist from "./views/CatalogArtist.svelte";
    import CatalogAlbum from "./views/CatalogAlbum.svelte";
    import {
        ui,
        initEvents,
        autoConnect,
        refreshLibrary,
        refreshPlaylists,
    } from "./lib/state.svelte.js";
    import { floatScroll } from "./lib/scrollbar.js";

    const views = {
        home: Home,
        search: Search,
        library: Library,
        downloads: Downloads,
        settings: Settings,
        playlist: Playlist,
        catalog: CatalogSearch,
        catalogArtist: CatalogArtist,
        catalogAlbum: CatalogAlbum,
    };
    const CurrentView = $derived(views[ui.view] ?? Home);

    initEvents();
    autoConnect();
    refreshLibrary();
    refreshPlaylists();

</script>

<div
    class="app"
    class:np-open={ui.nowPlaying}
    class:sidebar-collapsed={ui.sidebarCollapsed}
    class:preview-open={previewUi.open}
>
    <TitleBar />
    <!-- While the preview modal is open the page is inert and the flanking
         panels + player bar are pointer-inert under the scrim (user decision
         2026-07-23: the bar stays VISIBLE, dimmed, like Spotify — un-rendering
         it left a black hole in the grid's bottom row). There is still no UI
         path to command main audio behind the focus coordinator's back: the
         scrim intercepts pointer input and the dialog traps the keyboard.
         The titlebar stays live for window chrome. -->
    <Sidebar />
    <main class="content" use:floatScroll inert={previewUi.open || undefined}>
        <CurrentView />
    </main>
    <NowPlaying />
    <PlayerBar />
    <PreviewOverlay />
    <ArtworkViewer />
    <LoginModal />
    <DebugOverlay />
</div>

<style>
    /* Frameless window: the titlebar row is part of the app background —
       no separate chrome color, the panels float beneath it. */
    /* While the preview modal is open: keyboard is contained by the dialog's
       focus trap and aria-modal, the content pane is `inert`, and the flanking
       panels + player bar stop taking pointer input here — the bar stays
       visible (dimmed under the scrim) but cannot command main audio. */
    .app.preview-open :global(.sidebar),
    .app.preview-open :global(.nowplaying),
    .app.preview-open :global(.player) {
        pointer-events: none;
    }

    .app {
        display: grid;
        grid-template-columns: var(--sidebar-width) 1fr var(--nowplaying-width);
        grid-template-rows: 30px 1fr var(--player-height);
        grid-template-areas:
            "titlebar titlebar titlebar"
            "sidebar content nowplaying"
            "player player player";
        height: 100%;
        gap: 8px;
        padding: 0 8px 8px;
        background: var(--bg-sidebar);
        overflow: hidden;
        transition: grid-template-columns 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Collapsed left nav: narrow the sidebar column to an icon rail. The
       grid-template-columns transition animates the reflow. */
    .app.sidebar-collapsed {
        --sidebar-width: 64px;
    }

    /* Now Playing panel slides away: the column collapses to zero (the panel
       itself keeps its width and slides off-screen — see NowPlaying.svelte). */
    .app:not(.np-open) {
        --nowplaying-width: 0px;
    }

    .content {
        grid-area: content;
        background: linear-gradient(var(--bg-highlight) 0, var(--bg-base) 240px);
        /* The highlight wash belongs to the top of the PAGE, not the viewport:
           anchored to the pane (default `scroll`), the gradient stays put
           while content scrolls, so the hero's scrim — which dissolves into
           pure bg-base — ends on a lighter backdrop mid-gradient and paints a
           hard seam at the hero's bottom edge. `local` scrolls the gradient
           away with the content, keeping the seam colors identical at every
           scroll position. */
        background-attachment: local;
        border-radius: var(--radius);
        overflow-y: auto;
        overflow-anchor: none;
        /* Main scroll pane: no elastic rubber-band at its edges. Inner regions
           deliberately do NOT set this, so their wheel chains here. */
        overscroll-behavior: none;
        padding: 24px 28px;
    }
</style>