fix(wc): fix typing, locale fetch and backgrounds

Author: dvcol

src/components/web/AppWeb.ce.vue

@@ -34,7 +34,6 @@ const AppView = lazyComponent(() => import('~/components/AppView.vue'));
     'Droid Sans',
     'Helvetica Neue',
     sans-serif;
-  background: var(--color-background);
   transition:
     color 0.5s,
     background-color 0.5s;

src/index.ts

@@ -1,12 +1,13 @@
-import type { DefineComponent, WebComponents } from '~/views/web/define-component';
+import type { Component } from 'vue';
+import type { DefineComponent, WebComponents } from '~/web/define-component';
 
-const baseUrl = 'trakt-extension';
+export const baseUrl = 'trakt-extension';
 
 type TraktExtension = {
+  component: Component;
   WebComponents: WebComponents;
   defineComponent: DefineComponent;
   default: DefineComponent;
 };
 
-export type { TraktExtension, DefineComponent };
-export { baseUrl };
+export type { TraktExtension, DefineComponent, WebComponents };

src/stores/i18n.store.ts

@@ -30,18 +30,10 @@ export const useI18nStore = defineStore('i18n', () => {
       }
     }
 
-    console.info({
-      value,
-      key,
-      result,
-      locale: locale.value,
-    });
-
     return result;
   };
 
   const addLocale = (_locale: Locale, _lang = lang.value) => {
-    console.info('adding local', { _lang, _locale });
     locales.value[_lang] = _locale;
     return locales.value;
   };

src/utils/i18n.utils.ts

@@ -8,7 +8,7 @@ export const useI18n = (...roots: string[]): ReturnType<typeof chromeUseI18n> =>
   if (!chrome?.i18n) {
     const store = useI18nStore();
 
-    fetch(`${import.meta.env.BASE_URL}/_locales/${store.lang}/messages.json`)
+    fetch(new URL(`./_locales/${store.lang}/messages.json`, new URL(import.meta.url).origin))
       .then(r => r.json())
       .then((locale: Locale) => store.addLocale(locale))
       .catch(err => console.error(`Failed to fetch locale '${store.lang}'`, err));

src/views/options/index.html

@@ -12,14 +12,23 @@
 </html>
 
 <style>
-    body {
-        display: flex;
-        margin: 0;
-    }
+  body {
+    display: flex;
+    margin: 0;
+    background: #fff;
+    transition:
+      color 0.5s,
+      background-color 0.5s;
+    will-change: color, background-color;
 
-    wc-trakt-extension {
-        display: flex;
-        flex: 1 1 auto;
-        flex-direction: column;
+    @media (prefers-color-scheme: dark) {
+      background: #181818;
     }
-</style>
+  }
+
+  wc-trakt-extension {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+  }
+</style>

src/views/popup/index.html

@@ -26,12 +26,21 @@
     font-size: 1rem;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+    background: #fff;
+    transition:
+      color 0.5s,
+      background-color 0.5s;
+    will-change: color, background-color;
+
+    @media (prefers-color-scheme: dark) {
+      background: #181818;
+    }
   }
 
   wc-trakt-extension {
-      display: flex;
-      flex: 1 1 auto;
-      flex-direction: column;
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
   }
 
   #app-popup {