Admin
e4b0ce3df0
PlayerExtras se fusiona en PlayerBar, que ahora renderiza volumen y botón de cola inline y usa el nuevo Slider (input range real con grosor de thumb controlado por variables CSS) para barra de progreso y volumen, sustituyendo a SeekBar y VolumeControl (se confirmó por grep que el modo `compact` de SeekBar era código muerto). Sidebar y TabsBar migran a appNavLinks(user, counts?) (creado en P5), eliminando la duplicación de los enlaces de navegación entre ambos. Decisión tomada sin bloquear: Sidebar gana la marca-gradiente Logo que no tenía antes, para consistencia visual con MobileHeader y la pantalla de login. z-index de PlayerDock y MobileHeader corregido a z-(--z-sticky) (son barras fijas, no menús) y el de SegmentedControl a z-(--z-raised), tal como indica la nota B.1.5 del plan. glass-bar y theme-transition se aplican en PlayerBar (ambas variantes), TabsBar, Queue e Inicio (hero/spotlight), sustituyendo estilos duplicados de blur/transición. Verificado con npm run check (0 errores) y npm run build; smoke test de /login sin errores de consola. Sin QA visual autenticada (Docker no disponible en esta sesión).
51 lines
1.5 KiB
Svelte
51 lines
1.5 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';
|
|
import Logo from './ui/Logo.svelte';
|
|
|
|
interface Props {
|
|
user: SessionUser | null;
|
|
accountUrl?: string | null;
|
|
}
|
|
|
|
let { user, accountUrl }: Props = $props();
|
|
</script>
|
|
|
|
<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"
|
|
>
|
|
<a href="/">
|
|
<Logo size="sm" />
|
|
</a>
|
|
|
|
{#if user}
|
|
<AccountMenu {user} {accountUrl} width="md">
|
|
{#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}
|
|
</header>
|