From 2ac5aed4e12716bab3d9f12ee0c7834a72bf5302 Mon Sep 17 00:00:00 2001
From: Innei <tukon479@gmail.com>
Date: Tue, 4 Nov 2025 22:55:49 +0800
Subject: [PATCH] fix(ui): sonner styles

Updated the global shortcuts registration to ensure proper detection of editable elements by checking if the target is an instance of HTMLElement. This change enhances the accuracy of shortcut handling in editable contexts.

style(toast): remove unused toast styles

Deleted redundant CSS styles related to sonner toast notifications to streamline the stylesheet and improve maintainability.

style(toast): enhance toast styles with z-index and pointer events

Added z-index and pointer-events styles to the toast component for better layering and interaction handling.

Signed-off-by: Innei <tukon479@gmail.com>
---
 .../src/initialize/global-shortcuts.ts        |  2 +-
 .../layer/renderer/src/styles/additional.css  | 61 -------------------
 .../components/src/ui/toast/styles.ts         |  3 +
 3 files changed, 4 insertions(+), 62 deletions(-)

diff --git a/apps/desktop/layer/renderer/src/initialize/global-shortcuts.ts b/apps/desktop/layer/renderer/src/initialize/global-shortcuts.ts
index df10f7f6a..1c28ce0ae 100644
--- a/apps/desktop/layer/renderer/src/initialize/global-shortcuts.ts
+++ b/apps/desktop/layer/renderer/src/initialize/global-shortcuts.ts
@@ -46,7 +46,7 @@ export const registerAppGlobalShortcuts = () => {
   const handleKeydown = (e: KeyboardEvent) => {
     shortcuts.forEach(({ accelerator, action, inputBypass }) => {
       // Prevent on input, textarea, [contenteditable]
-      if (!inputBypass && detectIsEditableElement(e.target as HTMLElement)) {
+      if (!inputBypass && e.target instanceof HTMLElement && detectIsEditableElement(e.target)) {
         return
       }
 
diff --git a/apps/desktop/layer/renderer/src/styles/additional.css b/apps/desktop/layer/renderer/src/styles/additional.css
index 0f280671c..5d2586a54 100644
--- a/apps/desktop/layer/renderer/src/styles/additional.css
+++ b/apps/desktop/layer/renderer/src/styles/additional.css
@@ -52,64 +52,3 @@
     top: calc(env(safe-area-inset-top, 0px) + 20px);
   }
 }
-
-[data-sonner-toast] {
-  background-image: linear-gradient(
-    to bottom right,
-    rgba(var(--color-background) / 0.98),
-    rgba(var(--color-background) / 0.95)
-  ) !important;
-}
-[data-sonner-toast]::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: 1rem;
-  background: linear-gradient(
-    to bottom right,
-    rgba(255, 92, 0, 0.05),
-    transparent,
-    rgba(255, 92, 0, 0.05)
-  );
-  z-index: -1;
-}
-[data-sonner-toast][data-type="success"]::before {
-  background: linear-gradient(
-    to bottom right,
-    rgba(40, 205, 65, 0.05),
-    transparent,
-    rgba(40, 205, 65, 0.05)
-  );
-}
-[data-sonner-toast][data-type="error"]::before {
-  background: linear-gradient(
-    to bottom right,
-    rgba(255, 69, 58, 0.05),
-    transparent,
-    rgba(255, 69, 58, 0.05)
-  );
-}
-[data-sonner-toast][data-type="warning"]::before {
-  background: linear-gradient(
-    to bottom right,
-    rgba(255, 149, 0, 0.05),
-    transparent,
-    rgba(255, 149, 0, 0.05)
-  );
-}
-[data-sonner-toast][data-type="info"]::before {
-  background: linear-gradient(
-    to bottom right,
-    rgba(0, 122, 255, 0.05),
-    transparent,
-    rgba(0, 122, 255, 0.05)
-  );
-}
-[data-sonner-toast][data-type="loading"]::before {
-  background: linear-gradient(
-    to bottom right,
-    rgba(142, 142, 147, 0.05),
-    transparent,
-    rgba(142, 142, 147, 0.05)
-  );
-}
diff --git a/packages/internal/components/src/ui/toast/styles.ts b/packages/internal/components/src/ui/toast/styles.ts
index b152d22ae..b6b34b7c1 100644
--- a/packages/internal/components/src/ui/toast/styles.ts
+++ b/packages/internal/components/src/ui/toast/styles.ts
@@ -3,6 +3,8 @@ export const toastStyles = {
     group relative flex w-full items-center justify-between gap-3 rounded-2xl p-4
     backdrop-blur-2xl duration-300 ease-out
     max-w-md min-w-[320px]
+    z-[9999999999]
+    pointer-events-auto
     font-theme
     [&]:border [&]:border-solid
     [&]:data-[type=default]:border-[rgba(255,92,0,0.2)]
@@ -17,6 +19,7 @@ export const toastStyles = {
     [&]:data-[type=warning]:shadow-[0_8px_32px_rgba(255,149,0,0.08),0_4px_16px_rgba(255,149,0,0.06),0_2px_8px_rgba(0,0,0,0.1)]
     [&]:data-[type=info]:shadow-[0_8px_32px_rgba(0,122,255,0.08),0_4px_16px_rgba(0,122,255,0.06),0_2px_8px_rgba(0,0,0,0.1)]
     [&]:data-[type=loading]:shadow-[0_8px_32px_rgba(142,142,147,0.08),0_4px_16px_rgba(142,142,147,0.06),0_2px_8px_rgba(0,0,0,0.1)]
+    [&_.sonner-loader]:relative
   `,
   title: tw`
     text-sm font-medium text-text