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

Changes

Browse Source
This commit is contained in:
Admin
2026-07-20 16:36:18 +02:00
parent ca24632fac
commit 7c62f8a8e8
5 changed files with 62 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web-player/src/lib/components/MobileHeader.svelte
+13 -24
View File
@@ -3,6 +3,7 @@
import Upload from '@lucide/svelte/icons/upload';
import Folder from '@lucide/svelte/icons/folder';
import LogOut from '@lucide/svelte/icons/log-out';
import MenuItem from './ui/MenuItem.svelte';
interface Props {
user: SessionUser;
@@ -34,9 +35,7 @@
{#if user.picture}
<img src={user.picture} alt="" class="h-9 w-9 rounded-full object-cover" />
{:else}
<span
class="grid h-9 w-9 place-items-center rounded-full bg-surface-2 text-sm font-semibold uppercase"
>
<span class="grid h-9 w-9 place-items-center rounded-full bg-surface-2 text-sm uppercase">
{user.name.charAt(0)}
</span>
{/if}
@@ -44,33 +43,23 @@
{#if menuOpen}
<div
class="animate-pop absolute top-full right-0 mt-2 w-56 overflow-hidden rounded-panel border border-line bg-elevated py-1.5 shadow-menu"
class="animate-pop absolute top-full right-0 mt-2 w-56 overflow-hidden rounded-panel border border-line bg-elevated p-1.5 shadow-menu"
>
<a
<MenuItem
icon={Folder}
label="Canciones subidas"
href="/library"
onclick={() => (menuOpen = false)}
class="flex w-full items-center gap-3 px-3 py-2.5 text-base font-semibold text-fg-2 transition hover:bg-hover"
>
<Folder class="h-[18px] w-[18px]" strokeWidth={2} />
Canciones subidas
</a>
<a
/>
<MenuItem
icon={Upload}
label="Subir música"
href="/upload"
onclick={() => (menuOpen = false)}
class="flex w-full items-center gap-3 px-3 py-2.5 text-base font-semibold text-fg-2 transition hover:bg-hover"
>
<Upload class="h-[18px] w-[18px]" strokeWidth={2} />
Subir música
</a>
<div class="my-1.5 border-t border-line"></div>
/>
<div class="-mx-1.5 my-1.5 border-t border-line"></div>
<form method="POST" action="/logout" data-sveltekit-reload>
<button
type="submit"
class="flex w-full items-center gap-3 px-3 py-2.5 text-base font-semibold text-fg-2 transition hover:bg-hover"
>
<LogOut class="h-[18px] w-[18px]" strokeWidth={2} />
Salir
</button>
<MenuItem icon={LogOut} label="Salir" type="submit" />
</form>
</div>
{/if}
web-player/src/lib/components/Sidebar.svelte
+4 -9
View File
@@ -7,6 +7,7 @@
import Music from '@lucide/svelte/icons/music';
import Upload from '@lucide/svelte/icons/upload';
import LogOut from '@lucide/svelte/icons/log-out';
import MenuItem from './ui/MenuItem.svelte';
interface Props {
user: SessionUser;
@@ -108,16 +109,10 @@
<div class="relative mt-auto" bind:this={menuRef}>
{#if menuOpen}
<div
class="absolute bottom-full left-0 mb-2 w-full overflow-hidden rounded-panel border border-line bg-elevated py-1.5 shadow-menu"
class="animate-pop absolute bottom-full left-0 mb-2 w-full overflow-hidden rounded-panel border border-line bg-elevated p-1.5 shadow-menu"
>
<form method="POST" action="/logout" data-sveltekit-reload>
<button
type="submit"
class="flex w-full items-center gap-3 px-3 py-2.5 text-base font-semibold text-fg-2 transition hover:bg-hover"
>
<LogOut class="h-4.5 w-4.5" strokeWidth={2} />
Salir
</button>
<MenuItem icon={LogOut} label="Salir" type="submit" />
</form>
</div>
{/if}
@@ -135,7 +130,7 @@
{user.name.charAt(0)}
</span>
{/if}
<span class="truncate text-base leading-[1.35] font-semibold">{user.name}</span>
<span class="truncate leading-[1.35]">{user.name}</span>
</button>
</div>
</aside>
web-player/src/lib/components/TrackContextMenu.svelte
+3 -3
View File
@@ -58,7 +58,7 @@
onclick={onAddToQueue}
class="flex w-full items-center gap-3 rounded-control px-2 py-2.5 text-left text-sm text-fg-2 transition hover:bg-hover"
>
<ListPlus class="h-6 w-6 shrink-0" strokeWidth={2} />
<ListPlus class="h-5 w-5 shrink-0" strokeWidth={2} />
<span class="text-base">Reproducir a continuación</span>
</button>
{#if playlists.length > 0}
@@ -107,9 +107,9 @@
trackIds={[]}
hue={hueFor(playlist.id)}
size="small"
class="h-8 w-8 shrink-0 rounded-control"
class="h-9 w-9 shrink-0 rounded-control"
/>
<span class="truncate text-base text-fg-2">{playlist.name}</span>
<span class="truncate text-fg-2">{playlist.name}</span>
</button>
</form>
{/each}
web-player/src/lib/components/ui/MenuItem.svelte
+39
View File
@@ -0,0 +1,39 @@
<script lang="ts">
import type { LucideIcon } from '@lucide/svelte';
interface Props {
icon: LucideIcon;
label: string;
href?: string;
type?: 'button' | 'submit';
reload?: boolean;
onclick?: (event: MouseEvent) => void;
class?: string;
}
let {
icon: Icon,
label,
href,
type = 'button',
reload = false,
onclick,
class: klass = ''
}: Props = $props();
const classes = $derived(
`flex w-full items-center gap-3 rounded-control px-2 py-2.5 text-left text-base text-fg-2 transition hover:bg-hover ${klass}`
);
</script>
{#if href}
<a {href} data-sveltekit-reload={reload ? '' : undefined} {onclick} class={classes}>
<Icon class="h-6 w-6 shrink-0" strokeWidth={2} />
{label}
</a>
{:else}
<button {type} {onclick} class={classes}>
<Icon class="h-6 w-6 shrink-0" strokeWidth={2} />
{label}
</button>
{/if}