Admin
aa20e70671
Button: subtle variants (primary/secondary, left unchanged per the user's call), glass (formerly secondaryOnGlow, with its own font-normal), accent, strong (cta-strong/ink, replacing the `!` overrides on the Home hero), danger. Uses the --color-btn* tokens instead of bg-[var(--mf-btn-...)]. Radius unified to rounded-control. IconButton: adds shape (square/round), size (xs/sm/md/lg), tone (muted/subtle/plain), pressed (aria-pressed + text-accent), href/reload (links), surface (permanent background + hover to surface-hover instead of the generic `hover` alias, which matched surface-2 and gave no contrast). New PlayButton: a single place for the play/pause SVGs, strong/glass variants, as="span" for non-interactive overlays. Replaces TransportControls' main button, the MixTile overlay, and the "Top result" circle in Explore. Migrated to IconButton: close queue, "Create playlist" (Sidebar), Like (TrackInfo, with pressed), queue (PlayerExtras), back (TopBar), login (MobileHeader), and the row actions in tables (remove/add, size xs). BackLink uses size-icon-sm and drops a duplicate hover. Decision (not blocking): remove TopBar's decorative "forward" button and PlayerExtras' decorative AlignJustify icon (visually dead code). TransportControls' buttons (shuffle/prev/next/repeat) are deliberately left unmigrated: they currently have no background or hit-box of their own, and IconButton always applies a fixed-size box — migrating them would have added a visible hover pill that couldn't be verified without Docker this session. Verified with npm run check/build.
60 lines
1.7 KiB
Svelte
60 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import type { SessionUser } from '$lib/types';
|
|
import Upload from '@lucide/svelte/icons/upload';
|
|
import Folder from '@lucide/svelte/icons/folder';
|
|
import LogIn from '@lucide/svelte/icons/log-in';
|
|
import MenuItem from './ui/MenuItem.svelte';
|
|
import AccountMenu from './ui/AccountMenu.svelte';
|
|
import Avatar from './ui/Avatar.svelte';
|
|
import IconButton from './ui/IconButton.svelte';
|
|
|
|
interface Props {
|
|
user: SessionUser | null;
|
|
accountUrl?: string | null;
|
|
}
|
|
|
|
let { user, accountUrl }: Props = $props();
|
|
</script>
|
|
|
|
<header
|
|
class="sticky top-0 z-40 flex h-14 items-center justify-between border-b border-hairline bg-bg/85 page-x backdrop-blur-md sm:hidden"
|
|
>
|
|
<a
|
|
href="/"
|
|
class="flex items-center gap-2 font-display text-lg font-semibold tracking-[-0.02em] text-fg"
|
|
>
|
|
<span class="h-5.5 w-5.5 rounded-lg bg-[image:var(--mf-logo-grad)]"></span>
|
|
Musify
|
|
</a>
|
|
|
|
<div class="relative">
|
|
{#if user}
|
|
<AccountMenu
|
|
{user}
|
|
{accountUrl}
|
|
panelClass="absolute top-full right-0 mt-2 w-56 overflow-hidden"
|
|
>
|
|
{#snippet trigger({ toggle, open })}
|
|
<button
|
|
type="button"
|
|
onclick={toggle}
|
|
aria-label="Tu cuenta"
|
|
aria-expanded={open}
|
|
class="flex items-center rounded-full"
|
|
>
|
|
<Avatar name={user.name} src={user.picture} size="sm" />
|
|
</button>
|
|
{/snippet}
|
|
{#snippet extraItems({ close })}
|
|
<MenuItem icon={Folder} label="Canciones subidas" href="/library" onclick={close} />
|
|
<MenuItem icon={Upload} label="Subir música" href="/upload" onclick={close} />
|
|
{/snippet}
|
|
</AccountMenu>
|
|
{:else}
|
|
<IconButton href="/auth/login" reload label="Iniciar sesión" shape="round" size="md">
|
|
<LogIn class="size-icon-lg" strokeWidth={2} />
|
|
</IconButton>
|
|
{/if}
|
|
</div>
|
|
</header>
|