feat(panel): translate notification with i18n and adjust styling

Author: dvcol

src/components/container/ContainerComponent.ce.vue

@@ -80,6 +80,8 @@ const root = ref<HTMLElement>();
 </template>
 
 <style lang="scss">
+/* stylelint-disable selector-class-pattern -- library class name */
+
 @use '~/styles/base.scss';
 @use '~/styles/mixin' as mixin;
 @use '~/styles/layout' as layout;
@@ -137,6 +139,8 @@ const root = ref<HTMLElement>();
   }
 }
 
+.n-notification-container .n-notification,
+.n-message-wrapper .n-message,
 .n-dropdown-menu,
 .n-date-panel,
 .n-virtual-list {
@@ -146,6 +150,27 @@ const root = ref<HTMLElement>();
   );
 }
 
+.n-notification-container .n-notification,
+.n-message-wrapper .n-message.n-message--error-type {
+  --custom-bg-color: var(--bg-color-error-80);
+  --custom-bg-color-hover: var(--bg-color-error);
+}
+
+.n-message-wrapper .n-message.n-message--success-type {
+  --custom-bg-color: var(--bg-color-success-80);
+  --custom-bg-color-hover: var(--bg-color-success);
+}
+
+.n-message-wrapper .n-message.n-message--info-type {
+  --custom-bg-color: var(--bg-color-info-80);
+  --custom-bg-color-hover: var(--bg-color-info);
+}
+
+.n-message-wrapper .n-message.n-message--warning-type {
+  --custom-bg-color: var(--bg-color-warning-80);
+  --custom-bg-color-hover: var(--bg-color-warning);
+}
+
 .n-popselect-menu,
 .n-select-menu {
   @include mixin.hover-background(
@@ -163,8 +188,6 @@ const root = ref<HTMLElement>();
   background: transparent;
 }
 
-.n-message-wrapper .n-message,
-.n-notification-container .n-notification,
 .n-tooltip.n-tooltip,
 .n-popover-arrow.n-popover-arrow.n-popover-arrow {
   background: var(--custom-bg-color, var(--bg-color-60));

src/i18n/en/common/list.json

@@ -0,0 +1,26 @@
+{
+  "common__list__list": {
+    "message": "List",
+    "description": "List of media items"
+  },
+  "common__list__collaboration": {
+    "message": "Collaboration",
+    "description": "Shared list of media items"
+  },
+  "common__list__collection": {
+    "message": "Collection",
+    "description": "Collection of media items"
+  },
+  "common__list__watchlist": {
+    "message": "Watchlist",
+    "description": "Watchlisted media items"
+  },
+  "common__list__favorites": {
+    "message": "Favorites",
+    "description": "List of favorites media items"
+  },
+  "common__list__history": {
+    "message": "History",
+    "description": "List of watched media items"
+  }
+}

src/i18n/en/common/notification.json

@@ -0,0 +1,10 @@
+{
+  "common__notification__added_to": {
+    "message": "added to",
+    "description": "Notification message when an item is added to a list"
+  },
+  "common__notification__removed_from": {
+    "message": "removed from",
+    "description": "Notification message when an item is removed from a list"
+  }
+}

src/services/trakt.service.ts

@@ -322,7 +322,7 @@ export class TraktService {
     },
     {
       cache: this.caches.trakt,
-      retention: CacheRetention.Day,
+      retention: CacheRetention.Hour * 2,
       key: JSON.stringify({
         template: {
           method: 'GET',

src/stores/data/list.store.ts

@@ -18,6 +18,7 @@ import { ListScrollItemType } from '~/models/list-scroll.model';
 import { NotificationService } from '~/services/notification.service';
 import { TraktService } from '~/services/trakt.service';
 import { useUserSettingsStoreRefs } from '~/stores/settings/user.store';
+import { useI18n } from '~/utils';
 import { storage } from '~/utils/browser/browser-storage.utils';
 import { debounceLoading, useBelowThreshold, useLoadingPlaceholder, useSearchFilter } from '~/utils/store.utils';
 
@@ -306,6 +307,8 @@ export const useListStore = defineStore('data.list', () => {
     }
   };
 
+  const i18n = useI18n('common', 'notification');
+
   const addToOrRemoveFromList = async ({
     list,
     itemType,
@@ -368,6 +371,19 @@ export const useListStore = defineStore('data.list', () => {
       } else {
         console.error(`Unknown list type ${listType}.`);
       }
+      NotificationService.message.success(
+        [
+          i18n(itemType, 'common', 'media', 'type'),
+          i18n(remove ? 'removed_from' : 'added_to'),
+          i18n(list.type, 'common', 'list').toLowerCase(),
+          list.type === ListType.List ? `'${list.name}'` : '',
+        ]
+          .filter(Boolean)
+          .join(' '),
+        {
+          duration: 50000,
+        },
+      );
     } catch (e) {
       console.error('Failed to add item to list');
       NotificationService.error(`Failed to add item to list '${list.name}'`, e);

src/styles/base.scss

@@ -42,6 +42,8 @@
   --bg-red-90: rgba(255 222 223 / 90%);
   --bg-color-primary: rgb(24 42 36);
   --bg-color-primary-80: rgba(24 42 36 / 80%);
+  --bg-color-success: var(--bg-color-primary);
+  --bg-color-success-80: var(--bg-color-primary-80);
   --bg-color-info: rgb(22 35 42);
   --bg-color-info-80: rgb(22 35 42 / 80%);
   --bg-color-warning: rgb(43 37 25);