fix notification macos glass border (#3699)

* in-meeting-notif message adjustment

* kind of works

* border stuff

Author: yujonglee

apps/desktop/src/contexts/listener.tsx

@@ -121,12 +121,11 @@ const useHandleDetectEvents = (store: ListenerStore) => {
           }
 
           const minutes = Math.round(payload.duration_secs / 60);
-          const appName = payload.app.name;
 
           void notificationCommands.showNotification({
             key: payload.key,
             title: "Meeting in progress?",
-            message: `${appName} has been using the mic for ${minutes} min. Start listening?`,
+            message: `Mic used for ${minutes} minutes. Start listening?`,
             timeout: { secs: 15, nanos: 0 },
             event_id: null,
             start_time: null,

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

@@ -5,7 +5,7 @@ extension NotificationManager {
     notification: NotificationInstance, screen: NSScreen, timeoutSeconds: Double
   ) {
     let screenRect = screen.visibleFrame
-    let finalX = screenRect.maxX - panelWidth() - Layout.rightMargin + Layout.buttonOverhang
+    let finalX = screenRect.maxX - panelWidth() - Layout.rightMargin + buttonOverhang()
     let y = notification.panel.frame.minY
 
     notification.panel.setFrame(

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

@@ -1,6 +1,14 @@
 import Cocoa
 
 extension NotificationManager {
+  func isMacOS26() -> Bool {
+    NSClassFromString("NSGlassEffectView") != nil
+  }
+
+  func buttonOverhang() -> CGFloat {
+    isMacOS26() ? 0 : Layout.buttonOverhang
+  }
+
   func createPanel(screen: NSScreen? = nil, yPosition: CGFloat) -> NSPanel {
     let targetScreen = screen ?? getTargetScreen() ?? NSScreen.main!
     let screenRect = targetScreen.visibleFrame
@@ -21,7 +29,7 @@ extension NotificationManager {
     panel.hidesOnDeactivate = false
     panel.isOpaque = false
     panel.backgroundColor = .clear
-    panel.hasShadow = true
+    panel.hasShadow = !isMacOS26()
     panel.collectionBehavior = [.canJoinAllSpaces, .fullScreenAuxiliary, .ignoresCycle]
     panel.isMovableByWindowBackground = false
     panel.alphaValue = 0
@@ -36,13 +44,21 @@ extension NotificationManager {
       frame: NSRect(x: 0, y: 0, width: panelWidth(), height: panelHeight()))
     v.wantsLayer = true
     v.layer?.backgroundColor = NSColor.clear.cgColor
+    v.layer?.isOpaque = false
+    if isMacOS26() {
+      v.layer?.cornerRadius = Layout.cornerRadius
+      v.layer?.masksToBounds = true
+      if #available(macOS 11.0, *) {
+        v.layer?.cornerCurve = .continuous
+      }
+    }
     v.autoresizingMask = [.width, .height]
     return v
   }
 
   func createContainer(clickableView: ClickableView) -> NSView {
-    let overhang = Layout.buttonOverhang
-    let container = NSView(
+    let overhang = buttonOverhang()
+    let container = ShadowContainerView(
       frame: NSRect(
         x: overhang,
         y: 0,
@@ -53,6 +69,9 @@ extension NotificationManager {
     container.wantsLayer = true
     container.layer?.cornerRadius = Layout.cornerRadius
     container.layer?.masksToBounds = false
+    if #available(macOS 11.0, *) {
+      container.layer?.cornerCurve = .continuous
+    }
     container.autoresizingMask = [.width, .height]
     container.layer?.shadowColor = NSColor.black.cgColor
     container.layer?.shadowOpacity = 0.22
@@ -62,17 +81,25 @@ extension NotificationManager {
   }
 
   func createEffectView(container: NSView) -> (NSVisualEffectView, NotificationBackgroundView) {
+    let isMacOS26 = isMacOS26()
+
     let effectView = NSVisualEffectView(frame: container.bounds)
     effectView.material = .popover
     effectView.state = .active
-    effectView.blendingMode = .behindWindow
+    effectView.blendingMode = isMacOS26 ? .withinWindow : .behindWindow
     effectView.wantsLayer = true
     effectView.layer?.cornerRadius = Layout.cornerRadius
     effectView.layer?.masksToBounds = true
+    if isMacOS26, #available(macOS 11.0, *) {
+      effectView.layer?.cornerCurve = .continuous
+    }
     effectView.autoresizingMask = [.width, .height]
 
     let backgroundView = NotificationBackgroundView(frame: effectView.bounds)
     backgroundView.autoresizingMask = [.width, .height]
+    if isMacOS26 {
+      backgroundView.makeBackgroundOpaque()
+    }
     effectView.addSubview(backgroundView, positioned: .below, relativeTo: nil)
 
     container.addSubview(effectView)
@@ -106,7 +133,7 @@ extension NotificationManager {
     closeButton.translatesAutoresizingMaskIntoConstraints = false
     clickableView.addSubview(closeButton, positioned: .above, relativeTo: nil)
 
-    let buttonOffset = (CloseButtonConfig.size / 2) - 2
+    let buttonOffset = isMacOS26() ? (CloseButtonConfig.size / 2) + 4 : (CloseButtonConfig.size / 2) - 2
     NSLayoutConstraint.activate([
       closeButton.centerYAnchor.constraint(equalTo: container.topAnchor, constant: buttonOffset),
       closeButton.centerXAnchor.constraint(

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

@@ -25,11 +25,11 @@ extension NotificationManager {
   func repositionNotifications(animated: Bool = true) {
     guard let screen = getTargetScreen() else { return }
     let screenRect = screen.visibleFrame
-    let rightPosition = screenRect.maxX - panelWidth() - Layout.rightMargin + Layout.buttonOverhang
+    let rightPosition = screenRect.maxX - panelWidth() - Layout.rightMargin + buttonOverhang()
 
     let sorted = activeNotifications.values.sorted { $0.panel.frame.minY > $1.panel.frame.minY }
 
-    var currentY = screenRect.maxY - Layout.topMargin + Layout.buttonOverhang
+    var currentY = screenRect.maxY - Layout.topMargin + buttonOverhang()
 
     for notification in sorted {
       let height = notification.panel.frame.height
@@ -70,16 +70,16 @@ extension NotificationManager {
       occupiedHeight += notification.panel.frame.height + notificationSpacing
     }
 
-    let baseY = screenRect.maxY - panelHeight() - Layout.topMargin + Layout.buttonOverhang
+    let baseY = screenRect.maxY - panelHeight() - Layout.topMargin + buttonOverhang()
     return baseY - occupiedHeight
   }
 
   func panelWidth() -> CGFloat {
-    Layout.notificationWidth + Layout.buttonOverhang
+    Layout.notificationWidth + buttonOverhang()
   }
 
   func panelHeight(expanded: Bool = false) -> CGFloat {
     let contentHeight = expanded ? Layout.expandedNotificationHeight : Layout.notificationHeight
-    return contentHeight + Layout.buttonOverhang
+    return contentHeight + buttonOverhang()
   }
 }

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

@@ -23,6 +23,14 @@ extension NotificationManager {
 
     clickableView.addSubview(container)
     panel.contentView = clickableView
+    if isMacOS26() {
+      panel.contentView?.wantsLayer = true
+      panel.contentView?.layer?.cornerRadius = Layout.cornerRadius
+      panel.contentView?.layer?.masksToBounds = true
+      if #available(macOS 11.0, *) {
+        panel.contentView?.layer?.cornerCurve = .continuous
+      }
+    }
 
     setupContent(effectView: effectView, container: container, notification: notification)
 

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

@@ -1,5 +1,18 @@
 import Cocoa
 
+class ShadowContainerView: NSView {
+  override func layout() {
+    super.layout()
+    let pathRect = bounds.insetBy(dx: 0.5, dy: 0.5)
+    layer?.shadowPath = CGPath(
+      roundedRect: pathRect,
+      cornerWidth: Layout.cornerRadius,
+      cornerHeight: Layout.cornerRadius,
+      transform: nil
+    )
+  }
+}
+
 class NotificationBackgroundView: NSView {
   let bgLayer = CALayer()
   let borderLayer = CALayer()
@@ -18,6 +31,20 @@ class NotificationBackgroundView: NSView {
     }
   }
 
+  func makeBackgroundOpaque() {
+    bgLayer.backgroundColor = NSColor(calibratedWhite: 0.92, alpha: 1.0).cgColor
+    layer?.cornerRadius = Layout.cornerRadius
+    bgLayer.cornerRadius = Layout.cornerRadius
+    borderLayer.cornerRadius = Layout.cornerRadius
+    borderLayer.borderWidth = 1.5
+    borderLayer.borderColor = NSColor(calibratedWhite: 0.75, alpha: 0.5).cgColor
+    if #available(macOS 11.0, *) {
+      layer?.cornerCurve = .continuous
+      bgLayer.cornerCurve = .continuous
+      borderLayer.cornerCurve = .continuous
+    }
+  }
+
   private var progressBarFullWidth: CGFloat {
     bounds.width - (Layout.progressBarInset * 2)
   }