Address various different fixes regarding search UI experience.

This commit is contained in:
xNinjaKittyx
2025-12-14 00:10:38 +00:00
parent 53091e7204
commit a098b172ca
9 changed files with 4278 additions and 4199 deletions

View File

@@ -1,7 +1,7 @@
<script lang="ts">
import { Button } from '$lib/components/ui/button/index.js';
import * as Card from '$lib/components/ui/card/index.js';
import { ImageOff } from 'lucide-svelte';
import { ImageOff, LoaderCircle } from 'lucide-svelte';
import { goto, invalidateAll } from '$app/navigation';
import { resolve } from '$app/paths';
import type { components } from '$lib/api/api';
@@ -76,17 +76,29 @@
{/if}
</Card.Content>
<Card.Footer class="flex flex-col items-start gap-2 rounded-b-lg border-t bg-card p-4">
<Button
class="w-full font-semibold"
disabled={result.added || loading}
onclick={() => addMedia()}
>
{#if loading}
<span class="animate-pulse">Loading...</span>
{:else}
{result.added ? 'Show already exists' : `Add ${isShow ? 'Show' : 'Movie'}`}
{/if}
</Button>
{#if result.added}
<Button
class="w-full font-semibold"
variant="secondary"
href={resolve(isShow ? '/dashboard/tv/[showId]' : '/dashboard/movies/[movieId]',
isShow ? { showId: result.id ?? '' } : { movieId: result.id ?? '' })}
>
{isShow ? 'Show already exists' : 'Movie already exists'}
</Button>
{:else}
<Button
class="w-full font-semibold"
disabled={loading}
onclick={() => addMedia()}
>
{#if loading}
<LoaderCircle class="mr-2 h-4 w-4 animate-spin" />
<span class="animate-pulse">Loading...</span>
{:else}
{`Add ${isShow ? 'Show' : 'Movie'}`}
{/if}
</Button>
{/if}
<div class="flex w-full items-center gap-2">
{#if result.vote_average != null}
<span class="flex items-center text-sm font-medium text-yellow-600">

View File

@@ -4,7 +4,7 @@
import { type VariantProps, tv } from 'tailwind-variants';
export const buttonVariants = tv({
base: 'focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
base: 'focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer',
variants: {
variant: {
default: 'bg-primary text-primary-foreground hover:bg-primary/90 shadow',