@@ -76,11 +80,20 @@ export const Sidebar = ({ children }: SidebarProps): JSX.Element => {
>
+
- {myNode?.deviceMetrics?.batteryLevel ?? "UNK"}%
+
+ {myNode?.deviceMetrics?.batteryLevel
+ ? myNode?.deviceMetrics?.batteryLevel > 100
+ ? "Charging"
+ : myNode?.deviceMetrics?.batteryLevel + "%"
+ : "UNK"}
+
@@ -109,5 +122,11 @@ export const Sidebar = ({ children }: SidebarProps): JSX.Element => {
{children}
+ ) : (
+
+
+
);
};
diff --git a/src/components/Toaster.tsx b/src/components/Toaster.tsx
index 4aa31845..f5531bba 100644
--- a/src/components/Toaster.tsx
+++ b/src/components/Toaster.tsx
@@ -1,5 +1,3 @@
-import { useToast } from "@core/hooks/useToast.js";
-
import {
Toast,
ToastClose,
@@ -7,24 +5,25 @@ import {
ToastProvider,
ToastTitle,
ToastViewport,
-} from "@components/UI/Toast.js";
+} from "@components/UI/Toast";
+import { useToast } from "@core/hooks/useToast";
export function Toaster() {
const { toasts } = useToast();
return (
- {toasts.map(({ id, title, description, action, ...props }) => (
-
+ {toasts.map(({ id, title, description, action, duration, ...props }) => (
+
- {title && (
- {title}
- )}
- {description && (
-
- {description}
-
- )}
+ {title && {title}}
+ {description && {description}}
{action}
@@ -33,4 +32,4 @@ export function Toaster() {
);
-}
+}
\ No newline at end of file
diff --git a/src/components/UI/Button.tsx b/src/components/UI/Button.tsx
index f903f25e..e1b2d704 100644
--- a/src/components/UI/Button.tsx
+++ b/src/components/UI/Button.tsx
@@ -1,7 +1,7 @@
import { type VariantProps, cva } from "class-variance-authority";
import * as React from "react";
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
const buttonVariants = cva(
"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 dark:hover:bg-slate-800 dark:hover:text-slate-100 disabled:opacity-50 dark:focus:ring-slate-400 disabled:pointer-events-none dark:focus:ring-offset-slate-900 data-[state=open]:bg-slate-100 dark:data-[state=open]:bg-slate-800",
@@ -35,9 +35,11 @@ const buttonVariants = cva(
},
);
+export type ButtonVariant = VariantProps
["variant"];
+
export interface ButtonProps
extends React.ButtonHTMLAttributes,
- VariantProps {}
+ VariantProps { }
const Button = React.forwardRef(
({ className, variant, size, ...props }, ref) => {
diff --git a/src/components/UI/Checkbox.tsx b/src/components/UI/Checkbox.tsx
index 38bc7873..7c0eaa9b 100644
--- a/src/components/UI/Checkbox.tsx
+++ b/src/components/UI/Checkbox.tsx
@@ -2,7 +2,7 @@ import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
import { Check } from "lucide-react";
import * as React from "react";
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
const Checkbox = React.forwardRef<
React.ElementRef,
diff --git a/src/components/UI/Command.tsx b/src/components/UI/Command.tsx
index 00c51b61..63d77d28 100644
--- a/src/components/UI/Command.tsx
+++ b/src/components/UI/Command.tsx
@@ -3,8 +3,8 @@ import { Command as CommandPrimitive } from "cmdk";
import { Search } from "lucide-react";
import * as React from "react";
-import { Dialog, DialogContent } from "@components/UI/Dialog.js";
-import { cn } from "@core/utils/cn.js";
+import { Dialog, DialogContent } from "@components/UI/Dialog.tsx";
+import { cn } from "@core/utils/cn.ts";
const Command = React.forwardRef<
React.ElementRef,
diff --git a/src/components/UI/Dialog.tsx b/src/components/UI/Dialog.tsx
index 5ab0c342..019b8142 100644
--- a/src/components/UI/Dialog.tsx
+++ b/src/components/UI/Dialog.tsx
@@ -2,7 +2,7 @@ import * as DialogPrimitive from "@radix-ui/react-dialog";
import { X } from "lucide-react";
import * as React from "react";
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
const Dialog = DialogPrimitive.Root;
diff --git a/src/components/UI/DropdownMenu.tsx b/src/components/UI/DropdownMenu.tsx
index 02f3eb45..26ccdbe9 100644
--- a/src/components/UI/DropdownMenu.tsx
+++ b/src/components/UI/DropdownMenu.tsx
@@ -2,7 +2,7 @@ import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
import { Check, ChevronRight, Circle } from "lucide-react";
import * as React from "react";
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
const DropdownMenu = DropdownMenuPrimitive.Root;
diff --git a/src/components/UI/Generator.tsx b/src/components/UI/Generator.tsx
index 7d589be4..b365d7c9 100644
--- a/src/components/UI/Generator.tsx
+++ b/src/components/UI/Generator.tsx
@@ -1,26 +1,30 @@
import * as React from "react";
-import { Button } from "@components/UI/Button.js";
-import { Input } from "@components/UI/Input.js";
+import { Button, type ButtonVariant } from "@components/UI/Button.tsx";
+import { Input } from "@components/UI/Input.tsx";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
-} from "@components/UI/Select.js";
+} from "@components/UI/Select.tsx";
import type { LucideIcon } from "lucide-react";
export interface GeneratorProps extends React.BaseHTMLAttributes {
- hide?: boolean;
+ type: "text" | "password";
devicePSKBitCount?: number;
value: string;
variant: "default" | "invalid";
- buttonText?: string;
+ actionButtons: {
+ text: string;
+ onClick: React.MouseEventHandler;
+ variant: ButtonVariant;
+ className?: string;
+ }[];
bits?: { text: string; value: string; key: string }[];
selectChange: (event: string) => void;
inputChange: (event: React.ChangeEvent) => void;
- buttonClick: React.MouseEventHandler;
action?: {
icon: LucideIcon;
onClick: () => void;
@@ -31,19 +35,19 @@ export interface GeneratorProps extends React.BaseHTMLAttributes {
const Generator = React.forwardRef(
(
{
- hide = true,
+ type,
devicePSKBitCount,
variant,
value,
- buttonText,
+ actionButtons,
bits = [
{ text: "256 bit", value: "32", key: "bit256" },
{ text: "128 bit", value: "16", key: "bit128" },
{ text: "8 bit", value: "1", key: "bit8" },
+ { text: "Empty", value: "0", key: "empty" },
],
selectChange,
inputChange,
- buttonClick,
action,
disabled,
...props
@@ -68,7 +72,7 @@ const Generator = React.forwardRef(
return (
<>
(
))}
-
+
+ {actionButtons?.map(({ text, onClick, variant, className }) => (
+
+ ))}
+
);
},
diff --git a/src/components/UI/Input.tsx b/src/components/UI/Input.tsx
index 630a6364..a397cef8 100644
--- a/src/components/UI/Input.tsx
+++ b/src/components/UI/Input.tsx
@@ -1,6 +1,6 @@
import * as React from "react";
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
import { type VariantProps, cva } from "class-variance-authority";
import type { LucideIcon } from "lucide-react";
diff --git a/src/components/UI/Label.tsx b/src/components/UI/Label.tsx
index 9cef3b16..cb78b532 100644
--- a/src/components/UI/Label.tsx
+++ b/src/components/UI/Label.tsx
@@ -1,7 +1,7 @@
import * as LabelPrimitive from "@radix-ui/react-label";
import * as React from "react";
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
const Label = React.forwardRef<
React.ElementRef,
diff --git a/src/components/UI/Menubar.tsx b/src/components/UI/Menubar.tsx
index 729665b3..bcf4d7ae 100644
--- a/src/components/UI/Menubar.tsx
+++ b/src/components/UI/Menubar.tsx
@@ -2,7 +2,7 @@ import * as MenubarPrimitive from "@radix-ui/react-menubar";
import { Check, ChevronRight, Circle } from "lucide-react";
import * as React from "react";
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
const MenubarMenu = MenubarPrimitive.Menu;
diff --git a/src/components/UI/Popover.tsx b/src/components/UI/Popover.tsx
index 95641230..43977f2f 100644
--- a/src/components/UI/Popover.tsx
+++ b/src/components/UI/Popover.tsx
@@ -1,7 +1,7 @@
import * as PopoverPrimitive from "@radix-ui/react-popover";
import * as React from "react";
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
const Popover = PopoverPrimitive.Root;
diff --git a/src/components/UI/ScrollArea.tsx b/src/components/UI/ScrollArea.tsx
index 44f69e26..7415b64e 100644
--- a/src/components/UI/ScrollArea.tsx
+++ b/src/components/UI/ScrollArea.tsx
@@ -1,7 +1,7 @@
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
import * as React from "react";
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
const ScrollArea = React.forwardRef<
React.ElementRef,
diff --git a/src/components/UI/Select.tsx b/src/components/UI/Select.tsx
index 59f5a9cd..32a0a8cb 100644
--- a/src/components/UI/Select.tsx
+++ b/src/components/UI/Select.tsx
@@ -2,7 +2,7 @@ import * as SelectPrimitive from "@radix-ui/react-select";
import { Check, ChevronDown } from "lucide-react";
import * as React from "react";
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
const Select = SelectPrimitive.Root;
diff --git a/src/components/UI/Seperator.tsx b/src/components/UI/Seperator.tsx
index 6b5a9692..20a5511b 100644
--- a/src/components/UI/Seperator.tsx
+++ b/src/components/UI/Seperator.tsx
@@ -1,7 +1,7 @@
import * as SeparatorPrimitive from "@radix-ui/react-separator";
import * as React from "react";
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
const Separator = React.forwardRef<
React.ElementRef,
diff --git a/src/components/UI/Sidebar/SidebarSection.tsx b/src/components/UI/Sidebar/SidebarSection.tsx
index ed6cb767..acff2dab 100644
--- a/src/components/UI/Sidebar/SidebarSection.tsx
+++ b/src/components/UI/Sidebar/SidebarSection.tsx
@@ -1,4 +1,4 @@
-import { H4 } from "@components/UI/Typography/H4.js";
+import { H4 } from "@components/UI/Typography/H4.tsx";
export interface SidebarSectionProps {
label: string;
diff --git a/src/components/UI/Sidebar/sidebarButton.tsx b/src/components/UI/Sidebar/sidebarButton.tsx
index ef8f3ff6..c3f30e79 100644
--- a/src/components/UI/Sidebar/sidebarButton.tsx
+++ b/src/components/UI/Sidebar/sidebarButton.tsx
@@ -1,4 +1,4 @@
-import { Button } from "@components/UI/Button.js";
+import { Button } from "@components/UI/Button.tsx";
import type { LucideIcon } from "lucide-react";
export interface SidebarButtonProps {
diff --git a/src/components/UI/Switch.tsx b/src/components/UI/Switch.tsx
index c3e97fdc..c395547d 100644
--- a/src/components/UI/Switch.tsx
+++ b/src/components/UI/Switch.tsx
@@ -1,7 +1,7 @@
import * as SwitchPrimitives from "@radix-ui/react-switch";
import * as React from "react";
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
const Switch = React.forwardRef<
React.ElementRef,
diff --git a/src/components/UI/Tabs.tsx b/src/components/UI/Tabs.tsx
index f8c83e6d..66f126da 100644
--- a/src/components/UI/Tabs.tsx
+++ b/src/components/UI/Tabs.tsx
@@ -1,7 +1,7 @@
import * as TabsPrimitive from "@radix-ui/react-tabs";
import * as React from "react";
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
const Tabs = TabsPrimitive.Root;
diff --git a/src/components/UI/Toast.tsx b/src/components/UI/Toast.tsx
index a3080fbf..d40b294a 100644
--- a/src/components/UI/Toast.tsx
+++ b/src/components/UI/Toast.tsx
@@ -1,11 +1,11 @@
-import * as ToastPrimitives from "@radix-ui/react-toast";
-import { type VariantProps, cva } from "class-variance-authority";
-import { X } from "lucide-react";
-import * as React from "react";
+import * as React from "react"
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from 'lucide-react'
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn"
-const ToastProvider = ToastPrimitives.Provider;
+const ToastProvider = ToastPrimitives.Provider
const ToastViewport = React.forwardRef<
React.ElementRef,
@@ -14,35 +14,34 @@ const ToastViewport = React.forwardRef<
-));
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
const toastVariants = cva(
- "data-[swipe=move]:transition-none grow-1 group relative pointer-events-auto flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full mt-4 data-[state=closed]:slide-out-to-right-full dark:border-slate-700 last:mt-0 sm:last:mt-4",
+ "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
{
variants: {
variant: {
- default:
- "bg-white border-slate-200 dark:bg-slate-800 dark:border-slate-700",
+ default: "border bg-background text-foreground dark:bg-slate-700 dark:border-slate-600 dark:text-slate-50",
destructive:
- "group destructive bg-red-600 text-white border-red-600 dark:border-red-600",
+ "group destructive bg-red-600 text-white dark:border-red-900 dark:bg-red-900 dark:text-red-50"
},
},
defaultVariants: {
variant: "default",
},
- },
-);
+ }
+)
const Toast = React.forwardRef<
React.ElementRef,
React.ComponentPropsWithoutRef &
- VariantProps
+ VariantProps
>(({ className, variant, ...props }, ref) => {
return (
- );
-});
-Toast.displayName = ToastPrimitives.Root.displayName;
+ )
+})
+Toast.displayName = ToastPrimitives.Root.displayName
const ToastAction = React.forwardRef<
React.ElementRef,
@@ -61,13 +60,13 @@ const ToastAction = React.forwardRef<
-));
-ToastAction.displayName = ToastPrimitives.Action.displayName;
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
const ToastClose = React.forwardRef<
React.ElementRef,
@@ -76,16 +75,16 @@ const ToastClose = React.forwardRef<
-));
-ToastClose.displayName = ToastPrimitives.Close.displayName;
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
const ToastTitle = React.forwardRef<
React.ElementRef,
@@ -96,8 +95,8 @@ const ToastTitle = React.forwardRef<
className={cn("text-sm font-semibold", className)}
{...props}
/>
-));
-ToastTitle.displayName = ToastPrimitives.Title.displayName;
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
const ToastDescription = React.forwardRef<
React.ElementRef,
@@ -108,12 +107,12 @@ const ToastDescription = React.forwardRef<
className={cn("text-sm opacity-90", className)}
{...props}
/>
-));
-ToastDescription.displayName = ToastPrimitives.Description.displayName;
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
-type ToastProps = React.ComponentPropsWithoutRef;
+type ToastProps = React.ComponentPropsWithoutRef
-type ToastActionElement = React.ReactElement;
+type ToastActionElement = React.ReactElement
export {
type ToastProps,
@@ -125,4 +124,5 @@ export {
ToastDescription,
ToastClose,
ToastAction,
-};
+}
+
diff --git a/src/components/UI/Tooltip.tsx b/src/components/UI/Tooltip.tsx
index 9cdc8f83..bde4b344 100644
--- a/src/components/UI/Tooltip.tsx
+++ b/src/components/UI/Tooltip.tsx
@@ -1,7 +1,7 @@
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
import * as React from "react";
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
const TooltipProvider = TooltipPrimitive.Provider;
diff --git a/src/components/UI/Typography/H4.tsx b/src/components/UI/Typography/H4.tsx
index e2562d6e..33eeb0af 100644
--- a/src/components/UI/Typography/H4.tsx
+++ b/src/components/UI/Typography/H4.tsx
@@ -1,4 +1,4 @@
-import { cn } from "@app/core/utils/cn.js";
+import { cn } from "@app/core/utils/cn.ts";
export interface H4Props {
className?: string;
diff --git a/src/components/UI/Typography/H5.tsx b/src/components/UI/Typography/H5.tsx
new file mode 100644
index 00000000..5bd1dfb1
--- /dev/null
+++ b/src/components/UI/Typography/H5.tsx
@@ -0,0 +1,14 @@
+import { cn } from "@app/core/utils/cn.ts";
+
+export interface H5Props {
+ className?: string;
+ children: React.ReactNode;
+}
+
+export const H5 = ({ className, children }: H5Props): JSX.Element => (
+
+ {children}
+
+);
diff --git a/src/components/UI/Typography/Link.tsx b/src/components/UI/Typography/Link.tsx
index af1a90ac..efcfbdf6 100644
--- a/src/components/UI/Typography/Link.tsx
+++ b/src/components/UI/Typography/Link.tsx
@@ -1,14 +1,17 @@
+import { cn } from "@app/core/utils/cn";
+
export interface LinkProps {
href: string;
children: React.ReactNode;
+ className?: string;
}
-export const Link = ({ href, children }: LinkProps): JSX.Element => (
+export const Link = ({ href, children, className }: LinkProps): JSX.Element => (
{children}
diff --git a/src/components/UI/Typography/Subtle.tsx b/src/components/UI/Typography/Subtle.tsx
index 172e37ec..2772453c 100644
--- a/src/components/UI/Typography/Subtle.tsx
+++ b/src/components/UI/Typography/Subtle.tsx
@@ -1,4 +1,4 @@
-import { cn } from "@app/core/utils/cn.js";
+import { cn } from "@app/core/utils/cn.ts";
export interface SubtleProps {
className?: string;
diff --git a/src/components/generic/ThemeController.tsx b/src/components/generic/ThemeController.tsx
index c1d89ce0..6dec03ad 100644
--- a/src/components/generic/ThemeController.tsx
+++ b/src/components/generic/ThemeController.tsx
@@ -1,4 +1,4 @@
-import { useAppStore } from "@core/stores/appStore.js";
+import { useAppStore } from "@core/stores/appStore.ts";
import type { ReactNode } from "react";
export interface ThemeControllerProps {
diff --git a/src/core/hooks/useBrowserFeatureDetection.ts b/src/core/hooks/useBrowserFeatureDetection.ts
new file mode 100644
index 00000000..a31b7b5a
--- /dev/null
+++ b/src/core/hooks/useBrowserFeatureDetection.ts
@@ -0,0 +1,29 @@
+import { useMemo } from 'react';
+
+export type BrowserFeature = 'Web Bluetooth' | 'Web Serial' | 'Secure Context';
+
+interface BrowserSupport {
+ supported: BrowserFeature[];
+ unsupported: BrowserFeature[];
+}
+
+export function useBrowserFeatureDetection(): BrowserSupport {
+ const support = useMemo(() => {
+ const features: [BrowserFeature, boolean][] = [
+ ['Web Bluetooth', !!navigator?.bluetooth],
+ ['Web Serial', !!navigator?.serial],
+ ['Secure Context', window.location.protocol === 'https:' || window.location.hostname === 'localhost']
+ ];
+
+ return features.reduce(
+ (acc, [feature, isSupported]) => {
+ const list = isSupported ? acc.supported : acc.unsupported;
+ list.push(feature);
+ return acc;
+ },
+ { supported: [], unsupported: [] }
+ );
+ }, []);
+
+ return support;
+}
\ No newline at end of file
diff --git a/src/core/hooks/useCookie.ts b/src/core/hooks/useCookie.ts
new file mode 100644
index 00000000..df3d9d82
--- /dev/null
+++ b/src/core/hooks/useCookie.ts
@@ -0,0 +1,52 @@
+import Cookies, { type CookieAttributes } from "js-cookie";
+import { useCallback, useState } from "react";
+
+interface CookieHookResult {
+ value: T | undefined;
+ setCookie: (value: T, options?: CookieAttributes) => void;
+ removeCookie: () => void;
+}
+
+function useCookie(
+ cookieName: string,
+ initialValue?: T,
+): CookieHookResult {
+ const [cookieValue, setCookieValue] = useState(() => {
+ try {
+ const cookie = Cookies.get(cookieName);
+ return cookie ? (JSON.parse(cookie) as T) : initialValue;
+ } catch (error) {
+ console.error(`Error parsing cookie ${cookieName}:`, error);
+ return initialValue;
+ }
+ });
+
+ const setCookie = useCallback(
+ (value: T, options?: CookieAttributes) => {
+ try {
+ Cookies.set(cookieName, JSON.stringify(value), options);
+ setCookieValue(value);
+ } catch (error) {
+ console.error(`Error setting cookie ${cookieName}:`, error);
+ }
+ },
+ [cookieName],
+ );
+
+ const removeCookie = useCallback(() => {
+ try {
+ Cookies.remove(cookieName);
+ setCookieValue(undefined);
+ } catch (error) {
+ console.error(`Error removing cookie ${cookieName}:`, error);
+ }
+ }, [cookieName]);
+
+ return {
+ value: cookieValue,
+ setCookie,
+ removeCookie,
+ };
+}
+
+export default useCookie;
diff --git a/src/core/hooks/useKeyBackupReminder.tsx b/src/core/hooks/useKeyBackupReminder.tsx
new file mode 100644
index 00000000..ee65d161
--- /dev/null
+++ b/src/core/hooks/useKeyBackupReminder.tsx
@@ -0,0 +1,120 @@
+import { Button } from "@app/components/UI/Button";
+import type { CookieAttributes } from "js-cookie";
+import { useCallback, useEffect, useRef } from "react";
+import useCookie from "./useCookie";
+import { useToast } from "./useToast";
+
+interface UseBackupReminderOptions {
+ reminderInDays?: number;
+ message: string;
+ onAccept?: () => void | Promise;
+ enabled: boolean;
+ cookieOptions?: CookieAttributes;
+}
+
+interface ReminderState {
+ suppressed: boolean;
+ lastShown: string;
+}
+
+const TOAST_APPEAR_DELAY = 10_000 // 10 seconds;
+const TOAST_DURATION = 30_000 // 30 seconds;:
+
+// remind user in 1 year to backup keys again, if they accept the reminder;
+const ON_ACCEPT_REMINDER_DAYS = 365
+
+function isReminderExpired(lastShown: string): boolean {
+ const lastShownDate = new Date(lastShown);
+ const now = new Date();
+ const daysSinceLastShown =
+ (now.getTime() - lastShownDate.getTime()) / (1000 * 60 * 60 * 24);
+ return daysSinceLastShown >= 7;
+}
+
+export function useBackupReminder({
+ reminderInDays = 7,
+ enabled,
+ message,
+ onAccept = () => { },
+ cookieOptions,
+}: UseBackupReminderOptions) {
+ const { toast } = useToast();
+ const toastShownRef = useRef(false);
+ const { value: reminderCookie, setCookie } =
+ useCookie("key_backup_reminder");
+
+ const suppressReminder = useCallback(
+ (days: number) => {
+ const expiryDate = new Date();
+ expiryDate.setDate(expiryDate.getDate() + days);
+
+ setCookie(
+ {
+ suppressed: true,
+ lastShown: new Date().toISOString(),
+ },
+ { ...cookieOptions, expires: expiryDate },
+ );
+ },
+ [setCookie, cookieOptions],
+ );
+
+ useEffect(() => {
+ if (!enabled || toastShownRef.current) return;
+
+ const shouldShowReminder =
+ !reminderCookie?.suppressed ||
+ isReminderExpired(reminderCookie.lastShown);
+ if (!shouldShowReminder) return;
+
+ toastShownRef.current = true;
+
+ const { dismiss } = toast(
+ {
+ title: "Backup Reminder",
+ duration: TOAST_DURATION,
+ delay: TOAST_APPEAR_DELAY,
+ description: message,
+ action: (
+
+
+
+
+ ),
+ },
+ );
+
+ return () => {
+ if (!toastShownRef.current) {
+ dismiss();
+ }
+ };
+ }, [
+ enabled,
+ message,
+ onAccept,
+ reminderInDays,
+ suppressReminder,
+ toast,
+ reminderCookie,
+ ]);
+}
diff --git a/src/core/hooks/useToast.ts b/src/core/hooks/useToast.ts
index 90b9a1c5..c913d223 100644
--- a/src/core/hooks/useToast.ts
+++ b/src/core/hooks/useToast.ts
@@ -1,6 +1,6 @@
import { type ReactNode, useSyncExternalStore } from "react";
-import type { ToastActionElement, ToastProps } from "@components/UI/Toast.js";
+import type { ToastActionElement, ToastProps } from "@components/UI/Toast.tsx";
const TOAST_LIMIT = 1;
const TOAST_REMOVE_DELAY = 1000000;
@@ -10,6 +10,7 @@ type ToasterToast = ToastProps & {
title?: ReactNode;
description?: ReactNode;
action?: ToastActionElement;
+ delay?: number;
};
const actionTypes = {
@@ -30,21 +31,21 @@ type ActionType = typeof actionTypes;
type Action =
| {
- type: ActionType["ADD_TOAST"];
- toast: ToasterToast;
- }
+ type: ActionType["ADD_TOAST"];
+ toast: ToasterToast;
+ }
| {
- type: ActionType["UPDATE_TOAST"];
- toast: Partial;
- }
+ type: ActionType["UPDATE_TOAST"];
+ toast: Partial;
+ }
| {
- type: ActionType["DISMISS_TOAST"];
- toastId?: ToasterToast["id"];
- }
+ type: ActionType["DISMISS_TOAST"];
+ toastId?: ToasterToast["id"];
+ }
| {
- type: ActionType["REMOVE_TOAST"];
- toastId?: ToasterToast["id"];
- };
+ type: ActionType["REMOVE_TOAST"];
+ toastId?: ToasterToast["id"];
+ };
interface State {
toasts: ToasterToast[];
@@ -80,7 +81,7 @@ export const reducer = (state: State, action: Action): State => {
return {
...state,
toasts: state.toasts.map((t) =>
- t.id === action.toast.id ? { ...t, ...action.toast } : t,
+ t.id === action.toast.id ? { ...t, ...action.toast } : t
),
};
@@ -102,10 +103,10 @@ export const reducer = (state: State, action: Action): State => {
toasts: state.toasts.map((t) =>
t.id === toastId || toastId === undefined
? {
- ...t,
- open: false,
- }
- : t,
+ ...t,
+ open: false,
+ }
+ : t
),
};
}
@@ -137,7 +138,7 @@ function dispatch(action: Action) {
type Toast = Omit;
-function toast({ ...props }: Toast) {
+function toast({ delay = 0, ...props }: Toast) {
const id = genId();
const update = (props: ToasterToast) =>
@@ -147,17 +148,19 @@ function toast({ ...props }: Toast) {
});
const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
- dispatch({
- type: "ADD_TOAST",
- toast: {
- ...props,
- id,
- open: true,
- onOpenChange: (open) => {
- if (!open) dismiss();
+ setTimeout(() => {
+ dispatch({
+ type: "ADD_TOAST",
+ toast: {
+ ...props,
+ id,
+ open: true,
+ onOpenChange: (open) => {
+ if (!open) dismiss();
+ },
},
- },
- });
+ });
+ }, delay);
return {
id: id,
@@ -190,4 +193,4 @@ function useToast() {
};
}
-export { useToast, toast };
+export { toast, useToast };
\ No newline at end of file
diff --git a/src/core/stores/deviceStore.ts b/src/core/stores/deviceStore.ts
index a716a85b..bd407611 100644
--- a/src/core/stores/deviceStore.ts
+++ b/src/core/stores/deviceStore.ts
@@ -25,7 +25,8 @@ export type DialogVariant =
| "shutdown"
| "reboot"
| "deviceName"
- | "nodeRemoval";
+ | "nodeRemoval"
+ | "pkiBackup";
export interface Device {
id: number;
@@ -60,6 +61,7 @@ export interface Device {
reboot: boolean;
deviceName: boolean;
nodeRemoval: boolean;
+ pkiBackup: boolean;
};
setStatus: (status: Types.DeviceStatusEnum) => void;
@@ -142,6 +144,7 @@ export const useDeviceStore = create((set, get) => ({
reboot: false,
deviceName: false,
nodeRemoval: false,
+ pkiBackup: false,
},
pendingSettingsChanges: false,
messageDraft: "",
diff --git a/src/core/subscriptions.ts b/src/core/subscriptions.ts
index 36bc72d2..afba12b7 100644
--- a/src/core/subscriptions.ts
+++ b/src/core/subscriptions.ts
@@ -1,4 +1,4 @@
-import type { Device } from "@core/stores/deviceStore.js";
+import type { Device } from "@core/stores/deviceStore.ts";
import { Protobuf, type Types } from "@meshtastic/js";
export const subscribeAll = (
diff --git a/src/core/utils/x25519.ts b/src/core/utils/x25519.ts
index 2729d80a..7e69f339 100644
--- a/src/core/utils/x25519.ts
+++ b/src/core/utils/x25519.ts
@@ -3,6 +3,8 @@ import { x25519 } from "@noble/curves/ed25519";
export function getX25519PrivateKey(): Uint8Array {
const key = x25519.utils.randomPrivateKey();
+ // scalar clamping for curve25519, according to
+ // https://www.rfc-editor.org/rfc/rfc7748#section-5
key[0] &= 248;
key[31] &= 127;
key[31] |= 64;
diff --git a/src/index.css b/src/index.css
index d9508cd3..8a35066d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -99,4 +99,4 @@
img {
-drag: none;
-webkit-user-drag: none;
-}
\ No newline at end of file
+}
diff --git a/src/index.tsx b/src/index.tsx
index bbd5808d..33d79536 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -4,7 +4,7 @@ import "maplibre-gl/dist/maplibre-gl.css";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
-import { App } from "@app/App.js";
+import { App } from "@app/App.tsx";
const container = document.getElementById("root") as HTMLElement;
const root = createRoot(container);
diff --git a/src/pages/Channels.tsx b/src/pages/Channels.tsx
index 83eefdbd..3468aa0e 100644
--- a/src/pages/Channels.tsx
+++ b/src/pages/Channels.tsx
@@ -3,11 +3,11 @@ import {
TabsContent,
TabsList,
TabsTrigger,
-} from "@app/components/UI/Tabs.js";
-import { Channel } from "@components/PageComponents/Channel.js";
-import { PageLayout } from "@components/PageLayout.js";
-import { Sidebar } from "@components/Sidebar.js";
-import { useDevice } from "@core/stores/deviceStore.js";
+} from "@app/components/UI/Tabs.tsx";
+import { Channel } from "@components/PageComponents/Channel.tsx";
+import { PageLayout } from "@components/PageLayout.tsx";
+import { Sidebar } from "@components/Sidebar.tsx";
+import { useDevice } from "@core/stores/deviceStore.ts";
import { Types } from "@meshtastic/js";
import type { Protobuf } from "@meshtastic/js";
import { ImportIcon, QrCodeIcon } from "lucide-react";
diff --git a/src/pages/Config/DeviceConfig.tsx b/src/pages/Config/DeviceConfig.tsx
index 45973e60..e870b944 100644
--- a/src/pages/Config/DeviceConfig.tsx
+++ b/src/pages/Config/DeviceConfig.tsx
@@ -1,18 +1,18 @@
-import { Bluetooth } from "@components/PageComponents/Config/Bluetooth.js";
-import { Device } from "@components/PageComponents/Config/Device.js";
-import { Display } from "@components/PageComponents/Config/Display.js";
-import { LoRa } from "@components/PageComponents/Config/LoRa.js";
-import { Network } from "@components/PageComponents/Config/Network.js";
-import { Position } from "@components/PageComponents/Config/Position.js";
-import { Power } from "@components/PageComponents/Config/Power.js";
-import { Security } from "@components/PageComponents/Config/Security.js";
+import { Bluetooth } from "@components/PageComponents/Config/Bluetooth.tsx";
+import { Device } from "@components/PageComponents/Config/Device.tsx";
+import { Display } from "@components/PageComponents/Config/Display.tsx";
+import { LoRa } from "@components/PageComponents/Config/LoRa.tsx";
+import { Network } from "@components/PageComponents/Config/Network.tsx";
+import { Position } from "@components/PageComponents/Config/Position.tsx";
+import { Power } from "@components/PageComponents/Config/Power.tsx";
+import { Security } from "@components/PageComponents/Config/Security.tsx";
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
-} from "@components/UI/Tabs.js";
-import { useDevice } from "@core/stores/deviceStore.js";
+} from "@components/UI/Tabs.tsx";
+import { useDevice } from "@core/stores/deviceStore.ts";
export const DeviceConfig = (): JSX.Element => {
const { metadata } = useDevice();
diff --git a/src/pages/Config/ModuleConfig.tsx b/src/pages/Config/ModuleConfig.tsx
index 276553da..95bd3dd1 100644
--- a/src/pages/Config/ModuleConfig.tsx
+++ b/src/pages/Config/ModuleConfig.tsx
@@ -1,21 +1,21 @@
-import { AmbientLighting } from "@app/components/PageComponents/ModuleConfig/AmbientLighting.js";
-import { DetectionSensor } from "@app/components/PageComponents/ModuleConfig/DetectionSensor.js";
-import { NeighborInfo } from "@app/components/PageComponents/ModuleConfig/NeighborInfo.js";
-import { Audio } from "@components/PageComponents/ModuleConfig/Audio.js";
-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 { Paxcounter } from "@components/PageComponents/ModuleConfig/Paxcounter.js";
-import { RangeTest } from "@components/PageComponents/ModuleConfig/RangeTest.js";
-import { Serial } from "@components/PageComponents/ModuleConfig/Serial.js";
-import { StoreForward } from "@components/PageComponents/ModuleConfig/StoreForward.js";
-import { Telemetry } from "@components/PageComponents/ModuleConfig/Telemetry.js";
+import { AmbientLighting } from "@app/components/PageComponents/ModuleConfig/AmbientLighting.tsx";
+import { DetectionSensor } from "@app/components/PageComponents/ModuleConfig/DetectionSensor.tsx";
+import { NeighborInfo } from "@app/components/PageComponents/ModuleConfig/NeighborInfo.tsx";
+import { Audio } from "@components/PageComponents/ModuleConfig/Audio.tsx";
+import { CannedMessage } from "@components/PageComponents/ModuleConfig/CannedMessage.tsx";
+import { ExternalNotification } from "@components/PageComponents/ModuleConfig/ExternalNotification.tsx";
+import { MQTT } from "@components/PageComponents/ModuleConfig/MQTT.tsx";
+import { Paxcounter } from "@components/PageComponents/ModuleConfig/Paxcounter.tsx";
+import { RangeTest } from "@components/PageComponents/ModuleConfig/RangeTest.tsx";
+import { Serial } from "@components/PageComponents/ModuleConfig/Serial.tsx";
+import { StoreForward } from "@components/PageComponents/ModuleConfig/StoreForward.tsx";
+import { Telemetry } from "@components/PageComponents/ModuleConfig/Telemetry.tsx";
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
-} from "@components/UI/Tabs.js";
+} from "@components/UI/Tabs.tsx";
export const ModuleConfig = (): JSX.Element => {
const tabs = [
diff --git a/src/pages/Config/index.tsx b/src/pages/Config/index.tsx
index c568670a..c942940c 100644
--- a/src/pages/Config/index.tsx
+++ b/src/pages/Config/index.tsx
@@ -1,11 +1,11 @@
-import { useDevice } from "@app/core/stores/deviceStore.js";
-import { PageLayout } from "@components/PageLayout.js";
-import { Sidebar } from "@components/Sidebar.js";
-import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.js";
-import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.js";
-import { useToast } from "@core/hooks/useToast.js";
-import { DeviceConfig } from "@pages/Config/DeviceConfig.js";
-import { ModuleConfig } from "@pages/Config/ModuleConfig.js";
+import { useDevice } from "@app/core/stores/deviceStore.ts";
+import { PageLayout } from "@components/PageLayout.tsx";
+import { Sidebar } from "@components/Sidebar.tsx";
+import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.tsx";
+import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.tsx";
+import { useToast } from "@core/hooks/useToast.ts";
+import { DeviceConfig } from "@pages/Config/DeviceConfig.tsx";
+import { ModuleConfig } from "@pages/Config/ModuleConfig.tsx";
import { BoxesIcon, SaveIcon, SettingsIcon } from "lucide-react";
import { useState } from "react";
diff --git a/src/pages/Dashboard/index.tsx b/src/pages/Dashboard/index.tsx
index 3bbbbd9f..ee2c4693 100644
--- a/src/pages/Dashboard/index.tsx
+++ b/src/pages/Dashboard/index.tsx
@@ -1,9 +1,9 @@
-import { useAppStore } from "@app/core/stores/appStore.js";
-import { useDeviceStore } from "@app/core/stores/deviceStore.js";
-import { Button } from "@components/UI/Button.js";
-import { Separator } from "@components/UI/Seperator.js";
-import { H3 } from "@components/UI/Typography/H3.js";
-import { Subtle } from "@components/UI/Typography/Subtle.js";
+import { useAppStore } from "@app/core/stores/appStore.ts";
+import { useDeviceStore } from "@app/core/stores/deviceStore.ts";
+import { Button } from "@components/UI/Button.tsx";
+import { Separator } from "@components/UI/Seperator.tsx";
+import { H3 } from "@components/UI/Typography/H3.tsx";
+import { Subtle } from "@components/UI/Typography/Subtle.tsx";
import {
BluetoothIcon,
ListPlusIcon,
diff --git a/src/pages/Map.tsx b/src/pages/Map.tsx
index 42cc5fcb..e326b336 100644
--- a/src/pages/Map.tsx
+++ b/src/pages/Map.tsx
@@ -1,11 +1,12 @@
-import { Subtle } from "@app/components/UI/Typography/Subtle.js";
-import { cn } from "@app/core/utils/cn.js";
-import { PageLayout } from "@components/PageLayout.js";
-import { Sidebar } from "@components/Sidebar.js";
-import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.js";
-import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.js";
-import { useAppStore } from "@core/stores/appStore.js";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { Subtle } from "@app/components/UI/Typography/Subtle.tsx";
+import { NodeDetail } from "@app/components/PageComponents/Map/NodeDetail";
+import { cn } from "@app/core/utils/cn.ts";
+import { PageLayout } from "@components/PageLayout.tsx";
+import { Sidebar } from "@components/Sidebar.tsx";
+import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.tsx";
+import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.tsx";
+import { useAppStore } from "@core/stores/appStore.ts";
+import { useDevice } from "@core/stores/deviceStore.ts";
import { Hashicon } from "@emeraldpay/hashicon-react";
import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
import { bbox, lineString } from "@turf/turf";
@@ -16,8 +17,9 @@ import {
ZoomOutIcon,
} from "lucide-react";
import { useCallback, useEffect, useState } from "react";
-import { Marker, useMap } from "react-map-gl";
+import { AttributionControl, Marker, Popup, useMap } from "react-map-gl";
import MapGl from "react-map-gl/maplibre";
+import { Protobuf } from "@meshtastic/js";
export const MapPage = (): JSX.Element => {
const { nodes, waypoints } = useDevice();
@@ -25,6 +27,8 @@ export const MapPage = (): JSX.Element => {
const { default: map } = useMap();
const [zoom, setZoom] = useState(0);
+ const [selectedNode, setSelectedNode] =
+ useState(null);
const allNodes = Array.from(nodes.values());
@@ -126,6 +130,7 @@ export const MapPage = (): JSX.Element => {
// }}
// @ts-ignore
+
attributionControl={false}
renderWorldCopies={false}
maxPitch={0}
@@ -142,6 +147,9 @@ export const MapPage = (): JSX.Element => {
longitude: 0,
}}
>
+
{waypoints.map((wp) => (
{
))} */}
{allNodes.map((node) => {
- if (node.position?.latitudeI) {
+ if (node.position?.latitudeI && node.num !== selectedNode?.num) {
return (
{
style={{ filter: darkMode ? "invert(1)" : "" }}
anchor="bottom"
onClick={() => {
+ setSelectedNode(node);
map?.easeTo({
zoom: 12,
center: [
@@ -189,6 +198,17 @@ export const MapPage = (): JSX.Element => {
);
}
})}
+ {selectedNode?.position && (
+ setSelectedNode(null)}
+ >
+
+
+ )}
diff --git a/src/pages/Messages.tsx b/src/pages/Messages.tsx
index 4e7fbae9..28a35d2c 100644
--- a/src/pages/Messages.tsx
+++ b/src/pages/Messages.tsx
@@ -1,14 +1,14 @@
-import { ChannelChat } from "@components/PageComponents/Messages/ChannelChat.js";
-import { PageLayout } from "@components/PageLayout.js";
-import { Sidebar } from "@components/Sidebar.js";
-import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.js";
-import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.js";
-import { useToast } from "@core/hooks/useToast.js";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { ChannelChat } from "@components/PageComponents/Messages/ChannelChat.tsx";
+import { PageLayout } from "@components/PageLayout.tsx";
+import { Sidebar } from "@components/Sidebar.tsx";
+import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.tsx";
+import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.tsx";
+import { useToast } from "@core/hooks/useToast.ts";
+import { useDevice } from "@core/stores/deviceStore.ts";
import { Hashicon } from "@emeraldpay/hashicon-react";
import { Protobuf, Types } from "@meshtastic/js";
import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
-import { getChannelName } from "@pages/Channels.js";
+import { getChannelName } from "@pages/Channels.tsx";
import { HashIcon, LockIcon, LockOpenIcon, WaypointsIcon } from "lucide-react";
import { useState } from "react";
diff --git a/src/pages/Nodes.tsx b/src/pages/Nodes.tsx
index 57b1a546..a2d1ec6a 100644
--- a/src/pages/Nodes.tsx
+++ b/src/pages/Nodes.tsx
@@ -2,12 +2,12 @@ import { NodeOptionsDialog } from "@app/components/Dialog/NodeOptionsDialog";
import { TracerouteResponseDialog } from "@app/components/Dialog/TracerouteResponseDialog";
import Footer from "@app/components/UI/Footer";
import { useAppStore } from "@app/core/stores/appStore";
-import { Sidebar } from "@components/Sidebar.js";
-import { Button } from "@components/UI/Button.js";
-import { Mono } from "@components/generic/Mono.js";
-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 { Sidebar } from "@components/Sidebar.tsx";
+import { Button } from "@components/UI/Button.tsx";
+import { Mono } from "@components/generic/Mono.tsx";
+import { Table } from "@components/generic/Table/index.tsx";
+import { TimeAgo } from "@components/generic/Table/tmp/TimeAgo.tsx";
+import { useDevice } from "@core/stores/deviceStore.ts";
import { Hashicon } from "@emeraldpay/hashicon-react";
import { Protobuf, type Types } from "@meshtastic/js";
import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
diff --git a/src/validation/config/position.ts b/src/validation/config/position.ts
index b02f095d..7eb42c56 100644
--- a/src/validation/config/position.ts
+++ b/src/validation/config/position.ts
@@ -43,7 +43,4 @@ export class PositionValidation
@IsEnum(Protobuf.Config.Config_PositionConfig_GpsMode)
gpsMode: Protobuf.Config.Config_PositionConfig_GpsMode;
-
- @IsArray()
- channelPrecision: number[];
}
diff --git a/src/validation/rasterSource.ts b/src/validation/rasterSource.ts
index 0afeec77..965206d4 100644
--- a/src/validation/rasterSource.ts
+++ b/src/validation/rasterSource.ts
@@ -1,6 +1,6 @@
import { IsArray, IsBoolean, IsNumber, IsString, IsUrl } from "class-validator";
-import type { RasterSource } from "@core/stores/appStore.js";
+import type { RasterSource } from "@core/stores/appStore.ts";
export class MapValidation {
@IsArray()
diff --git a/tsconfig.json b/tsconfig.json
index af036a6e..4cf9d6f3 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -34,6 +34,7 @@
"@types/w3c-web-serial"
],
"strictPropertyInitialization": false,
- "experimentalDecorators": true
+ "experimentalDecorators": true,
+ "allowImportingTsExtensions": true,
}
}