feat(brand): adds support for new branding

Author: dvcol

src/assets/brand/apple-touch-icon.png

@@ -16,7 +16,7 @@ import type { PosterItem } from '~/models/poster.model';
 import ListItemPanel from '~/components/common/list/ListItemPanel.vue';
 import PosterComponent from '~/components/common/poster/PosterComponent.vue';
 import { type ListScrollItem, ListScrollItemType } from '~/models/list-scroll.model';
-import { Colors } from '~/styles/colors.style';
+import { BrandColors } from '~/styles/colors.style';
 import { useI18n } from '~/utils/i18n.utils';
 
 const props = defineProps({
@@ -43,7 +43,7 @@ const props = defineProps({
   color: {
     type: String,
     required: false,
-    default: Colors.traktRedDark,
+    default: BrandColors.traktDark,
   },
   lineType: {
     type: String as PropType<'dashed' | 'default'>,

src/assets/brand/favicon-128x128.png

@@ -358,6 +358,9 @@ nav {
     :deep(.n-tabs-capsule) {
       height: calc(#{layout.$header-navbar-height} - 0.75rem) !important;
       border-radius: 0.5rem !important;
+      transition:
+        background-color 0.3s var(--n-bezier),
+        transform 0.3s var(--n-bezier);
     }
 
     :deep(.tab) {

src/assets/brand/favicon-16x16.png

@@ -7,16 +7,18 @@ import {
   type PropType,
   reactive,
   ref,
-  toRaw,
   toRefs,
   watch,
 } from 'vue';
 
 import type { PosterItem } from '~/models/poster.model';
 
+import PosterPlaceholderNew from '~/assets/images/poster-placeholder-new.webp';
 import PosterPlaceholder from '~/assets/images/poster-placholder.webp';
+
 import { Logger } from '~/services/logger.service';
 import { type ImageStoreMedias, useImageStore } from '~/stores/data/image.store';
+import { Brand, useExtensionSettingsStoreRefs } from '~/stores/settings/extension.store';
 
 const props = defineProps({
   item: {
@@ -88,6 +90,12 @@ const onLoad = () => {
   imgLoaded.value = true;
 };
 
+const { brand } = useExtensionSettingsStoreRefs();
+const placeholder = computed(() => {
+  if (brand.value === Brand.New) return PosterPlaceholderNew;
+  return PosterPlaceholder;
+});
+
 const { getImageUrl } = useImageStore();
 
 const timeout = ref();
@@ -121,7 +129,6 @@ const getPosters = async (
     if (!_item?.key || !response) return;
     const key = [item.value.key, backdrop.value, type?.value].filter(Boolean).join('-');
     cache[key] = response;
-    console.info('caching', query, key, response, toRaw(cache));
   } catch (error) {
     Logger.error('Failed to fetch poster', error);
   }
@@ -150,7 +157,7 @@ onBeforeUnmount(() => {
     lazy
     preview-disabled
     :src="resolvedPoster"
-    :fallback-src="PosterPlaceholder"
+    :fallback-src="placeholder"
     :on-load="onLoad"
   />
   <NImage
@@ -164,8 +171,8 @@ onBeforeUnmount(() => {
     width="100%"
     lazy
     preview-disabled
-    :src="PosterPlaceholder"
-    :fallback-src="PosterPlaceholder"
+    :src="placeholder"
+    :fallback-src="placeholder"
   />
 </template>
 

src/assets/brand/favicon-32x32.png

@@ -31,7 +31,7 @@ const override: GlobalThemeOverrides = {
 };
 
 const { drawer, open, dropdown } = NavbarService;
-const { enabledRoutes, backgroundColor } = useExtensionSettingsStoreRefs();
+const { enabledRoutes, backgroundColor, brand } = useExtensionSettingsStoreRefs();
 const { root, floating, reverse } = useAppStateStoreRefs();
 const { isWatching } = useWatchingStoreRefs();
 
@@ -46,6 +46,7 @@ onBeforeMount(() => addCustomProgressProperty());
       '--tab-count': enabledRoutes.length + 1,
       '--background-color': backgroundColor,
     }"
+    :data-brand="brand"
   >
     <NConfigProvider :theme="theme" :theme-overrides="override" abstract>
       <AppComponent />

src/assets/brand/favicon-48x48.png

@@ -0,0 +1,41 @@
+<template>
+  <svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+    <defs>
+      <radialGradient
+        id="radial-gradient"
+        cx="48.46"
+        cy="-.95"
+        fx="48.46"
+        fy="-.95"
+        r="64.84"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0" stop-color="#9f42c6" />
+        <stop offset=".27" stop-color="#a041c3" />
+        <stop offset=".42" stop-color="#a43ebb" />
+        <stop offset=".53" stop-color="#aa39ad" />
+        <stop offset=".64" stop-color="#b4339a" />
+        <stop offset=".73" stop-color="#c02b81" />
+        <stop offset=".82" stop-color="#cf2061" />
+        <stop offset=".9" stop-color="#e1143c" />
+        <stop offset=".97" stop-color="#f50613" />
+        <stop offset="1" stop-color="red" />
+      </radialGradient>
+    </defs>
+    <g id="_x2D_-production">
+      <g id="logomark.square.gradient">
+        <path
+          id="background"
+          fill="url(#radial-gradient)"
+          d="M48,11.26v25.47c0,6.22-5.05,11.27-11.27,11.27H11.26c-6.22,0-11.26-5.05-11.26-11.27V11.26C0,5.04,5.04,0,11.26,0h25.47c3.32,0,6.3,1.43,8.37,3.72.47.52.89,1.08,1.25,1.68.18.29.34.59.5.89.33.68.6,1.39.79,2.14.1.37.18.76.23,1.15.09.54.13,1.11.13,1.68Z"
+        />
+        <g id="checkbox">
+          <path
+            fill="#fff"
+            d="M13.62,17.97l7.92,7.92,1.47-1.47-7.92-7.92-1.47,1.47ZM28.01,32.37l1.47-1.46-2.16-2.16,20.32-20.32c-.19-.75-.46-1.46-.79-2.14l-22.46,22.46,3.62,3.62ZM12.92,18.67l-1.46,1.46,14.4,14.4,1.46-1.47-4.32-4.31L46.35,5.4c-.36-.6-.78-1.16-1.25-1.68l-23.56,23.56-8.62-8.61ZM47.87,9.58l-19.17,19.17,1.47,1.46,17.83-17.83v-1.12c0-.57-.04-1.14-.13-1.68ZM25.16,22.27l-7.92-7.92-1.47,1.47,7.92,7.92,1.47-1.47ZM41.32,35.12c0,3.42-2.78,6.2-6.2,6.2H12.88c-3.42,0-6.2-2.78-6.2-6.2V12.88c0-3.42,2.78-6.21,6.2-6.21h20.78v-2.07H12.88c-4.56,0-8.28,3.71-8.28,8.28v22.24c0,4.56,3.71,8.28,8.28,8.28h22.24c4.56,0,8.28-3.71,8.28-8.28v-3.51h-2.07v3.51Z"
+          />
+        </g>
+      </g>
+    </g>
+  </svg>
+</template>

src/assets/brand/favicon.svg

@@ -21,6 +21,7 @@ import {
   isKnownSource,
 } from '~/models/source.model';
 import { type TagLink } from '~/models/tag.model';
+import { useExtensionSettingsStoreRefs } from '~/stores/settings/extension.store';
 import { resolveLinkUrl, useLinksStore } from '~/stores/settings/links.store';
 import { useI18n } from '~/utils/i18n.utils';
 
@@ -96,6 +97,8 @@ const customLinks = computed(() => {
   });
 });
 
+const { brand } = useExtensionSettingsStoreRefs();
+
 const links = computed(() => {
   if (!ids?.value) return;
   const _links: TagLink[] = [];
@@ -110,7 +113,7 @@ const links = computed(() => {
           season: season?.value,
           episode: episode?.value,
         }),
-        icon: getIconFromSource(key),
+        icon: getIconFromSource(key, brand.value),
       });
     });
   if (customLinks.value) _links.push(...customLinks.value);

src/assets/brand/icon-512.png

@@ -10,6 +10,7 @@ import type { RatingItem } from '~/models/rating.model';
 import IconStarFilledHalf from '~/components/icons/IconStarFilledHalf.vue';
 import PanelRating from '~/components/views/panel/PanelRating.vue';
 import { getIconFromSource } from '~/models/source.model';
+import { useExtensionSettingsStoreRefs } from '~/stores/settings/extension.store';
 
 const props = defineProps({
   ratings: {
@@ -20,13 +21,16 @@ const props = defineProps({
 
 const { ratings } = toRefs(props);
 
+const { brand } = useExtensionSettingsStoreRefs();
 const getIcon = (icon: RatingItem['icon']): DropdownOption['icon'] => {
   if (!icon) return undefined;
   return () =>
     h(NIcon, {
       style: { marginRight: '-0.25rem' },
       component:
-        typeof icon === 'string' ? getIconFromSource(icon, IconStarFilledHalf) : icon,
+        typeof icon === 'string'
+          ? getIconFromSource(icon, brand.value, IconStarFilledHalf)
+          : icon,
     });
 };
 

src/assets/favicon/favicon-128x128.png

@@ -29,6 +29,7 @@ import { useRatingsStoreRefs } from '~/stores/data/ratings.store';
 import { useSearchStoreRefs } from '~/stores/data/search.store';
 import { useAuthSettingsStoreRefs } from '~/stores/settings/auth.store';
 import {
+  Brand,
   useExtensionSettingsStore,
   useExtensionSettingsStoreRefs,
 } from '~/stores/settings/extension.store';
@@ -54,6 +55,7 @@ const {
   loadingHysteresis,
   navbarPosition,
   iconOnly,
+  brand,
 } = useExtensionSettingsStoreRefs();
 
 const { getIcon, fetchLists } = useListsStore();
@@ -151,6 +153,10 @@ const onColor = () => {
   picker.value?.focus();
   picker.value?.click();
 };
+
+const toggleBrand = () => {
+  brand.value = brand.value === Brand.New ? Brand.Old : Brand.New;
+};
 </script>
 
 <template>
@@ -223,6 +229,18 @@ const onColor = () => {
       </div>
     </SettingsFormItem>
 
+    <!--  Brand  -->
+    <SettingsFormItem :label="i18n('label_brand')">
+      <NSwitch
+        class="form-switch"
+        :value="brand === Brand.New"
+        @update:value="toggleBrand()"
+      >
+        <template #checked>{{ i18n('new', 'common', 'button') }}</template>
+        <template #unchecked>{{ i18n('old', 'common', 'button') }}</template>
+      </NSwitch>
+    </SettingsFormItem>
+
     <!--  Icon Only  -->
     <SettingsFormItem :label="i18n('label_icon_only')">
       <NSwitch v-model:value="iconOnly" class="form-switch">

src/assets/favicon/favicon-48x48.png

@@ -94,5 +94,13 @@
   "common__button__watched": {
     "message": "Watched",
     "description": "Button to mark as watched."
+  },
+  "common__button__new": {
+    "message": "New",
+    "description": "New button."
+  },
+  "common__button__old": {
+    "message": "Old",
+    "description": "Old button."
   }
 }

src/assets/favicon/icon-512.png

@@ -3,6 +3,10 @@
     "message": "Background Color",
     "description": "Label for the 'Background Color' setting"
   },
+  "settings__tabs__label_brand": {
+    "message": "Branding",
+    "description": "Label for the 'Branding' setting"
+  },
   "settings__tabs__label_loading_bar": {
     "message": "Loading Bar Hysteresis",
     "description": "Label for the 'Loading Bar Hysteresis' setting"

src/assets/images/poster-placeholder-new.webp

@@ -4,16 +4,20 @@
     <meta charset="UTF-8" />
     <base target="_blank" />
     <title>Side Trakt Web</title>
-    <link rel="icon" href="./assets/logo.svg" type="image/svg+xml" />
-    <link rel="fluid-icon" href="./assets/logo.svg" type="image/svg+xml" />
-    <link rel="mask-icon" href="./assets/logo.svg" color="#181818" />
 
-    <link rel="apple-touch-icon" sizes="180x180" href="./assets/favicon/apple-touch-icon.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon/favicon-16x16.png" />
-    <link rel="mask-icon" href="./assets/favicon/safari-pinned-tab.svg" color="#5bbad5" />
+    <link id="svg-icon" rel="icon" href="./assets/logo.svg" type="image/svg+xml" />
+    <link id="svg-fluid-icon" rel="fluid-icon" href="./assets/logo.svg" type="image/svg+xml" />
+    <link id="svg-mask-icon" rel="mask-icon" href="./assets/logo.svg" type="image/svg+xml" color="#181818" />
+
+    <link id="png-icon-16x16" rel="icon" type="image/png" sizes="16x16" href="./assets/favicon/favicon-16x16.png" />
+    <link id="png-icon-32x32" rel="icon" type="image/png" sizes="32x32" href="./assets/favicon/favicon-32x32.png" />
+    <link id="png-icon-48x48" rel="icon" type="image/png" sizes="48x48" href="./assets/favicon/favicon-48x48.png" />
+
+    <link id="apple-icon" rel="apple-touch-icon" sizes="180x180" href="./assets/favicon/apple-touch-icon.png" />
+
+    <meta id="theme-color" name="theme-color" content="#80000a" />
+
     <meta name="msapplication-TileColor" content="#da532c" />
-    <meta name="theme-color" content="#80000a" />
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

src/components/common/list/ListItem.vue

@@ -6,6 +6,7 @@ export const MessageType = {
   VersionUpdate: 'version-update',
   AppReady: 'app-ready',
   BadgeUpdate: 'badge-update',
+  IconUpdate: 'icon-update',
 } as const;
 
 export type MessageTypes = (typeof MessageType)[keyof typeof MessageType];
@@ -28,4 +29,6 @@ export type MessagePayload<T extends MessageTypes = MessageTypes> = T extends ty
       ? boolean
       : T extends typeof MessageType.BadgeUpdate
         ? BadgeUpdatePayload
-        : MessageTypes;
+        : T extends typeof MessageType.IconUpdate
+          ? string
+          : never;

src/components/common/navbar/NavbarComponent.vue

@@ -2,14 +2,18 @@ import type { Component } from 'vue';
 
 import type { I18nFunction } from '~/models/i18n.model';
 
+import type { Brands } from '~/stores/settings/extension.store';
+
 import IconExternalLinkRounded from '~/components/icons/IconExternalLinkRounded.vue';
 import IconIMDb from '~/components/icons/IconIMDb.vue';
 import IconMyAnimeList from '~/components/icons/IconMyAnimeList.vue';
 import IconSimkl from '~/components/icons/IconSimkl.vue';
 import IconTMDb from '~/components/icons/IconTMDb.vue';
 import IconTVDb from '~/components/icons/IconTVDb.vue';
 import IconTrakt from '~/components/icons/IconTrakt.vue';
+import IconTraktNew from '~/components/icons/IconTraktNew.vue';
 import { ResolveExternalLinks } from '~/settings/external.links';
+import { Brand } from '~/stores/settings/extension.store';
 
 export const DataSource = {
   Trakt: 'trakt',
@@ -25,10 +29,10 @@ export type DataSources = (typeof DataSource)[keyof typeof DataSource];
 export const AllDataSources = Object.keys(DataSource).map(key => key.toLowerCase());
 export const isKnownSource = (source: string): source is DataSources => AllDataSources.includes(source);
 
-export const getIconFromSource = (source: DataSources | string, fallback: Component = IconExternalLinkRounded): Component => {
+export const getIconFromSource = (source: DataSources | string, brand?: Brands, fallback: Component = IconExternalLinkRounded): Component => {
   switch (source) {
     case DataSource.Trakt:
-      return IconTrakt;
+      return brand === Brand.New ? IconTraktNew : IconTrakt;
     case DataSource.Tmdb:
       return IconTMDb;
     case DataSource.Imdb: