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

web-player: consistent imports, tokens, glossary and app route grouping

Browse Source
This commit is contained in:
Admin
2026-09-24 11:52:57 +02:00
parent 1a2ae37f49
commit 975fa7e4fd
32 changed files with 71 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web-player/src/lib/components/ui/forms/AlbumForm.svelte
+3 -3
View File
@@ -2,9 +2,9 @@
import { untrack } from 'svelte';
import Disc3 from '@lucide/svelte/icons/disc-3';
import CoverForm from './CoverForm.svelte';
import Field from '../primitives/Field.svelte';
import Input from '../primitives/Input.svelte';
import Textarea from '../primitives/Textarea.svelte';
import Field from '$lib/components/ui/primitives/Field.svelte';
import Input from '$lib/components/ui/primitives/Input.svelte';
import Textarea from '$lib/components/ui/primitives/Textarea.svelte';
import { ALBUM_EARLIEST_YEAR, LIMITS } from '$lib/validation';
interface Props {
web-player/src/lib/components/ui/forms/CoverForm.svelte
+3 -3
View File
@@ -3,9 +3,9 @@
import { enhance } from '$app/forms';
import type { LucideIcon } from '@lucide/svelte';
import ImageDropzone from './ImageDropzone.svelte';
import Button from '../primitives/Button.svelte';
import Field from '../primitives/Field.svelte';
import Alert from '../primitives/Alert.svelte';
import Button from '$lib/components/ui/primitives/Button.svelte';
import Field from '$lib/components/ui/primitives/Field.svelte';
import Alert from '$lib/components/ui/primitives/Alert.svelte';
interface Props {
action: string;
web-player/src/lib/components/ui/forms/PlaylistForm.svelte
+4 -4
View File
@@ -2,10 +2,10 @@
import { untrack } from 'svelte';
import Music from '@lucide/svelte/icons/music';
import CoverForm from './CoverForm.svelte';
import Field from '../primitives/Field.svelte';
import Input from '../primitives/Input.svelte';
import Textarea from '../primitives/Textarea.svelte';
import SegmentedControl from '../primitives/SegmentedControl.svelte';
import Field from '$lib/components/ui/primitives/Field.svelte';
import Input from '$lib/components/ui/primitives/Input.svelte';
import Textarea from '$lib/components/ui/primitives/Textarea.svelte';
import SegmentedControl from '$lib/components/ui/primitives/SegmentedControl.svelte';
import { LIMITS } from '$lib/validation';
web-player/src/lib/components/ui/media/FollowButton.svelte
+1 -1
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import { untrack } from 'svelte';
import { enhance } from '$app/forms';
import Button from '../primitives/Button.svelte';
import Button from '$lib/components/ui/primitives/Button.svelte';
interface Props {
following: boolean;
web-player/src/lib/components/ui/media/PlayAllButton.svelte
+1 -1
View File
@@ -2,7 +2,7 @@
import { player } from '$lib/player/player.svelte';
import { isQueueCurrent, playAllOrToggle } from '$lib/player/actions';
import type { Track } from '$lib/types';
import Button from '../primitives/Button.svelte';
import Button from '$lib/components/ui/primitives/Button.svelte';
interface Props {
items: Track[];
web-player/src/lib/components/ui/media/TrackList.svelte
+2 -2
View File
@@ -27,7 +27,7 @@
import { pressable } from '$lib/actions/pressable';
import MediaIdentity from './MediaIdentity.svelte';
import EqBars from './EqBars.svelte';
import IconButton from '../primitives/IconButton.svelte';
import IconButton from '$lib/components/ui/primitives/IconButton.svelte';
interface RowAction {
action?: string;
@@ -86,7 +86,7 @@
style="--mf-track-cols:{gridColumns}; --mf-track-cols-mobile:{gridColumnsMobile}"
>
{#if index}
<Hash size={16} />
<Hash class="size-icon-sm" />
{/if}
<span>Título</span>
{#each columns as column (column)}
web-player/src/lib/components/ui/overlay/AccountMenu.svelte
+1 -1
View File
@@ -11,7 +11,7 @@
import { themeMode } from '$lib/theme/mode.svelte';
import { clickOutside } from '$lib/actions/clickOutside';
import { onEscape } from '$lib/actions/onEscape';
import Avatar from '../media/Avatar.svelte';
import Avatar from '$lib/components/ui/media/Avatar.svelte';
interface Props {
user: SessionUser;
web-player/src/lib/components/ui/overlay/ConfirmDialog.svelte
+1 -1
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import Dialog from './Dialog.svelte';
import Button from '../primitives/Button.svelte';
import Button from '$lib/components/ui/primitives/Button.svelte';
interface Props {
open: boolean;
web-player/src/lib/components/ui/overlay/ContextMenu.svelte
+1 -1
View File
@@ -4,7 +4,7 @@
import { playlistCover } from '$lib/utils/hrefs';
import type { LucideIcon } from '@lucide/svelte';
import ChevronRight from '@lucide/svelte/icons/chevron-right';
import MediaIdentity from '../media/MediaIdentity.svelte';
import MediaIdentity from '$lib/components/ui/media/MediaIdentity.svelte';
import GlassMenu from './GlassMenu.svelte';
import MenuItem from './MenuItem.svelte';
web-player/src/lib/components/ui/overlay/DialogHost.svelte
+1 -1
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import Dialog from './Dialog.svelte';
import Button from '../primitives/Button.svelte';
import Button from '$lib/components/ui/primitives/Button.svelte';
import { dialog, type DialogAction, type DialogOptions } from '$lib/state/dialog.svelte';
// Keep the last dialog's content so the exit transition doesn't render an empty panel.
web-player/src/lib/components/ui/overlay/Modal.svelte
+2 -2
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import type { Snippet } from 'svelte';
import X from '@lucide/svelte/icons/x';
import IconButton from '../primitives/IconButton.svelte';
import IconButton from '$lib/components/ui/primitives/IconButton.svelte';
import { fade } from 'svelte/transition';
import { pop } from '$lib/utils/transitions';
import { onEscape } from '$lib/actions/onEscape';
@@ -96,7 +96,7 @@
</h2>
</div>
<IconButton label="Cerrar" onclick={onClose} class="shrink-0">
<X class="size-4" />
<X class="size-icon-sm" />
</IconButton>
</div>
{/if}
web-player/src/lib/components/ui/primitives/Button.svelte
+4 -4
View File
@@ -28,13 +28,13 @@
children
}: Props = $props();
const sizes = {
const SIZE = {
sm: 'rounded-control px-4 py-2 text-xs',
md: 'rounded-btn-sm px-4.5 py-2.5 text-control-sm',
lg: 'rounded-btn px-6 py-3.5 text-sm'
};
const variants = {
const VARIANT = {
primary: 'bg-cta-strong text-ink hover:bg-cta-strong-hover',
secondary: 'bg-btn text-fg hover:bg-btn-hover',
accent: 'surface-active text-accent-soft hover:surface-active-hover',
@@ -42,7 +42,7 @@
};
const classes = $derived(
`inline-flex items-center justify-center gap-2 font-medium btn-transition focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg focus-visible:outline-none disabled:opacity-40 ${sizes[size]} ${variants[variant]} ${klass}`
`inline-flex items-center justify-center gap-2 font-medium btn-transition focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg disabled:opacity-40 ${SIZE[size]} ${VARIANT[variant]} ${klass}`
);
</script>
@@ -57,7 +57,7 @@
class={classes}
>
{#if loading && !href}
<LoaderCircle class="size-4 animate-spin" />
<LoaderCircle class="size-icon-sm animate-spin" />
{/if}
{@render children()}
</svelte:element>
web-player/src/lib/components/ui/primitives/Checkbox.svelte
+1 -1
View File
@@ -21,7 +21,7 @@
class="peer size-5 cursor-pointer appearance-none rounded-tag border border-line bg-surface transition checked:border-accent-soft checked:bg-accent-soft focus-visible:border-accent/60 focus-visible:outline-none"
/>
<Check
class="pointer-events-none absolute size-3.5 text-ink opacity-0 transition peer-checked:opacity-100"
class="pointer-events-none absolute size-icon-xs text-ink opacity-0 transition peer-checked:opacity-100"
/>
</span>
<span class="cursor-pointer">{@render children()}</span>
web-player/src/lib/components/ui/primitives/Chip.svelte
+2 -2
View File
@@ -14,8 +14,8 @@
const classes = $derived(
href
? 'rounded-full border border-line-strong px-3.5 py-2 text-xs text-fg-2 transition-colors hover:bg-hover hover:text-fg'
: `flex items-center gap-2 rounded-full px-3.5 py-2 text-xs font-medium transition ${
? 'focus-ring rounded-full border border-line-strong px-3.5 py-2 text-xs text-fg-2 transition-colors hover:bg-hover hover:text-fg'
: `focus-ring flex items-center gap-2 rounded-full px-3.5 py-2 text-xs font-medium transition ${
selected ? 'bg-cta-strong text-ink' : 'bg-btn text-fg-2 hover:bg-btn-hover hover:text-fg'
} ${disabled ? 'cursor-not-allowed opacity-40' : ''}`
);
web-player/src/lib/components/ui/primitives/IconButton.svelte
+1 -1
View File
@@ -45,7 +45,7 @@
);
const classes = $derived(
`grid place-items-center transition focus-visible:ring-2 focus-visible:ring-accent focus-visible:outline-none ${SIZE[size]} ${shape === 'round' ? 'rounded-full' : 'rounded-control'} ${pressed ? 'text-accent' : 'text-fg-2 hover:text-fg'} ${background} ${
`grid place-items-center transition focus-ring ${SIZE[size]} ${shape === 'round' ? 'rounded-full' : 'rounded-control'} ${pressed ? 'text-accent' : 'text-fg-2 hover:text-fg'} ${background} ${
revealOnHover ? 'sm:opacity-0 sm:group-hover:opacity-100 sm:focus-visible:opacity-100' : ''
} ${klass}`
);