Merge pull request #11 from Libertai/enh/darkmode

- dark mode - persistent storage for personas - persistent settings - enhanced UX
Libertai · Jun 3, 2024 · d199089 · d199089
2 parents 7adffe2 + d735701
commit d199089
Show file tree

Hide file tree

Showing 30 changed files with 464 additions and 99 deletions.
diff --git a/index.html b/index.html
@@ -21,6 +21,13 @@
 
     <script src="//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.7.570/pdf.min.js"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.7.570/pdf.worker.min.js"></script>
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <!-- quasar:entry-point -->

diff --git a/public/icons/svg/chevron-down_lighten.svg b/public/icons/svg/chevron-down_lighten.svg
diff --git a/public/icons/svg/close_lighten.svg b/public/icons/svg/close_lighten.svg
diff --git a/public/icons/svg/copy2_lighten.svg b/public/icons/svg/copy2_lighten.svg
diff --git a/public/icons/svg/copy_lighten.svg b/public/icons/svg/copy_lighten.svg
diff --git a/public/icons/svg/dark_mode.svg b/public/icons/svg/dark_mode.svg
diff --git a/public/icons/svg/edit_lighten.svg b/public/icons/svg/edit_lighten.svg
diff --git a/src/assets/libertai.svg → public/icons/svg/libertai_full.svg b/src/assets/libertai.svg → public/icons/svg/libertai_full.svg
diff --git a/public/icons/svg/libertai_full_lighten.svg b/public/icons/svg/libertai_full_lighten.svg
diff --git a/public/icons/svg/light_mode.svg b/public/icons/svg/light_mode.svg
diff --git a/public/icons/msg.svg → public/icons/svg/msg.svg b/public/icons/msg.svg → public/icons/svg/msg.svg
diff --git a/public/icons/msg_active.svg → public/icons/svg/msg_active.svg b/public/icons/msg_active.svg → public/icons/svg/msg_active.svg
diff --git a/public/icons/svg/msg_lighten.svg b/public/icons/svg/msg_lighten.svg
diff --git a/src/assets/powered-by.svg → public/icons/svg/powered-by.svg b/src/assets/powered-by.svg → public/icons/svg/powered-by.svg
diff --git a/public/icons/svg/powered-by_lighten.svg b/public/icons/svg/powered-by_lighten.svg
diff --git a/public/icons/svg/settings_lighten.svg b/public/icons/svg/settings_lighten.svg
diff --git a/public/icons/svg/star_lighten.svg b/public/icons/svg/star_lighten.svg
diff --git a/src/components/ModelSelector.vue b/src/components/ModelSelector.vue
@@ -0,0 +1,61 @@
+<template>
+  <q-btn-dropdown
+    :label="modelsStore.selectedModel.name.substring(0, 12) + '..'"
+    class="text-semibold icon-md border-primary-highlight"
+    dropdown-icon="img:icons/svg/chevron-down_lighten.svg"
+    size="md"
+    color="primary"
+    no-caps
+    rounded
+    unelevated
+  >
+    <q-list>
+      <q-item
+        v-for="model in modelsStore.models"
+        :key="model.id"
+        v-close-popup
+        clickable
+        @click="modelsStore.setModel(model)"
+      >
+        <q-item-section>
+          <q-item-label>
+            {{ model.name }}
+          </q-item-label>
+        </q-item-section>
+      </q-item>
+    </q-list>
+  </q-btn-dropdown>
+  <!--
+  <q-btn-dropdown
+    :icon="$q.screen.gt.sm ? 'img:icons/svg/engine.svg' : ''"
+    :label="modelsStore.selectedModel.name.substring(0, 12) + '..'"
+    class="border-primary-highlight"
+    color="primary"
+    no-caps
+    rounded
+    text-color="white"
+    unelevated
+    >
+    <q-list>
+      <q-item
+        v-for="model in modelsStore.models"
+        :key="model.id"
+        v-close-popup
+        clickable
+        @click="modelsStore.setModel(model)"
+        >
+        <q-item-section>
+          <q-item-label>
+            {{ model.name }}
+          </q-item-label>
+        </q-item-section>
+      </q-item>
+    </q-list>
+  </q-btn-dropdown>
+  -->
+</template>
+
+<script setup>
+import { useModelsStore } from '../stores/models-store';
+const modelsStore = useModelsStore();
+</script>
diff --git a/src/components/PersonaDialog.vue b/src/components/PersonaDialog.vue
@@ -1,32 +1,39 @@
 <template>
-  <q-dialog class="q-pa-lg" label="Customize" style="flex-grow: 1">
+  <q-dialog class="q-pa-lg text-light" label="Customize" style="flex-grow: 1">
     <q-card class="q-pa-md">
-      <q-card-actions class="flex flex-left text-purple700 text-semibold">
+      <q-card-actions :class="`flex flex-left text-semibold ${$q.dark.mode ? '' : 'text-purple700'}`">
         Customize persona
         <q-space />
-        <q-btn v-close-popup flat icon="img:icons/svg/close.svg" size="sm" unelevated />
+        <q-btn
+          v-close-popup
+          flat
+          :icon="`img:icons/svg/close${$q.dark.mode ? '_lighten' : ''}.svg`"
+          size="sm"
+          unelevated
+        />
       </q-card-actions>
 
       <q-card-section horizontal>
         <q-card-section>
           <q-avatar>
-            <img :src="persona.avatarUrl" />
+            <img :src="personasStore.persona.avatarUrl" />
           </q-avatar>
         </q-card-section>
         <q-card-section>
-          <label class="text-light">Persona name</label>
-          <q-input v-model="persona.name" bg-color="secondary" input-class="text-light q-px-sm" outlined></q-input>
+          <label>Persona name</label>
+          <q-input v-model="personasStore.persona.name" bg-color="secondary" input-class="text-light q-px-sm" outlined>
+          </q-input>
         </q-card-section>
       </q-card-section>
 
       <q-card-section>
-        <label class="text-light">Your name</label>
-        <q-input v-model="usernameInputRef" bg-color="secondary" input-class="text-light q-px-sm" outlined></q-input>
+        <label>Your name</label>
+        <q-input v-model="username" bg-color="secondary" input-class="text-light q-px-sm" outlined> </q-input>
       </q-card-section>
       <q-card-section>
-        <label class="text-light">Persona Description</label>
+        <label>Persona Description</label>
         <q-input
-          v-model="persona.description"
+          v-model="personasStore.persona.description"
           autogrow
           bg-color="secondary"
           input-class="text-light"
@@ -52,13 +59,14 @@
 
 <script setup>
 import { usePersonasStore } from 'src/stores/personas-store';
-import { ref } from 'vue';
+import { useSettingsStore } from 'src/stores/settings';
+import { storeToRefs } from 'pinia';
 
 const personasStore = usePersonasStore();
-const persona = personasStore.persona;
-const usernameInputRef = ref('user');
+const settings = useSettingsStore();
+const { username } = storeToRefs(settings);
 
 function updatePersona() {
-  personasStore.persona = persona;
+  // on update persona event
 }
 </script>
diff --git a/src/components/PersonaDropDown.vue b/src/components/PersonaDropDown.vue
@@ -2,12 +2,12 @@
   <q-btn-dropdown
     :icon="'img:' + personasStore.persona.avatarUrl"
     :label="personasStore.persona.name"
-    class="no-shadow rounded-img personas-dropdown q-py-sm"
+    class="no-shadow rounded-img personas-dropdown q-py-sm icon-md"
     dropdown-icon="img:icons/svg/chevron-down.svg"
     no-caps
     rounded
-    text-color="primary"
     unelevated
+    text-color="primary"
   >
     <q-list>
       <q-item

diff --git a/src/components/ToggleTheme.vue b/src/components/ToggleTheme.vue
@@ -0,0 +1,39 @@
+<template>
+  <q-btn
+    :icon="darkmode ? 'img:icons/svg/light_mode.svg' : 'img:icons/svg/dark_mode.svg'"
+    class="q-pa-xs"
+    flat
+    @click="darkmode = !darkmode"
+  />
+</template>
+
+<script>
+import { useSettingsStore } from 'src/stores/settings';
+import { defineComponent, ref, watch } from 'vue';
+import { useQuasar } from 'quasar';
+
+export default defineComponent({
+  name: 'ToggleTheme',
+  setup() {
+    const settings = useSettingsStore();
+    const $q = useQuasar();
+    console.log('settings', settings.darkmode);
+    const darkmode = ref(settings.darkmode);
+    $q.dark.set(settings.darkmode);
+    console.log('Dark mode', $q.dark.isActive); // true, false
+
+    watch(
+      () => darkmode.value,
+      async (value) => {
+        console.log('update storage');
+        //$q.dark.set(darkmode.value);
+        $q.dark.set(value);
+        settings.darkmode = value;
+      },
+    );
+    return {
+      darkmode,
+    };
+  },
+});
+</script>