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

Web Player Refactor #2

Merged
NotS1mp merged 50 commits from web-player-ref into master 2026-09-23 15:05:12 +00:00
Conversation 0 Commits 50 Files Changed 115
+7 -11
4 changed files with 7 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 3d51f08e0b - Show all commits
web-player/src/lib/components/layout/MobileHeader.svelte
+1 -1
View File
@@ -18,7 +18,7 @@
</script> </script>
<header <header
class="sticky top-0 z-(--z-sticky) flex h-14 items-center justify-between border-b border-hairline bg-bg/85 page-x backdrop-blur-md sm:hidden" class="sticky top-0 z-(--z-sticky) flex h-14 items-center justify-between bg-transparent page-x backdrop-blur-md sm:hidden"
> >
<a href="/"> <a href="/">
<Logo size="sm" /> <Logo size="sm" />
web-player/src/lib/components/layout/Sidebar.svelte
+5
View File
@@ -7,6 +7,7 @@
import ListRow from '../ui/media/ListRow.svelte'; import ListRow from '../ui/media/ListRow.svelte';
import IconButton from '../ui/primitives/IconButton.svelte'; import IconButton from '../ui/primitives/IconButton.svelte';
import Plus from '@lucide/svelte/icons/plus'; import Plus from '@lucide/svelte/icons/plus';
import Logo from '../ui/primitives/Logo.svelte';
interface SidebarPlaylist { interface SidebarPlaylist {
id: string; id: string;
@@ -33,6 +34,10 @@
class="hidden shrink-0 flex-col border-r border-hairline p-5 lg:flex" class="hidden shrink-0 flex-col border-r border-hairline p-5 lg:flex"
style="width:var(--mf-sidebar-w)" style="width:var(--mf-sidebar-w)"
> >
<a href="/" class="mb-4">
<Logo size="sm" />
</a>
<nav class="flex flex-col gap-1"> <nav class="flex flex-col gap-1">
{#each navLinks as link (link.href)} {#each navLinks as link (link.href)}
{@const active = isActive(link.href)} {@const active = isActive(link.href)}
web-player/src/lib/components/ui/primitives/Logo.svelte
+1 -9
View File
@@ -5,18 +5,10 @@
let { size = 'sm' }: Props = $props(); let { size = 'sm' }: Props = $props();
const MARK: Record<'sm' | 'lg', string> = {
sm: 'size-5.5 rounded-thumb',
lg: 'size-8 rounded-control'
};
const TEXT: Record<'sm' | 'lg', string> = { const TEXT: Record<'sm' | 'lg', string> = {
sm: 'font-display text-lg font-semibold tracking-tight text-fg', sm: 'font-display text-lg font-semibold tracking-tight text-fg',
lg: 'font-display text-[clamp(1.5rem,3vw,2.5rem)] font-semibold tracking-tight' lg: 'font-display text-[clamp(1.5rem,3vw,2.5rem)] font-semibold tracking-tight'
}; };
</script> </script>
<span class="flex items-center gap-3"> <span class={TEXT[size]}>Musify</span>
<span class="{MARK[size]} bg-(image:--mf-logo-grad)"></span>
<span class={TEXT[size]}>Musify</span>
</span>
web-player/src/lib/theme/tokens.ts
-1
View File
@@ -63,7 +63,6 @@ export function buildThemeTokens(hue: number, mode: 'dark' | 'light' = 'dark'):
'--mf-spotlight-bg': light '--mf-spotlight-bg': light
? `linear-gradient(120deg, ${glow(0.9, 0.04, 0.55)}, ${glow(0.96, 0.02, 0.35)} 55%)` ? `linear-gradient(120deg, ${glow(0.9, 0.04, 0.55)}, ${glow(0.96, 0.02, 0.35)} 55%)`
: `linear-gradient(120deg, ${glow(0.22, 0.04, 0.5)}, ${glow(0.13, 0.02, 0.3)} 55%, ${glow(0.11, 0.015, 0.2)})`, : `linear-gradient(120deg, ${glow(0.22, 0.04, 0.5)}, ${glow(0.13, 0.02, 0.3)} 55%, ${glow(0.11, 0.015, 0.2)})`,
'--mf-logo-grad': `linear-gradient(${accent}, ${accent})`,
'--mf-cover-grad': light '--mf-cover-grad': light
? `linear-gradient(150deg, oklch(0.84 0.03 ${H}), oklch(0.74 0.02 ${H}))` ? `linear-gradient(150deg, oklch(0.84 0.03 ${H}), oklch(0.74 0.02 ${H}))`
: `linear-gradient(150deg, oklch(0.34 0.03 ${H}), oklch(0.18 0.015 ${H}))` : `linear-gradient(150deg, oklch(0.34 0.03 ${H}), oklch(0.18 0.015 ${H}))`