Beta notifications

package.json

@@ -52,14 +52,13 @@
     "postcss": "^8.5.6",
     "postcss-import": "^16.1.1",
     "prettier": "^3.8.1",
-    "solid-headless": "^0.13.1",
     "solid-icons": "^1.2.0",
     "solid-js": "^1.9.3",
-    "solid-sonner": "^0.2.8",
     "solidjs-use": "^2.3.0",
     "storybook": "^10.2.8",
     "storybook-solidjs-vite": "^10.0.9",
     "tailwindcss": "3.4.17",
+    "uuid": "^13.0.0",
     "vitest": "^4.0.18"
   },
   "devDependencies": {

src-tauri/src/lib.rs

@@ -23,6 +23,37 @@ struct SingleInstancePayload {
 }
 
 pub fn run() {
+  #[cfg(target_os = "linux")]
+  {
+    // Fix for webkit issues on Linux with nvidia and/or some wayland compositors
+    //
+    // Related issues and code adapted from:
+    // https://github.com/tauri-apps/tauri/issues/13493
+
+    log::trace!("Setting linux specific workaround envs for GDK webkit issues:");
+
+    let is_wayland_display = std::env::var_os("WAYLAND_DISPLAY");
+    let xdg_session_type = std::env::var("XDG_SESSION_TYPE")
+      .unwrap_or_default()
+      .to_lowercase();
+
+    let is_wayland = is_wayland_display.is_some() || xdg_session_type == "wayland";
+    let compositor = std::env::var("XDG_CURRENT_DESKTOP").unwrap_or_default();
+    log::trace!(
+      "Display: wayland={is_wayland}, compositor={compositor}, session={xdg_session_type}"
+    );
+
+    if std::env::var_os("WEBKIT_DISABLE_COMPOSITING_MODE").is_none() {
+      log::trace!("setting: WEBKIT_DISABLE_COMPOSITING_MODE=1");
+      std::env::set_var("WEBKIT_DISABLE_COMPOSITING_MODE", "1");
+    }
+
+    if std::env::var_os("WEBKIT_DISABLE_DMABUF_RENDERER").is_none() {
+      log::trace!("setting: WEBKIT_DISABLE_DMABUF_RENDERER=1");
+      std::env::set_var("WEBKIT_DISABLE_DMABUF_RENDERER", "1");
+    }
+  }
+
   let app = tauri::Builder::default();
 
   // Note: This is a workaround for a bug in tauri that causes the window to not resize properly inducing a noticeable lag

src/App.tsx

@@ -7,8 +7,8 @@ import {
 } from '@store/notifications/notifications'
 import { debug } from '@tauri-apps/plugin-log'
 import { lazy, onMount, Suspense } from 'solid-js'
-import { Toaster } from 'solid-sonner'
 import { usePersistentStore } from './persistenStore'
+import { Toaster } from './toaster'
 import { runWatchers } from './watchers'
 const Modals = lazy(() => import('@containers/Modals'))
 const AppRoutes = lazy(() => import('@routes/Routes'))
@@ -36,7 +36,7 @@ const App = () => {
         <Suspense>
             <Modals />
             <AppRoutes />
-            <Toaster position="top-center" visibleToasts={4} duration={3000} />
+            <Toaster />
         </Suspense>
     )
 }

src/common/theme.ts

@@ -57,7 +57,7 @@ export const theme = {
             100: '#9793FD',
         },
         transparentPurple: {
-            200: ' #817df7b3',
+            200: '#817df7b3',
             100: '#817df780',
         },
         grey: {

src/components/ProgressBar/index.stories.tsx

@@ -0,0 +1,38 @@
+import { Meta, StoryObj } from 'storybook-solidjs-vite'
+import Toast from './index'
+
+const meta: Meta<typeof Toast> = {
+    title: 'Components/Components/ProgressBar',
+    component: Toast,
+    parameters: {
+        layout: 'centered',
+        backgrounds: {
+            default: 'dark',
+            values: [{ name: 'dark', value: '#0a0a0a' }],
+        },
+    },
+    argTypes: {
+        duration: {
+            control: { type: 'number', min: 0, max: 5000 },
+        },
+        paused: { control: 'boolean' },
+        color: { control: 'color' },
+    },
+    args: {
+        duration: 2000,
+        paused: false,
+        color: '#fff',
+    },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Toast>
+
+export const Default: Story = {
+    args: {
+        duration: 2000,
+        paused: false,
+        color: '#fff',
+    },
+}

src/components/ProgressBar/index.tsx

@@ -0,0 +1,22 @@
+import { Component } from 'solid-js'
+
+interface IProps {
+    duration: number
+    color: string
+    paused: boolean
+}
+
+const ProgressBar: Component<IProps> = (props) => (
+    <div class="absolute bottom-0 left-0 right-0 h-2 overflow-hidden rounded-tl-xl rounded-tr-xl">
+        <div
+            class="h-full rounded-sm origin-left animate-shrink"
+            style={{
+                'animation-duration': `${props.duration}ms`,
+                'animation-play-state': props.paused ? 'paused' : 'running',
+                background: props.color,
+            }}
+        />
+    </div>
+)
+
+export default ProgressBar

src/components/Toast/index.stories.tsx

@@ -0,0 +1,99 @@
+import { NOTIFICATION_TYPE } from '@interfaces/notifications/enums'
+import { Meta, StoryObj } from 'storybook-solidjs-vite'
+import Toast from './index'
+
+const meta: Meta<typeof Toast> = {
+    title: 'Components/Components/Toast',
+    component: Toast,
+    parameters: {
+        layout: 'centered',
+        backgrounds: {
+            default: 'dark',
+            values: [{ name: 'dark', value: '#0a0a0a' }],
+        },
+    },
+    argTypes: {
+        toast: { control: 'object' },
+        index: { control: { type: 'number', min: 0, max: 5 } },
+        total: { control: { type: 'number', min: 1, max: 10 } },
+        hovering: { control: 'boolean' },
+        onStartRemoving: { action: 'onStartRemoving' },
+        dismiss: { action: 'dismiss' },
+    },
+    args: {
+        index: 0,
+        total: 1,
+        hovering: false,
+    },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Toast>
+
+export const Default: Story = {
+    args: {
+        toast: {
+            id: 1,
+            type: NOTIFICATION_TYPE.DEFAULT,
+            message: 'This is a default notification',
+            duration: 5000,
+        },
+    },
+}
+
+export const Success: Story = {
+    args: {
+        toast: {
+            id: 2,
+            type: NOTIFICATION_TYPE.SUCCESS,
+            message: 'Operation completed successfully',
+            duration: 5000,
+        },
+    },
+}
+
+export const Warning: Story = {
+    args: {
+        toast: {
+            id: 3,
+            type: NOTIFICATION_TYPE.WARNING,
+            message: 'Proceed with caution',
+            duration: 5000,
+        },
+    },
+}
+
+export const Info: Story = {
+    args: {
+        toast: {
+            id: 4,
+            type: NOTIFICATION_TYPE.INFO,
+            message: 'Here is some useful information',
+            duration: 5000,
+        },
+    },
+}
+
+export const Error: Story = {
+    args: {
+        toast: {
+            id: 5,
+            type: NOTIFICATION_TYPE.ERROR,
+            message: 'Something went wrong',
+            duration: 5000,
+        },
+    },
+}
+
+export const LongMessage: Story = {
+    args: {
+        toast: {
+            id: 10,
+            type: NOTIFICATION_TYPE.WARNING,
+            message: 'Your session is about to expire due to inactivity',
+            description: 'Please save your work. You will be logged out in 60 seconds.',
+            duration: 8000,
+        },
+    },
+}