fix: sooner style

package.json

@@ -86,7 +86,7 @@
     "remesh-logger": "^4.1.0",
     "remesh-react": "^4.1.2",
     "rxjs": "^7.8.1",
-    "sonner": "^1.6.1",
+    "sonner": "^1.7.0",
     "tailwind-merge": "^2.5.4",
     "trystero": "^0.20.0",
     "type-fest": "^4.26.1",
@@ -104,7 +104,7 @@
     "@types/eslint": "^9.6.1",
     "@types/eslint__js": "^8.42.3",
     "@types/eslint-plugin-tailwindcss": "^3.17.0",
-    "@types/node": "^22.8.6",
+    "@types/node": "^22.8.7",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@typescript-eslint/parser": "^8.12.2",

src/app/content/index.tsx

@@ -14,7 +14,9 @@ import { ToastImpl } from '@/domain/impls/Toast'
 // import { PeerRoomImpl } from '@/domain/impls/PeerRoom'
 import { PeerRoomImpl } from '@/domain/impls/PeerRoom2'
 import '@/assets/styles/tailwind.css'
+// Remove import after merging: https://github.com/emilkowalski/sonner/pull/508
 import '@/assets/styles/sonner.css'
+import '@/assets/styles/overlay.css'
 import NotificationDomain from '@/domain/Notification'
 import { createElement } from '@/utils'
 
@@ -56,13 +58,13 @@ export default defineContentScript({
         container.append(app)
         const root = createRoot(app)
         root.render(
-          // <React.StrictMode>
-          <RemeshRoot store={store}>
-            <RemeshScope domains={[NotificationDomain()]}>
-              <App />
-            </RemeshScope>
-          </RemeshRoot>
-          // </React.StrictMode>
+          <React.StrictMode>
+            <RemeshRoot store={store}>
+              <RemeshScope domains={[NotificationDomain()]}>
+                <App />
+              </RemeshScope>
+            </RemeshRoot>
+          </React.StrictMode>
         )
         return root
       },

src/app/content/views/AppButton/index.tsx

@@ -18,7 +18,7 @@ import LogoIcon6 from '@/assets/images/logo-6.svg'
 import AppStatusDomain from '@/domain/AppStatus'
 import { getDay } from 'date-fns'
 import { messenger } from '@/messenger'
-import useDarg from '@/hooks/useDarg'
+import useDraggable from '@/hooks/useDraggable'
 import useWindowResize from '@/hooks/useWindowResize'
 
 export interface AppButtonProps {
@@ -45,7 +45,7 @@ const AppButton: FC<AppButtonProps> = ({ className }) => {
     x,
     y,
     setRef: appButtonRef
-  } = useDarg({
+  } = useDraggable({
     initX: appPosition.x,
     initY: appPosition.y,
     minX: 50,

src/app/options/App.tsx

@@ -16,7 +16,7 @@ function App() {
         <VersionLink></VersionLink>
         <Main>
           <ProfileForm></ProfileForm>
-          <Toaster richColors position="top-center" duration={1000000} />
+          <Toaster richColors position="top-center" />
         </Main>
         <BadgeList></BadgeList>
       </Layout>

src/assets/styles/overlay.css

@@ -0,0 +1,17 @@
+section[aria-live='polite'] {
+  display: contents;
+}
+
+:where([data-sonner-toaster]) {
+  max-width: 300px;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+}
+
+:where([data-sonner-toast][data-styled='true']) {
+  max-width: 300px;
+  padding: 6px 12px;
+  border-radius: 9999px;
+  width: fit-content;
+}