feat: ✨ Add ability to set custom background images

components/inputs/text-input.vue

@@ -1,6 +1,6 @@
 <template>
     <input :class="['block disabled:opacity-70 disabled:hover:cursor-wait w-full bg-dark-500 rounded-md border-0 py-1.5 text-gray-50 shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6',
-        isInvalid && '!ring-red-600 ring-2']">
+        isInvalid && '!ring-red-600 ring-2']" v-model="value">
 </template>
 
 <script setup lang="ts">
@@ -10,5 +10,7 @@ interface Props extends /* @vue-ignore */ InputHTMLAttributes {
     isInvalid?: boolean;
 }
 
+const value = defineModel<string>("value");
+
 defineProps<Props>();
 </script>

components/settings/renderer.vue

@@ -5,6 +5,7 @@
 
             <SettingCode v-else-if="setting.type === SettingType.Code" :id="id" />
             <SettingEnum v-else-if="setting.type === SettingType.Enum" :id="id" />
+            <SettingString v-else-if="setting.type === SettingType.String" :id="id" />
             <SettingOther v-else :id="id" />
         </div>
     </div>
@@ -16,6 +17,7 @@ import SettingBoolean from "./types/Boolean.vue";
 import SettingCode from "./types/Code.vue";
 import SettingEnum from "./types/Enum.vue";
 import SettingOther from "./types/Other.vue";
+import SettingString from "./types/String.vue";
 
 const props = defineProps<{
     id: SettingIds;

components/settings/types/String.vue

@@ -0,0 +1,25 @@
+<template>
+    <div class="flex flex-col gap-y-1">
+        <h4 class="row-start-1 select-none text-base/6 sm:text-sm/6 text-white font-semibold">{{ setting.title
+            }}
+        </h4>
+        <TextInput v-model:value="content" class="w-full md:w-auto min-w-72" />
+        <p v-if="setting.description" class="text-xs mt-2 text-gray-400">{{ setting.description }}</p>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import TextInput from "~/components/inputs/text-input.vue";
+import type { SettingIds } from "~/settings";
+
+const props = defineProps<{
+    id: SettingIds;
+}>();
+
+const setting = useSetting(props.id);
+const content = ref(setting.value.value as string);
+
+watch(content, (c) => {
+    setting.value.value = c;
+});
+</script>

components/sidebars/collapsible-aside.vue

@@ -15,9 +15,9 @@
 </template>
 
 <script lang="ts" setup>
+import { OverlayScrollbarsComponent } from "overlayscrollbars-vue";
 // slides in and out from the left or right
 import type { HTMLAttributes } from "vue";
-import { OverlayScrollbarsComponent } from "overlayscrollbars-vue";
 
 interface Props extends /* @vue-ignore */ HTMLAttributes {
     direction?: "left" | "right";

components/timelines/timeline.vue

@@ -1,6 +1,6 @@
 <!-- Timeline.vue -->
 <template>
-    <div class="timeline">
+    <div class="timeline rounded overflow-hidden">
         <TransitionGroup name="timeline-item" tag="div" class="timeline-items">
             <TimelineItem :type="type" v-for="item in items" :key="item.id" :item="item" @update="updateItem"
                 @delete="removeItem" />

layouts/app.vue

@@ -1,6 +1,11 @@
 <template>
-    <div class="from-dark-600 to-dark-900 bg-gradient-to-tl relative min-h-dvh">
-        <SquarePattern />
+    <div class="from-dark-600 to-dark-900 bg-gradient-to-tl relative min-h-dvh" :style="{
+        backgroundImage: canParseURL(backgroundImage.value as string) ? `url(${backgroundImage.value})` : undefined,
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+    }">
+        <SquarePattern v-if="!canParseURL(backgroundImage.value as string)" />
         <Navigation />
 
         <div class="relative md:pl-20 min-h-dvh flex flex-row overflow-hidden justify-center xl:justify-between">
@@ -20,14 +25,15 @@
 </template>
 
 <script setup lang="ts">
+import { OverlayScrollbarsComponent } from "overlayscrollbars-vue";
 import ComposerModal from "~/components/composer/modal.client.vue";
 import SquarePattern from "~/components/graphics/square-pattern.vue";
 import CollapsibleAside from "~/components/sidebars/collapsible-aside.vue";
 import Navigation from "~/components/sidebars/navigation.vue";
 import AttachmentDialog from "~/components/social-elements/notes/attachment-dialog.vue";
 import Notifications from "~/components/timelines/notifications.vue";
 import TimelineScroller from "~/components/timelines/timeline-scroller.vue";
-import { OverlayScrollbarsComponent } from "overlayscrollbars-vue";
+import { SettingIds } from "~/settings";
 const { width } = useWindowSize();
 
 const { n } = useMagicKeys();
@@ -37,6 +43,15 @@ const notUsingInput = computed(
         activeElement.value?.tagName !== "INPUT" &&
         activeElement.value?.tagName !== "TEXTAREA",
 );
+const backgroundImage = useSetting(SettingIds.BackgroundURL);
+const canParseURL: (url: string) => boolean = (url) => {
+    try {
+        new URL(url);
+        return true;
+    } catch {
+        return false;
+    }
+};
 
 watchEffect(async () => {
     if (n?.value && notUsingInput.value) {

settings.ts

@@ -78,6 +78,7 @@ export enum SettingIds {
     ConfirmReblog = "confirm-reblog",
     ConfirmFavourite = "confirm-favourite",
     EmojiTheme = "emoji-theme",
+    BackgroundURL = "background-url",
 }
 
 export const settings: Record<SettingIds, Setting> = {
@@ -210,6 +211,13 @@ export const settings: Record<SettingIds, Setting> = {
         ],
         page: SettingPages.Appearance,
     } as EnumSetting,
+    [SettingIds.BackgroundURL]: {
+        title: "Background URL",
+        description: "Change the background image of the site.",
+        type: SettingType.String,
+        value: "",
+        page: SettingPages.Appearance,
+    } as StringSetting,
 };
 
 export const getSettingsForPage = (page: SettingPages): Partial<Settings> => {