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" />