Update toast hook & cleanup

src/components/DeviceSelectorButton.tsx

@@ -11,7 +11,11 @@ export const DeviceSelectorButton = ({
   onClick,
   children,
 }: DeviceSelectorButtonProps): JSX.Element => (
-  <li className="aspect-w-1 aspect-h-1 relative w-full" onClick={onClick}>
+  <li
+    className="aspect-w-1 aspect-h-1 relative w-full"
+    onClick={onClick}
+    onKeyDown={onClick}
+  >
     {active && (
       <div className="absolute -left-2 h-10 w-1.5 rounded-full bg-accent" />
     )}

src/components/PageLayout.tsx

@@ -32,7 +32,7 @@ export const PageLayout = ({
             <div className="flex justify-end space-x-4">
               {actions?.map((action, index) => (
                 <button
-                  key={index}
+                  key={action.icon.name}
                   type="button"
                   className="transition-all hover:text-accent"
                   onClick={action.onClick}

src/components/UI/DropdownMenu.tsx

@@ -63,7 +63,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-100 bg-white p-1 text-slate-700 shadow-md animate-in data-[side=right]:slide-in-from-left-2 data-[side=left]:slide-in-from-right-2 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-400",
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-100 bg-white p-1 text-slate-700 shadow-md animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-400",
         className,
       )}
       {...props}

src/components/UI/Switch.tsx

@@ -9,7 +9,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=unchecked]:bg-slate-200 data-[state=checked]:bg-slate-900 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 dark:data-[state=unchecked]:bg-slate-700 dark:data-[state=checked]:bg-slate-400",
+      "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-slate-900 data-[state=unchecked]:bg-slate-200 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 dark:data-[state=checked]:bg-slate-400 dark:data-[state=unchecked]:bg-slate-700",
       className,
     )}
     {...props}
@@ -17,7 +17,7 @@ const Switch = React.forwardRef<
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        "pointer-events-none block h-5 w-5 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=unchecked]:translate-x-0 data-[state=checked]:translate-x-5",
+        "pointer-events-none block h-5 w-5 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
       )}
     />
   </SwitchPrimitives.Root>

src/components/UI/Tabs.tsx

@@ -12,7 +12,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center rounded-md bg-slate-100 p-1 dark:bg-slate-800",
+      "inline-flex flex-wrap items-center rounded-md bg-slate-100 p-1 dark:bg-slate-800",
       className,
     )}
     {...props}

src/components/UI/Toast.tsx

@@ -14,7 +14,7 @@ const ToastViewport = React.forwardRef<
   <ToastPrimitives.Viewport
     ref={ref}
     className={cn(
-      "fixed top-0 z-50 flex max-h-screen w-full flex-col-reverse p-4 sm:top-auto sm:bottom-0 sm:right-0 sm:flex-col md:max-w-[420px]",
+      "fixed top-0 z-50 flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
       className,
     )}
     {...props}
@@ -76,7 +76,7 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      "absolute top-2 right-2 rounded-md p-1 text-slate-500 opacity-0 transition-opacity hover:text-slate-900 focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 dark:hover:text-slate-50",
+      "absolute right-2 top-2 rounded-md p-1 text-slate-500 opacity-0 transition-opacity hover:text-slate-900 focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 dark:hover:text-slate-50",
       className,
     )}
     toast-close=""

src/components/UI/Tooltip.tsx

@@ -18,7 +18,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      "z-50 overflow-hidden rounded-md border border-slate-100 bg-white px-3 py-1.5 text-sm text-slate-700 shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=top]:slide-in-from-bottom-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-400",
+      "z-50 overflow-hidden rounded-md border border-slate-100 bg-white px-3 py-1.5 text-sm text-slate-700 shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-400",
       className,
     )}
     {...props}

src/components/UI/Typography/Code.tsx

@@ -3,7 +3,7 @@ export interface CodeProps {
 }
 
 export const Code = ({ children }: CodeProps): JSX.Element => (
-  <code className="relative rounded bg-slate-100 py-[0.2rem] px-[0.3rem] font-mono text-sm font-semibold text-slate-900 dark:bg-slate-800 dark:text-slate-400">
+  <code className="relative rounded bg-slate-100 px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold text-slate-900 dark:bg-slate-800 dark:text-slate-400">
     {children}
   </code>
 );

src/core/hooks/useToast.ts

@@ -1,10 +1,9 @@
 import * as React from "react";
 
 import type { ToastActionElement, ToastProps } from "@components/UI/Toast.js";
-import { DialogProps } from "@radix-ui/react-dialog";
 
 const TOAST_LIMIT = 1;
-const TOAST_REMOVE_DELAY = 1000;
+const TOAST_REMOVE_DELAY = 1000000;
 
 type ToasterToast = ToastProps & {
   id: string;
@@ -110,8 +109,7 @@ export const reducer = (state: State, action: Action): State => {
         ),
       };
     }
-
-    case "REMOVE_TOAST": {
+    case "REMOVE_TOAST":
       if (action.toastId === undefined) {
         return {
           ...state,
@@ -122,7 +120,6 @@ export const reducer = (state: State, action: Action): State => {
         ...state,
         toasts: state.toasts.filter((t) => t.id !== action.toastId),
       };
-    }
   }
 };
 
@@ -137,7 +134,9 @@ function dispatch(action: Action) {
   });
 }
 
-function toast({ ...props }: DialogProps) {
+type Toast = Omit<ToasterToast, "id">;
+
+function toast({ ...props }: Toast) {
   const id = genId();
 
   const update = (props: ToasterToast) =>

src/pages/Config/ModuleConfig.tsx

@@ -1,6 +1,5 @@
-import { useDevice } from "@app/core/stores/deviceStore.js";
 import { Audio } from "@components/PageComponents/ModuleConfig/Audio.js";
-import { CannedMessage } from "@components/PageComponents/ModuleConfig/CannedMessage";
+import { CannedMessage } from "@components/PageComponents/ModuleConfig/CannedMessage.js";
 import { ExternalNotification } from "@components/PageComponents/ModuleConfig/ExternalNotification.js";
 import { MQTT } from "@components/PageComponents/ModuleConfig/MQTT.js";
 import { RangeTest } from "@components/PageComponents/ModuleConfig/RangeTest.js";
@@ -13,11 +12,8 @@ import {
   TabsList,
   TabsTrigger,
 } from "@components/UI/Tabs.js";
-import { Fragment } from "react";
 
 export const ModuleConfig = (): JSX.Element => {
-  const { workingModuleConfig, connection } = useDevice();
-
   const tabs = [
     {
       label: "MQTT",

src/pages/Peers.tsx

@@ -1,6 +1,6 @@
 import { Sidebar } from "@components/Sidebar.js";
 import { Mono } from "@components/generic/Mono.js";
-import { Table } from "@components/generic/Table";
+import { Table } from "@components/generic/Table/index.js";
 import { TimeAgo } from "@components/generic/Table/tmp/TimeAgo.js";
 import { useDevice } from "@core/stores/deviceStore.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";