feat(weg): notifications count on app items

changelog.md

@@ -5,6 +5,7 @@
 - allow custom animations on popups/dropdowns.
 - show open new window buttons on dock app items context menu.
 - toggle dock items using win + number.
+- notifications count on dock app items.
 
 ### refactor
 - create separated system service to handle elevated actions.

src/apps/seelenweg/modules/item/infra/UserApplication.tsx

@@ -32,6 +32,7 @@ export const UserApplication = memo(({ item, onAssociatedViewOpenChanged }: Prop
   const [openContextMenu, setOpenContextMenu] = useState(false);
   const [blockUntil, setBlockUntil] = useState(moment(new Date()));
 
+  const notifications = useSelector(Selectors.notifications);
   const devTools = useSelector(Selectors.devTools);
   const settings = useSelector(Selectors.settings);
   const focusedApp = useSelector(Selectors.focusedApp);
@@ -83,6 +84,7 @@ export const UserApplication = memo(({ item, onAssociatedViewOpenChanged }: Prop
     }
   }, [openPreview || openContextMenu]);
 
+  const notificationsCount = notifications.filter((n) => n.appUmid === item.umid).length;
   return (
     <DraggableItem
       item={item}
@@ -161,10 +163,13 @@ export const UserApplication = memo(({ item, onAssociatedViewOpenChanged }: Prop
           >
             <BackgroundByLayersV2 prefix="item" />
             <img className="weg-item-icon" src={iconSrc} draggable={false} />
+            {notificationsCount > 0 && <div className="weg-item-badge">{notificationsCount}</div>}
             <div
               className={cx('weg-item-open-sign', {
                 'weg-item-open-sign-active': !!item.windows.length,
-                'weg-item-open-sign-focused': item.windows.some((w) => w.handle === focusedApp?.hwnd),
+                'weg-item-open-sign-focused': item.windows.some(
+                  (w) => w.handle === focusedApp?.hwnd,
+                ),
               })}
             />
           </div>

src/apps/seelenweg/modules/shared/store/app.ts

@@ -16,6 +16,7 @@ const initialState: RootState = {
   isOverlaped: false,
   settings: (await Settings.default()).seelenweg,
   mediaSessions: [],
+  notifications: [],
   colors: UIColors.default().inner,
 };
 

src/apps/seelenweg/modules/shared/store/domain.ts

@@ -1,5 +1,7 @@
 import { SeelenWegSettings, WegItem } from '@seelen-ui/lib/types';
 
+import { AppNotification } from 'src/apps/toolbar/modules/Notifications/domain';
+
 import { IRootState } from '../../../../../shared.interfaces';
 import { FocusedApp } from '../../../../shared/interfaces/common';
 
@@ -36,4 +38,5 @@ export interface RootState extends IRootState<SeelenWegSettings> {
   focusedApp: FocusedApp | null;
   isOverlaped: boolean;
   mediaSessions: MediaSession[];
+  notifications: AppNotification[];
 }

src/apps/seelenweg/modules/shared/store/infra.ts

@@ -12,6 +12,7 @@ import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow';
 import { debounce } from 'lodash';
 
 import { RootActions, RootSlice } from './app';
+import { AppNotification } from 'src/apps/toolbar/modules/Notifications/domain';
 
 import { MediaSession } from './domain';
 
@@ -53,6 +54,10 @@ export async function registerStoreEvents() {
     store.dispatch(RootActions.setMediaSessions(event.payload));
   });
 
+  await listenGlobal<AppNotification[]>(SeelenEvent.Notifications, (event) => {
+    store.dispatch(RootActions.setNotifications(event.payload.sort((a, b) => b.date - a.date)));
+  });
+
   await Settings.onChange(loadSettingsToStore);
 
   await WegItems.forCurrentWidgetChange(loadWegItemsToStore);

src/apps/toolbar/modules/Notifications/domain.ts

@@ -1,8 +1,8 @@
 export interface AppNotification {
   id: number;
-  app_name: string;
-  app_description: string;
-  app_umid: string;
+  appName: string;
+  appDescription: string;
+  appUmid: string;
   body: string[];
   date: number;
 }

src/apps/toolbar/modules/Notifications/infra/Notification.tsx

@@ -24,7 +24,7 @@ function WindowsDateFileTimeToDate(fileTime: bigint) {
 const MISSING_ICON_SRC = convertFileSrc(await path.resolveResource('static/icons/missing.png'));
 
 export function Notification({ notification }: Props) {
-  const icon = useIcon({ umid: notification.app_umid });
+  const icon = useIcon({ umid: notification.appUmid });
 
   return (
     <motion.div
@@ -38,7 +38,7 @@ export function Notification({ notification }: Props) {
       <div className="notification-header">
         <div className="notification-header-info">
           <img className="notification-icon" src={icon || MISSING_ICON_SRC} />
-          <div>{notification.app_name}</div>
+          <div>{notification.appName}</div>
           <span>-</span>
           <div>{moment(WindowsDateFileTimeToDate(BigInt(notification.date))).fromNow()}</div>
         </div>

src/apps/toolbar/modules/shared/store/infra.ts

@@ -95,7 +95,7 @@ export async function registerStoreEvents() {
     store.dispatch(RootActions.setMediaInputs(event.payload));
   });
 
-  await listenGlobal<AppNotification[]>('notifications', (event) => {
+  await listenGlobal<AppNotification[]>(SeelenEvent.Notifications, (event) => {
     store.dispatch(RootActions.setNotifications(event.payload.sort((a, b) => b.date - a.date)));
   });
 
@@ -141,7 +141,7 @@ export async function loadStore() {
     RootActions.setEnv((await invoke(SeelenCommand.GetUserEnvs)) as Record<string, string>),
   );
 
-  let placeholder = await invoke(SeelenCommand.StateGetToolbarItems) as Placeholder;
+  let placeholder = (await invoke(SeelenCommand.StateGetToolbarItems)) as Placeholder;
   store.dispatch(RootActions.setPlaceholder(placeholder));
 }
 

src/background/modules/notifications/application.rs

@@ -30,7 +30,7 @@ lazy_static! {
 }
 
 #[derive(Debug, Serialize)]
-#[allow(dead_code)]
+#[serde(rename_all = "camelCase")]
 pub struct AppNotification {
     pub id: u32,
     app_umid: String,

static/themes/default/seelen/weg.css

@@ -98,6 +98,23 @@
       transition: transform 0.2s linear;
     }
   }
+
+  .weg-item-badge {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate(25%, -25%);
+    background-color: var(--config-accent-color);
+    color: #efefef;
+    height: 16px;
+    min-width: 16px;
+    font-size: 10px;
+    font-weight: 600;
+    border-radius: 8px;
+  }
 }
 
 .weg-item-icon {
@@ -188,8 +205,6 @@
   }
 }
 
-
-
 .weg-item-preview-container {
   padding: 10px;
   border-radius: 10px;
@@ -209,17 +224,18 @@
   }
 }
 
-
-.weg-item-preview-container-open, .weg-context-menu-container-open,
-.weg-item-preview-container-close, .weg-context-menu-container-close {
-  animation: PreviewContainerAnimation 0.2s linear forwards; 
+.weg-item-preview-container-open,
+.weg-context-menu-container-open,
+.weg-item-preview-container-close,
+.weg-context-menu-container-close {
+  animation: PreviewContainerAnimation 0.2s linear forwards;
 }
 
-.weg-item-preview-container-close, .weg-context-menu-container-close {
+.weg-item-preview-container-close,
+.weg-context-menu-container-close {
   animation-direction: reverse;
 }
 
-
 .weg-item-preview {
   padding: 6px 10px 10px 10px;
   border-radius: 10px;