fix(desktop): show app details in mic ignore prompt

Use detected app names and footer icons in mic notification ignore prompts, and render footer icons in compact macOS notifications.

Author: ComputelessComputer

apps/desktop/src/stt/contexts.test.tsx

@@ -308,8 +308,12 @@ describe("ListenerProvider detect events", () => {
           event_ids: [],
         },
         footer: {
-          text: "Ignore this app?",
+          text: "Ignore Zoom?",
           actionLabel: "Yes",
+          icon: {
+            type: "bundle_id",
+            bundle_id: "us.zoom.xos",
+          },
         },
         icon: null,
       }),

apps/desktop/src/stt/contexts.tsx

@@ -6,7 +6,10 @@ import {
   commands as detectCommands,
   events as detectEvents,
 } from "@hypr/plugin-detect";
-import { commands as notificationCommands } from "@hypr/plugin-notification";
+import {
+  commands as notificationCommands,
+  type NotificationIcon,
+} from "@hypr/plugin-notification";
 
 import { getSessionEventById } from "~/session/utils";
 import * as main from "~/store/tinybase/store/main";
@@ -39,12 +42,49 @@ const BROWSER_MEETING_APP_IDS = new Set([
 
 type MainStore = NonNullable<ReturnType<typeof main.UI.useStore>>;
 
-function getIgnorableAppIds(apps: { id: string }[]) {
-  return [
-    ...new Set(
-      apps.map((app) => app.id).filter((id) => id && !id.startsWith("pid:")),
-    ),
-  ];
+function getIgnorableApps(apps: { id: string; name: string }[]) {
+  const seen = new Set<string>();
+
+  return apps.filter((app) => {
+    if (!app.id || app.id.startsWith("pid:") || seen.has(app.id)) {
+      return false;
+    }
+
+    seen.add(app.id);
+    return true;
+  });
+}
+
+function getNotificationIconForAppId(appId: string): NotificationIcon | null {
+  if (!appId || appId.startsWith("pid:")) {
+    return null;
+  }
+
+  if (appId.startsWith("/") || appId.startsWith("~/")) {
+    return { type: "path", path: appId };
+  }
+
+  return { type: "bundle_id", bundle_id: appId };
+}
+
+function getIgnoreAppsFooterText(apps: { name: string }[]) {
+  const firstName = apps[0]?.name.trim();
+
+  if (apps.length === 1) {
+    return firstName ? `Ignore ${firstName}?` : "Ignore this app?";
+  }
+
+  if (!firstName) {
+    return "Ignore these apps?";
+  }
+
+  const secondName = apps[1]?.name.trim();
+  if (apps.length === 2 && secondName) {
+    return `Ignore ${firstName} and ${secondName}?`;
+  }
+
+  const otherAppCount = apps.length - 1;
+  return `Ignore ${firstName} and ${otherAppCount} other app${otherAppCount === 1 ? "" : "s"}?`;
 }
 
 function parseEventTimeMs(value: string | undefined): number | null {
@@ -227,7 +267,8 @@ const useHandleDetectEvents = (store: ListenerStore) => {
     detectEvents.detectEvent
       .listen(({ payload }) => {
         if (payload.type === "micDetected") {
-          const appIds = getIgnorableAppIds(payload.apps);
+          const ignorableApps = getIgnorableApps(payload.apps);
+          const appIds = ignorableApps.map((app) => app.id);
 
           if (store.getState().live.status === "active") {
             if (appIds.length > 0) {
@@ -250,13 +291,11 @@ const useHandleDetectEvents = (store: ListenerStore) => {
           const options =
             nearbyEvents.length > 0 ? nearbyEvents.map((e) => e.title) : null;
           const footer =
-            appIds.length > 0
+            ignorableApps.length > 0
               ? {
-                  text:
-                    appIds.length === 1
-                      ? "Ignore this app?"
-                      : "Ignore these apps?",
+                  text: getIgnoreAppsFooterText(ignorableApps),
                   actionLabel: "Yes",
+                  icon: getNotificationIconForAppId(ignorableApps[0]!.id),
                 }
               : null;
 

crates/notification-interface/src/lib.rs

@@ -94,6 +94,7 @@ pub struct EventDetails {
 pub struct NotificationFooter {
     pub text: String,
     pub action_label: String,
+    pub icon: Option<NotificationIcon>,
 }
 
 #[derive(Debug, Clone, serde::Serialize, serde::Deserialize, specta::Type)]
@@ -381,6 +382,7 @@ mod tests {
             .footer(NotificationFooter {
                 text: "Ignore this app?".to_string(),
                 action_label: "YES".to_string(),
+                icon: None,
             })
             .build();
 

crates/notification-macos/examples/test_notification_without_event.rs

@@ -26,8 +26,9 @@ fn main() {
             })
             .action_label("Open")
             .footer(NotificationFooter {
-                text: "Ignore reminders like this?".to_string(),
+                text: "Ignore Slack?".to_string(),
                 action_label: "YES".to_string(),
+                icon: NotificationIcon::from_app_id("com.tinyspeck.slackmacgap"),
             })
             .build();
 

crates/notification-macos/swift-lib/src/Models.swift

@@ -15,6 +15,7 @@ struct EventDetails: Codable {
 struct NotificationFooter: Codable {
   let text: String
   let actionLabel: String
+  let icon: NotificationIcon?
 }
 
 enum NotificationIconAsset: Codable {

crates/notification-macos/swift-lib/src/NotificationManager+CompactView.swift

@@ -131,12 +131,30 @@ extension NotificationManager {
       footerRow.spacing = 8
       footerRow.translatesAutoresizingMaskIntoConstraints = false
 
+      let footerTextStack = NSStackView()
+      footerTextStack.orientation = .horizontal
+      footerTextStack.alignment = .centerY
+      footerTextStack.distribution = .fill
+      footerTextStack.spacing = 4
+      footerTextStack.translatesAutoresizingMaskIntoConstraints = false
+      footerTextStack.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
+
+      if let footerIconView = createNotificationIconView(
+        for: footer.icon, fallbackToDefault: false
+      ) {
+        footerIconView.widthAnchor.constraint(equalToConstant: 14).isActive = true
+        footerIconView.heightAnchor.constraint(equalToConstant: 14).isActive = true
+        footerIconView.setContentHuggingPriority(.required, for: .horizontal)
+        footerTextStack.addArrangedSubview(footerIconView)
+      }
+
       let footerLabel = NSTextField(labelWithString: footer.text)
       footerLabel.font = NSFont.systemFont(ofSize: 10, weight: .medium)
       footerLabel.textColor = NSColor.secondaryLabelColor
       footerLabel.lineBreakMode = .byTruncatingTail
       footerLabel.maximumNumberOfLines = 1
       footerLabel.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
+      footerTextStack.addArrangedSubview(footerLabel)
 
       let footerButton = compactFooterButton()
       footerButton.title = footer.actionLabel
@@ -145,7 +163,7 @@ extension NotificationManager {
       }
       footerButton.setContentHuggingPriority(.required, for: .horizontal)
 
-      footerRow.addArrangedSubview(footerLabel)
+      footerRow.addArrangedSubview(footerTextStack)
       footerRow.addArrangedSubview(footerButton)
 
       root.addSubview(divider)

crates/notification-macos/swift-lib/src/NotificationManager+Creation.swift

@@ -220,7 +220,22 @@ extension NotificationManager {
   }
 
   func createNotificationIconView(for payload: NotificationPayload) -> NSImageView? {
-    guard let image = resolveNotificationIcon(payload.icon) else {
+    createNotificationIconView(for: payload.icon, fallbackToDefault: true)
+  }
+
+  func createNotificationIconView(
+    for icon: NotificationIcon?, fallbackToDefault: Bool
+  ) -> NSImageView? {
+    let image: NSImage?
+    if fallbackToDefault {
+      image = resolveNotificationIcon(icon)
+    } else if let icon {
+      image = resolveNotificationIcon(icon)
+    } else {
+      image = nil
+    }
+
+    guard let image else {
       return nil
     }
 

plugins/notification/js/bindings.gen.ts

@@ -43,7 +43,7 @@ export type Duration = { secs: number; nanos: number }
 export type EventDetails = { what: string; timezone: string | null; location: string | null }
 export type Notification = { key: string | null; title: string; message: string; timeout: Duration | null; source: NotificationSource | null; start_time: number | null; participants: Participant[] | null; event_details: EventDetails | null; action_label: string | null; options: string[] | null; footer: NotificationFooter | null; icon: NotificationIcon | null }
 export type NotificationEvent = { type: "notification_confirm"; key: string; source: NotificationSource | null } | { type: "notification_accept"; key: string; source: NotificationSource | null } | { type: "notification_dismiss"; key: string; source: NotificationSource | null } | { type: "notification_timeout"; key: string; source: NotificationSource | null } | { type: "notification_option_selected"; key: string; source: NotificationSource | null; selected_index: number } | { type: "notification_footer_action"; key: string; source: NotificationSource | null }
-export type NotificationFooter = { text: string; actionLabel: string }
+export type NotificationFooter = { text: string; actionLabel: string; icon: NotificationIcon | null }
 export type NotificationIcon = { type: "hidden" } | { type: "bundle_id"; bundle_id: string } | { type: "path"; path: string } | { type: "overlay"; base: NotificationIconAsset; badge: NotificationIconAsset }
 export type NotificationIconAsset = { type: "app_icon" } | { type: "calendar" } | { type: "bundle_id"; bundle_id: string } | { type: "path"; path: string }
 export type NotificationSource = { type: "calendar_event"; event_id: string } | { type: "mic_detected"; app_names: string[]; app_ids?: string[]; event_ids?: string[] }