Add notification toggling functionality

src/components/DeviceSelector.tsx

@@ -11,6 +11,8 @@ import {
   PlusIcon,
   SunIcon,
   TerminalIcon,
+  BellIcon,
+  BellOffIcon,
 } from "lucide-react";
 
 export const DeviceSelector = (): JSX.Element => {
@@ -20,6 +22,8 @@ export const DeviceSelector = (): JSX.Element => {
     setSelectedDevice,
     darkMode,
     setDarkMode,
+    notifications,
+    setNotifications,
     setCommandPaletteOpen,
     setConnectDialogOpen,
   } = useAppStore();
@@ -61,6 +65,13 @@ export const DeviceSelector = (): JSX.Element => {
         </ul>
       </div>
       <div className="flex w-20 flex-col items-center space-y-5 bg-transparent px-5 pb-5">
+        <button
+          type="button"
+          className="transition-all hover:text-accent"
+          onClick={() => setNotifications(!notifications)}
+        >
+          {notifications ? <BellIcon /> : <BellOffIcon />}
+        </button>
         <button
           type="button"
           className="transition-all hover:text-accent"

src/core/stores/appStore.ts

@@ -26,6 +26,7 @@ interface AppState {
   rasterSources: RasterSource[];
   commandPaletteOpen: boolean;
   darkMode: boolean;
+  notifications: boolean;
   accent: AccentColor;
   connectDialogOpen: boolean;
 
@@ -38,6 +39,7 @@ interface AppState {
   removeDevice: (deviceId: number) => void;
   setCommandPaletteOpen: (open: boolean) => void;
   setDarkMode: (enabled: boolean) => void;
+  setNotifications: (enabled: boolean) => void;
   setAccent: (color: AccentColor) => void;
   setConnectDialogOpen: (open: boolean) => void;
 }
@@ -49,6 +51,7 @@ export const useAppStore = create<AppState>()((set) => ({
   rasterSources: [],
   commandPaletteOpen: false,
   darkMode: window.matchMedia("(prefers-color-scheme: dark)").matches,
+  notifications: true,
   accent: "orange",
   connectDialogOpen: false,
 
@@ -99,6 +102,13 @@ export const useAppStore = create<AppState>()((set) => ({
       }),
     );
   },
+  setNotifications: (enabled: boolean) => {
+    set(
+      produce<AppState>((draft) => {
+        draft.notifications = enabled;
+      }),
+    );
+  },
   setAccent(color) {
     set(
       produce<AppState>((draft) => {