From a985ff4fb30377f42f2269da70e539e4334429ca Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 14:09:36 +0200
Subject: [PATCH] Move rune-based state modules into lib/state

---
 web-player/src/lib/components/Sidebar.svelte  |   4 +-
 web-player/src/lib/components/TabsBar.svelte  |   2 +-
 web-player/src/lib/components/TopBar.svelte   |   2 +-
 .../src/lib/components/ui/BackLink.svelte     |   2 +-
 .../src/lib/player/queuePanel.svelte.ts       |   2 +-
 web-player/src/lib/state/menus.svelte.ts      |  25 +++++
 web-player/src/lib/state/navigation.svelte.ts | 101 ++++++++++++++++++
 web-player/src/lib/state/playlists.svelte.ts  |   3 +
 web-player/src/lib/state/toggle.svelte.ts     |  18 ++++
 .../src/routes/(app)/explore/+page.svelte     |   4 +-
 .../src/routes/(app)/mixes/[id]/+page.svelte  |   2 +-
 .../src/routes/(app)/playlists/+page.svelte   |   2 +-
 web-player/src/routes/+layout.svelte          |   4 +-
 web-player/src/routes/+page.svelte            |   2 +-
 14 files changed, 160 insertions(+), 13 deletions(-)
 create mode 100644 web-player/src/lib/state/menus.svelte.ts
 create mode 100644 web-player/src/lib/state/navigation.svelte.ts
 create mode 100644 web-player/src/lib/state/playlists.svelte.ts
 create mode 100644 web-player/src/lib/state/toggle.svelte.ts

diff --git a/web-player/src/lib/components/Sidebar.svelte b/web-player/src/lib/components/Sidebar.svelte
index cc8e462..adfa974 100644
--- a/web-player/src/lib/components/Sidebar.svelte
+++ b/web-player/src/lib/components/Sidebar.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { page } from '$app/state';
-	import { isSectionActive, appNavLinks } from '$lib/navigation.svelte';
+	import { isSectionActive, appNavLinks } from '$lib/state/navigation.svelte';
 	import { liked } from '$lib/player/liked.svelte';
-	import { createPlaylistModal } from '$lib/playlists.svelte';
+	import { createPlaylistModal } from '$lib/state/playlists.svelte';
 	import type { SessionUser } from '$lib/types';
 	import ListRow from './ui/ListRow.svelte';
 	import IconButton from './ui/IconButton.svelte';
diff --git a/web-player/src/lib/components/TabsBar.svelte b/web-player/src/lib/components/TabsBar.svelte
index f801359..9bf19b0 100644
--- a/web-player/src/lib/components/TabsBar.svelte
+++ b/web-player/src/lib/components/TabsBar.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/state';
-	import { isSectionActive, appNavLinks } from '$lib/navigation.svelte';
+	import { isSectionActive, appNavLinks } from '$lib/state/navigation.svelte';
 	import type { SessionUser } from '$lib/types';
 
 	interface Props {
diff --git a/web-player/src/lib/components/TopBar.svelte b/web-player/src/lib/components/TopBar.svelte
index 114963d..f5147bf 100644
--- a/web-player/src/lib/components/TopBar.svelte
+++ b/web-player/src/lib/components/TopBar.svelte
@@ -3,7 +3,7 @@
 	import { page } from '$app/state';
 	import type { SessionUser } from '$lib/types';
 	import { SEARCH_DEBOUNCE_MS, SEARCH_MIN_LENGTH } from '$lib/config';
-	import { searchHref } from '$lib/navigation.svelte';
+	import { searchHref } from '$lib/state/navigation.svelte';
 	import Search from '@lucide/svelte/icons/search';
 	import X from '@lucide/svelte/icons/x';
 	import ChevronLeft from '@lucide/svelte/icons/chevron-left';
diff --git a/web-player/src/lib/components/ui/BackLink.svelte b/web-player/src/lib/components/ui/BackLink.svelte
index 6a5a614..2143aa2 100644
--- a/web-player/src/lib/components/ui/BackLink.svelte
+++ b/web-player/src/lib/components/ui/BackLink.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import ArrowLeft from '@lucide/svelte/icons/arrow-left';
-	import { previousPage } from '$lib/navigation.svelte';
+	import { previousPage } from '$lib/state/navigation.svelte';
 
 	interface Props {
 		href: string;
diff --git a/web-player/src/lib/player/queuePanel.svelte.ts b/web-player/src/lib/player/queuePanel.svelte.ts
index 78da1f2..1213a88 100644
--- a/web-player/src/lib/player/queuePanel.svelte.ts
+++ b/web-player/src/lib/player/queuePanel.svelte.ts
@@ -1,3 +1,3 @@
-import { createToggle } from '../toggle.svelte';
+import { createToggle } from '../state/toggle.svelte';
 
 export const queuePanel = createToggle();
diff --git a/web-player/src/lib/state/menus.svelte.ts b/web-player/src/lib/state/menus.svelte.ts
new file mode 100644
index 0000000..c2959b0
--- /dev/null
+++ b/web-player/src/lib/state/menus.svelte.ts
@@ -0,0 +1,25 @@
+import { contextMenuPosition, type MenuPosition } from '$lib/components/ui/ContextMenu.svelte';
+import { player, toQueueItem, type ApiTrackLike } from '../player/player.svelte';
+
+export type TrackMenuState = { track: ApiTrackLike } & MenuPosition;
+
+export function createTrackMenu() {
+	let state = $state<TrackMenuState | null>(null);
+
+	return {
+		get state() {
+			return state;
+		},
+		open(event: MouseEvent, track: ApiTrackLike) {
+			state = { track, ...contextMenuPosition(event) };
+		},
+		close() {
+			state = null;
+		},
+		playNext() {
+			if (!state) return;
+			player.playNextItem(toQueueItem(state.track));
+			state = null;
+		}
+	};
+}
diff --git a/web-player/src/lib/state/navigation.svelte.ts b/web-player/src/lib/state/navigation.svelte.ts
new file mode 100644
index 0000000..0d32598
--- /dev/null
+++ b/web-player/src/lib/state/navigation.svelte.ts
@@ -0,0 +1,101 @@
+import { afterNavigate } from '$app/navigation';
+import type { LucideIcon } from '@lucide/svelte';
+import Home from '@lucide/svelte/icons/house';
+import Compass from '@lucide/svelte/icons/compass';
+import ListMusic from '@lucide/svelte/icons/list-music';
+import Heart from '@lucide/svelte/icons/heart';
+import Disc from '@lucide/svelte/icons/disc-2';
+import Folder from '@lucide/svelte/icons/folder';
+import Upload from '@lucide/svelte/icons/upload';
+import type { SessionUser } from '../types';
+
+const HISTORY_INDEX = 'sveltekit:history';
+
+const LABELS: [RegExp, string][] = [
+	[/^\/$/, 'Volver al inicio'],
+	[/^\/explore\/?$/, 'Volver a explorar'],
+	[/^\/playlists\/[^/]+/, 'Volver a la lista'],
+	[/^\/playlists\/?$/, 'Volver a tus listas'],
+	[/^\/albums\/[^/]+/, 'Volver al álbum'],
+	[/^\/albums\/?$/, 'Volver a tus álbumes'],
+	[/^\/library\/?$/, 'Volver a tus canciones'],
+	[/^\/upload\/?$/, 'Volver a subir música'],
+	[/^\/mixes\/[^/]+/, 'Volver a la mezcla']
+];
+
+export interface PageRef {
+	url: string;
+	label: string;
+}
+
+const visited = new Map<number, PageRef>();
+let index = $state(-1);
+
+function labelFor(pathname: string): string | null {
+	for (const [pattern, label] of LABELS) {
+		if (pattern.test(pathname)) return label;
+	}
+	return null;
+}
+
+function historyIndex(): number | null {
+	const value = history.state?.[HISTORY_INDEX];
+	return typeof value === 'number' ? value : null;
+}
+
+export function trackNavigation() {
+	afterNavigate((nav) => {
+		const at = historyIndex();
+		if (at === null) return;
+		const url = nav.to?.url;
+		const label = url ? labelFor(url.pathname) : null;
+		if (url && label) visited.set(at, { url: url.pathname + url.search, label });
+		else visited.delete(at);
+		index = at;
+	});
+}
+
+export function previousPage(): PageRef | null {
+	return visited.get(index - 1) ?? null;
+}
+
+export function isSectionActive(href: string, pathname: string, section?: string | null): boolean {
+	if (section !== undefined) return section === href;
+	return href === '/' ? pathname === '/' : pathname.startsWith(href);
+}
+
+export function searchHref(query: string): string {
+	return query ? `/explore?q=${encodeURIComponent(query)}` : '/explore';
+}
+
+export interface AppNavLink {
+	href: string;
+	label: string;
+	icon: LucideIcon;
+	count?: number;
+	primary: boolean;
+}
+
+export interface AppNavCounts {
+	playlists?: number;
+	liked?: number;
+}
+
+export function appNavLinks(user: SessionUser | null, counts: AppNavCounts = {}): AppNavLink[] {
+	if (!user) return [{ href: '/explore', label: 'Descubrir', icon: Compass, primary: true }];
+	return [
+		{ href: '/', label: 'Inicio', icon: Home, primary: true },
+		{ href: '/explore', label: 'Descubrir', icon: Compass, primary: true },
+		{
+			href: '/playlists',
+			label: 'Playlists',
+			icon: ListMusic,
+			count: counts.playlists,
+			primary: true
+		},
+		{ href: '/liked', label: 'Me gusta', icon: Heart, count: counts.liked, primary: true },
+		{ href: '/albums', label: 'Mis álbumes', icon: Disc, primary: false },
+		{ href: '/library', label: 'Canciones subidas', icon: Folder, primary: false },
+		{ href: '/upload', label: 'Subir música', icon: Upload, primary: false }
+	];
+}
diff --git a/web-player/src/lib/state/playlists.svelte.ts b/web-player/src/lib/state/playlists.svelte.ts
new file mode 100644
index 0000000..ef78ebd
--- /dev/null
+++ b/web-player/src/lib/state/playlists.svelte.ts
@@ -0,0 +1,3 @@
+import { createToggle } from './toggle.svelte';
+
+export const createPlaylistModal = createToggle();
diff --git a/web-player/src/lib/state/toggle.svelte.ts b/web-player/src/lib/state/toggle.svelte.ts
new file mode 100644
index 0000000..bee2e96
--- /dev/null
+++ b/web-player/src/lib/state/toggle.svelte.ts
@@ -0,0 +1,18 @@
+export function createToggle(initial = false) {
+	let open = $state(initial);
+
+	return {
+		get open() {
+			return open;
+		},
+		show() {
+			open = true;
+		},
+		close() {
+			open = false;
+		},
+		toggle() {
+			open = !open;
+		}
+	};
+}
diff --git a/web-player/src/routes/(app)/explore/+page.svelte b/web-player/src/routes/(app)/explore/+page.svelte
index b5ed32e..3e896c2 100644
--- a/web-player/src/routes/(app)/explore/+page.svelte
+++ b/web-player/src/routes/(app)/explore/+page.svelte
@@ -16,8 +16,8 @@
 	import Chip from '$lib/components/ui/Chip.svelte';
 	import SectionHeading from '$lib/components/ui/SectionHeading.svelte';
 	import { EXPLORE_PAGE_SIZE } from '$lib/config';
-	import { searchHref } from '$lib/navigation.svelte';
-	import { createTrackMenu } from '$lib/menus.svelte';
+	import { searchHref } from '$lib/state/navigation.svelte';
+	import { createTrackMenu } from '$lib/state/menus.svelte';
 	import ContextMenu, { contextMenuPosition } from '$lib/components/ui/ContextMenu.svelte';
 	import ListPlus from '@lucide/svelte/icons/list-plus';
 	import ListEnd from '@lucide/svelte/icons/list-end';
diff --git a/web-player/src/routes/(app)/mixes/[id]/+page.svelte b/web-player/src/routes/(app)/mixes/[id]/+page.svelte
index 41c417b..b49981b 100644
--- a/web-player/src/routes/(app)/mixes/[id]/+page.svelte
+++ b/web-player/src/routes/(app)/mixes/[id]/+page.svelte
@@ -19,7 +19,7 @@
 	import TrackList from '$lib/components/ui/TrackList.svelte';
 	import ContextMenu from '$lib/components/ui/ContextMenu.svelte';
 	import ListPlus from '@lucide/svelte/icons/list-plus';
-	import { createTrackMenu } from '$lib/menus.svelte';
+	import { createTrackMenu } from '$lib/state/menus.svelte';
 	import { mixItemTrack } from '$lib/mixes';
 
 	let { data, form } = $props();
diff --git a/web-player/src/routes/(app)/playlists/+page.svelte b/web-player/src/routes/(app)/playlists/+page.svelte
index 97a64d4..c40795b 100644
--- a/web-player/src/routes/(app)/playlists/+page.svelte
+++ b/web-player/src/routes/(app)/playlists/+page.svelte
@@ -5,7 +5,7 @@
 	import MediaCard from '$lib/components/ui/MediaCard.svelte';
 	import EmptyState from '$lib/components/ui/EmptyState.svelte';
 	import Button from '$lib/components/ui/Button.svelte';
-	import { createPlaylistModal } from '$lib/playlists.svelte';
+	import { createPlaylistModal } from '$lib/state/playlists.svelte';
 	import { fmtDurationLong, plural, playlistMeta } from '$lib/format';
 
 	let { data } = $props();
diff --git a/web-player/src/routes/+layout.svelte b/web-player/src/routes/+layout.svelte
index 5ef2834..41bbae9 100644
--- a/web-player/src/routes/+layout.svelte
+++ b/web-player/src/routes/+layout.svelte
@@ -14,11 +14,11 @@
 	import { player } from '$lib/player/player.svelte';
 	import { queuePanel } from '$lib/player/queuePanel.svelte';
 	import { liked } from '$lib/player/liked.svelte';
-	import { createPlaylistModal } from '$lib/playlists.svelte';
+	import { createPlaylistModal } from '$lib/state/playlists.svelte';
 	import { ACCENT_HUE } from '$lib/theme/color';
 	import { buildThemeTokens, applyThemeTokens, tokensToCss } from '$lib/theme/tokens';
 	import { themeMode } from '$lib/theme/mode.svelte';
-	import { trackNavigation } from '$lib/navigation.svelte';
+	import { trackNavigation } from '$lib/state/navigation.svelte';
 	import { page } from '$app/state';
 
 	let { children, data } = $props();
diff --git a/web-player/src/routes/+page.svelte b/web-player/src/routes/+page.svelte
index 391eb5f..a3f0da3 100644
--- a/web-player/src/routes/+page.svelte
+++ b/web-player/src/routes/+page.svelte
@@ -26,7 +26,7 @@
 	import Button from '$lib/components/ui/Button.svelte';
 	import ContextMenu from '$lib/components/ui/ContextMenu.svelte';
 	import ListPlus from '@lucide/svelte/icons/list-plus';
-	import { createTrackMenu } from '$lib/menus.svelte';
+	import { createTrackMenu } from '$lib/state/menus.svelte';
 	import { HOME_CONTINUE_LIMIT, HOME_POPULAR_MAX } from '$lib/config';
 
 	let { data } = $props();