NotS1mp/Musify
0
0
Fork 0
Code Issues 23 Pull Requests Actions Packages Projects Releases Wiki Activity

Move rune-based state modules into lib/state

Browse Source
This commit is contained in:
Admin
2026-09-22 14:09:36 +02:00
parent 63018a7c72
commit a985ff4fb3
14 changed files with 160 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web-player/src/lib/components/Sidebar.svelte
+2 -2
View File
@@ -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';
web-player/src/lib/components/TabsBar.svelte
+1 -1
View File
@@ -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 {
web-player/src/lib/components/TopBar.svelte
+1 -1
View File
@@ -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';
web-player/src/lib/components/ui/BackLink.svelte
+1 -1
View File
@@ -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;
web-player/src/lib/player/queuePanel.svelte.ts
+1 -1
View File
@@ -1,3 +1,3 @@
import { createToggle } from '../toggle.svelte';
import { createToggle } from '../state/toggle.svelte';
export const queuePanel = createToggle();
web-player/src/lib/state/menus.svelte.ts
+25
View File
@@ -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;
}
};
}
web-player/src/lib/state/navigation.svelte.ts
+101
View File
@@ -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 }
];
}
web-player/src/lib/state/playlists.svelte.ts
+3
View File
@@ -0,0 +1,3 @@
import { createToggle } from './toggle.svelte';
export const createPlaylistModal = createToggle();
web-player/src/lib/state/toggle.svelte.ts
+18
View File
@@ -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;
}
};
}
web-player/src/routes/(app)/explore/+page.svelte
+2 -2
View File
@@ -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';
web-player/src/routes/(app)/mixes/[id]/+page.svelte
+1 -1
View File
@@ -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();
web-player/src/routes/(app)/playlists/+page.svelte
+1 -1
View File
@@ -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();
web-player/src/routes/+layout.svelte
+2 -2
View File
@@ -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();
web-player/src/routes/+page.svelte
+1 -1
View File
@@ -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();