AdminandClaude Sonnet 5
ec54645dc8
Backend: - New Likes feature (toggle/get liked tracks) and endpoints - User follow/unfollow, listening stats, public user profile - Playlist visibility (public/private) support - Various auth and DTO/response adjustments to support the above Frontend (web-player): - New design system pass: theme tokens/mode (light/dark), glass menu, tabs bar, player dock/extras/queue components, mix tiles, artist link - New routes: Liked, public user profile (/u/[id]), likes API proxy - Search refactor: shared SearchBox component used by TopBar and MobileHeader (search now reachable on mobile), live results as you type instead of requiring Enter, dropped the "Buscando…" quick-result preview - Removed now-unused components (MobileNav, CoverBadge, MixBentoTile, PlayPauseOverlay, SuggestionsTable, userDirectory) - Design handoff reference docs added under web-player/design_handoff_musify_player and web-player/docs/design-system-refactor-plan.md Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
60 lines
1.1 KiB
Svelte
60 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import type { LucideIcon } from '@lucide/svelte';
|
|
|
|
interface Props {
|
|
value?: string;
|
|
id?: string;
|
|
name?: string;
|
|
type?: 'text' | 'search' | 'number';
|
|
min?: number;
|
|
max?: number;
|
|
placeholder?: string;
|
|
maxlength?: number;
|
|
required?: boolean;
|
|
autocomplete?: 'on' | 'off';
|
|
icon?: LucideIcon;
|
|
oninput?: (event: Event) => void;
|
|
class?: string;
|
|
}
|
|
|
|
let {
|
|
value = $bindable(''),
|
|
id,
|
|
name,
|
|
type = 'text',
|
|
min,
|
|
max,
|
|
placeholder,
|
|
maxlength,
|
|
required = false,
|
|
autocomplete = 'off',
|
|
icon: Icon,
|
|
oninput,
|
|
class: klass = ''
|
|
}: Props = $props();
|
|
</script>
|
|
|
|
<div class="relative w-full">
|
|
{#if Icon}
|
|
<span class="pointer-events-none absolute inset-y-0 left-4 grid place-items-center text-muted">
|
|
<Icon class="h-5 w-5" />
|
|
</span>
|
|
{/if}
|
|
<input
|
|
{id}
|
|
{name}
|
|
{type}
|
|
{min}
|
|
{max}
|
|
{placeholder}
|
|
{maxlength}
|
|
{required}
|
|
{autocomplete}
|
|
{oninput}
|
|
bind:value
|
|
class="w-full rounded-control bg-surface py-3 text-sm text-fg transition placeholder:text-muted focus:bg-surface-2 focus:outline-none {Icon
|
|
? 'pr-4 pl-11'
|
|
: 'px-4'} {klass}"
|
|
/>
|
|
</div>
|