feat(logs): adds settings logs card

Author: dvcol

src/components/views/settings/SettingsCache.vue

@@ -75,25 +75,21 @@ const container = ref();
 
 <template>
   <div ref="container" class="cache-container">
-    <NFormItem
-      class="form-row"
-      :label="i18n('label_retention_trakt')"
-      :show-feedback="false"
-      label-placement="left"
-    >
+    <NFormItem class="form-row" :show-feedback="false" label-placement="left">
+      <template #label>
+        <span class="from-label">{{ i18n('label_retention_trakt') }}</span>
+      </template>
       <NSelect
         v-model:value="traktCacheRetention"
         class="form-select"
         :to="container"
         :options="cacheOptions"
       />
     </NFormItem>
-    <NFormItem
-      class="form-row"
-      :label="i18n('label_retention_images')"
-      :show-feedback="false"
-      label-placement="left"
-    >
+    <NFormItem class="form-row" :show-feedback="false" label-placement="left">
+      <template #label>
+        <span class="from-label">{{ i18n('label_retention_images') }}</span>
+      </template>
       <NSelect
         v-model:value="tmdbCacheRetention"
         class="form-select"
@@ -155,6 +151,7 @@ const container = ref();
 .form-row {
   display: flex;
   flex: 1 1 auto;
+  flex-wrap: wrap;
   justify-content: space-between;
 
   &:hover {

src/components/views/settings/SettingsComponent.vue

@@ -116,7 +116,6 @@ onDeactivated(() => {
     @include mixin.hover-background($from: var(--bg-black-50), $to: var(--bg-color-80));
 
     z-index: var(--index);
-    min-height: 20rem;
 
     &:not(:last-child) {
       margin-bottom: 1rem;

src/components/views/settings/SettingsLinks.vue

@@ -104,7 +104,7 @@ const containerRef = ref<HTMLDivElement>();
 <template>
   <div ref="containerRef" class="links-container">
     <!--  Header  -->
-    <NFormItem label-placement="left" :show-feedback="false">
+    <NFormItem class="form-header-row" label-placement="left" :show-feedback="false">
       <template #label>
         <span class="form-header">{{ i18n('label_show_hide') }}</span>
       </template>
@@ -113,7 +113,7 @@ const containerRef = ref<HTMLDivElement>();
         <template #unchecked>{{ i18n('hide', 'common', 'button') }}</template>
       </NSwitch>
     </NFormItem>
-    <NFormItem label-placement="left" :show-feedback="false">
+    <NFormItem class="form-header-row" label-placement="left" :show-feedback="false">
       <template #label>
         <span class="form-header">{{ i18n('label_open_in_background') }}</span>
       </template>
@@ -275,11 +275,25 @@ const containerRef = ref<HTMLDivElement>();
   color: var(--white-70);
   font-weight: 600;
   font-size: 1rem;
+  transition: color 0.3s var(--n-bezier);
+
+  &-row {
+    &:hover {
+      .form-header {
+        color: var(--white-mute);
+      }
+    }
+
+    @media (width < 400px) {
+      max-width: 70%;
+    }
+  }
 
   &-switch {
     display: flex;
     flex: 1 1 auto;
     justify-content: flex-end;
+    min-width: 4rem;
     padding: 0 0.5rem;
     font-size: 0.75rem;
   }

src/components/views/settings/SettingsLogs.vue

@@ -1,11 +1,69 @@
 <script lang="ts" setup>
-import { NFlex } from 'naive-ui';
+import { NFormItem, NSelect } from 'naive-ui';
 
-import { useExtensionSettingsStore } from '~/stores/settings/extension.store';
+import { ref } from 'vue';
 
-const { logLevel } = useExtensionSettingsStore();
+import { LogLevel, useLogStore } from '~/stores/settings/log.store';
+import { useI18n } from '~/utils';
+
+const i18n = useI18n('settings', 'logs');
+
+const { logLevel } = useLogStore();
+
+const options = Object.entries(LogLevel)
+  .filter(([_, v]) => typeof v === 'number')
+  .map(([key, value]) => ({
+    label: key,
+    value,
+  }));
+
+const container = ref();
 </script>
 
 <template>
-  <NFlex> This is the logs card : {{ logLevel }} </NFlex>
+  <div ref="container" class="logs-container">
+    <NFormItem class="form-row" :show-feedback="false" label-placement="left">
+      <template #label>
+        <span class="from-label">{{ i18n('label_log_level') }}</span>
+      </template>
+      <NSelect
+        v-model:value="logLevel"
+        class="form-select"
+        :to="container"
+        :options="options"
+      />
+    </NFormItem>
+  </div>
 </template>
+
+<style lang="scss" scoped>
+.logs-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.form-select {
+  min-width: 10rem;
+}
+
+.from-label {
+  color: var(--white-70);
+  font-weight: 600;
+  font-size: 1rem;
+  transition: color 0.3s var(--n-bezier);
+}
+
+.form-row {
+  display: flex;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  &:hover {
+    .from-label {
+      color: var(--white-mute);
+    }
+  }
+}
+</style>

src/i18n/en/settings/settings-cache.json

@@ -24,7 +24,7 @@
     "description": "Label for the evict history data button"
   },
   "settings__cache__evict_lists": {
-    "message": "Evict lists data from cache (watchlist, lists and collections)",
+    "message": "Evict lists data from cache",
     "description": "Label for the evict lists data button"
   },
   "settings__cache__evict_search": {

src/i18n/en/settings/settings-logs.json

@@ -0,0 +1,6 @@
+{
+  "settings__logs__label_log_level": {
+    "message": "Log verbosity in the console",
+    "description": "Label for the log verbosity in the settings."
+  }
+}

src/stores/settings/log.store.ts

@@ -4,7 +4,7 @@ import { computed, ref } from 'vue';
 import { storage } from '~/utils/browser/browser-storage.utils';
 import { debounce } from '~/utils/debounce.utils';
 
-const enum LogLevel {
+export enum LogLevel {
   Error,
   Warn,
   Info,