Add tone support

app/components/card-field.vue

@@ -2,7 +2,7 @@
   <div class="flex justify-between items-center gap-4">
     <div>
       <div class="font-semibold"><slot name="title" /></div>
-      <div class="text-slate-600 text-sm">
+      <div class="text-slate-600 text-sm hidden md:block">
         <slot name="description" />
       </div>
     </div>

app/pages/index.vue

@@ -13,9 +13,10 @@ interface FormData {
 const preferences = useState<FormData>("preferences", () => ({
   enabled: false,
   language: "English",
+  tone: "Casual",
 }));
 
-const { status, refresh } = useFetch("/api/preferences", {
+const { status } = useFetch("/api/preferences", {
   onResponse({ error, response }) {
     if (error) {
       return;
@@ -86,6 +87,20 @@ const saveOp = watchPausable(
             />
           </template>
         </CardField>
+
+        <CardField>
+          <template #title> Model tone </template>
+          <template #description>
+            Tone used for generated titles and descriptions.
+          </template>
+          <template #value>
+            <USelect
+              class="min-w-28"
+              v-model="preferences.tone"
+              :items="tones"
+            />
+          </template>
+        </CardField>
       </div>
     </UCard>
   </UContainer>

app/utils/languages.ts

@@ -1,7 +0,0 @@
-export const languages = ref([
-  "English",
-  "Greek",
-  "German",
-  "Italian",
-  "Polish",
-]);

app/utils/model.ts

@@ -0,0 +1,20 @@
+export const languages = ref([
+  "English",
+  "Greek",
+  "German",
+  "Italian",
+  "Polish",
+]);
+
+export const tones = ref([
+  "Motivational",
+  "Casual",
+  "Funny",
+  "Epic",
+  "Minimalist",
+  "Reflective",
+  "Poetic",
+  "Competitive",
+  "Adventure",
+  "Snarky",
+]);