fix: improve setup and search on tiny mobile displays

2026-04-20 04:42:04 +00:00 · 2025-07-18 02:28:09 +02:00 · 2025-07-18 02:28:09 +02:00 · 56c3d7359c
commit 56c3d7359c
parent 0ed81a4c07
5 changed files with 59 additions and 41 deletions
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
 	"name": "ui",
-	"version": "6.4.53",
+	"version": "6.4.54",
 	"license": "BUSL-1.1",
 	"private": true,
 	"packageManager": "pnpm@9.15.5",
--- a/src/lib/components/ui/toggle/index.ts
+++ b/src/lib/components/ui/toggle/index.ts
@ -6,13 +6,20 @@ export const toggleVariants = tv({
  base: 'hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50',
  variants: {
    variant: {
-      default: 'bg-transparent',
-      outline: 'border-input hover:bg-accent hover:text-accent-foreground border bg-transparent shadow-sm'
+      default: 'bg-primary text-primary-foreground select:bg-primary/70 shadow',
+      destructive: 'bg-destructive text-destructive-foreground select:bg-destructive/90 shadow-sm',
+      outline: 'border-input bg-background select:bg-accent select:text-accent-foreground border shadow-sm',
+      secondary: 'bg-secondary text-secondary-foreground select:bg-secondary/70 shadow-sm',
+      ghost: 'select:bg-secondary-foreground/30 select:text-accent-foreground',
+      link: 'text-primary underline-offset-4 select:underline'
    },
    size: {
-      default: 'h-9 px-3',
-      sm: 'h-8 px-2',
-      lg: 'h-10 px-3'
+      default: 'h-9 px-4 py-2',
+      sm: 'h-8 rounded-md px-3 text-xs',
+      xs: 'h-[1.6rem] rounded-sm px-2 text-xs',
+      lg: 'h-10 rounded-md px-8',
+      icon: 'h-9 w-9',
+      'icon-sm': 'h-[1.6rem] w-[1.6rem] rounded-sm text-xs'
    }
  },
  defaultVariants: {
--- a/src/routes/app/search/+page.svelte
+++ b/src/routes/app/search/+page.svelte
@ -1,5 +1,6 @@
 <script lang='ts'>
  import FileImage from 'lucide-svelte/icons/file-image'
+  import Settings from 'lucide-svelte/icons/settings'
  import Trash from 'lucide-svelte/icons/trash'
  import X from 'lucide-svelte/icons/x'
  import { onDestroy, tick } from 'svelte'
@ -18,9 +19,10 @@
  import { QueryCard, TraceCards } from '$lib/components/ui/cards'
  import { ComboBox } from '$lib/components/ui/combobox'
  import { Input, type FormInputEvent } from '$lib/components/ui/input'
+  import { Toggle } from '$lib/components/ui/toggle'
  import { client } from '$lib/modules/anilist'
  import { click, dragScroll } from '$lib/modules/navigate'
-  import { cn, debounce, sleep, traceAnime, type TraceAnime } from '$lib/utils'
+  import { breakpoints, cn, debounce, sleep, traceAnime, type TraceAnime } from '$lib/utils'

  // util

@ -228,12 +230,14 @@
  }

  const viewer = client.viewer
+
+  let pressed = false
 </script>

 <div class='flex flex-col h-full overflow-y-auto overflow-x-clip -ml-14 pl-14 z-20 min-w-0 grow pointer-events-none' use:dragScroll use:infiniteScroll>
  <div class='sticky top-0 z-20 px-2 sm:px-10 pointer-events-auto shrink-0 overflow-clip bg-black'>
    <div class='flex flex-wrap pt-5'>
-      <div class='grid items-center min-w-40 flex-1 md:basis-auto md:w-1/4 p-2'>
+      <div class='grid items-center min-w-44 flex-1 md:basis-auto md:w-1/4 p-2'>
        <div class='text-xl font-bold mb-1 ml-1'>
          Title
        </div>
@ -246,51 +250,53 @@
          <MagnifyingGlass class='h-4 w-4 shrink-0 opacity-50 absolute left-3 text-muted-foreground z-10 pointer-events-none' />
        </div>
      </div>
-      <div class='grid items-center min-w-40 flex-1 md:basis-auto md:w-1/4 p-2'>
+      <div class='grid items-center min-w-44 flex-1 md:basis-auto md:w-1/4 p-2'>
        <div class='text-xl font-bold mb-1 ml-1'>
-          Genre
+          Genres
        </div>
        <ComboBox items={genres} multiple={true} bind:value={search.genres} class='w-full' />
      </div>
-      <div class='grid items-center min-w-40 flex-1 md:basis-auto md:w-1/4 p-2'>
+      <div class='grid items-center min-w-44 flex-1 md:basis-auto md:w-1/4 p-2'>
        <div class='text-xl font-bold mb-1 ml-1'>
          Year
        </div>
        <ComboBox items={years} bind:value={search.years} class='w-full' />
      </div>
-      <div class='grid items-center min-w-40 flex-1 md:basis-auto md:w-1/4 p-2'>
+      <div class='grid items-center min-w-44 flex-1 md:basis-auto md:w-1/4 p-2'>
        <div class='text-xl font-bold mb-1 ml-1'>
          Season
        </div>
        <ComboBox items={seasons} bind:value={search.seasons} class='w-full' />
      </div>
-      <div class='grid items-center p-2 min-w-40 flex-1'>
+      <div class='grid items-center p-2 min-w-44 flex-1'>
        <div class='text-xl font-bold mb-1 ml-1'>
-          Format
+          Formats
        </div>
        <ComboBox items={formats} multiple={true} bind:value={search.formats} class='w-full' />
      </div>
-      <div class='grid items-center p-2 min-w-40 flex-1'>
-        <div class='text-xl font-bold mb-1 ml-1'>
-          Status
-        </div>
-        <ComboBox items={status} multiple={true} bind:value={search.status} class='w-full' />
-      </div>
-      <div class='grid items-center p-2 min-w-40 flex-1'>
-        <div class='text-xl font-bold mb-1 ml-1'>
-          Sort
-        </div>
-        <ComboBox items={sort} bind:value={search.sort} class='w-full' placeholder='Accuracy' />
-      </div>
-      {#if $viewer?.viewer?.id}
-        <div class='grid items-center p-2 min-w-36 flex-1'>
-          <div class='text-xl font-bold mb-1 ml-1 text-nowrap'>
-            My List
+      {#if pressed || $breakpoints.md}
+        <div class='grid items-center p-2 min-w-44 flex-1'>
+          <div class='text-xl font-bold mb-1 ml-1'>
+            Status
          </div>
-          <ComboBox items={onlist} bind:value={search.onList} class='w-full' placeholder='List' />
+          <ComboBox items={status} multiple={true} bind:value={search.status} class='w-full' />
        </div>
+        <div class='grid items-center p-2 min-w-44 flex-1'>
+          <div class='text-xl font-bold mb-1 ml-1'>
+            Sort
+          </div>
+          <ComboBox items={sort} bind:value={search.sort} class='w-full' placeholder='Accuracy' />
+        </div>
+        {#if $viewer?.viewer?.id}
+          <div class='grid items-center p-2 min-w-36 flex-1'>
+            <div class='text-xl font-bold mb-1 ml-1 text-nowrap'>
+              My List
+            </div>
+            <ComboBox items={onlist} bind:value={search.onList} class='w-full' placeholder='List' />
+          </div>
+        {/if}
      {/if}
-      <div class='w-auto p-2 gap-4 grid grid-cols-2 items-end'>
+      <div class='w-auto p-2 gap-4 flex items-end'>
        <Button variant='outline' size='icon' class='border-0'>
          <label for='search-image' class='contents'>
            <FileImage class='h-4 w-full cursor-pointer' />
@ -300,9 +306,12 @@
        <Button variant='outline' size='icon' on:click={clear} class='border-0'>
          <Trash class={cn('h-4 w-4', empty(search) ? 'text-muted-foreground opacity-50' : 'text-blue-400')} />
        </Button>
+        <Toggle variant='outline' size='icon' class='border-0 md:hidden' bind:pressed>
+          <Settings size={18} />
+        </Toggle>
      </div>
    </div>
-    <div class='flex flex-row flex-wrap mt-2 min-h-11 pb-3 px-1'>
+    <div class='flex flex-row flex-wrap mt-2 min-h-9 pb-1 px-1'>
      {#each list(search) as item (item)}
        <button class={cn(badgeVariants(), 'mx-1.5 my-1 group capitalize text-nowrap')} use:click={() => remove(item)}>
          {item}
--- a/src/routes/app/settings/+page.svelte
+++ b/src/routes/app/settings/+page.svelte
@ -30,20 +30,20 @@
  </SettingCard>

  <SettingCard class='md:flex-col md:items-start' title='Subtitle Dialogue Style Overrides' description={'Selectively override the default dialogue style for subtitles. This will not change the style of typesetting [Fancy 3D Signs and Songs].\n\nWarning: the heuristic used for deciding when to override the style is rather rough, and enabling this option can lead to incorrectly rendered subtitles.'}>
-    <ToggleGroup.Root type='single' bind:value={$settings.subtitleStyle} asChild let:builder>
+    <ToggleGroup.Root type='single' bind:value={$settings.subtitleStyle} asChild let:builder variant='ghost'>
      <div class='grid sm:grid-cols-2 gap-3' use:builder.action {...builder} on:keydown|capture|stopPropagation={navigate}>
        <ToggleGroup.Item value='none' class='h-auto aspect-video text-4xl px-0 relative'>
          <div class='absolute top-4 text-xl font-bold'>None</div>🚫
        </ToggleGroup.Item>
-        <ToggleGroup.Item value='gandhisans' class='h-auto px-0 relative'>
+        <ToggleGroup.Item value='gandhisans' class='h-auto p-0 relative'>
          <div class='absolute top-4 text-xl font-bold'>Gandhi Sans Bold</div>
          <img src='/gandhisans.png' class='w-full' />
        </ToggleGroup.Item>
-        <ToggleGroup.Item value='notosans' class='h-auto px-0 relative'>
+        <ToggleGroup.Item value='notosans' class='h-auto p-0 relative'>
          <div class='absolute top-4 text-xl font-bold'>Noto Sans Bold</div>
          <img src='/notosans.png' class='w-full' />
        </ToggleGroup.Item>
-        <ToggleGroup.Item value='roboto' class='h-auto px-0 relative'>
+        <ToggleGroup.Item value='roboto' class='h-auto p-0 relative'>
          <div class='absolute top-4 text-xl font-bold'>Roboto Bold</div>
          <img src='/roboto.png' class='w-full' />
        </ToggleGroup.Item>
--- a/src/routes/setup/+page.svelte
+++ b/src/routes/setup/+page.svelte
@ -12,11 +12,13 @@

 <div class='space-y-3 lg:max-w-4xl h-full overflow-y-auto w-full py-8 flex flex-col items-center justify-center' use:dragScroll>
  <Logo class='w-52 h-52 object-contain mb-14 shrink-0' />
-  <div class='font-bold text-5xl relative'>
-    Welcome to Hayase
-    <div class='animate-[hearbeat_1.5s_ease-in-out_infinite_alternate] absolute text-lg text-theme -right-20 -top-2 rotate-12'>Previously known as Miru!</div>
+  <div class='font-bold text-5xl text-center w-full overflow-x-clip flex justify-center'>
+    <div class='relative'>
+      Welcome to Hayase
+      <div class='animate-[hearbeat_1.5s_ease-in-out_infinite_alternate] absolute text-lg text-theme right-0 -top-5 xs:-right-20 xs:-top-2 rotate-12'>Previously known as Miru!</div>
+    </div>
  </div>
-  <div class='text-muted-foreground pt-3'>Let's set up your perfect streaming environment.</div>
+  <div class='text-muted-foreground pt-3 text-center'>Let's set up your perfect streaming environment.</div>
  <div class='flex items-center space-x-2 pt-12 pb-3'>
    <Checkbox id='terms' bind:checked />
    <Label for='terms' class='text-md font-medium leading-none text-muted-foreground'>