feat(client): add background picker to appearance popover

client/src/assets/main.css

@@ -713,11 +713,6 @@ html.radius-pill {
   background-size: 24px 24px;
 }
 
-.pattern-grid {
-  background-image: linear-gradient(var(--dot-color) 1px, transparent 1px), linear-gradient(90deg, var(--dot-color) 1px, transparent 1px);
-  background-size: 32px 32px;
-}
-
 .pattern-cross {
   background-image: radial-gradient(circle, var(--dot-color) 1px, transparent 1px), radial-gradient(circle, var(--dot-color) 1px, transparent 1px);
   background-size: 24px 24px;
@@ -737,15 +732,6 @@ html.radius-pill {
     radial-gradient(ellipse 40% 35% at 50% 0%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 100%);
 }
 
-.pattern-rings {
-  background-image: repeating-radial-gradient(circle at 50% 50%, transparent 0, transparent 28px, var(--dot-color) 29px, transparent 30px);
-}
-
-.pattern-noise {
-  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.05'/></svg>");
-  background-size: 200px 200px;
-}
-
 .glow-wrapper {
   background-image:
     url('/topbar.png'), radial-gradient(50% 50% at center -25px, color-mix(in oklch, var(--primary) 35%, transparent) 0%, transparent 100%);

client/src/components/AppHeader.vue

@@ -16,6 +16,7 @@ import {
 } from '@/components/ui/dropdown-menu'
 import AccentPicker from '@/components/AccentPicker.vue'
 import RadiusPicker from '@/components/RadiusPicker.vue'
+import BackgroundPicker from '@/components/BackgroundPicker.vue'
 import ThemeToggle from '@/components/ThemeToggle.vue'
 import { useGlobalSearch, type GlobalSearchResult } from '@/features/book/composables/useGlobalSearch'
 import BookCoverImage from '@/features/book/components/BookCoverImage.vue'
@@ -189,6 +190,10 @@ function navigateToResult(result: GlobalSearchResult) {
                 <span class="text-xs text-muted-foreground">Radius</span>
                 <RadiusPicker />
               </div>
+              <div class="space-y-1.5">
+                <span class="text-xs text-muted-foreground">Background</span>
+                <BackgroundPicker />
+              </div>
             </div>
           </PopoverContent>
         </Popover>

client/src/components/BackgroundPicker.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { BACKGROUND_OPTIONS, useThemeStore } from '@/stores/theme'
+
+const themeStore = useThemeStore()
+</script>
+
+<template>
+  <div class="grid grid-cols-4 gap-2">
+    <button
+      v-for="opt in BACKGROUND_OPTIONS"
+      :key="opt.id"
+      :title="opt.label"
+      type="button"
+      class="flex flex-col items-center gap-1 cursor-pointer focus:outline-none"
+      @click="themeStore.setBackground(opt.id)"
+    >
+      <div
+        class="w-full h-9 rounded overflow-hidden ring-2 transition-all"
+        :class="themeStore.background === opt.id ? 'ring-primary' : 'ring-border hover:ring-muted-foreground/40'"
+      >
+        <div class="w-full h-full bg-background" :class="opt.cssClass" />
+      </div>
+      <span
+        class="text-[10px] font-medium transition-colors leading-none"
+        :class="themeStore.background === opt.id ? 'text-primary' : 'text-muted-foreground'"
+        >{{ opt.label }}</span
+      >
+    </button>
+  </div>
+</template>

client/src/stores/theme.ts

@@ -37,7 +37,7 @@ export type Accent =
   | 'orchid'
   | 'blush'
 export type Radius = 'sharp' | 'default' | 'rounded' | 'pill'
-export type Background = 'none' | 'dots' | 'grid' | 'cross' | 'gradient' | 'aurora' | 'rings' | 'noise'
+export type Background = 'none' | 'dots' | 'cross' | 'gradient' | 'aurora'
 
 export const ACCENT_VIVID: { id: Accent; label: string; color: string }[] = [
   { id: 'rose', label: 'Rose', color: '#e11d48' },
@@ -87,12 +87,9 @@ export const RADIUS_OPTIONS: { id: Radius; label: string }[] = [
 export const BACKGROUND_OPTIONS: { id: Background; label: string; cssClass: string }[] = [
   { id: 'none', label: 'None', cssClass: '' },
   { id: 'dots', label: 'Dots', cssClass: 'pattern-dots' },
-  { id: 'grid', label: 'Grid', cssClass: 'pattern-grid' },
   { id: 'cross', label: 'Cross', cssClass: 'pattern-cross' },
   { id: 'gradient', label: 'Gradient', cssClass: 'pattern-gradient' },
   { id: 'aurora', label: 'Aurora', cssClass: 'pattern-aurora' },
-  { id: 'rings', label: 'Rings', cssClass: 'pattern-rings' },
-  { id: 'noise', label: 'Noise', cssClass: 'pattern-noise' },
 ]
 
 const ACCENT_IDS = ACCENT_OPTIONS.map((a) => a.id)

server/src/db/migrations/meta/_journal.json

@@ -5,7 +5,7 @@
     {
       "idx": 0,
       "version": "7",
-      "when": 1770383082812,
+      "when": 1770387575999,
       "tag": "0000_add_rating_and_book_card_fields",
       "breakpoints": true
     }