feat(settings): adds custom background colour option

Author: dvcol

src/components/container/ContainerComponent.ce.vue

@@ -30,7 +30,7 @@ const override: GlobalThemeOverrides = {
 };
 
 const { drawer, open, dropdown } = NavbarService;
-const { enabledRoutes } = useExtensionSettingsStoreRefs();
+const { enabledRoutes, backgroundColor } = useExtensionSettingsStoreRefs();
 const { root } = useAppStateStoreRefs();
 
 onBeforeMount(() => addCustomProgressProperty());
@@ -40,7 +40,10 @@ onBeforeMount(() => addCustomProgressProperty());
   <div
     id="trakt-extension-root"
     ref="root"
-    :style="{ '--tab-count': enabledRoutes.length + 1 }"
+    :style="{
+      '--tab-count': enabledRoutes.length + 1,
+      '--background-color': backgroundColor,
+    }"
   >
     <NConfigProvider :theme="theme" :theme-overrides="override" abstract>
       <AppComponent />
@@ -123,6 +126,8 @@ onBeforeMount(() => addCustomProgressProperty());
 
 #trakt-extension-root {
   height: 100%;
+  background-color: var(--background-color, transparent);
+  transition: background-color 0.5s var(--n-bezier);
 }
 
 .notification-container.n-notification-container.n-notification-container {
@@ -262,4 +267,8 @@ onBeforeMount(() => addCustomProgressProperty());
     padding-right: 0;
   }
 }
+
+.n-card {
+  border-radius: 0.75rem;
+}
 </style>

src/components/icons/IconPencil.vue

@@ -0,0 +1,42 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+    <g
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="1.5"
+    >
+      <path
+        stroke-dasharray="56"
+        stroke-dashoffset="56"
+        d="M3 21l2 -6l11 -11c1 -1 3 -1 4 0c1 1 1 3 0 4l-11 11l-6 2"
+      >
+        <animate
+          fill="freeze"
+          attributeName="stroke-dashoffset"
+          dur="0.6s"
+          values="56;0"
+        />
+      </path>
+      <path stroke-dasharray="8" stroke-dashoffset="8" d="M15 5l4 4">
+        <animate
+          fill="freeze"
+          attributeName="stroke-dashoffset"
+          begin="0.6s"
+          dur="0.2s"
+          values="8;0"
+        />
+      </path>
+      <path stroke-dasharray="6" stroke-dashoffset="6" stroke-width="1" d="M6 15l3 3">
+        <animate
+          fill="freeze"
+          attributeName="stroke-dashoffset"
+          begin="0.6s"
+          dur="0.2s"
+          values="6;0"
+        />
+      </path>
+    </g>
+  </svg>
+</template>

src/components/views/settings/SettingsBadge.vue

@@ -64,4 +64,13 @@ const container = ref();
 .form-select {
   min-width: 8rem;
 }
+
+.form-switch {
+  display: flex;
+  flex: 1 1 auto;
+  justify-content: center;
+  min-width: 5rem;
+  padding: 0 0.5rem;
+  font-size: 0.75rem;
+}
 </style>

src/components/views/settings/SettingsComponent.vue

@@ -194,6 +194,11 @@ onDeactivated(() => {
       z-index: var(--length);
     }
 
+    &:active,
+    &:hover {
+      border-color: var(--border-white);
+    }
+
     &.target {
       border-color: var(--n-color-target);
     }

src/components/views/settings/SettingsFormItem.vue

@@ -66,6 +66,7 @@ defineProps({
   display: flex;
   flex: 1 1 auto;
   flex-wrap: wrap;
+  align-items: center;
   justify-content: space-between;
 
   :deep(label) {

src/components/views/settings/SettingsTabs.vue

@@ -1,9 +1,19 @@
 <script lang="ts" setup>
 import { chromeRuntimeId } from '@dvcol/web-extension-utils/chrome/runtime';
-import { NIcon, NSelect, NSwitch, type SelectOption } from 'naive-ui';
+import {
+  NButton,
+  NButtonGroup,
+  NIcon,
+  NSelect,
+  NSwitch,
+  type SelectOption,
+} from 'naive-ui';
 
 import { type Component, computed, h, onBeforeMount, ref, watch } from 'vue';
 
+import IconClose from '~/components/icons/IconCloseSmall.vue';
+import IconPencil from '~/components/icons/IconPencil.vue';
+
 import SettingsFormItem from '~/components/views/settings/SettingsFormItem.vue';
 import { pageSizeOptions, pageSizeOptionsWithZero } from '~/models/page-size.model';
 import { ProgressType } from '~/models/progress-type.model';
@@ -42,6 +52,7 @@ const {
   loadListsPageSize,
   progressType,
   enableRatings,
+  backgroundColor,
 } = useExtensionSettingsStoreRefs();
 
 const { getIcon, fetchLists } = useListsStore();
@@ -119,10 +130,38 @@ const { extended: calendarExtended } = useCalendarStoreRefs();
 const { extended: historyExtended } = useHistoryStoreRefs();
 
 const container = ref();
+const picker = ref<HTMLInputElement>();
+const onColor = () => {
+  picker.value?.focus();
+  picker.value?.click();
+};
 </script>
 
 <template>
   <div ref="container" class="tabs-container">
+    <!--  Default tab  -->
+    <SettingsFormItem :label="i18n('label_default_tab')">
+      <div class="form-button">
+        <input ref="picker" v-model="backgroundColor" type="color" class="color-picker" />
+        <NButtonGroup
+          class="color-picker-button-group"
+          :style="{ '--color-picker': backgroundColor }"
+        >
+          <NButton round tertiary @click="onColor">
+            Picker
+            <template #icon>
+              <NIcon><IconPencil /></NIcon>
+            </template>
+          </NButton>
+          <NButton circle tertiary type="error" @click="backgroundColor = 'transparent'">
+            <template #icon>
+              <NIcon><IconClose /></NIcon>
+            </template>
+          </NButton>
+        </NButtonGroup>
+      </div>
+    </SettingsFormItem>
+
     <!--  Default tab  -->
     <SettingsFormItem :label="i18n('label_default_tab')">
       <NSelect
@@ -331,6 +370,7 @@ const container = ref();
   flex-direction: column;
   gap: 1.5rem;
 
+  .form-button,
   .form-switch {
     display: flex;
     flex: 1 1 auto;
@@ -378,4 +418,31 @@ const container = ref();
 .progress-type {
   width: 6rem;
 }
+
+.color-picker {
+  width: 0;
+  height: 2.5rem;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+
+  &-button-group {
+    button {
+      border: 2px solid var(--color-picker, transparent);
+      transition: border-color 0.3s var(--n-bezier);
+
+      i {
+        margin-left: -2px;
+      }
+    }
+
+    :first-child {
+      border-right: none;
+    }
+
+    :last-child {
+      border-left: none;
+    }
+  }
+}
 </style>

src/components/views/settings/SettingsWatching.vue

@@ -53,4 +53,13 @@ const container = ref();
 .form-select {
   min-width: 10rem;
 }
+
+.form-switch {
+  display: flex;
+  flex: 1 1 auto;
+  justify-content: center;
+  min-width: 5rem;
+  padding: 0 0.5rem;
+  font-size: 0.75rem;
+}
 </style>

src/stores/settings/extension.store.ts

@@ -46,6 +46,7 @@ type ExtensionSettings = {
   loadListsPageSize: number;
   progressType: ProgressTypes;
   enableRatings: boolean;
+  backgroundColor: string;
 };
 
 const ExtensionSettingsConstants = {
@@ -64,6 +65,7 @@ export const useExtensionSettingsStore = defineStore(ExtensionSettingsConstants.
   const initialized = ref<Promise<boolean>>();
   const progressType = ref<ExtensionSettings['progressType']>(ProgressType.Show);
   const enableRatings = ref(false);
+  const backgroundColor = ref('transparent');
 
   const clearState = () => {
     Object.assign(cacheRetention, DefaultCacheRetention);
@@ -85,6 +87,7 @@ export const useExtensionSettingsStore = defineStore(ExtensionSettingsConstants.
         loadListsPageSize: loadListsPageSize.value,
         progressType: progressType.value,
         enableRatings: enableRatings.value,
+        backgroundColor: backgroundColor.value,
       }),
     500,
   );
@@ -117,6 +120,7 @@ export const useExtensionSettingsStore = defineStore(ExtensionSettingsConstants.
         setLoadLists(Object.values(value), key);
       });
     }
+    if (restored?.backgroundColor !== undefined) backgroundColor.value = restored.backgroundColor;
 
     if (!chromeRuntimeId) routeDictionary[Route.Progress] = false;
   };
@@ -219,6 +223,13 @@ export const useExtensionSettingsStore = defineStore(ExtensionSettingsConstants.
         saveState().catch(err => Logger.error('Failed to save enable ratings extension settings', { value, err }));
       },
     }),
+    backgroundColor: computed({
+      get: () => backgroundColor.value,
+      set: (value: string) => {
+        backgroundColor.value = value;
+        saveState().catch(err => Logger.error('Failed to save background color extension settings', { value, err }));
+      },
+    }),
   };
 });
 

src/styles/base.scss

@@ -109,6 +109,8 @@
   --white-mute: #f2f2f2;
   --white-10: rgb(255 255 255 / 10%);
   --white-15: rgb(255 255 255 / 15%);
+  --white-20: rgb(255 255 255 / 20%);
+  --white-30: rgb(255 255 255 / 30%);
   --white-50: rgb(255 255 255 / 50%);
   --white-70: rgb(255 255 255 / 70%);
   --white-80: rgb(255 255 255 / 80%);

src/styles/reset.scss

@@ -12,6 +12,5 @@ h6 {
 p,
 li,
 figcaption {
-  max-width: 80ch;
   text-wrap: pretty;
 }