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>

layouts/app.vue

@@ -1,6 +1,6 @@
 <template>
     <Sidebar>
-        <SquarePattern />
+        <SquarePattern v-if="!canParseUrl(backgroundImage.value as string)" />
         <slot v-if="!route.meta.requiresAuth || identity" />
         <Card v-else class="shadow-none bg-transparent border-none p-4 max-w-md mx-auto">
             <CardHeader class="text-center gap-y-4">
@@ -34,6 +34,7 @@ import {
     CardTitle,
 } from "~/components/ui/card";
 import * as m from "~/paraglide/messages.js";
+import { SettingIds } from "~/settings";
 
 const appData = useAppData();
 const signInAction = () => signIn(appData);
@@ -45,6 +46,9 @@ const notUsingInput = computed(
         activeElement.value?.tagName !== "TEXTAREA",
 );
 
+const backgroundImage = useSetting(SettingIds.BackgroundURL);
+const canParseUrl = URL.canParse;
+
 const route = useRoute();
 
 watchEffect(async () => {

pages/preferences/[page].vue

@@ -8,6 +8,7 @@
                 <SwitchPreference v-if="setting.type === SettingType.Boolean" :setting="(setting as BooleanSetting)" @update:setting="updateSetting(id, setting)" />
                 <SelectPreference v-else-if="setting.type === SettingType.Enum" :setting="(setting as EnumSetting)" @update:setting="updateSetting(id, setting)" />
                 <CodePreference v-else-if="setting.type === SettingType.Code" :setting="(setting as CodeSetting)" @update:setting="updateSetting(id, setting)" />
+                <StringPreference v-else-if="setting.type === SettingType.String" :setting="(setting as StringSetting)" @update:setting="updateSetting(id, setting)" />
             </template>
         </div>
     </div>
@@ -16,6 +17,7 @@
 <script lang="ts" setup>
 import CodePreference from "~/components/preferences/code.vue";
 import SelectPreference from "~/components/preferences/select.vue";
+import StringPreference from "~/components/preferences/string.vue";
 import SwitchPreference from "~/components/preferences/switch.vue";
 import * as m from "~/paraglide/messages.js";
 import {
@@ -26,6 +28,7 @@ import {
     type SettingIds,
     type SettingPages,
     SettingType,
+    type StringSetting,
 } from "~/settings.ts";
 
 useHead({