feat: ✨ Add string preferences and custom background images

components/preferences/string.vue

@@ -0,0 +1,31 @@
+<template>
+    <Card class="grid grid-rows-[1fr,auto] xl:grid-rows-none xl:grid-cols-[1fr,auto] items-center p-6 gap-4">
+        <CardHeader class="space-y-0.5 p-0">
+            <CardTitle class="text-base">
+                {{ setting.title() }}
+            </CardTitle>
+            <CardDescription>
+                {{ setting.description() }}
+            </CardDescription>
+        </CardHeader>
+        <CardFooter class="p-0">
+            <Input :model-value="setting.value" @update:model-value="v => { setting.value = String(v) }" />
+        </CardFooter>
+    </Card>
+</template>
+
+<script lang="ts" setup>
+import {
+    Card,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from "~/components/ui/card";
+import { Input } from "~/components/ui/input";
+import type { StringSetting } from "~/settings.ts";
+
+defineModel<StringSetting>("setting", {
+    required: true,
+});
+</script>

components/sidebars/sidebar.vue

@@ -27,7 +27,7 @@ const route = useRoute();
         <LeftSidebar />
         <SidebarInset>
             <header
-                class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12 overflow-hidden">
+                class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12 overflow-hidden bg-background">
                 <div class="flex items-center gap-2 px-4">
                     <SidebarTrigger class="-ml-1" />
                     <Separator orientation="vertical" class="mr-2 h-4" />

components/ui/sidebar/SidebarInset.vue

@@ -1,20 +1,30 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
 import type { HTMLAttributes } from "vue";
+import { SettingIds } from "~/settings";
 
 const props = defineProps<{
     class?: HTMLAttributes["class"];
 }>();
+
+const backgroundImage = useSetting(SettingIds.BackgroundURL);
+
+const canParseUrl = URL.canParse;
 </script>
 
 <template>
-  <main
-    :class="cn(
-      'relative flex min-h-svh max-w-full flex-1 flex-col bg-background',
-      'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
-      props.class,
-    )"
-  >
-    <slot />
-  </main>
+    <main :class="cn(
+        'relative flex min-h-svh max-w-full flex-1 flex-col bg-background',
+        'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:overflow-hidden md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
+        props.class,
+    )" :style="{
+        backgroundImage: canParseUrl(backgroundImage.value as string) ? `url(${backgroundImage.value})` : undefined,
+        backgroundSize: canParseUrl(backgroundImage.value as string) ? 'cover' : undefined,
+        backgroundPosition: canParseUrl(backgroundImage.value as string) ? 'center' : undefined,
+        backgroundRepeat: canParseUrl(backgroundImage.value as string) ? 'no-repeat' : undefined,
+    }">
+        <!-- Overlay for the background image -->
+        <div v-if="canParseUrl(backgroundImage.value as string)" class="absolute -z-10 inset-0 bg-black/20" />
+        <slot />
+    </main>
 </template>