mirror/web
1
0
Fork 0
mirror of https://github.com/meshtastic/web.git synced 2026-07-30 22:46:30 -04:00
Code Issues Packages Projects Releases Wiki Activity

Execute oxfmt (#1166)

Browse Source 
Ran
pnpm oxfmt .

This should get the web repo aligned so that we can better enforce oxfmt going forward.
This commit is contained in:
Austin
2026-06-16 20:30:08 -04:00
committed by GitHub
parent c5690d1edb
commit d2cb51d489
378 changed files with 5548 additions and 1974 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
.devcontainer/devcontainer.json
View File

@@ -1,13 +1,12 @@
{
"name": "meshtastic-web",
"image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm",
"features": {
"ghcr.io/r3dpoint/devcontainer-features/tailwindcss-standalone-cli:1": {
"version": "latest"
},
"ghcr.io/devcontainers-extra/features/pnpm:2": {
"version": "latest"
}
}
"name": "meshtastic-web",
"image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm",
"features": {
"ghcr.io/r3dpoint/devcontainer-features/tailwindcss-standalone-cli:1": {
"version": "latest"
},
"ghcr.io/devcontainers-extra/features/pnpm:2": {
"version": "latest"
}
}
}

4
.github/workflows/release-protobufs.yml vendored
View File

@@ -16,7 +16,7 @@ on:
permissions: write-all
env:
PROTOBUF_DIR: ./packages/protobufs
PROTOBUF_DIR: ./packages/protobufs
jobs:
codegen:
@@ -70,7 +70,7 @@ jobs:
- name: Setup pnpm
uses: pnpm/action-setup@v6
- name: Install workspace dependencies
run: pnpm install --frozen-lockfile

2
.github/workflows/update-stable-from-master.yml vendored
View File

@@ -20,7 +20,7 @@ jobs:
uses: actions/checkout@v6
with:
fetch-depth: 0
fetch-tags: true # IMPORTANT: we need tags to resolve the release commit
fetch-tags: true # IMPORTANT: we need tags to resolve the release commit
- name: Configure Git author
run: |

2
.oxfmtrc.json
View File

@@ -1,5 +1,5 @@
{
"$schema": "./node_modules/oxfmt/configuration_schema.json",
"$schema": "https://raw.githubusercontent.com/oxc-project/oxc/main/npm/oxfmt/configuration_schema.json",
"useTabs": false,
"tabWidth": 2,
"printWidth": 80,

4
.vscode/settings.json vendored
View File

@@ -2,5 +2,5 @@
"editor.formatOnSave": true,
"search.exclude": {
"**/i18n/locales/*-*/**": true
},
}
}
}

8
apps/web/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en" data-theme="system">
<head>
<!-- CookieYes banner -->
@@ -11,11 +11,7 @@
<link rel="manifest" href="site.webmanifest" />
<link rel="mask-icon" href="logo_black.svg" color="#67ea94" />
<link
rel="stylesheet"
href="src/index.css"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="src/index.css" crossorigin="anonymous" />
<meta name="theme-color" content="#67ea94" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Meshtastic Web Client" />

12
apps/web/package.json
View File

@@ -1,17 +1,17 @@
{
"name": "meshtastic-web",
"version": "2.6.6-0",
"type": "module",
"description": "Meshtastic web client",
"homepage": "https://meshtastic.org",
"bugs": {
"url": "https://github.com/meshtastic/web/issues"
},
"license": "GPL-3.0-only",
"repository": {
"type": "git",
"url": "git+https://github.com/meshtastic/web.git"
},
"bugs": {
"url": "https://github.com/meshtastic/web/issues"
},
"homepage": "https://meshtastic.org",
"type": "module",
"scripts": {
"preinstall": "npx only-allow pnpm",
"setup:certs": "mkcert localhost 127.0.0.1 ::1",
@@ -41,7 +41,6 @@
"@meshtastic/transport-web-serial": "workspace:*",
"@noble/curves": "^1.9.2",
"@preact/signals-core": "^1.8.0",
"better-result": "^2.9.2",
"@radix-ui/react-accordion": "^1.2.13",
"@radix-ui/react-alert-dialog": "^1.1.16",
"@radix-ui/react-checkbox": "^1.3.4",
@@ -69,6 +68,7 @@
"@types/node": "^25.9.3",
"@types/web-bluetooth": "^0.0.21",
"base64-js": "^1.5.1",
"better-result": "^2.9.2",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"cmdk": "^1.1.1",

28
apps/web/public/site.webmanifest
View File

@@ -1,16 +1,16 @@
{
"name": "Meshtastic",
"short_name": "Web Client",
"start_url": ".",
"description": "Meshtastic Web App",
"icons": [
{
"src": "/logo.svg",
"sizes": "any",
"type": "image/svg+xml"
}
],
"theme_color": "#67ea94",
"background_color": "#67ea94",
"display": "standalone"
"name": "Meshtastic",
"short_name": "Web Client",
"start_url": ".",
"description": "Meshtastic Web App",
"icons": [
{
"src": "/logo.svg",
"sizes": "any",
"type": "image/svg+xml"
}
],
"theme_color": "#67ea94",
"background_color": "#67ea94",
"display": "standalone"
}

4
apps/web/src/DeviceWrapper.tsx
View File

@@ -8,6 +8,8 @@ export interface DeviceWrapperProps {
export const DeviceWrapper = ({ children, deviceId }: DeviceWrapperProps) => {
return (
<CurrentDeviceContext.Provider value={{ deviceId }}>{children}</CurrentDeviceContext.Provider>
<CurrentDeviceContext.Provider value={{ deviceId }}>
{children}
</CurrentDeviceContext.Provider>
);
};

18
apps/web/src/__mocks__/components/UI/Checkbox.tsx
View File

@@ -1,7 +1,21 @@
import { vi } from "vitest";
vi.mock("@components/UI/Checkbox.tsx", () => ({
Checkbox: ({ id, checked, onChange }: { id: string; checked: boolean; onChange: () => void }) => (
<input data-testid="checkbox" type="checkbox" id={id} checked={checked} onChange={onChange} />
Checkbox: ({
id,
checked,
onChange,
}: {
id: string;
checked: boolean;
onChange: () => void;
}) => (
<input
data-testid="checkbox"
type="checkbox"
id={id}
checked={checked}
onChange={onChange}
/>
),
}));

12
apps/web/src/components/BatteryStatus.tsx
View File

@@ -1,4 +1,9 @@
import { BatteryFullIcon, BatteryLowIcon, BatteryMediumIcon, PlugZapIcon } from "lucide-react";
import {
BatteryFullIcon,
BatteryLowIcon,
BatteryMediumIcon,
PlugZapIcon,
} from "lucide-react";
import type React from "react";
import { useTranslation } from "react-i18next";
import type { DeviceMetrics } from "./types.ts";
@@ -38,7 +43,10 @@ export const getBatteryStatus = (level: number): BatteryStatusKey => {
const BatteryStatus: React.FC<BatteryStatusProps> = ({ deviceMetrics }) => {
const { t } = useTranslation();
if (deviceMetrics?.batteryLevel === undefined || deviceMetrics?.batteryLevel === null) {
if (
deviceMetrics?.batteryLevel === undefined ||
deviceMetrics?.batteryLevel === null
) {
return null;
}

17
apps/web/src/components/CommandPalette/index.tsx
View File

@@ -58,8 +58,12 @@ export interface SubItem {
}
export const CommandPalette = () => {
const { commandPaletteOpen, setCommandPaletteOpen, setConnectDialogOpen, setSelectedDevice } =
useAppStore();
const {
commandPaletteOpen,
setCommandPaletteOpen,
setConnectDialogOpen,
setSelectedDevice,
} = useAppStore();
const { getDevices } = useDeviceStore();
const { setDialogOpen, connection } = useDevice();
const allNodes = useNodesAsProto();
@@ -116,7 +120,9 @@ export const CommandPalette = () => {
label: t("manage.command.switchNode"),
icon: ArrowLeftRightIcon,
subItems: getDevices().map((device) => ({
label: getNode(device.hardware.myNodeNum)?.user?.longName ?? t("unknown.shortName"),
label:
getNode(device.hardware.myNodeNum)?.user?.longName ??
t("unknown.shortName"),
icon: <Avatar nodeNum={device.hardware.myNodeNum} />,
action() {
setSelectedDevice(device.id);
@@ -259,7 +265,10 @@ export const CommandPalette = () => {
}, [setCommandPaletteOpen]);
return (
<CommandDialog open={commandPaletteOpen} onOpenChange={setCommandPaletteOpen}>
<CommandDialog
open={commandPaletteOpen}
onOpenChange={setCommandPaletteOpen}
>
<CommandInput placeholder={t("search.commandPalette")} />
<CommandList>
<CommandEmpty>{t("emptyState")}</CommandEmpty>

19
apps/web/src/components/ConnectingOverlay.tsx
View File

@@ -64,12 +64,21 @@ export const ConnectingOverlay = (): ReactElement | null => {
const counters =
progress.phase === "configuring" || progress.phase === "configured"
? progress.received
: { config: 0, modules: 0, channels: 0, nodes: 0, myInfo: false, metadata: false };
: {
config: 0,
modules: 0,
channels: 0,
nodes: 0,
myInfo: false,
metadata: false,
};
const isConnecting = active.status === "connecting";
const phaseLabel = isConnecting
? t("overlay.phase.connecting", { defaultValue: "Opening transport…" })
: t("overlay.phase.configuring", { defaultValue: "Streaming configuration…" });
: t("overlay.phase.configuring", {
defaultValue: "Streaming configuration…",
});
return (
<Dialog open>
@@ -133,7 +142,11 @@ export const ConnectingOverlay = (): ReactElement | null => {
"Taking longer than usual. The device may be in CLI / bootloader mode, or the firmware isn't responding to config requests.",
})}
</p>
<Button type="button" variant="outline" onClick={() => void disconnect(active.id)}>
<Button
type="button"
variant="outline"
onClick={() => void disconnect(active.id)}
>
{t("overlay.cancel", { defaultValue: "Cancel" })}
</Button>
</div>

22
apps/web/src/components/DeviceInfoPanel.tsx
View File

@@ -107,7 +107,9 @@ export const DeviceInfoPanel = ({
label: t("batteryVoltage.title"),
icon: ZapIcon,
value:
voltage !== undefined ? `${voltage?.toPrecision(3)} V` : t("unknown.notAvailable", "N/A"),
voltage !== undefined
? `${voltage?.toPrecision(3)} V`
: t("unknown.notAvailable", "N/A"),
},
{
id: "firmware",
@@ -205,7 +207,9 @@ export const DeviceInfoPanel = ({
</button>
)}
{!isCollapsed && <div className="my-2 h-px bg-gray-200 dark:bg-gray-700 flex-shrink-0" />}
{!isCollapsed && (
<div className="my-2 h-px bg-gray-200 dark:bg-gray-700 flex-shrink-0" />
)}
<div
className={cn(
@@ -237,7 +241,9 @@ export const DeviceInfoPanel = ({
})}
</div>
{!isCollapsed && <div className="my-2 h-px bg-gray-200 dark:bg-gray-700 flex-shrink-0" />}
{!isCollapsed && (
<div className="my-2 h-px bg-gray-200 dark:bg-gray-700 flex-shrink-0" />
)}
<div
className={cn(
@@ -251,7 +257,9 @@ export const DeviceInfoPanel = ({
{actionButtons.map((buttonItem) => {
const Icon = buttonItem.icon;
if (buttonItem.render) {
return <Fragment key={buttonItem.id}>{buttonItem.render()}</Fragment>;
return (
<Fragment key={buttonItem.id}>{buttonItem.render()}</Fragment>
);
}
return (
<Button
@@ -273,7 +281,8 @@ export const DeviceInfoPanel = ({
"flex-shrink-0 w-4",
"text-gray-500 dark:text-gray-400",
"transition-colors duration-150",
!disableHover && "group-hover:text-gray-700 dark:group-hover:text-gray-200",
!disableHover &&
"group-hover:text-gray-700 dark:group-hover:text-gray-200",
)}
/>
<Subtle
@@ -281,7 +290,8 @@ export const DeviceInfoPanel = ({
"text-sm",
"text-gray-600 dark:text-gray-300",
"transition-colors duration-150",
!disableHover && "group-hover:text-gray-800 dark:group-hover:text-gray-100",
!disableHover &&
"group-hover:text-gray-800 dark:group-hover:text-gray-100",
)}
>
{buttonItem.label}

177
apps/web/src/components/Dialog/AddConnectionDialog/AddConnectionDialog.tsx
View File

@@ -1,11 +1,19 @@
import { SupportBadge } from "@app/components/Badge/SupportedBadge.tsx";
import { Switch } from "@app/components/UI/Switch.tsx";
import type { ConnectionType, NewConnection } from "@app/core/stores/deviceStore/types.ts";
import type {
ConnectionType,
NewConnection,
} from "@app/core/stores/deviceStore/types.ts";
import { testHttpReachable } from "@app/pages/Connections/utils";
import { Button } from "@components/UI/Button.tsx";
import { Input } from "@components/UI/Input.tsx";
import { Label } from "@components/UI/Label.tsx";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@components/UI/Tabs.tsx";
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from "@components/UI/Tabs.tsx";
import { Link } from "@components/UI/Typography/Link.tsx";
import {
type BrowserFeature,
@@ -37,7 +45,9 @@ type DialogState = {
protocol: "http" | "https";
url: string;
testStatus: TestingStatus;
btSelected: { id: string; name?: string; device?: BluetoothDevice } | undefined;
btSelected:
| { id: string; name?: string; device?: BluetoothDevice }
| undefined;
serialSelected: { vendorId?: number; productId?: number } | undefined;
};
@@ -50,7 +60,9 @@ type DialogAction =
| { type: "SET_TEST_STATUS"; payload: TestingStatus }
| {
type: "SET_BT_SELECTED";
payload: { id: string; name?: string; device?: BluetoothDevice } | undefined;
payload:
| { id: string; name?: string; device?: BluetoothDevice }
| undefined;
}
| {
type: "SET_SERIAL_SELECTED";
@@ -70,27 +82,30 @@ type Pane = {
build: () => NewConnection | null;
};
const featureErrors: Record<BrowserFeature, { href: string; i18nKey: string }> = {
"Web Bluetooth": {
href: "https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API#browser_compatibility",
i18nKey: "addConnection.validation.requiresWebBluetooth",
},
"Web Serial": {
href: "https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API#browser_compatibility",
i18nKey: "addConnection.validation.requiresWebSerial",
},
"Secure Context": {
href: "https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts",
i18nKey: "addConnection.validation.requiresSecureContext",
},
};
const featureErrors: Record<BrowserFeature, { href: string; i18nKey: string }> =
{
"Web Bluetooth": {
href: "https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API#browser_compatibility",
i18nKey: "addConnection.validation.requiresWebBluetooth",
},
"Web Serial": {
href: "https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API#browser_compatibility",
i18nKey: "addConnection.validation.requiresWebSerial",
},
"Secure Context": {
href: "https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts",
i18nKey: "addConnection.validation.requiresSecureContext",
},
};
const FeatureErrorMessage = ({ missingFeatures, tabId }: FeatureErrorProps) => {
if (missingFeatures.length === 0) {
return null;
}
const browserFeatures = missingFeatures.filter((feature) => feature !== "Secure Context");
const browserFeatures = missingFeatures.filter(
(feature) => feature !== "Secure Context",
);
const needsSecureContext = missingFeatures.includes("Secure Context");
const needsFeature =
@@ -152,17 +167,22 @@ const initialState: DialogState = {
btSelected: undefined,
serialSelected: undefined,
};
export const createInitialDialogState = (overrides?: Partial<DialogState>): DialogState => {
export const createInitialDialogState = (
overrides?: Partial<DialogState>,
): DialogState => {
return { ...initialState, ...(overrides ?? {}) };
};
export const dialogStateInitializer = (overrides?: Partial<DialogState>): DialogState =>
createInitialDialogState(overrides);
export const dialogStateInitializer = (
overrides?: Partial<DialogState>,
): DialogState => createInitialDialogState(overrides);
function dialogReducer(state: DialogState, action: DialogAction): DialogState {
switch (action.type) {
case "RESET":
return createInitialDialogState(action.payload?.isHTTPS ? { protocol: "https" } : {});
return createInitialDialogState(
action.payload?.isHTTPS ? { protocol: "https" } : {},
);
case "SET_TAB":
return { ...state, tab: action.payload };
case "SET_NAME":
@@ -203,13 +223,22 @@ function PickerRow({
<div className="grid gap-2">
<Label>{label}</Label>
<div className="flex items-center gap-2">
<Button variant="subtle" className="gap-2" onClick={onPick} disabled={disabled}>
<Button
variant="subtle"
className="gap-2"
onClick={onPick}
disabled={disabled}
>
<MousePointerClick className="h-4 w-4" />
{buttonText}
</Button>
<div className="text-sm text-slate-500 dark:text-slate-400 truncate">{display}</div>
<div className="text-sm text-slate-500 dark:text-slate-400 truncate">
{display}
</div>
</div>
{helper ? <p className="text-xs text-slate-500 dark:text-slate-400">{helper}</p> : null}
{helper ? (
<p className="text-xs text-slate-500 dark:text-slate-400">{helper}</p>
) : null}
</div>
);
}
@@ -238,8 +267,10 @@ export default function AddConnectionDialog({
const { unsupported } = useBrowserFeatureDetection();
const { t } = useTranslation();
const bluetoothSupported = typeof navigator !== "undefined" && "bluetooth" in navigator;
const serialSupported = typeof navigator !== "undefined" && "serial" in navigator;
const bluetoothSupported =
typeof navigator !== "undefined" && "bluetooth" in navigator;
const serialSupported =
typeof navigator !== "undefined" && "serial" in navigator;
const isURLHTTPS = isHTTPS;
const reset = useCallback(() => {
@@ -268,7 +299,9 @@ export default function AddConnectionDialog({
if (!bluetoothSupported) {
toast({
title: t("addConnection.bluetoothConnection.notSupported.title"),
description: t("addConnection.bluetoothConnection.notSupported.description"),
description: t(
"addConnection.bluetoothConnection.notSupported.description",
),
});
return;
}
@@ -303,7 +336,9 @@ export default function AddConnectionDialog({
if (!serialSupported) {
toast({
title: t("addConnection.serialConnection.notSupported.title"),
description: t("addConnection.serialConnection.notSupported.description"),
description: t(
"addConnection.serialConnection.notSupported.description",
),
});
return;
}
@@ -335,7 +370,9 @@ export default function AddConnectionDialog({
}
toast({
title: t("addConnection.serialConnection.portSelected.title"),
description: t("addConnection.serialConnection.portSelected.description"),
description: t(
"addConnection.serialConnection.portSelected.description",
),
});
} catch (err) {
makeToastErrorHandler("Serial")(err);
@@ -360,7 +397,9 @@ export default function AddConnectionDialog({
dispatch({ type: "SET_TEST_STATUS", payload: "failure" });
toast({
title: t("addConnection.httpConnection.connectionTest.failure.title"),
description: t("addConnection.httpConnection.connectionTest.failure.description"),
description: t(
"addConnection.httpConnection.connectionTest.failure.description",
),
});
}
}, [state.protocol, state.url, toast, t]);
@@ -371,7 +410,9 @@ export default function AddConnectionDialog({
placeholder: t("addConnection.httpConnection.namePlaceholder"),
children: () => (
<div className="flex flex-col gap-4">
<Label htmlFor="url">{t("addConnection.httpConnection.heading")}</Label>
<Label htmlFor="url">
{t("addConnection.httpConnection.heading")}
</Label>
<Input
id={"url"}
@@ -407,19 +448,23 @@ export default function AddConnectionDialog({
className="gap-2"
onClick={handleTestHttp}
disabled={
urlOrIpv4Schema.safeParse(`${state.protocol}://${state.url}`).success === false ||
state.testStatus === "testing"
urlOrIpv4Schema.safeParse(`${state.protocol}://${state.url}`)
.success === false || state.testStatus === "testing"
}
>
{state.testStatus === "testing" ? (
<>
<Loader2 className="h-4 w-4 animate-spin" />
{t("addConnection.httpConnection.connectionTest.button.loading")}
{t(
"addConnection.httpConnection.connectionTest.button.loading",
)}
</>
) : (
<>
<MousePointerClick className="h-4 w-4" />
{t("addConnection.httpConnection.connectionTest.button.label")}
{t(
"addConnection.httpConnection.connectionTest.button.label",
)}
</>
)}
</Button>
@@ -432,7 +477,9 @@ export default function AddConnectionDialog({
{state.testStatus === "failure" && (
<div className="flex items-center gap-1 text-sm text-red-600 dark:text-red-400">
<XCircle className="h-4 w-4" />
{t("addConnection.httpConnection.connectionTest.notReachable")}
{t(
"addConnection.httpConnection.connectionTest.notReachable",
)}
</div>
)}
</div>
@@ -442,8 +489,8 @@ export default function AddConnectionDialog({
</div>
),
validate: () =>
urlOrIpv4Schema.safeParse(`${state.protocol}://${state.url}`).success === true &&
state.testStatus === "success",
urlOrIpv4Schema.safeParse(`${state.protocol}://${state.url}`)
.success === true && state.testStatus === "success",
build: () => ({
type: "http",
name: state.name.trim(),
@@ -456,8 +503,12 @@ export default function AddConnectionDialog({
<>
<SupportBadge
supported={bluetoothSupported}
labelSupported={t("addConnection.bluetoothConnection.supported.title")}
labelUnsupported={t("addConnection.bluetoothConnection.notSupported.title")}
labelSupported={t(
"addConnection.bluetoothConnection.supported.title",
)}
labelUnsupported={t(
"addConnection.bluetoothConnection.notSupported.title",
)}
/>
<PickerRow
label={t("addConnection.bluetoothConnection.device")}
@@ -471,7 +522,10 @@ export default function AddConnectionDialog({
}
helper={t("addConnection.bluetoothConnection.helperText")}
/>
<FeatureErrorMessage missingFeatures={unsupported} tabId="bluetooth" />
<FeatureErrorMessage
missingFeatures={unsupported}
tabId="bluetooth"
/>
</>
),
validate: () => state.name.trim().length > 0 && !!state.btSelected,
@@ -489,8 +543,12 @@ export default function AddConnectionDialog({
<>
<SupportBadge
supported={serialSupported}
labelSupported={t("addConnection.serialConnection.supported.title")}
labelUnsupported={t("addConnection.serialConnection.notSupported.title")}
labelSupported={t(
"addConnection.serialConnection.supported.title",
)}
labelUnsupported={t(
"addConnection.serialConnection.notSupported.title",
)}
/>
<PickerRow
label={t("addConnection.serialConnection.port")}
@@ -500,8 +558,10 @@ export default function AddConnectionDialog({
display={
state.serialSelected
? t("addConnection.serialConnection.deviceName", {
vendorId: state.serialSelected.vendorId?.toString(16) ?? "?",
productId: state.serialSelected.productId?.toString(16) ?? "?",
vendorId:
state.serialSelected.vendorId?.toString(16) ?? "?",
productId:
state.serialSelected.productId?.toString(16) ?? "?",
})
: t("addConnection.serialConnection.notSelected")
}
@@ -511,7 +571,8 @@ export default function AddConnectionDialog({
</>
),
validate: () =>
state.name.trim().length > 0 && (!!state.serialSelected || !serialSupported),
state.name.trim().length > 0 &&
(!!state.serialSelected || !serialSupported),
build: () => ({
type: "serial",
name: state.name.trim(),
@@ -537,7 +598,8 @@ export default function AddConnectionDialog({
const canCreate = useMemo(() => currentPane.validate(), [currentPane]);
const submit =
(fn: (p: NewConnection, device?: BluetoothDevice) => Promise<void>) => async () => {
(fn: (p: NewConnection, device?: BluetoothDevice) => Promise<void>) =>
async () => {
if (!canCreate) {
return;
}
@@ -546,7 +608,8 @@ export default function AddConnectionDialog({
if (!payload) {
return;
}
const btDevice = state.tab === "bluetooth" ? state.btSelected?.device : undefined;
const btDevice =
state.tab === "bluetooth" ? state.btSelected?.device : undefined;
await fn(payload, btDevice);
};
@@ -562,7 +625,9 @@ export default function AddConnectionDialog({
>
<Tabs
value={state.tab}
onValueChange={(v) => dispatch({ type: "SET_TAB", payload: v as TabKey })}
onValueChange={(v) =>
dispatch({ type: "SET_TAB", payload: v as TabKey })
}
>
<TabsList className="grid grid-cols-3">
{TAB_META.map(({ key, label, Icon }) => (
@@ -582,14 +647,20 @@ export default function AddConnectionDialog({
<Input
id={`name-${state.tab}`}
value={state.name}
onChange={(evt) => dispatch({ type: "SET_NAME", payload: evt.target.value })}
onChange={(evt) =>
dispatch({ type: "SET_NAME", payload: evt.target.value })
}
placeholder={currentPane.placeholder}
/>
</div>
{PANES[key].children()}
<div className="flex justify-end">
<div className="inline-flex rounded-md shadow-sm overflow-hidden border">
<Button onClick={submit(onSave)} disabled={!canCreate} className="rounded-none">
<Button
onClick={submit(onSave)}
disabled={!canCreate}
className="rounded-none"
>
{t("button.saveConnection")}
</Button>
</div>

9
apps/web/src/components/Dialog/AddConnectionDialog/validation.ts
View File

@@ -28,13 +28,18 @@ export const urlOrIpv4Schema = z
}
// IPv4 pattern
const ipv4Regex = /^(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}$/;
const ipv4Regex =
/^(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}$/;
// Domain pattern (e.g. example.com, meshtastic.local)
const domainRegex = /^(?!-)(?:[a-zA-Z0-9-]{1,63}\.)+[a-zA-Z]{2,}$/;
// Local domain (e.g. meshtastic.local)
const localDomainRegex = /^(?!-)[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.local$/;
return ipv4Regex.test(host) || domainRegex.test(host) || localDomainRegex.test(host);
return (
ipv4Regex.test(host) ||
domainRegex.test(host) ||
localDomainRegex.test(host)
);
}, "Must be a valid IPv4 address or domain name with optional port (10-65535)")
.transform((val) => {
return /^https?:\/\//i.test(val) ? val : `http://${val}`;

4
apps/web/src/components/Dialog/ClearAllStoresDialog/ClearAllStoresDialog.test.tsx
View File

@@ -47,7 +47,9 @@ describe("ClearAllStoresDialog", () => {
it("calls clearAllStores and navigates to '/' when confirm is clicked", () => {
render(<ClearAllStoresDialog open onOpenChange={mockOnOpenChange} />);
fireEvent.click(screen.getByRole("button", { name: "Clear all local storage" }));
fireEvent.click(
screen.getByRole("button", { name: "Clear all local storage" }),
);
expect(mockClearAllStores).toHaveBeenCalledTimes(1);
expect(assignedHref).toBe("/"); // forced reload target

5
apps/web/src/components/Dialog/ClearAllStoresDialog/ClearAllStoresDialog.tsx
View File

@@ -7,7 +7,10 @@ export interface ClearAllStoresDialogProps {
onOpenChange: (open: boolean) => void;
}
export const ClearAllStoresDialog = ({ open, onOpenChange }: ClearAllStoresDialogProps) => {
export const ClearAllStoresDialog = ({
open,
onOpenChange,
}: ClearAllStoresDialogProps) => {
const { t } = useTranslation("dialog");
const handleClearAllStores = () => {

44
apps/web/src/components/Dialog/ClientNotificationDialog/ClientNotificationDialog.tsx
View File

@@ -21,9 +21,13 @@ export interface ClientNotificationDialogProps {
onOpenChange: (open: boolean) => void;
}
export const ClientNotificationDialog = ({ open, onOpenChange }: ClientNotificationDialogProps) => {
export const ClientNotificationDialog = ({
open,
onOpenChange,
}: ClientNotificationDialogProps) => {
const { t } = useTranslation("dialog");
const { connection, getClientNotification, removeClientNotification } = useDevice();
const { connection, getClientNotification, removeClientNotification } =
useDevice();
const [securityNumber, setSecurityNumber] = useState("");
const notification = getClientNotification(0);
@@ -42,9 +46,11 @@ export const ClientNotificationDialog = ({ open, onOpenChange }: ClientNotificat
nonce: bigint,
secNum?: number,
) => {
connection?.sendKeyVerification(messageType, 0, nonce, secNum).catch((error) => {
console.error("Failed to send key verification message:", error);
});
connection
?.sendKeyVerification(messageType, 0, nonce, secNum)
.catch((error) => {
console.error("Failed to send key verification message:", error);
});
dismiss();
};
@@ -62,7 +68,9 @@ export const ClientNotificationDialog = ({ open, onOpenChange }: ClientNotificat
<DialogHeader>
<DialogTitle>{t("keyVerification.inform.title")}</DialogTitle>
<DialogDescription>
{t("keyVerification.inform.description", { name: value.remoteLongname })}
{t("keyVerification.inform.description", {
name: value.remoteLongname,
})}
</DialogDescription>
</DialogHeader>
<p className="py-4 text-center font-mono text-4xl tracking-widest">
@@ -84,7 +92,9 @@ export const ClientNotificationDialog = ({ open, onOpenChange }: ClientNotificat
<DialogHeader>
<DialogTitle>{t("keyVerification.request.title")}</DialogTitle>
<DialogDescription>
{t("keyVerification.request.description", { name: value.remoteLongname })}
{t("keyVerification.request.description", {
name: value.remoteLongname,
})}
</DialogDescription>
</DialogHeader>
<Input
@@ -102,7 +112,11 @@ export const ClientNotificationDialog = ({ open, onOpenChange }: ClientNotificat
variant="default"
disabled={securityNumber === ""}
onClick={() =>
respond(MessageType.PROVIDE_SECURITY_NUMBER, value.nonce, Number(securityNumber))
respond(
MessageType.PROVIDE_SECURITY_NUMBER,
value.nonce,
Number(securityNumber),
)
}
>
{t("keyVerification.request.submit")}
@@ -119,7 +133,9 @@ export const ClientNotificationDialog = ({ open, onOpenChange }: ClientNotificat
<DialogHeader>
<DialogTitle>{t("keyVerification.final.title")}</DialogTitle>
<DialogDescription>
{t("keyVerification.final.description", { name: value.remoteLongname })}
{t("keyVerification.final.description", {
name: value.remoteLongname,
})}
</DialogDescription>
</DialogHeader>
<p className="py-4 text-center font-mono text-4xl tracking-widest">
@@ -132,7 +148,10 @@ export const ClientNotificationDialog = ({ open, onOpenChange }: ClientNotificat
>
{t("keyVerification.final.reject")}
</Button>
<Button variant="default" onClick={() => respond(MessageType.DO_VERIFY, value.nonce)}>
<Button
variant="default"
onClick={() => respond(MessageType.DO_VERIFY, value.nonce)}
>
{t("keyVerification.final.verify")}
</Button>
</DialogFooter>
@@ -145,7 +164,10 @@ export const ClientNotificationDialog = ({ open, onOpenChange }: ClientNotificat
<DialogHeader>
<DialogTitle>{t("clientNotification.title")}</DialogTitle>
<DialogDescription>
{t([`clientNotification.${notification?.message}`, notification?.message ?? ""])}
{t([
`clientNotification.${notification?.message}`,
notification?.message ?? "",
])}
</DialogDescription>
</DialogHeader>
);

12
apps/web/src/components/Dialog/DeleteMessagesDialog/DeleteMessagesDialog.test.tsx
View File

@@ -38,13 +38,19 @@ describe("DeleteMessagesDialog", () => {
it("renders the dialog when open is true", () => {
render(<DeleteMessagesDialog open onOpenChange={mockOnOpenChange} />);
expect(screen.getByText("Clear All Messages")).toBeInTheDocument();
expect(screen.getByText(/This action will clear all message history./)).toBeInTheDocument();
expect(
screen.getByText(/This action will clear all message history./),
).toBeInTheDocument();
expect(screen.getByRole("button", { name: "Dismiss" })).toBeInTheDocument();
expect(screen.getByRole("button", { name: "Clear Messages" })).toBeInTheDocument();
expect(
screen.getByRole("button", { name: "Clear Messages" }),
).toBeInTheDocument();
});
it("does not render the dialog when open is false", () => {
render(<DeleteMessagesDialog open={false} onOpenChange={mockOnOpenChange} />);
render(
<DeleteMessagesDialog open={false} onOpenChange={mockOnOpenChange} />,
);
expect(screen.queryByText("Clear All Messages")).toBeNull();
});

5
apps/web/src/components/Dialog/DeleteMessagesDialog/DeleteMessagesDialog.tsx
View File

@@ -8,7 +8,10 @@ export interface DeleteMessagesDialogProps {
onOpenChange: (open: boolean) => void;
}
export const DeleteMessagesDialog = ({ open, onOpenChange }: DeleteMessagesDialogProps) => {
export const DeleteMessagesDialog = ({
open,
onOpenChange,
}: DeleteMessagesDialogProps) => {
const { t } = useTranslation("dialog");
const meshClient = useActiveClient();

4
apps/web/src/components/Dialog/FactoryResetConfigDialog/FactoryResetConfigDialog.test.tsx
View File

@@ -33,7 +33,9 @@ describe("FactoryResetConfigDialog", () => {
it("calls factoryResetConfig and then closes the dialog on confirm", async () => {
render(<FactoryResetConfigDialog open onOpenChange={mockOnOpenChange} />);
fireEvent.click(screen.getByRole("button", { name: "Factory Reset Config" }));
fireEvent.click(
screen.getByRole("button", { name: "Factory Reset Config" }),
);
expect(mockFactoryReset).toHaveBeenCalledTimes(1);

5
apps/web/src/components/Dialog/FactoryResetConfigDialog/FactoryResetConfigDialog.tsx
View File

@@ -8,7 +8,10 @@ export interface FactoryResetConfigDialogProps {
onOpenChange: (open: boolean) => void;
}
export const FactoryResetConfigDialog = ({ open, onOpenChange }: FactoryResetConfigDialogProps) => {
export const FactoryResetConfigDialog = ({
open,
onOpenChange,
}: FactoryResetConfigDialogProps) => {
const { t } = useTranslation("dialog");
const { connection } = useDevice();

4
apps/web/src/components/Dialog/FactoryResetDeviceDialog/FactoryResetDeviceDialog.test.tsx
View File

@@ -47,7 +47,9 @@ describe("FactoryResetDeviceDialog", () => {
);
render(<FactoryResetDeviceDialog open onOpenChange={mockOnOpenChange} />);
fireEvent.click(screen.getByRole("button", { name: "Factory Reset Device" }));
fireEvent.click(
screen.getByRole("button", { name: "Factory Reset Device" }),
);
expect(mockFactoryResetDevice).toHaveBeenCalledTimes(1);

5
apps/web/src/components/Dialog/FactoryResetDeviceDialog/FactoryResetDeviceDialog.tsx
View File

@@ -8,7 +8,10 @@ export interface FactoryResetDeviceDialogProps {
onOpenChange: (open: boolean) => void;
}
export const FactoryResetDeviceDialog = ({ open, onOpenChange }: FactoryResetDeviceDialogProps) => {
export const FactoryResetDeviceDialog = ({
open,
onOpenChange,
}: FactoryResetDeviceDialogProps) => {
const { t } = useTranslation("dialog");
const { connection, id } = useDevice();

65
apps/web/src/components/Dialog/ImportDialog.tsx
View File

@@ -48,7 +48,8 @@ export const ImportDialog = ({ open, onOpenChange }: ImportDialogProps) => {
try {
const channelsUrl = new URL(importDialogInput);
if (
(channelsUrl.hostname !== "meshtastic.org" && channelsUrl.pathname !== "/e/") ||
(channelsUrl.hostname !== "meshtastic.org" &&
channelsUrl.pathname !== "/e/") ||
!channelsUrl.hash
) {
throw t("import.error.invalidUrl");
@@ -56,7 +57,11 @@ export const ImportDialog = ({ open, onOpenChange }: ImportDialogProps) => {
const encodedChannelConfig = channelsUrl.hash.substring(1);
const paddedString = encodedChannelConfig
.padEnd(encodedChannelConfig.length + ((4 - (encodedChannelConfig.length % 4)) % 4), "=")
.padEnd(
encodedChannelConfig.length +
((4 - (encodedChannelConfig.length % 4)) % 4),
"=",
)
.replace(/-/g, "+")
.replace(/_/g, "/");
@@ -79,22 +84,24 @@ export const ImportDialog = ({ open, onOpenChange }: ImportDialogProps) => {
const apply = () => {
if (!editor) return;
channelSet?.settings.forEach((ch: Protobuf.Channel.ChannelSettings, index: number) => {
if (importIndex[index] === -1) {
return;
}
channelSet?.settings.forEach(
(ch: Protobuf.Channel.ChannelSettings, index: number) => {
if (importIndex[index] === -1) {
return;
}
const payload = create(Protobuf.Channel.ChannelSchema, {
index: importIndex[index],
role:
importIndex[index] === 0
? Protobuf.Channel.Channel_Role.PRIMARY
: Protobuf.Channel.Channel_Role.SECONDARY,
settings: ch,
});
const payload = create(Protobuf.Channel.ChannelSchema, {
index: importIndex[index],
role:
importIndex[index] === 0
? Protobuf.Channel.Channel_Role.PRIMARY
: Protobuf.Channel.Channel_Role.SECONDARY,
settings: ch,
});
editor.setChannel(payload);
});
editor.setChannel(payload);
},
);
if (channelSet?.loraConfig && updateConfig) {
const payload = {
@@ -126,14 +133,23 @@ export const ImportDialog = ({ open, onOpenChange }: ImportDialogProps) => {
<DialogHeader>
<DialogTitle>{t("import.title")}</DialogTitle>
<DialogDescription>
<Trans i18nKey={"import.description"} components={{ italic: <i />, br: <br /> }} />
<Trans
i18nKey={"import.description"}
components={{ italic: <i />, br: <br /> }}
/>
</DialogDescription>
</DialogHeader>
<div className="flex flex-col gap-3">
<Label>{t("import.channelSetUrl")}</Label>
<Input
value={importDialogInput}
variant={importDialogInput === "" ? "default" : validUrl ? "dirty" : "invalid"}
variant={
importDialogInput === ""
? "default"
: validUrl
? "dirty"
: "invalid"
}
onChange={(e) => {
setImportDialogInput(e.target.value);
}}
@@ -162,7 +178,10 @@ export const ImportDialog = ({ open, onOpenChange }: ImportDialogProps) => {
<span className="flex-1">{t("import.channelSlot")}</span>
</div>
{channelSet?.settings.map((channel, index) => (
<div className="flex items-center" key={`channel_${channel.id}_${index}`}>
<div
className="flex items-center"
key={`channel_${channel.id}_${index}`}
>
<Label className="flex-1">
{channel.name.length
? channel.name
@@ -182,10 +201,14 @@ export const ImportDialog = ({ open, onOpenChange }: ImportDialogProps) => {
disabled={importIndex.includes(i) && index !== i}
value={i.toString()}
>
{i === 0 ? t("import.primary") : `${t("import.channelPrefix")}${i}`}
{i === 0
? t("import.primary")
: `${t("import.channelPrefix")}${i}`}
</SelectItem>
))}
<SelectItem value="-1">{t("import.doNotImport")}</SelectItem>
<SelectItem value="-1">
{t("import.doNotImport")}
</SelectItem>
</SelectContent>
</Select>
</div>

18
apps/web/src/components/Dialog/LocationResponseDialog.tsx
View File

@@ -25,10 +25,13 @@ export const LocationResponseDialog = ({
const { t } = useTranslation("dialog");
const from = useNodeAsProto(location?.from ?? 0);
const longName =
from?.user?.longName ?? (from ? `!${numberToHexUnpadded(from?.num)}` : t("unknown.shortName"));
from?.user?.longName ??
(from ? `!${numberToHexUnpadded(from?.num)}` : t("unknown.shortName"));
const shortName =
from?.user?.shortName ??
(from ? `${numberToHexUnpadded(from?.num).substring(0, 4)}` : t("unknown.shortName"));
(from
? `${numberToHexUnpadded(from?.num).substring(0, 4)}`
: t("unknown.shortName"));
const position = location?.data;
@@ -65,18 +68,23 @@ export const LocationResponseDialog = ({
rel="noreferrer"
>
{" "}
{position.latitudeI ?? 0 / 1e7}, {position.longitudeI ?? 0 / 1e7}
{position.latitudeI ?? 0 / 1e7},{" "}
{position.longitudeI ?? 0 / 1e7}
</a>
</p>
<p>
{t("locationResponse.altitude")} {position.altitude}
{(position.altitude ?? 0) < 1 ? t("unit.meter.one") : t("unit.meter.plural")}
{(position.altitude ?? 0) < 1
? t("unit.meter.one")
: t("unit.meter.plural")}
</p>
</span>
</div>
) : (
// Optional: Show a message if coordinates are not available
<p className="text-textPrimary">{t("locationResponse.noCoordinates")}</p>
<p className="text-textPrimary">
{t("locationResponse.noCoordinates")}
</p>
)}
</DialogDescription>
</DialogContent>

10
apps/web/src/components/Dialog/ManagedModeDialog.tsx
View File

@@ -18,7 +18,11 @@ export interface ManagedModeDialogProps {
onSubmit: () => void;
}
export const ManagedModeDialog = ({ open, onOpenChange, onSubmit }: ManagedModeDialogProps) => {
export const ManagedModeDialog = ({
open,
onOpenChange,
onSubmit,
}: ManagedModeDialogProps) => {
const { t } = useTranslation("dialog");
const [confirmState, setConfirmState] = useState(false);
@@ -43,7 +47,9 @@ export const ManagedModeDialog = ({ open, onOpenChange, onSubmit }: ManagedModeD
onChange={() => setConfirmState(!confirmState)}
name="confirmUnderstanding"
>
<p className="dark:text-white pt-1">{t("managedMode.confirmUnderstanding")}</p>
<p className="dark:text-white pt-1">
{t("managedMode.confirmUnderstanding")}
</p>
</Checkbox>
</div>
<DialogFooter>

95
apps/web/src/components/Dialog/NodeDetailsDialog/NodeDetailsDialog.tsx
View File

@@ -52,7 +52,10 @@ export interface NodeDetailsDialogProps {
onOpenChange: (open: boolean) => void;
}
export const NodeDetailsDialog = ({ open, onOpenChange }: NodeDetailsDialogProps) => {
export const NodeDetailsDialog = ({
open,
onOpenChange,
}: NodeDetailsDialogProps) => {
const { t } = useTranslation("dialog");
const { setDialogOpen, connection } = useDevice();
const navigate = useNavigate();
@@ -62,8 +65,12 @@ export const NodeDetailsDialog = ({ open, onOpenChange }: NodeDetailsDialogProps
const node = useNodeAsProto(nodeNumDetails);
const [isFavoriteState, setIsFavoriteState] = useState<boolean>(node?.isFavorite ?? false);
const [isIgnoredState, setIsIgnoredState] = useState<boolean>(node?.isIgnored ?? false);
const [isFavoriteState, setIsFavoriteState] = useState<boolean>(
node?.isFavorite ?? false,
);
const [isIgnoredState, setIsIgnoredState] = useState<boolean>(
node?.isIgnored ?? false,
);
useEffect(() => {
if (!node) {
@@ -178,7 +185,8 @@ export const NodeDetailsDialog = ({ open, onOpenChange }: NodeDetailsDialogProps
key: "batteryLevel",
label: t("nodeDetails.batteryLevel"),
value: node.deviceMetrics?.batteryLevel,
format: (val: number) => (val === 101 ? t("batteryStatus.pluggedIn") : `${val.toFixed(2)}%`),
format: (val: number) =>
val === 101 ? t("batteryStatus.pluggedIn") : `${val.toFixed(2)}%`,
},
{
key: "voltage",
@@ -211,21 +219,35 @@ export const NodeDetailsDialog = ({ open, onOpenChange }: NodeDetailsDialogProps
<DialogFooter>
<div className="w-full ">
<div className="flex flex-row flex-wrap space-y-1">
<Button className="mr-1" name="message" onClick={handleDirectMessage}>
<Button
className="mr-1"
name="message"
onClick={handleDirectMessage}
>
<MessageSquareIcon className="mr-2" />
{t("nodeDetails.message")}
</Button>
<Button className="mr-1" name="traceRoute" onClick={handleTraceroute}>
<Button
className="mr-1"
name="traceRoute"
onClick={handleTraceroute}
>
<WaypointsIcon className="mr-2" />
{t("nodeDetails.traceRoute")}
</Button>
<Button className="mr-1" onClick={handleToggleFavorite}>
<StarIcon
className={cn(isFavoriteState ? " fill-yellow-400 stroke-yellow-400" : "")}
className={cn(
isFavoriteState ? " fill-yellow-400 stroke-yellow-400" : "",
)}
/>
</Button>
{node.user?.publicKey && node.user.publicKey.length > 0 && (
<Button className="mr-1" name="verifyKey" onClick={handleInitiateKeyVerification}>
<Button
className="mr-1"
name="verifyKey"
onClick={handleInitiateKeyVerification}
>
<ShieldCheckIcon className="mr-2" />
{t("nodeDetails.verifyKey")}
</Button>
@@ -248,7 +270,9 @@ export const NodeDetailsDialog = ({ open, onOpenChange }: NodeDetailsDialogProps
</Button>
</TooltipTrigger>
<TooltipContent className="bg-slate-800 dark:bg-slate-600 text-white px-4 py-1 rounded text-xs">
{isIgnoredState ? t("nodeDetails.unignoreNode") : t("nodeDetails.ignoreNode")}
{isIgnoredState
? t("nodeDetails.unignoreNode")
: t("nodeDetails.ignoreNode")}
<TooltipArrow className="fill-slate-800 dark:fill-slate-600" />
</TooltipContent>
</Tooltip>
@@ -278,7 +302,9 @@ export const NodeDetailsDialog = ({ open, onOpenChange }: NodeDetailsDialogProps
<div className="flex flex-col flex-wrap space-x-1 space-y-1">
<div className="flex flex-row space-x-2">
<div className="w-full bg-slate-100 text-slate-900 dark:text-slate-100 dark:bg-slate-800 p-3 rounded-lg">
<p className="text-lg font-semibold">{t("nodeDetails.details")}</p>
<p className="text-lg font-semibold">
{t("nodeDetails.details")}
</p>
<table className="table-fixed w-full">
<tbody>
<tr>
@@ -292,10 +318,9 @@ export const NodeDetailsDialog = ({ open, onOpenChange }: NodeDetailsDialogProps
<tr>
<td>{t("nodeDetails.role")}</td>
<td>
{Protobuf.Config.Config_DeviceConfig_Role[node.user?.role ?? 0]?.replace(
/_/g,
" ",
)}
{Protobuf.Config.Config_DeviceConfig_Role[
node.user?.role ?? 0
]?.replace(/_/g, " ")}
</td>
</tr>
<tr>
@@ -314,35 +339,44 @@ export const NodeDetailsDialog = ({ open, onOpenChange }: NodeDetailsDialogProps
<td>{t("nodeDetails.hardware")}</td>
<td>
{(
Protobuf.Mesh.HardwareModel[node.user?.hwModel ?? 0] ??
t("unknown.shortName")
Protobuf.Mesh.HardwareModel[
node.user?.hwModel ?? 0
] ?? t("unknown.shortName")
).replace(/_/g, " ")}
</td>
</tr>
<tr>
<td>{t("nodeDetails.messageable")}</td>
<td>{node.user?.isUnmessagable ? t("no") : t("yes")}</td>
<td>
{node.user?.isUnmessagable ? t("no") : t("yes")}
</td>
</tr>
</tbody>
</table>
</div>
<DeviceImage
className="w-40 p-2 rounded-lg border-4 border-slate-200 dark:border-slate-800"
deviceType={Protobuf.Mesh.HardwareModel[node.user?.hwModel ?? 0] ?? "UNKNOWN"}
deviceType={
Protobuf.Mesh.HardwareModel[node.user?.hwModel ?? 0] ??
"UNKNOWN"
}
/>
</div>
</div>
<div>
<div className={sectionClassName}>
<p className="text-lg font-semibold">{t("nodeDetails.security")}</p>
<p className="text-lg font-semibold">
{t("nodeDetails.security")}
</p>
<table className="table-auto w-full">
<tbody>
<tr>
<td className="pr-2">{t("nodeDetails.publicKey")}</td>
<td>
<pre className="text-xs pt-0.5">
{node.user?.publicKey && node.user?.publicKey.length > 0
{node.user?.publicKey &&
node.user?.publicKey.length > 0
? fromByteArray(node.user.publicKey)
: t("unknown.longName")}
</pre>
@@ -361,7 +395,9 @@ export const NodeDetailsDialog = ({ open, onOpenChange }: NodeDetailsDialogProps
</div>
<div className={sectionClassName}>
<p className="text-lg font-semibold">{t("nodeDetails.position")}</p>
<p className="text-lg font-semibold">
{t("nodeDetails.position")}
</p>
{node.position ? (
<table className="table-auto w-full">
@@ -378,7 +414,8 @@ export const NodeDetailsDialog = ({ open, onOpenChange }: NodeDetailsDialogProps
target="_blank"
rel="noreferrer"
>
{node.position.latitudeI / 1e7}, {node.position.longitudeI / 1e7}
{node.position.latitudeI / 1e7},{" "}
{node.position.longitudeI / 1e7}
</a>
</td>
</tr>
@@ -397,7 +434,11 @@ export const NodeDetailsDialog = ({ open, onOpenChange }: NodeDetailsDialogProps
) : (
<p>{t("unknown.longName")}</p>
)}
<Button onClick={handleRequestPosition} name="requestPosition" className="mt-2">
<Button
onClick={handleRequestPosition}
name="requestPosition"
className="mt-2"
>
<MapPinnedIcon className="mr-2" />
{t("nodeDetails.requestPosition")}
</Button>
@@ -422,7 +463,9 @@ export const NodeDetailsDialog = ({ open, onOpenChange }: NodeDetailsDialogProps
<tr>
<td>{t("nodeDetails.uptime")}</td>
<td>
<Uptime seconds={node.deviceMetrics.uptimeSeconds} />
<Uptime
seconds={node.deviceMetrics.uptimeSeconds}
/>
</td>
</tr>
)}
@@ -441,7 +484,9 @@ export const NodeDetailsDialog = ({ open, onOpenChange }: NodeDetailsDialogProps
</p>
</AccordionTrigger>
<AccordionContent className="overflow-x-scroll">
<pre className="text-xs w-full">{JSON.stringify(node, null, 2)}</pre>
<pre className="text-xs w-full">
{JSON.stringify(node, null, 2)}
</pre>
</AccordionContent>
</AccordionItem>
</Accordion>

24
apps/web/src/components/Dialog/PKIBackupDialog.tsx
View File

@@ -20,19 +20,25 @@ export interface PkiBackupDialogProps {
onOpenChange: (open: boolean) => void;
}
export const PkiBackupDialog = ({ open, onOpenChange }: PkiBackupDialogProps) => {
export const PkiBackupDialog = ({
open,
onOpenChange,
}: PkiBackupDialogProps) => {
const { t } = useTranslation("dialog");
const { config, setDialogOpen } = useDevice();
const myNode = useMyNodeAsProto();
const privateKey = config.security?.privateKey;
const publicKey = config.security?.publicKey;
const decodeKeyData = React.useCallback((key: Uint8Array<ArrayBufferLike>) => {
if (!key) {
return "";
}
return fromByteArray(key ?? new Uint8Array(0));
}, []);
const decodeKeyData = React.useCallback(
(key: Uint8Array<ArrayBufferLike>) => {
if (!key) {
return "";
}
return fromByteArray(key ?? new Uint8Array(0));
},
[],
);
const closeDialog = React.useCallback(() => {
setDialogOpen("pkiBackup", false);
@@ -128,7 +134,9 @@ export const PkiBackupDialog = ({ open, onOpenChange }: PkiBackupDialogProps) =>
<DialogTitle>{t("pkiBackup.title")}</DialogTitle>
<DialogDescription>{t("pkiBackup.secureBackup")}</DialogDescription>
<DialogDescription>
<span className="font-bold break-before-auto">{t("pkiBackup.loseKeysWarning")}</span>
<span className="font-bold break-before-auto">
{t("pkiBackup.loseKeysWarning")}
</span>
</DialogDescription>
</DialogHeader>
<DialogFooter className="mt-6">

6
apps/web/src/components/Dialog/PkiRegenerateDialog.tsx
View File

@@ -46,7 +46,11 @@ export const PkiRegenerateDialog = ({
<DialogDescription>{dialogText.description}</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button variant="destructive" name="regenerate" onClick={() => onSubmit()}>
<Button
variant="destructive"
name="regenerate"
onClick={() => onSubmit()}
>
{dialogText.button}
</Button>
</DialogFooter>

17
apps/web/src/components/Dialog/QRDialog.tsx
View File

@@ -44,12 +44,16 @@ export const QRDialog = ({ open, onOpenChange, loraConfig }: QRDialogProps) => {
settings: channelsToEncode,
}),
);
const base64 = fromByteArray(toBinary(Protobuf.AppOnly.ChannelSetSchema, encoded))
const base64 = fromByteArray(
toBinary(Protobuf.AppOnly.ChannelSetSchema, encoded),
)
.replace(/=/g, "")
.replace(/\+/g, "-")
.replace(/\//g, "_");
setQrCodeUrl(`https://meshtastic.org/e/${qrCodeAdd ? "?add=true" : ""}#${base64}`);
setQrCodeUrl(
`https://meshtastic.org/e/${qrCodeAdd ? "?add=true" : ""}#${base64}`,
);
}, [allChannels, selectedChannels, qrCodeAdd, loraConfig]);
return (
@@ -80,9 +84,14 @@ export const QRDialog = ({ open, onOpenChange, loraConfig }: QRDialogProps) => {
checked={selectedChannels.includes(channel.index)}
onChange={() => {
if (selectedChannels.includes(channel.index)) {
setSelectedChannels(selectedChannels.filter((c) => c !== channel.index));
setSelectedChannels(
selectedChannels.filter((c) => c !== channel.index),
);
} else {
setSelectedChannels([...selectedChannels, channel.index]);
setSelectedChannels([
...selectedChannels,
channel.index,
]);
}
}}
/>

31
apps/web/src/components/Dialog/RebootDialog.test.tsx
View File

@@ -1,5 +1,10 @@
import { act, fireEvent, render, screen } from "@testing-library/react";
import type { ButtonHTMLAttributes, ClassAttributes, InputHTMLAttributes, ReactNode } from "react";
import type {
ButtonHTMLAttributes,
ClassAttributes,
InputHTMLAttributes,
ReactNode,
} from "react";
import type { JSX } from "react/jsx-runtime";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import { RebootDialog } from "./RebootDialog.tsx";
@@ -49,10 +54,16 @@ vi.mock("@components/UI/Input.tsx", async () => {
vi.mock("@components/UI/Dialog.tsx", () => {
return {
Dialog: ({ children }: { children: ReactNode }) => <div>{children}</div>,
DialogContent: ({ children }: { children: ReactNode }) => <div>{children}</div>,
DialogHeader: ({ children }: { children: ReactNode }) => <div>{children}</div>,
DialogContent: ({ children }: { children: ReactNode }) => (
<div>{children}</div>
),
DialogHeader: ({ children }: { children: ReactNode }) => (
<div>{children}</div>
),
DialogTitle: ({ children }: { children: ReactNode }) => <h1>{children}</h1>,
DialogDescription: ({ children }: { children: ReactNode }) => <p>{children}</p>,
DialogDescription: ({ children }: { children: ReactNode }) => (
<p>{children}</p>
),
DialogClose: () => null,
};
});
@@ -70,8 +81,12 @@ describe("RebootDialog", () => {
it("renders dialog with default input value", () => {
render(<RebootDialog open onOpenChange={() => {}} />);
expect(screen.getByPlaceholderText(/enter delay/i)).toHaveValue(5);
expect(screen.getByRole("heading", { name: /reboot device/i, level: 1 })).toBeInTheDocument();
expect(screen.getByRole("button", { name: /reboot now/i })).toBeInTheDocument();
expect(
screen.getByRole("heading", { name: /reboot device/i, level: 1 }),
).toBeInTheDocument();
expect(
screen.getByRole("button", { name: /reboot now/i }),
).toBeInTheDocument();
});
it("calls correct reboot function based on OTA checkbox state", () => {
@@ -184,6 +199,8 @@ describe("RebootDialog", () => {
fireEvent.click(screen.getByRole("button", { name: /cancel/i }));
});
expect(rebootMock).toHaveBeenCalledWith(-1);
expect(screen.queryByText(/reboot has been scheduled/i)).not.toBeInTheDocument();
expect(
screen.queryByText(/reboot has been scheduled/i),
).not.toBeInTheDocument();
});
});

10
apps/web/src/components/Dialog/RebootDialog.tsx
View File

@@ -96,7 +96,11 @@ export const RebootDialog = ({ open, onOpenChange }: RebootDialogProps) => {
<Separator />
{!isScheduled ? (
<>
<Checkbox checked={isOTA} onChange={(checked) => setIsOTA(checked)} className="px-2">
<Checkbox
checked={isOTA}
onChange={(checked) => setIsOTA(checked)}
className="px-2"
>
{t("reboot.ota")}
</Checkbox>
<div className="flex gap-2 px-2 items-center relative">
@@ -133,7 +137,9 @@ export const RebootDialog = ({ open, onOpenChange }: RebootDialogProps) => {
) : (
<div className="px-2">
<div className="pb-6 pt-2 text-center">
<Label className=" text-gray-700 dark:text-gray-300 ">{t("reboot.scheduled")}</Label>
<Label className=" text-gray-700 dark:text-gray-300 ">
{t("reboot.scheduled")}
</Label>
</div>
<Button
variant="destructive"

31
apps/web/src/components/Dialog/RefreshKeysDialog/RefreshKeysDialog.tsx
View File

@@ -17,7 +17,10 @@ export interface RefreshKeysDialogProps {
onOpenChange: (open: boolean) => void;
}
export const RefreshKeysDialog = ({ open, onOpenChange }: RefreshKeysDialogProps) => {
export const RefreshKeysDialog = ({
open,
onOpenChange,
}: RefreshKeysDialogProps) => {
const { t } = useTranslation("dialog");
const nodeError = useNodeErrors()[0];
const nodeWithError = useNodeAsProto(nodeError?.node ?? 0);
@@ -42,7 +45,10 @@ export const RefreshKeysDialog = ({ open, onOpenChange }: RefreshKeysDialogProps
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-8 flex flex-col gap-2" aria-describedby={undefined}>
<DialogContent
className="max-w-8 flex flex-col gap-2"
aria-describedby={undefined}
>
<DialogClose onClick={handleCloseDialog} />
<DialogHeader>
<DialogTitle>{text.title}</DialogTitle>
@@ -51,17 +57,30 @@ export const RefreshKeysDialog = ({ open, onOpenChange }: RefreshKeysDialogProps
<ul className="mt-2">
<li className="flex place-items-center gap-2 items-start">
<div className="p-2 bg-slate-500 rounded-lg mt-1">
<LockKeyholeOpenIcon size={30} className="text-white justify-center" />
<LockKeyholeOpenIcon
size={30}
className="text-white justify-center"
/>
</div>
<div className="flex flex-col gap-2">
<div>
<p className="font-bold mb-0.5">{t("refreshKeys.label.acceptNewKeys")}</p>
<p className="font-bold mb-0.5">
{t("refreshKeys.label.acceptNewKeys")}
</p>
<p>{t("refreshKeys.description.acceptNewKeys")}</p>
</div>
<Button variant="default" name="requestNewKeys" onClick={handleNodeRemove}>
<Button
variant="default"
name="requestNewKeys"
onClick={handleNodeRemove}
>
{t("button.requestNewKeys")}
</Button>
<Button variant="outline" name="dismiss" onClick={handleCloseDialog}>
<Button
variant="outline"
name="dismiss"
onClick={handleCloseDialog}
>
{t("button.dismiss")}
</Button>
</div>

5
apps/web/src/components/Dialog/RemoveNodeDialog.tsx
View File

@@ -10,7 +10,10 @@ export interface RemoveNodeDialogProps {
onOpenChange: (open: boolean) => void;
}
export const RemoveNodeDialog = ({ open, onOpenChange }: RemoveNodeDialogProps) => {
export const RemoveNodeDialog = ({
open,
onOpenChange,
}: RemoveNodeDialogProps) => {
const { t } = useTranslation("dialog");
const meshClient = useActiveClient();
const { nodeNumToBeRemoved } = useAppStore();

8
apps/web/src/components/Dialog/ResetNodeDbDialog/ResetNodeDbDialog.test.tsx
View File

@@ -25,7 +25,9 @@ describe("ResetNodeDbDialog", () => {
});
it("calls reset({ keepMyNode: true }) then clears chat after resolve", async () => {
let resolveReset: ((value: { status: "ok"; value: number }) => void) | undefined;
let resolveReset:
| ((value: { status: "ok"; value: number }) => void)
| undefined;
mockResetNodes.mockImplementation(
() =>
new Promise((resolve) => {
@@ -35,7 +37,9 @@ describe("ResetNodeDbDialog", () => {
mockClearAll.mockResolvedValue(undefined);
render(<ResetNodeDbDialog open onOpenChange={mockOnOpenChange} />);
fireEvent.click(screen.getByRole("button", { name: "Reset Node Database" }));
fireEvent.click(
screen.getByRole("button", { name: "Reset Node Database" }),
);
expect(mockResetNodes).toHaveBeenCalledWith({ keepMyNode: true });

5
apps/web/src/components/Dialog/ResetNodeDbDialog/ResetNodeDbDialog.tsx
View File

@@ -8,7 +8,10 @@ export interface ResetNodeDbDialogProps {
onOpenChange: (open: boolean) => void;
}
export const ResetNodeDbDialog = ({ open, onOpenChange }: ResetNodeDbDialogProps) => {
export const ResetNodeDbDialog = ({
open,
onOpenChange,
}: ResetNodeDbDialogProps) => {
const { t } = useTranslation("dialog");
const meshClient = useActiveClient();

7
apps/web/src/components/Dialog/TracerouteResponseDialog.tsx
View File

@@ -31,10 +31,13 @@ export const TracerouteResponseDialog = ({
const snrBack = (traceroute?.data.snrBack ?? []).map((snr) => snr / 4);
const from = useNodeAsProto(traceroute?.to ?? 0); // The origin of the traceroute = the "to" node of the mesh packet
const fromLongName =
from?.user?.longName ?? (from ? `!${numberToHexUnpadded(from?.num)}` : t("unknown.shortName"));
from?.user?.longName ??
(from ? `!${numberToHexUnpadded(from?.num)}` : t("unknown.shortName"));
const fromShortName =
from?.user?.shortName ??
(from ? `${numberToHexUnpadded(from?.num).substring(0, 4)}` : t("unknown.shortName"));
(from
? `${numberToHexUnpadded(from?.num).substring(0, 4)}`
: t("unknown.shortName"));
const toUser = useNodeAsProto(traceroute?.from ?? 0); // The destination of the traceroute = the "from" node of the mesh packet

18
apps/web/src/components/Dialog/UnsafeRolesDialog/UnsafeRolesDialog.tsx
View File

@@ -20,12 +20,16 @@ export interface RouterRoleDialogProps {
onOpenChange: (open: boolean) => void;
}
export const UnsafeRolesDialog = ({ open, onOpenChange }: RouterRoleDialogProps) => {
export const UnsafeRolesDialog = ({
open,
onOpenChange,
}: RouterRoleDialogProps) => {
const { t } = useTranslation("dialog");
const [confirmState, setConfirmState] = useState(false);
const { setDialogOpen } = useDevice();
const deviceRoleLink = "https://meshtastic.org/docs/configuration/radio/device/";
const deviceRoleLink =
"https://meshtastic.org/docs/configuration/radio/device/";
const choosingTheRightDeviceRoleLink =
"https://meshtastic.org/blog/choosing-the-right-device-role/";
@@ -59,11 +63,17 @@ export const UnsafeRolesDialog = ({ open, onOpenChange }: RouterRoleDialogProps)
onChange={() => setConfirmState(!confirmState)}
name="confirmUnderstanding"
>
<span className="dark:text-white">{t("unsafeRoles.confirmUnderstanding")}</span>
<span className="dark:text-white">
{t("unsafeRoles.confirmUnderstanding")}
</span>
</Checkbox>
</div>
<DialogFooter className="mt-6">
<Button variant="default" name="dismiss" onClick={() => handleCloseDialog("dismiss")}>
<Button
variant="default"
name="dismiss"
onClick={() => handleCloseDialog("dismiss")}
>
{t("button.dismiss")}
</Button>
<Button

66
apps/web/src/components/Dialog/UnsafeRolesDialog/useUnsafeRolesDialog.test.tsx
View File

@@ -4,11 +4,20 @@ import {
} from "@components/Dialog/UnsafeRolesDialog/useUnsafeRolesDialog.ts";
import { eventBus } from "@core/utils/eventBus.ts";
import { renderHook } from "@testing-library/react";
import { afterEach, beforeEach, describe, expect, it, type Mock, vi } from "vitest";
import {
afterEach,
beforeEach,
describe,
expect,
it,
type Mock,
vi,
} from "vitest";
const mockNavigate = vi.fn();
vi.mock("@tanstack/react-router", async (importOriginal) => {
const actual = await importOriginal<typeof import("@tanstack/react-router")>();
const actual =
await importOriginal<typeof import("@tanstack/react-router")>();
return {
...actual,
useNavigate: () => mockNavigate,
@@ -56,7 +65,10 @@ describe("useUnsafeRolesDialog", () => {
result.current.handleCloseDialog();
expect(mockDevice.setDialogOpen).toHaveBeenCalledWith("unsafeRoles", false);
expect(mockDevice.setDialogOpen).toHaveBeenCalledWith(
"unsafeRoles",
false,
);
});
});
@@ -65,7 +77,8 @@ describe("useUnsafeRolesDialog", () => {
const { result } = renderUnsafeRolesHook();
const safeRole = "SAFE_ROLE";
const validationResult = await result.current.validateRoleSelection(safeRole);
const validationResult =
await result.current.validateRoleSelection(safeRole);
expect(validationResult).toBe(true);
expect(mockDevice.setDialogOpen).not.toHaveBeenCalled();
@@ -74,40 +87,61 @@ describe("useUnsafeRolesDialog", () => {
it("should open dialog for unsafe roles and resolve with true when confirmed", async () => {
const { result } = renderUnsafeRolesHook();
const validationPromise = result.current.validateRoleSelection(UNSAFE_ROLES[0]!);
const validationPromise = result.current.validateRoleSelection(
UNSAFE_ROLES[0]!,
);
expect(mockDevice.setDialogOpen).toHaveBeenCalledWith("unsafeRoles", true);
expect(eventBus.on).toHaveBeenCalledWith("dialog:unsafeRoles", expect.any(Function));
expect(mockDevice.setDialogOpen).toHaveBeenCalledWith(
"unsafeRoles",
true,
);
expect(eventBus.on).toHaveBeenCalledWith(
"dialog:unsafeRoles",
expect.any(Function),
);
const onHandler = (eventBus.on as Mock).mock.calls[0]![1];
onHandler({ action: "confirm" });
const validationResult = await validationPromise;
expect(validationResult).toBe(true);
expect(eventBus.off).toHaveBeenCalledWith("dialog:unsafeRoles", onHandler);
expect(eventBus.off).toHaveBeenCalledWith(
"dialog:unsafeRoles",
onHandler,
);
});
it("should resolve with false when user dismisses the dialog", async () => {
const { result } = renderUnsafeRolesHook();
const validationPromise = result.current.validateRoleSelection(UNSAFE_ROLES[0]!);
const validationPromise = result.current.validateRoleSelection(
UNSAFE_ROLES[0]!,
);
const onHandler = (eventBus.on as Mock).mock.calls[0]![1];
onHandler({ action: "dismiss" });
const validationResult = await validationPromise;
expect(validationResult).toBe(false);
expect(eventBus.off).toHaveBeenCalledWith("dialog:unsafeRoles", onHandler);
expect(eventBus.off).toHaveBeenCalledWith(
"dialog:unsafeRoles",
onHandler,
);
});
it("should clean up event listener after response", async () => {
const { result } = renderUnsafeRolesHook();
const validationPromise = result.current.validateRoleSelection(UNSAFE_ROLES[1]!);
const validationPromise = result.current.validateRoleSelection(
UNSAFE_ROLES[1]!,
);
const onHandler = (eventBus.on as Mock).mock.calls[0]![1];
onHandler({ action: "confirm" });
await validationPromise;
expect(eventBus.off).toHaveBeenCalledWith("dialog:unsafeRoles", onHandler);
expect(eventBus.off).toHaveBeenCalledWith(
"dialog:unsafeRoles",
onHandler,
);
});
});
@@ -118,9 +152,13 @@ describe("useUnsafeRolesDialog", () => {
mockDevice.setDialogOpen.mockClear();
(eventBus.on as Mock).mockClear();
const validationPromise = result.current.validateRoleSelection(unsafeRole);
const validationPromise =
result.current.validateRoleSelection(unsafeRole);
expect(mockDevice.setDialogOpen).toHaveBeenCalledWith("unsafeRoles", true);
expect(mockDevice.setDialogOpen).toHaveBeenCalledWith(
"unsafeRoles",
true,
);
const onHandler = (eventBus.on as Mock).mock.calls[0]![1];
onHandler({ action: "confirm" });

6
apps/web/src/components/Dialog/UnsafeRolesDialog/useUnsafeRolesDialog.ts
View File

@@ -21,7 +21,11 @@ export const useUnsafeRolesDialog = () => {
setDialogOpen("unsafeRoles", true);
return new Promise((resolve) => {
const handleResponse = ({ action }: { action: "confirm" | "dismiss" }) => {
const handleResponse = ({
action,
}: {
action: "confirm" | "dismiss";
}) => {
eventBus.off("dialog:unsafeRoles", handleResponse);
resolve(action === "confirm");
};

9
apps/web/src/components/Dialog/useDialog.ts
View File

@@ -62,7 +62,9 @@ export interface UseDialogReturn {
}
export const useDialog = (initialState?: DialogState): UseDialogReturn => {
const [state, setState] = useState<DialogState>(initialState ?? { isOpen: false });
const [state, setState] = useState<DialogState>(
initialState ?? { isOpen: false },
);
const openDialog = useCallback((config: DialogConfig) => {
setState({ isOpen: true, config });
@@ -95,7 +97,10 @@ export const useDialog = (initialState?: DialogState): UseDialogReturn => {
};
};
export const getDefaultTexts = (type: DialogType, t: ReturnType<typeof useTranslation>["t"]) => {
export const getDefaultTexts = (
type: DialogType,
t: ReturnType<typeof useTranslation>["t"],
) => {
switch (type) {
case "confirm":
return {

25
apps/web/src/components/Form/DynamicForm.tsx
View File

@@ -1,5 +1,8 @@
import { createZodResolver } from "@components/Form/createZodResolver.ts";
import { DynamicFormField, type FieldProps } from "@components/Form/DynamicFormField.tsx";
import {
DynamicFormField,
type FieldProps,
} from "@components/Form/DynamicFormField.tsx";
import { FieldWrapper } from "@components/Form/FormWrapper.tsx";
import { Button } from "@components/UI/Button.tsx";
import { Heading } from "@components/UI/Typography/Heading.tsx";
@@ -66,7 +69,9 @@ export interface DynamicFormProps<T extends FieldValues> {
validationSchema?: ZodType<T>;
}
export type DynamicFormFormInit<T extends FieldValues> = (methods: UseFormReturn<T, T, T>) => void;
export type DynamicFormFormInit<T extends FieldValues> = (
methods: UseFormReturn<T, T, T>,
) => void;
export function DynamicForm<T extends FieldValues>({
propMethods,
@@ -84,7 +89,9 @@ export function DynamicForm<T extends FieldValues>({
const internalMethods = useForm<T>({
mode: "onChange",
defaultValues: defaultValues,
resolver: validationSchema ? createZodResolver(validationSchema) : undefined,
resolver: validationSchema
? createZodResolver(validationSchema)
: undefined,
shouldFocusError: false,
resetOptions: { keepDefaultValues: true },
values,
@@ -92,7 +99,8 @@ export function DynamicForm<T extends FieldValues>({
const methods = propMethods ?? internalMethods;
const { handleSubmit, control, getValues, formState, getFieldState } = methods;
const { handleSubmit, control, getValues, formState, getFieldState } =
methods;
useEffect(() => {
if (!propMethods) {
@@ -100,7 +108,10 @@ export function DynamicForm<T extends FieldValues>({
}
}, [onFormInit, propMethods, internalMethods]);
const isDisabled = (disabledBy?: DisabledBy<T>[], disabled?: boolean): boolean => {
const isDisabled = (
disabledBy?: DisabledBy<T>[],
disabled?: boolean,
): boolean => {
if (disabled) {
return true;
}
@@ -117,7 +128,9 @@ export function DynamicForm<T extends FieldValues>({
return field.invert ? value : !value;
}
if (typeof value === "number") {
return field.invert ? field.selector !== value : field.selector === value;
return field.invert
? field.selector !== value
: field.selector === value;
}
return false;
});

29
apps/web/src/components/Form/DynamicFormField.tsx
View File

@@ -1,12 +1,24 @@
import { GenericInput, type InputFieldProps } from "@components/Form/FormInput.tsx";
import {
GenericInput,
type InputFieldProps,
} from "@components/Form/FormInput.tsx";
import {
PasswordGenerator,
type PasswordGeneratorProps,
} from "@components/Form/FormPasswordGenerator.tsx";
import { type SelectFieldProps, SelectInput } from "@components/Form/FormSelect.tsx";
import { type ToggleFieldProps, ToggleInput } from "@components/Form/FormToggle.tsx";
import {
type SelectFieldProps,
SelectInput,
} from "@components/Form/FormSelect.tsx";
import {
type ToggleFieldProps,
ToggleInput,
} from "@components/Form/FormToggle.tsx";
import type { Control, FieldValues } from "react-hook-form";
import { type MultiSelectFieldProps, MultiSelectInput } from "./FormMultiSelect.tsx";
import {
type MultiSelectFieldProps,
MultiSelectInput,
} from "./FormMultiSelect.tsx";
export type FieldProps<T> =
| InputFieldProps<T>
@@ -34,7 +46,14 @@ export function DynamicFormField<T extends FieldValues>({
case "text":
case "password":
case "number":
return <GenericInput field={field} control={control} disabled={disabled} isDirty={isDirty} />;
return (
<GenericInput
field={field}
control={control}
disabled={disabled}
isDirty={isDirty}
/>
);
case "toggle":
return (

23
apps/web/src/components/Form/FormInput.tsx
View File

@@ -48,7 +48,10 @@ export function GenericInput<T extends FieldValues>({
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const newValue = e.target.value;
if (field.properties?.fieldLength?.max && newValue.length > field.properties.fieldLength.max) {
if (
field.properties?.fieldLength?.max &&
newValue.length > field.properties.fieldLength.max
) {
return;
}
@@ -57,22 +60,32 @@ export function GenericInput<T extends FieldValues>({
}
controllerField.onChange(
field.type === "number" ? Number.parseFloat(newValue).toString() : newValue,
field.type === "number"
? Number.parseFloat(newValue).toString()
: newValue,
);
};
const currentLength = controllerField.value ? String(controllerField.value).length : 0;
const currentLength = controllerField.value
? String(controllerField.value).length
: 0;
return (
<div className="relative w-full">
<Input
type={field.type}
step={field.properties?.step}
value={field.type === "number" ? String(controllerField.value) : controllerField.value}
value={
field.type === "number"
? String(controllerField.value)
: controllerField.value
}
id={field.name}
onChange={handleInputChange}
showCopyButton={field.properties?.showCopyButton}
showPasswordToggle={field.properties?.showPasswordToggle || field.type === "password"}
showPasswordToggle={
field.properties?.showPasswordToggle || field.type === "password"
}
className={field.properties?.className}
{...restProperties}
disabled={disabled}

25
apps/web/src/components/Form/FormMultiSelect.tsx
View File

@@ -33,17 +33,20 @@ export function MultiSelectInput<T extends FieldValues>({
Object.values(enumValue)[0] !== null &&
"i18nKey" in Object.values(enumValue)[0];
const optionsToRender = Object.entries(enumValue).map(([key, configOrValue]) => {
if (isNewConfigStructure) {
const config = configOrValue as (typeof FLAGS_CONFIG)[keyof typeof FLAGS_CONFIG];
return {
key,
display: t(config.i18nKey),
value: config.value,
};
}
return { key, display: key, value: configOrValue as number };
});
const optionsToRender = Object.entries(enumValue).map(
([key, configOrValue]) => {
if (isNewConfigStructure) {
const config =
configOrValue as (typeof FLAGS_CONFIG)[keyof typeof FLAGS_CONFIG];
return {
key,
display: t(config.i18nKey),
value: config.value,
};
}
return { key, display: key, value: configOrValue as number };
},
);
return (
<MultiSelect

13
apps/web/src/components/Form/FormSelect.tsx
View File

@@ -49,8 +49,13 @@ export function SelectInput<T extends FieldValues>({
control,
});
const { enumValue, formatEnumName, defaultValue, className, ...remainingProperties } =
field.properties;
const {
enumValue,
formatEnumName,
defaultValue,
className,
...remainingProperties
} = field.properties;
const valueToKeyMap: Record<string, string> = {};
const optionsEnumValues: [string, number][] = [];
@@ -95,7 +100,9 @@ export function SelectInput<T extends FieldValues>({
className={cn([
className,
isDirty ? "focus:ring-sky-500 ring-sky-500 ring-2 ring-offset-2" : "",
invalid ? "focus:ring-red-500 ring-red-500 ring-2 outline-offset-2" : "",
invalid
? "focus:ring-red-500 ring-red-500 ring-2 outline-offset-2"
: "",
])}
ref={ref}
onBlur={onBlur}

8
apps/web/src/components/Form/FormToggle.tsx
View File

@@ -34,8 +34,12 @@ export function ToggleInput<T extends FieldValues>({
{...field.properties}
className={cn([
field.properties?.className,
isDirty ? "focus:ring-sky-500 ring-sky-500 ring-2 ring-offset-2" : "",
invalid ? "focus:ring-red-500 ring-red-500 ring-2 ring-offset-2" : "",
isDirty
? "focus:ring-sky-500 ring-sky-500 ring-2 ring-offset-2"
: "",
invalid
? "focus:ring-red-500 ring-red-500 ring-2 ring-offset-2"
: "",
])}
{...rest}
/>

4
apps/web/src/components/Form/FormWrapper.tsx
View File

@@ -24,7 +24,9 @@ export const FieldWrapper = ({
<div className="grid grid-cols-1 lg:grid-cols-[0.6fr_2fr_.1fr] sm:items-baseline gap-4">
<Label htmlFor={fieldName}>{label}</Label>
<div className="max-w-3xl">
<p className="text-sm text-slate-500 dark:text-slate-400">{description}</p>
<p className="text-sm text-slate-500 dark:text-slate-400">
{description}
</p>
<p hidden={valid ?? true} className="text-sm text-red-500">
{validationText}
</p>

14
apps/web/src/components/Form/createZodResolver.ts
View File

@@ -11,7 +11,11 @@ import type { ZodType } from "zod/v4";
export function createZodResolver<T extends FieldValues>(
schema: ZodType<T, unknown>,
): Resolver<T, unknown> {
return (values: T, _context: unknown, _options?: ResolverOptions<T>): ResolverResult<T> => {
return (
values: T,
_context: unknown,
_options?: ResolverOptions<T>,
): ResolverResult<T> => {
const result = schema.safeParse(values);
if (result.success) {
return {
@@ -20,7 +24,10 @@ export function createZodResolver<T extends FieldValues>(
};
}
const errors: Record<string, FieldError & { params?: Record<string, unknown> }> = {};
const errors: Record<
string,
FieldError & { params?: Record<string, unknown> }
> = {};
for (const issue of result.error.issues) {
const { path, code, message, ...params } = issue;
@@ -36,7 +43,8 @@ export function createZodResolver<T extends FieldValues>(
: "";
const newCode =
code.replace(/_([a-z])/g, (_, char) => char.toUpperCase()) + (suffix ? `.${suffix}` : "");
code.replace(/_([a-z])/g, (_, char) => char.toUpperCase()) +
(suffix ? `.${suffix}` : "");
const fieldError: FieldError & { params?: Record<string, unknown> } = {
type: newCode,

17
apps/web/src/components/LanguageSwitcher.tsx
View File

@@ -18,7 +18,9 @@ interface LanguageSwitcherProps {
disableHover?: boolean;
}
export default function LanguageSwitcher({ disableHover = false }: LanguageSwitcherProps) {
export default function LanguageSwitcher({
disableHover = false,
}: LanguageSwitcherProps) {
const { i18n } = useTranslation("ui");
const { set: setLanguage, current, getSupportedLangs } = useLang();
@@ -44,13 +46,15 @@ export default function LanguageSwitcher({ disableHover = false }: LanguageSwitc
size={16}
className={cn(
"text-gray-500 dark:text-gray-400 w-4 flex-shrink-0 transition-colors duration-150",
!disableHover && "group-hover:text-gray-700 dark:group-hover:text-gray-200",
!disableHover &&
"group-hover:text-gray-700 dark:group-hover:text-gray-200",
)}
/>
<Subtle
className={cn(
"text-sm text-gray-600 dark:text-gray-100 transition-colors duration-150",
!disableHover && "group-hover:text-gray-800 dark:group-hover:text-gray-100",
!disableHover &&
"group-hover:text-gray-800 dark:group-hover:text-gray-100",
)}
>
{`${t("languagePicker.label")}:`}
@@ -58,7 +62,8 @@ export default function LanguageSwitcher({ disableHover = false }: LanguageSwitc
<Subtle
className={cn(
"text-sm font-medium text-gray-700 dark:text-gray-200 transition-colors duration-150",
!disableHover && "group-hover:text-gray-900 dark:group-hover:text-white",
!disableHover &&
"group-hover:text-gray-900 dark:group-hover:text-white",
)}
>
{current?.name}
@@ -76,7 +81,9 @@ export default function LanguageSwitcher({ disableHover = false }: LanguageSwitc
<span>{language.flag}</span>
<span>{language.name}</span>
</div>
{i18n.language === language.code && <Check className="h-4 w-4 text-primary" />}
{i18n.language === language.code && (
<Check className="h-4 w-4 text-primary" />
)}
</DropdownMenuItem>
))}
</DropdownMenuContent>

4
apps/web/src/components/Map.tsx
View File

@@ -45,7 +45,9 @@ export const BaseMap = ({
const locale = useMemo(() => {
return {
"GeolocateControl.FindMyLocation": t("maplibre.GeolocateControl.FindMyLocation"),
"GeolocateControl.FindMyLocation": t(
"maplibre.GeolocateControl.FindMyLocation",
),
"NavigationControl.ZoomIn": t("maplibre.NavigationControl.ZoomIn"),
"NavigationControl.ZoomOut": t("maplibre.NavigationControl.ZoomOut"),
"ScaleControl.Meters": t("unit.meter.suffix"),

28
apps/web/src/components/PageComponents/Channels/Channel.tsx
View File

@@ -1,8 +1,14 @@
import { type ChannelValidation, makeChannelSchema } from "@app/validation/channel.ts";
import {
type ChannelValidation,
makeChannelSchema,
} from "@app/validation/channel.ts";
import { create } from "@bufbuild/protobuf";
import { PkiRegenerateDialog } from "@components/Dialog/PkiRegenerateDialog.tsx";
import { createZodResolver } from "@components/Form/createZodResolver.ts";
import { DynamicForm, type DynamicFormFormInit } from "@components/Form/DynamicForm.tsx";
import {
DynamicForm,
type DynamicFormFormInit,
} from "@components/Form/DynamicForm.tsx";
import { useDevice } from "@core/stores";
import { Protobuf } from "@meshtastic/sdk";
import { useConfigEditor, useSignal } from "@meshtastic/sdk-react";
@@ -23,7 +29,10 @@ const EMPTY_CHANNELS_SIGNAL = {
Protobuf.Channel.Channel
>,
peek: () =>
new Map<number, Protobuf.Channel.Channel>() as ReadonlyMap<number, Protobuf.Channel.Channel>,
new Map<number, Protobuf.Channel.Channel>() as ReadonlyMap<
number,
Protobuf.Channel.Channel
>,
subscribe: () => () => {},
} as const;
@@ -43,7 +52,8 @@ export const Channel = ({ onFormInit, channel }: SettingsPanelProps) => {
moduleSettings: {
...defaultConfig?.settings?.moduleSettings,
positionPrecision:
defaultConfig?.settings?.moduleSettings?.positionPrecision === undefined
defaultConfig?.settings?.moduleSettings?.positionPrecision ===
undefined
? 10
: defaultConfig?.settings?.moduleSettings?.positionPrecision,
},
@@ -62,7 +72,8 @@ export const Channel = ({ onFormInit, channel }: SettingsPanelProps) => {
moduleSettings: {
...effectiveConfig?.settings?.moduleSettings,
positionPrecision:
effectiveConfig?.settings?.moduleSettings?.positionPrecision === undefined
effectiveConfig?.settings?.moduleSettings?.positionPrecision ===
undefined
? 10
: effectiveConfig?.settings?.moduleSettings?.positionPrecision,
},
@@ -70,8 +81,11 @@ export const Channel = ({ onFormInit, channel }: SettingsPanelProps) => {
},
};
const [preSharedDialogOpen, setPreSharedDialogOpen] = useState<boolean>(false);
const [byteCount, setBytes] = useState<number>(effectiveConfig?.settings?.psk.length ?? 16);
const [preSharedDialogOpen, setPreSharedDialogOpen] =
useState<boolean>(false);
const [byteCount, setBytes] = useState<number>(
effectiveConfig?.settings?.psk.length ?? 16,
);
const ChannelValidationSchema = useMemo(() => {
return makeChannelSchema(byteCount);
}, [byteCount]);

39
apps/web/src/components/PageComponents/Channels/Channels.tsx
View File

@@ -2,7 +2,12 @@ import { Channel } from "@app/components/PageComponents/Channels/Channel";
import { create } from "@bufbuild/protobuf";
import { Button } from "@components/UI/Button.tsx";
import { Spinner } from "@components/UI/Spinner.tsx";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@components/UI/Tabs.tsx";
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from "@components/UI/Tabs.tsx";
import { useDevice } from "@core/stores";
import { Protobuf } from "@meshtastic/sdk";
import { useChannels, useConfigEditor, useSignal } from "@meshtastic/sdk-react";
@@ -16,7 +21,10 @@ interface ConfigProps {
onFormInit: <T extends object>(methods: UseFormReturn<T>) => void;
}
export const getChannelName = (channel: { index: number; settings?: { name?: string } }) => {
export const getChannelName = (channel: {
index: number;
settings?: { name?: string };
}) => {
return channel.settings?.name?.length
? channel.settings.name
: channel.index === 0
@@ -37,7 +45,9 @@ export const Channels = ({ onFormInit }: ConfigProps) => {
const { setDialogOpen } = useDevice();
const editor = useConfigEditor();
const channels = useChannels();
const dirtyChannels = useSignal(editor?.dirtyChannels ?? EMPTY_DIRTY_CHANNELS_SIGNAL);
const dirtyChannels = useSignal(
editor?.dirtyChannels ?? EMPTY_DIRTY_CHANNELS_SIGNAL,
);
const { t } = useTranslation("channels");
const allChannels = useMemo(
@@ -53,7 +63,12 @@ export const Channels = ({ onFormInit }: ConfigProps) => {
);
const flags = useMemo(
() =>
new Map(allChannels.map((channel) => [channel.index, dirtyChannels.includes(channel.index)])),
new Map(
allChannels.map((channel) => [
channel.index,
dirtyChannels.includes(channel.index),
]),
),
[allChannels, dirtyChannels],
);
@@ -75,7 +90,10 @@ export const Channels = ({ onFormInit }: ConfigProps) => {
)}
</TabsTrigger>
))}
<Button className="ml-auto mr-1 h-8" onClick={() => setDialogOpen("import", true)}>
<Button
className="ml-auto mr-1 h-8"
onClick={() => setDialogOpen("import", true)}
>
<UploadIcon className="mr-2" size={14} />
{t("page.import")}
</Button>
@@ -85,9 +103,16 @@ export const Channels = ({ onFormInit }: ConfigProps) => {
</Button>
</TabsList>
{allChannels.map((channel) => (
<TabsContent key={`channel_${channel.index}`} value={`channel_${channel.index}`}>
<TabsContent
key={`channel_${channel.index}`}
value={`channel_${channel.index}`}
>
<Suspense fallback={<Spinner size="lg" className="my-5" />}>
<Channel key={channel.index} onFormInit={onFormInit} channel={channel} />
<Channel
key={channel.index}
onFormInit={onFormInit}
channel={channel}
/>
</Suspense>
</TabsContent>
))}

15
apps/web/src/components/PageComponents/Connections/ConnectionStatusBadge.tsx
View File

@@ -1,7 +1,11 @@
import { Button } from "@app/components/UI/Button";
import type { Connection } from "@app/core/stores/deviceStore/types";
export function ConnectionStatusBadge({ status }: { status: Connection["status"] }) {
export function ConnectionStatusBadge({
status,
}: {
status: Connection["status"];
}) {
let color = "";
let displayStatus = status;
@@ -26,8 +30,13 @@ export function ConnectionStatusBadge({ status }: { status: Connection["status"]
}
return (
<Button variant="subtle" className="inline-flex items-center gap-2">
<span className={`h-2.5 w-2.5 rounded-full ${color}`} aria-hidden="true" />
<span className="text-xs capitalize text-slate-500 dark:text-slate-400">{displayStatus}</span>
<span
className={`h-2.5 w-2.5 rounded-full ${color}`}
aria-hidden="true"
/>
<span className="text-xs capitalize text-slate-500 dark:text-slate-400">
{displayStatus}
</span>
</Button>
);
}

23
apps/web/src/components/PageComponents/Map/Layers/HeatmapLayer.tsx
View File

@@ -14,7 +14,12 @@ export interface HeatmapLayerProps {
isVisible: boolean;
}
export const HeatmapLayer = ({ id, filteredNodes, mode, isVisible }: HeatmapLayerProps) => {
export const HeatmapLayer = ({
id,
filteredNodes,
mode,
isVisible,
}: HeatmapLayerProps) => {
if (!isVisible) return null;
const data: FeatureCollection = useMemo(() => {
const features: Feature[] = filteredNodes
@@ -43,7 +48,9 @@ export const HeatmapLayer = ({ id, filteredNodes, mode, isVisible }: HeatmapLaye
const paintProps: HeatmapLayerSpecification["paint"] = useMemo(
() => ({
"heatmap-weight":
mode === "density" ? 1 : ["interpolate", ["linear"], ["get", "snr"], -20, 0, 10, 1],
mode === "density"
? 1
: ["interpolate", ["linear"], ["get", "snr"], -20, 0, 10, 1],
"heatmap-intensity": ["interpolate", ["linear"], ["zoom"], 0, 1, 15, 3],
// Color ramp for heatmap. Domain is 0 (low) to 1 (high).
// Begin color ramp at 0-stop with a 0-transparancy color
@@ -65,7 +72,17 @@ export const HeatmapLayer = ({ id, filteredNodes, mode, isVisible }: HeatmapLaye
1,
"rgb(178,24,43)",
],
"heatmap-radius": ["interpolate", ["linear"], ["zoom"], 0, 2, 9, 20, 15, 30],
"heatmap-radius": [
"interpolate",
["linear"],
["zoom"],
0,
2,
9,
20,
15,
30,
],
// Opacity 0.7 to be visible but not blocking
"heatmap-opacity": 0.7,
}),

12
apps/web/src/components/PageComponents/Map/Layers/NodesLayer.tsx
View File

@@ -45,14 +45,18 @@ export const NodesLayer = ({
const errors = useNodeErrors();
const errorSet = useMemo(() => new Set(errors.map((e) => e.node)), [errors]);
const hasNodeError = useCallback((num: number) => errorSet.has(num), [errorSet]);
const hasNodeError = useCallback(
(num: number) => errorSet.has(num),
[errorSet],
);
const { focusLngLat } = useMapFitting(mapRef);
const selectedNode = useMemo(
() =>
popupState?.type !== "node"
? undefined
: (filteredNodes.find((node) => node.num === popupState.num) ?? undefined),
: (filteredNodes.find((node) => node.num === popupState.num) ??
undefined),
[popupState, filteredNodes],
);
@@ -79,7 +83,9 @@ export const NodesLayer = ({
const isExpanded = expandedCluster === key;
// Precompute pixel offsets for expanded state
const expandedOffsets = isExpanded ? fanOutOffsetsPx(nodes.length, key) : undefined;
const expandedOffsets = isExpanded
? fanOutOffsetsPx(nodes.length, key)
: undefined;
// Always render all node markers in the cluster
for (const [i, node] of nodes.entries()) {

17
apps/web/src/components/PageComponents/Map/Layers/PrecisionLayer.tsx
View File

@@ -36,7 +36,10 @@ export function generatePrecisionCircles(
>();
for (const node of filteredNodes) {
if (node.position?.precisionBits === undefined || node.position.precisionBits === 0) {
if (
node.position?.precisionBits === undefined ||
node.position.precisionBits === 0
) {
continue;
}
const [lng, lat] = toLngLat(node.position);
@@ -60,7 +63,9 @@ export function generatePrecisionCircles(
}
}
const items = Array.from(unique.values()).sort((a, b) => a.radiusM - b.radiusM);
const items = Array.from(unique.values()).sort(
(a, b) => a.radiusM - b.radiusM,
);
const features: Feature<Polygon, CircleProps>[] = items.map(
({ lng, lat, radiusM, r, g, b, a }) => {
@@ -91,7 +96,13 @@ export const SourcePrecisionCircles = ({
type="fill"
layout={{ visibility: isVisible ? "visible" : "none" }}
paint={{
"fill-color": ["rgba", ["get", "r"], ["get", "g"], ["get", "b"], ["get", "a"]],
"fill-color": [
"rgba",
["get", "r"],
["get", "g"],
["get", "b"],
["get", "a"],
],
}}
/>
<Layer

26
apps/web/src/components/PageComponents/Map/Layers/SNRLayer.tsx
View File

@@ -64,7 +64,11 @@ type Pair = {
ba?: number; // SNR b->a
};
function arcSegment(aLngLat: LngLat, bLngLat: LngLat, curved: boolean): LngLat[] | undefined {
function arcSegment(
aLngLat: LngLat,
bLngLat: LngLat,
curved: boolean,
): LngLat[] | undefined {
if (!curved && distanceMeters(aLngLat, bLngLat) < MIN_LEN) {
// Straight line
return [aLngLat, bLngLat];
@@ -176,7 +180,9 @@ function pushIfFeature(
}
}
function generateNeighborLines(neighborInfos: NeighborInfos[]): FeatureCollection {
function generateNeighborLines(
neighborInfos: NeighborInfos[],
): FeatureCollection {
// Collect positions for all referenced nodes, discard pairs with missing positions
const idToLngLat = new Map<number, LngLat>();
const ensure = (node?: Protobuf.Mesh.NodeInfo | NeighborPlus) => {
@@ -240,7 +246,12 @@ function generateNeighborLines(neighborInfos: NeighborInfos[]): FeatureCollectio
return { type: "FeatureCollection", features };
}
export const SNRTooltip = ({ pos, snr, from, to }: Partial<SNRTooltipProps> = {}) => {
export const SNRTooltip = ({
pos,
snr,
from,
to,
}: Partial<SNRTooltipProps> = {}) => {
const { t } = useTranslation();
if (!pos) {
@@ -290,7 +301,9 @@ export const SNRLayer = ({
neighborInfo: {
...neighborInfo,
neighbors: neighborInfo.neighbors.map((n) => {
const node = filteredNodes.find((node) => node.num === n.nodeId);
const node = filteredNodes.find(
(node) => node.num === n.nodeId,
);
return { ...n, num: node?.num, position: node?.position };
}),
},
@@ -312,7 +325,10 @@ export const SNRLayer = ({
}))
: [];
const featureCollection = generateNeighborLines([...remotePairs, ...directPairs]);
const featureCollection = generateNeighborLines([
...remotePairs,
...directPairs,
]);
return (
<Source type="geojson" data={featureCollection}>

6
apps/web/src/components/PageComponents/Map/Layers/WaypointLayer.tsx
View File

@@ -82,7 +82,11 @@ export const WaypointLayer = ({
offset={[0, 25]}
onClose={() => setPopupState(undefined)}
>
<WaypointDetail waypoint={popupState.waypoint} myNode={myNode} onEdit={() => {}} />
<WaypointDetail
waypoint={popupState.waypoint}
myNode={myNode}
onEdit={() => {}}
/>
</PopupWrapper>,
);
}

8
apps/web/src/components/PageComponents/Map/Markers/StackBadge.tsx
View File

@@ -8,7 +8,13 @@ type StackBadgeProps = {
onClick: (e: { originalEvent: MouseEvent }) => void;
};
export const StackBadge = ({ lng, lat, count, isVisible = true, onClick }: StackBadgeProps) => {
export const StackBadge = ({
lng,
lat,
count,
isVisible = true,
onClick,
}: StackBadgeProps) => {
return (
<Marker
longitude={lng}

47
apps/web/src/components/PageComponents/Map/Popups/NodeDetail.tsx
View File

@@ -16,7 +16,14 @@ import {
TooltipTrigger,
} from "@radix-ui/react-tooltip";
import { useNavigate } from "@tanstack/react-router";
import { Dot, LockIcon, LockOpenIcon, MessageSquareIcon, MountainSnow, Star } from "lucide-react";
import {
Dot,
LockIcon,
LockOpenIcon,
MessageSquareIcon,
MountainSnow,
Star,
} from "lucide-react";
import { useTranslation } from "react-i18next";
export interface NodeDetailProps {
@@ -38,9 +45,16 @@ export const NodeDetail = ({ node }: NodeDetailProps) => {
: rawHardwareType.replaceAll("_", " ")
: `${hwModel}`;
// SNR is in dB; derive a 0–100% quality heuristic (-10 dB → 0%, +10 dB → 100%).
const snrQuality = Math.min(Math.max(Math.round((node.snr + 10) * 5), 0), 100);
const snrQuality = Math.min(
Math.max(Math.round((node.snr + 10) * 5), 0),
100,
);
const snrTone =
snrQuality >= 67 ? "text-green-600" : snrQuality >= 34 ? "text-yellow-600" : "text-red-600";
snrQuality >= 67
? "text-green-600"
: snrQuality >= 34
? "text-yellow-600"
: "text-red-600";
function handleDirectMessage() {
navigate({ to: `/messages/direct/${node.num}` });
}
@@ -101,7 +115,9 @@ export const NodeDetail = ({ node }: NodeDetailProps) => {
fill={node.isFavorite ? "black" : "none"}
size={15}
aria-label={
node.isFavorite ? t("nodeDetail.favorite.label") : t("nodeDetail.notFavorite.label")
node.isFavorite
? t("nodeDetail.favorite.label")
: t("nodeDetail.notFavorite.label")
}
/>
</div>
@@ -122,12 +138,15 @@ export const NodeDetail = ({ node }: NodeDetailProps) => {
<div
className="flex gap-1"
title={new Date(node.lastHeard * 1000).toLocaleString(navigator.language)}
title={new Date(node.lastHeard * 1000).toLocaleString(
navigator.language,
)}
>
<div>
{node.lastHeard > 0 && (
<div>
{t("nodeDetail.status.heard")} <TimeAgo timestamp={node.lastHeard * 1000} />
{t("nodeDetail.status.heard")}{" "}
<TimeAgo timestamp={node.lastHeard * 1000} />
</div>
)}
</div>
@@ -145,9 +164,13 @@ export const NodeDetail = ({ node }: NodeDetailProps) => {
<div className="flex mt-2 text-sm">
<div className="flex items-center grow">
<div className="border-2 border-slate-900 rounded-sm px-0.5 mr-1">
{Number.isNaN(node.hopsAway) ? t("unit.hopsAway.unknown") : node.hopsAway}
{Number.isNaN(node.hopsAway)
? t("unit.hopsAway.unknown")
: node.hopsAway}
</div>
<div>
{node.hopsAway === 1 ? t("unit.hop.one") : t("unit.hop.plural")}
</div>
<div>{node.hopsAway === 1 ? t("unit.hop.one") : t("unit.hop.plural")}</div>
</div>
{node.position?.altitude && (
<div className="flex items-center grow">
@@ -170,13 +193,17 @@ export const NodeDetail = ({ node }: NodeDetailProps) => {
{!!node.deviceMetrics?.channelUtilization && (
<div className="grow">
<div>{t("channelUtilization.short")}</div>
<Mono>{node.deviceMetrics?.channelUtilization.toPrecision(3)}%</Mono>
<Mono>
{node.deviceMetrics?.channelUtilization.toPrecision(3)}%
</Mono>
</div>
)}
{!!node.deviceMetrics?.airUtilTx && (
<div className="grow">
<div>{t("airtimeUtilization.short")}</div>
<Mono className="text-gray-500">{node.deviceMetrics?.airUtilTx.toPrecision(3)}%</Mono>
<Mono className="text-gray-500">
{node.deviceMetrics?.airUtilTx.toPrecision(3)}%
</Mono>
</div>
)}
</div>

23
apps/web/src/components/PageComponents/Map/Popups/WaypointDetail.tsx
View File

@@ -2,7 +2,12 @@ import { TimeAgo } from "@components/generic/TimeAgo";
import { Separator } from "@components/UI/Separator.tsx";
import { useNodeAsProto } from "@core/hooks/useNodesAsProto.ts";
import type { WaypointWithMetadata } from "@core/stores";
import { bearingDegrees, distanceMeters, hasPos, toLngLat } from "@core/utils/geo";
import {
bearingDegrees,
distanceMeters,
hasPos,
toLngLat,
} from "@core/utils/geo";
import type { Protobuf } from "@meshtastic/sdk";
import {
ClockFadingIcon,
@@ -83,10 +88,14 @@ export const WaypointDetail = ({ waypoint, myNode }: WaypointDetailProps) => {
<div className="flex flex-wrap items-start gap-x-3">
<dt className="inline-flex items-center gap-2 text-slate-500 min-w-0">
<ClockPlusIcon size={14} aria-hidden />
<span className="truncate">{t("waypointDetail.createdDate")}</span>
<span className="truncate">
{t("waypointDetail.createdDate")}
</span>
</dt>
<dd className="ms-auto text-right">
<time dateTime={new Date(waypoint.metadata.created).toISOString()}>
<time
dateTime={new Date(waypoint.metadata.created).toISOString()}
>
<TimeAgo timestamp={waypoint.metadata.created} />
</time>
</dd>
@@ -100,7 +109,9 @@ export const WaypointDetail = ({ waypoint, myNode }: WaypointDetailProps) => {
<span className="truncate">{t("waypointDetail.updated")}</span>
</dt>
<dd className="ms-auto text-right">
<time dateTime={new Date(waypoint.metadata.updated).toISOString()}>
<time
dateTime={new Date(waypoint.metadata.updated).toISOString()}
>
<TimeAgo timestamp={waypoint.metadata.updated} />
</time>
</dd>
@@ -132,7 +143,9 @@ export const WaypointDetail = ({ waypoint, myNode }: WaypointDetailProps) => {
<dd className="ms-auto text-right">
<data value={Math.round(distance)}>
{Math.round(distance)}{" "}
{distance === 1 ? t("unit.meter.one") : t("unit.meter.plural")}
{distance === 1
? t("unit.meter.one")
: t("unit.meter.plural")}
</data>
</dd>
</div>

21
apps/web/src/components/PageComponents/Map/Tools/MapLayerTool.tsx
View File

@@ -1,6 +1,10 @@
import type { HeatmapMode } from "@components/PageComponents/Map/Layers/HeatmapLayer.tsx";
import { Checkbox } from "@components/UI/Checkbox/index.tsx";
import { Popover, PopoverContent, PopoverTrigger } from "@components/UI/Popover.tsx";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@components/UI/Popover.tsx";
import { cn } from "@core/utils/cn.ts";
import { LayersIcon } from "lucide-react";
import { type ReactNode, useMemo } from "react";
@@ -40,7 +44,12 @@ interface CheckboxProps {
className?: string;
}
const CheckboxItem = ({ label, checked, onChange, className }: CheckboxProps) => {
const CheckboxItem = ({
label,
checked,
onChange,
className,
}: CheckboxProps) => {
return (
<Checkbox
checked={checked}
@@ -140,7 +149,9 @@ export function MapLayerTool({
<CheckboxItem
label={label}
checked={visibilityState[key as keyof VisibilityState]}
onChange={() => handleCheckboxChange(key as keyof VisibilityState)}
onChange={() =>
handleCheckboxChange(key as keyof VisibilityState)
}
/>
{key === "heatmap" && visibilityState.heatmap && (
<div className="pl-6 pt-2 flex flex-col gap-1">
@@ -151,7 +162,9 @@ export function MapLayerTool({
checked={heatmapMode === "density"}
onChange={() => setHeatmapMode("density")}
/>
<span className="text-sm dark:text-slate-300">{t("layerTool.density")}</span>
<span className="text-sm dark:text-slate-300">
{t("layerTool.density")}
</span>
</label>
<label className="flex items-center gap-2 cursor-pointer">
<input

8
apps/web/src/components/PageComponents/Messages/ChannelChat.tsx
View File

@@ -68,7 +68,9 @@ const DateDelimiter = ({ label }: { label: string }) => (
<li aria-label={label}>
<div className="my-2 flex h-3 items-center justify-center">
<Separator className="bg-slate-100 dark:bg-slate-800" />
<div className="mx-5 whitespace-nowrap text-center text-xs text-slate-400">{label}</div>
<div className="mx-5 whitespace-nowrap text-center text-xs text-slate-400">
{label}
</div>
<Separator className="bg-slate-100 dark:bg-slate-800" />
</div>
</li>
@@ -106,7 +108,9 @@ export const ChannelChat = ({ messages = [] }: ChannelChatProps) => {
const { i18n, t } = useTranslation();
const locale = useMemo(
() => i18n.language || (typeof navigator !== "undefined" ? navigator.language : "en-US"),
() =>
i18n.language ||
(typeof navigator !== "undefined" ? navigator.language : "en-US"),
[i18n.language],
);

5
apps/web/src/components/PageComponents/Messages/MessageActionsMenu.tsx
View File

@@ -14,7 +14,10 @@ interface MessageActionsMenuProps {
onReply?: () => void;
}
export const MessageActionsMenu = ({ onAddReaction, onReply }: MessageActionsMenuProps) => {
export const MessageActionsMenu = ({
onAddReaction,
onReply,
}: MessageActionsMenuProps) => {
const { t } = useTranslation();
const hoverIconBarClass = cn(
"absolute top-2 right-2",

30
apps/web/src/components/PageComponents/Messages/MessageInput.test.tsx
View File

@@ -1,11 +1,23 @@
import type { ConversationKey } from "@meshtastic/sdk";
import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
import {
act,
fireEvent,
render,
screen,
waitFor,
} from "@testing-library/react";
import { beforeEach, describe, expect, it, vi } from "vitest";
import { MessageInput, type MessageInputProps } from "./MessageInput.tsx";
vi.mock("@components/UI/Button.tsx", () => ({
Button: vi.fn(({ type, className, children, onClick, onSubmit, ...rest }) => (
<button type={type} className={className} onClick={onClick} onSubmit={onSubmit} {...rest}>
<button
type={type}
className={className}
onClick={onClick}
onSubmit={onSubmit}
{...rest}
>
{children}
</button>
)),
@@ -127,7 +139,9 @@ describe("MessageInput", () => {
expect(mockOnSend).toHaveBeenCalledTimes(1);
expect(mockOnSend).toHaveBeenCalledWith(testMessage);
expect((inputElement as HTMLInputElement).value).toBe("");
expect(screen.getByTestId("byte-counter")).toHaveTextContent(`0/${defaultProps.maxBytes}`);
expect(screen.getByTestId("byte-counter")).toHaveTextContent(
`0/${defaultProps.maxBytes}`,
);
expect(mockClear).toHaveBeenCalledTimes(1);
});
});
@@ -193,11 +207,13 @@ describe("MessageInput", () => {
mockDraftText = "Broadcast draft";
renderComponent({ conversation: broadcastConv });
expect((screen.getByTestId("message-input-field") as HTMLInputElement).value).toBe(
"Broadcast draft",
);
expect(
(screen.getByTestId("message-input-field") as HTMLInputElement).value,
).toBe("Broadcast draft");
const inputElement = screen.getByTestId("message-input-field") as HTMLInputElement;
const inputElement = screen.getByTestId(
"message-input-field",
) as HTMLInputElement;
const formElement = screen.getByRole("form");
const newMessage = "New broadcast msg";

10
apps/web/src/components/PageComponents/Messages/MessageInput.tsx
View File

@@ -12,14 +12,20 @@ export interface MessageInputProps {
maxBytes: number;
}
export const MessageInput = ({ onSend, conversation, maxBytes }: MessageInputProps) => {
export const MessageInput = ({
onSend,
conversation,
maxBytes,
}: MessageInputProps) => {
const { text: persistedDraft, setText, clear } = useDraft(conversation);
const { t } = useTranslation("messages");
const calculateBytes = (value: string) => new Blob([value]).size;
const [localDraft, setLocalDraft] = useState(persistedDraft);
const [messageBytes, setMessageBytes] = useState(() => calculateBytes(persistedDraft));
const [messageBytes, setMessageBytes] = useState(() =>
calculateBytes(persistedDraft),
);
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const newValue = e.target.value;

30
apps/web/src/components/PageComponents/Messages/MessageItem.tsx
View File

@@ -6,7 +6,10 @@ import {
TooltipProvider,
TooltipTrigger,
} from "@components/UI/Tooltip.tsx";
import { useMyNodeAsProto, useNodeAsProto } from "@core/hooks/useNodesAsProto.ts";
import {
useMyNodeAsProto,
useNodeAsProto,
} from "@core/hooks/useNodesAsProto.ts";
import { useAppStore, useDevice } from "@core/stores";
import { type Message, MessageState } from "@core/stores/messageStore";
import { cn } from "@core/utils/cn.ts";
@@ -151,7 +154,8 @@ export const MessageItem = ({ message }: MessageItemProps) => {
const longName = messageUser?.user?.longName;
const derivedShortName = messageUser?.user?.shortName || fallbackName;
const derivedDisplayName = longName || derivedShortName;
const isFavorite = messageUser?.num !== myNodeNum && messageUser?.isFavorite;
const isFavorite =
messageUser?.num !== myNodeNum && messageUser?.isFavorite;
return {
displayName: derivedDisplayName,
shortName: derivedShortName,
@@ -163,7 +167,10 @@ export const MessageItem = ({ message }: MessageItemProps) => {
const messageStatusInfo = getMessageStatusInfo(message.state);
const StatusIconComponent = messageStatusInfo.icon;
const messageDate = useMemo(() => (message.date ? new Date(message.date) : null), [message.date]);
const messageDate = useMemo(
() => (message.date ? new Date(message.date) : null),
[message.date],
);
const locale = i18n.language;
const formattedTime = useMemo(
@@ -200,7 +207,12 @@ export const MessageItem = ({ message }: MessageItemProps) => {
return (
<li className={messageItemWrapperClass}>
<div className="grid grid-cols-[auto_1fr] gap-x-2">
<Avatar size="sm" nodeNum={nodeNum} className="pt-0.5" showFavorite={isFavorite} />
<Avatar
size="sm"
nodeNum={nodeNum}
className="pt-0.5"
showFavorite={isFavorite}
/>
<div className="flex flex-col gap-0.5 min-w-0">
<div className="flex items-center gap-1.5">
@@ -208,7 +220,10 @@ export const MessageItem = ({ message }: MessageItemProps) => {
{displayName}
</span>
{messageDate && (
<time dateTime={messageDate.toISOString()} className={dateTextStyle}>
<time
dateTime={messageDate.toISOString()}
className={dateTextStyle}
>
<span aria-hidden="true">{formattedTime}</span>
<span className="sr-only">{fullDateTime}</span>
</time>
@@ -217,7 +232,10 @@ export const MessageItem = ({ message }: MessageItemProps) => {
<StatusTooltip statusInfo={messageStatusInfo}>
<span aria-label={messageStatusInfo.ariaLabel} role="img">
<StatusIconComponent
className={cn("size-4 shrink-0", messageStatusInfo.iconClassName)}
className={cn(
"size-4 shrink-0",
messageStatusInfo.iconClassName,
)}
aria-hidden="true"
/>
</span>

9
apps/web/src/components/PageComponents/Messages/TraceRoute.test.tsx
View File

@@ -68,7 +68,14 @@ describe("TraceRoute", () => {
});
it("renders the route to destination with SNR values", () => {
render(<TraceRoute from={fromUser} to={toUser} route={[1, 2]} snrTowards={[10, 20, 30]} />);
render(
<TraceRoute
from={fromUser}
to={toUser}
route={[1, 2]}
snrTowards={[10, 20, 30]}
/>,
);
expect(screen.getByText("Source Node")).toBeInTheDocument();
expect(screen.getByText("Destination Node")).toBeInTheDocument();

17
apps/web/src/components/PageComponents/ModuleConfig/AmbientLighting.tsx
View File

@@ -3,7 +3,10 @@ import {
type AmbientLightingValidation,
AmbientLightingValidationSchema,
} from "@app/validation/moduleConfig/ambientLighting.ts";
import { DynamicForm, type DynamicFormFormInit } from "@components/Form/DynamicForm.tsx";
import {
DynamicForm,
type DynamicFormFormInit,
} from "@components/Form/DynamicForm.tsx";
import { useDevice } from "@core/stores";
import { Protobuf } from "@meshtastic/sdk";
import { useConfigEditor, useSignal } from "@meshtastic/sdk-react";
@@ -14,13 +17,19 @@ interface AmbientLightingModuleConfigProps {
}
const EMPTY_MODULES_SIGNAL = {
value: {} as { ambientLighting?: Protobuf.ModuleConfig.ModuleConfig_AmbientLightingConfig },
value: {} as {
ambientLighting?: Protobuf.ModuleConfig.ModuleConfig_AmbientLightingConfig;
},
peek: () =>
({}) as { ambientLighting?: Protobuf.ModuleConfig.ModuleConfig_AmbientLightingConfig },
({}) as {
ambientLighting?: Protobuf.ModuleConfig.ModuleConfig_AmbientLightingConfig;
},
subscribe: () => () => {},
} as const;
export const AmbientLighting = ({ onFormInit }: AmbientLightingModuleConfigProps) => {
export const AmbientLighting = ({
onFormInit,
}: AmbientLightingModuleConfigProps) => {
useWaitForConfig({ moduleConfigCase: "ambientLighting" });
const { moduleConfig, getEffectiveModuleConfig } = useDevice();

16
apps/web/src/components/PageComponents/ModuleConfig/Audio.tsx
View File

@@ -1,6 +1,12 @@
import { useWaitForConfig } from "@app/core/hooks/useWaitForConfig";
import { type AudioValidation, AudioValidationSchema } from "@app/validation/moduleConfig/audio.ts";
import { DynamicForm, type DynamicFormFormInit } from "@components/Form/DynamicForm.tsx";
import {
type AudioValidation,
AudioValidationSchema,
} from "@app/validation/moduleConfig/audio.ts";
import {
DynamicForm,
type DynamicFormFormInit,
} from "@components/Form/DynamicForm.tsx";
import { useDevice } from "@core/stores";
import { Protobuf } from "@meshtastic/sdk";
import { useConfigEditor, useSignal } from "@meshtastic/sdk-react";
@@ -12,7 +18,8 @@ interface AudioModuleConfigProps {
const EMPTY_MODULES_SIGNAL = {
value: {} as { audio?: Protobuf.ModuleConfig.ModuleConfig_AudioConfig },
peek: () => ({}) as { audio?: Protobuf.ModuleConfig.ModuleConfig_AudioConfig },
peek: () =>
({}) as { audio?: Protobuf.ModuleConfig.ModuleConfig_AudioConfig },
subscribe: () => () => {},
} as const;
@@ -68,7 +75,8 @@ export const Audio = ({ onFormInit }: AudioModuleConfigProps) => {
label: t("audio.bitrate.label"),
description: t("audio.bitrate.description"),
properties: {
enumValue: Protobuf.ModuleConfig.ModuleConfig_AudioConfig_Audio_Baud,
enumValue:
Protobuf.ModuleConfig.ModuleConfig_AudioConfig_Audio_Baud,
},
},
{

30
apps/web/src/components/PageComponents/ModuleConfig/CannedMessage.tsx
View File

@@ -3,7 +3,10 @@ import {
type CannedMessageValidation,
CannedMessageValidationSchema,
} from "@app/validation/moduleConfig/cannedMessage.ts";
import { DynamicForm, type DynamicFormFormInit } from "@components/Form/DynamicForm.tsx";
import {
DynamicForm,
type DynamicFormFormInit,
} from "@components/Form/DynamicForm.tsx";
import { useDevice } from "@core/stores";
import { Protobuf } from "@meshtastic/sdk";
import { useConfigEditor, useSignal } from "@meshtastic/sdk-react";
@@ -14,12 +17,19 @@ interface CannedMessageModuleConfigProps {
}
const EMPTY_MODULES_SIGNAL = {
value: {} as { cannedMessage?: Protobuf.ModuleConfig.ModuleConfig_CannedMessageConfig },
peek: () => ({}) as { cannedMessage?: Protobuf.ModuleConfig.ModuleConfig_CannedMessageConfig },
value: {} as {
cannedMessage?: Protobuf.ModuleConfig.ModuleConfig_CannedMessageConfig;
},
peek: () =>
({}) as {
cannedMessage?: Protobuf.ModuleConfig.ModuleConfig_CannedMessageConfig;
},
subscribe: () => () => {},
} as const;
export const CannedMessage = ({ onFormInit }: CannedMessageModuleConfigProps) => {
export const CannedMessage = ({
onFormInit,
}: CannedMessageModuleConfigProps) => {
useWaitForConfig({ moduleConfigCase: "cannedMessage" });
const { moduleConfig, getEffectiveModuleConfig } = useDevice();
@@ -89,7 +99,9 @@ export const CannedMessage = ({ onFormInit }: CannedMessageModuleConfigProps) =>
label: t("cannedMessage.inputbrokerEventPress.label"),
description: t("cannedMessage.inputbrokerEventPress.description"),
properties: {
enumValue: Protobuf.ModuleConfig.ModuleConfig_CannedMessageConfig_InputEventChar,
enumValue:
Protobuf.ModuleConfig
.ModuleConfig_CannedMessageConfig_InputEventChar,
},
},
{
@@ -98,7 +110,9 @@ export const CannedMessage = ({ onFormInit }: CannedMessageModuleConfigProps) =>
label: t("cannedMessage.inputbrokerEventCw.label"),
description: t("cannedMessage.inputbrokerEventCw.description"),
properties: {
enumValue: Protobuf.ModuleConfig.ModuleConfig_CannedMessageConfig_InputEventChar,
enumValue:
Protobuf.ModuleConfig
.ModuleConfig_CannedMessageConfig_InputEventChar,
},
},
{
@@ -107,7 +121,9 @@ export const CannedMessage = ({ onFormInit }: CannedMessageModuleConfigProps) =>
label: t("cannedMessage.inputbrokerEventCcw.label"),
description: t("cannedMessage.inputbrokerEventCcw.description"),
properties: {
enumValue: Protobuf.ModuleConfig.ModuleConfig_CannedMessageConfig_InputEventChar,
enumValue:
Protobuf.ModuleConfig
.ModuleConfig_CannedMessageConfig_InputEventChar,
},
},
{

29
apps/web/src/components/PageComponents/ModuleConfig/DetectionSensor.tsx
View File

@@ -3,7 +3,10 @@ import {
type DetectionSensorValidation,
DetectionSensorValidationSchema,
} from "@app/validation/moduleConfig/detectionSensor.ts";
import { DynamicForm, type DynamicFormFormInit } from "@components/Form/DynamicForm.tsx";
import {
DynamicForm,
type DynamicFormFormInit,
} from "@components/Form/DynamicForm.tsx";
import { useDevice } from "@core/stores";
import { Protobuf } from "@meshtastic/sdk";
import { useConfigEditor, useSignal } from "@meshtastic/sdk-react";
@@ -14,13 +17,19 @@ interface DetectionSensorModuleConfigProps {
}
const EMPTY_MODULES_SIGNAL = {
value: {} as { detectionSensor?: Protobuf.ModuleConfig.ModuleConfig_DetectionSensorConfig },
value: {} as {
detectionSensor?: Protobuf.ModuleConfig.ModuleConfig_DetectionSensorConfig;
},
peek: () =>
({}) as { detectionSensor?: Protobuf.ModuleConfig.ModuleConfig_DetectionSensorConfig },
({}) as {
detectionSensor?: Protobuf.ModuleConfig.ModuleConfig_DetectionSensorConfig;
},
subscribe: () => () => {},
} as const;
export const DetectionSensor = ({ onFormInit }: DetectionSensorModuleConfigProps) => {
export const DetectionSensor = ({
onFormInit,
}: DetectionSensorModuleConfigProps) => {
useWaitForConfig({ moduleConfigCase: "detectionSensor" });
const { moduleConfig, getEffectiveModuleConfig } = useDevice();
@@ -64,7 +73,9 @@ export const DetectionSensor = ({ onFormInit }: DetectionSensorModuleConfigProps
type: "number",
name: "minimumBroadcastSecs",
label: t("detectionSensor.minimumBroadcastSecs.label"),
description: t("detectionSensor.minimumBroadcastSecs.description"),
description: t(
"detectionSensor.minimumBroadcastSecs.description",
),
properties: { suffix: t("unit.second.plural") },
},
{
@@ -96,9 +107,13 @@ export const DetectionSensor = ({ onFormInit }: DetectionSensorModuleConfigProps
type: "select",
name: "detectionTriggerType",
label: t("detectionSensor.detectionTriggerType.label"),
description: t("detectionSensor.detectionTriggerType.description"),
description: t(
"detectionSensor.detectionTriggerType.description",
),
properties: {
enumValue: Protobuf.ModuleConfig.ModuleConfig_DetectionSensorConfig_TriggerType,
enumValue:
Protobuf.ModuleConfig
.ModuleConfig_DetectionSensorConfig_TriggerType,
formatEnumName: true,
},
},

33
apps/web/src/components/PageComponents/ModuleConfig/ExternalNotification.tsx
View File

@@ -3,7 +3,10 @@ import {
type ExternalNotificationValidation,
ExternalNotificationValidationSchema,
} from "@app/validation/moduleConfig/externalNotification.ts";
import { DynamicForm, type DynamicFormFormInit } from "@components/Form/DynamicForm.tsx";
import {
DynamicForm,
type DynamicFormFormInit,
} from "@components/Form/DynamicForm.tsx";
import { useDevice } from "@core/stores";
import { Protobuf } from "@meshtastic/sdk";
import { useConfigEditor, useSignal } from "@meshtastic/sdk-react";
@@ -24,7 +27,9 @@ const EMPTY_MODULES_SIGNAL = {
subscribe: () => () => {},
} as const;
export const ExternalNotification = ({ onFormInit }: ExternalNotificationModuleConfigProps) => {
export const ExternalNotification = ({
onFormInit,
}: ExternalNotificationModuleConfigProps) => {
useWaitForConfig({ moduleConfigCase: "externalNotification" });
const { moduleConfig, getEffectiveModuleConfig } = useDevice();
@@ -56,7 +61,9 @@ export const ExternalNotification = ({ onFormInit }: ExternalNotificationModuleC
fieldGroups={[
{
label: t("externalNotification.externalNotificationConfig.label"),
description: t("externalNotification.externalNotificationConfig.description"),
description: t(
"externalNotification.externalNotificationConfig.description",
),
fields: [
{
type: "toggle",
@@ -68,7 +75,9 @@ export const ExternalNotification = ({ onFormInit }: ExternalNotificationModuleC
},
{
label: t("externalNotification.notificationsOnMessage.label"),
description: t("externalNotification.notificationsOnMessage.description"),
description: t(
"externalNotification.notificationsOnMessage.description",
),
fields: [
{
type: "toggle",
@@ -80,19 +89,25 @@ export const ExternalNotification = ({ onFormInit }: ExternalNotificationModuleC
type: "toggle",
name: "alertMessageBuzzer",
label: t("externalNotification.alertMessageBuzzer.label"),
description: t("externalNotification.alertMessageBuzzer.description"),
description: t(
"externalNotification.alertMessageBuzzer.description",
),
},
{
type: "toggle",
name: "alertMessageVibra",
label: t("externalNotification.alertMessageVibra.label"),
description: t("externalNotification.alertMessageVibra.description"),
description: t(
"externalNotification.alertMessageVibra.description",
),
},
],
},
{
label: t("externalNotification.notificationsOnAlert.label"),
description: t("externalNotification.notificationsOnAlert.description"),
description: t(
"externalNotification.notificationsOnAlert.description",
),
fields: [
{
type: "toggle",
@@ -104,7 +119,9 @@ export const ExternalNotification = ({ onFormInit }: ExternalNotificationModuleC
type: "toggle",
name: "alertBellBuzzer",
label: t("externalNotification.alertBellBuzzer.label"),
description: t("externalNotification.alertBellBuzzer.description"),
description: t(
"externalNotification.alertBellBuzzer.description",
),
},
{
type: "toggle",

76
apps/web/src/components/PageComponents/ModuleConfig/MQTT.tsx
View File

@@ -1,7 +1,13 @@
import { useWaitForConfig } from "@app/core/hooks/useWaitForConfig";
import { type MqttValidation, MqttValidationSchema } from "@app/validation/moduleConfig/mqtt.ts";
import {
type MqttValidation,
MqttValidationSchema,
} from "@app/validation/moduleConfig/mqtt.ts";
import { create } from "@bufbuild/protobuf";
import { DynamicForm, type DynamicFormFormInit } from "@components/Form/DynamicForm.tsx";
import {
DynamicForm,
type DynamicFormFormInit,
} from "@components/Form/DynamicForm.tsx";
import { useDevice } from "@core/stores";
import { Protobuf } from "@meshtastic/sdk";
import { useConfigEditor, useSignal } from "@meshtastic/sdk-react";
@@ -17,7 +23,9 @@ const EMPTY_MODULES_SIGNAL = {
subscribe: () => () => {},
} as const;
const populateDefaults = (cfg: Protobuf.ModuleConfig.ModuleConfig_MQTTConfig | undefined) =>
const populateDefaults = (
cfg: Protobuf.ModuleConfig.ModuleConfig_MQTTConfig | undefined,
) =>
cfg
? {
...cfg,
@@ -38,7 +46,9 @@ export const MQTT = ({ onFormInit }: MqttModuleConfigProps) => {
const effectiveMqtt =
modules.mqtt ??
(getEffectiveModuleConfig("mqtt") as Protobuf.ModuleConfig.ModuleConfig_MQTTConfig | undefined);
(getEffectiveModuleConfig("mqtt") as
| Protobuf.ModuleConfig.ModuleConfig_MQTTConfig
| undefined);
const { t } = useTranslation("moduleConfig");
@@ -60,20 +70,37 @@ export const MQTT = ({ onFormInit }: MqttModuleConfigProps) => {
const positionPrecisionOptions =
config.display?.units === 0
? {
[t("mqtt.mapReportSettings.positionPrecision.options.metric_km23")]: 10,
[t("mqtt.mapReportSettings.positionPrecision.options.metric_km12")]: 11,
[t("mqtt.mapReportSettings.positionPrecision.options.metric_km5_8")]: 12,
[t("mqtt.mapReportSettings.positionPrecision.options.metric_km2_9")]: 13,
[t("mqtt.mapReportSettings.positionPrecision.options.metric_km1_5")]: 14,
[t("mqtt.mapReportSettings.positionPrecision.options.metric_m700")]: 15,
[t("mqtt.mapReportSettings.positionPrecision.options.metric_km23")]:
10,
[t("mqtt.mapReportSettings.positionPrecision.options.metric_km12")]:
11,
[t("mqtt.mapReportSettings.positionPrecision.options.metric_km5_8")]:
12,
[t("mqtt.mapReportSettings.positionPrecision.options.metric_km2_9")]:
13,
[t("mqtt.mapReportSettings.positionPrecision.options.metric_km1_5")]:
14,
[t("mqtt.mapReportSettings.positionPrecision.options.metric_m700")]:
15,
}
: {
[t("mqtt.mapReportSettings.positionPrecision.options.imperial_mi15")]: 10,
[t("mqtt.mapReportSettings.positionPrecision.options.imperial_mi7_3")]: 11,
[t("mqtt.mapReportSettings.positionPrecision.options.imperial_mi3_6")]: 12,
[t("mqtt.mapReportSettings.positionPrecision.options.imperial_mi1_8")]: 13,
[t("mqtt.mapReportSettings.positionPrecision.options.imperial_mi0_9")]: 14,
[t("mqtt.mapReportSettings.positionPrecision.options.imperial_mi0_5")]: 15,
[t("mqtt.mapReportSettings.positionPrecision.options.imperial_mi15")]:
10,
[t(
"mqtt.mapReportSettings.positionPrecision.options.imperial_mi7_3",
)]: 11,
[t(
"mqtt.mapReportSettings.positionPrecision.options.imperial_mi3_6",
)]: 12,
[t(
"mqtt.mapReportSettings.positionPrecision.options.imperial_mi1_8",
)]: 13,
[t(
"mqtt.mapReportSettings.positionPrecision.options.imperial_mi0_9",
)]: 14,
[t(
"mqtt.mapReportSettings.positionPrecision.options.imperial_mi0_5",
)]: 15,
};
return (
@@ -167,14 +194,21 @@ export const MQTT = ({ onFormInit }: MqttModuleConfigProps) => {
type: "toggle",
name: "mapReportSettings.shouldReportLocation",
label: t("mqtt.mapReportSettings.shouldReportLocation.label"),
description: t("mqtt.mapReportSettings.shouldReportLocation.description"),
disabledBy: [{ fieldName: "enabled" }, { fieldName: "mapReportingEnabled" }],
description: t(
"mqtt.mapReportSettings.shouldReportLocation.description",
),
disabledBy: [
{ fieldName: "enabled" },
{ fieldName: "mapReportingEnabled" },
],
},
{
type: "select",
name: "mapReportSettings.positionPrecision",
label: t("mqtt.mapReportSettings.positionPrecision.label"),
description: t("mqtt.mapReportSettings.positionPrecision.description"),
description: t(
"mqtt.mapReportSettings.positionPrecision.description",
),
properties: { enumValue: positionPrecisionOptions },
disabledBy: [
{ fieldName: "enabled" },
@@ -186,7 +220,9 @@ export const MQTT = ({ onFormInit }: MqttModuleConfigProps) => {
type: "number",
name: "mapReportSettings.publishIntervalSecs",
label: t("mqtt.mapReportSettings.publishIntervalSecs.label"),
description: t("mqtt.mapReportSettings.publishIntervalSecs.description"),
description: t(
"mqtt.mapReportSettings.publishIntervalSecs.description",
),
properties: { suffix: t("unit.second.plural") },
disabledBy: [
{ fieldName: "enabled" },

14
apps/web/src/components/PageComponents/ModuleConfig/NeighborInfo.tsx
View File

@@ -3,7 +3,10 @@ import {
type NeighborInfoValidation,
NeighborInfoValidationSchema,
} from "@app/validation/moduleConfig/neighborInfo.ts";
import { DynamicForm, type DynamicFormFormInit } from "@components/Form/DynamicForm.tsx";
import {
DynamicForm,
type DynamicFormFormInit,
} from "@components/Form/DynamicForm.tsx";
import { useDevice } from "@core/stores";
import { Protobuf } from "@meshtastic/sdk";
import { useConfigEditor, useSignal } from "@meshtastic/sdk-react";
@@ -14,8 +17,13 @@ interface NeighborInfoModuleConfigProps {
}
const EMPTY_MODULES_SIGNAL = {
value: {} as { neighborInfo?: Protobuf.ModuleConfig.ModuleConfig_NeighborInfoConfig },
peek: () => ({}) as { neighborInfo?: Protobuf.ModuleConfig.ModuleConfig_NeighborInfoConfig },
value: {} as {
neighborInfo?: Protobuf.ModuleConfig.ModuleConfig_NeighborInfoConfig;
},
peek: () =>
({}) as {
neighborInfo?: Protobuf.ModuleConfig.ModuleConfig_NeighborInfoConfig;
},
subscribe: () => () => {},
} as const;

14
apps/web/src/components/PageComponents/ModuleConfig/Paxcounter.tsx
View File

@@ -3,7 +3,10 @@ import {
type PaxcounterValidation,
PaxcounterValidationSchema,
} from "@app/validation/moduleConfig/paxcounter.ts";
import { DynamicForm, type DynamicFormFormInit } from "@components/Form/DynamicForm.tsx";
import {
DynamicForm,
type DynamicFormFormInit,
} from "@components/Form/DynamicForm.tsx";
import { useDevice } from "@core/stores";
import { Protobuf } from "@meshtastic/sdk";
import { useConfigEditor, useSignal } from "@meshtastic/sdk-react";
@@ -14,8 +17,13 @@ interface PaxcounterModuleConfigProps {
}
const EMPTY_MODULES_SIGNAL = {
value: {} as { paxcounter?: Protobuf.ModuleConfig.ModuleConfig_PaxcounterConfig },
peek: () => ({}) as { paxcounter?: Protobuf.ModuleConfig.ModuleConfig_PaxcounterConfig },
value: {} as {
paxcounter?: Protobuf.ModuleConfig.ModuleConfig_PaxcounterConfig;
},
peek: () =>
({}) as {
paxcounter?: Protobuf.ModuleConfig.ModuleConfig_PaxcounterConfig;
},
subscribe: () => () => {},
} as const;

12
apps/web/src/components/PageComponents/ModuleConfig/RangeTest.tsx
View File

@@ -3,7 +3,10 @@ import {
type RangeTestValidation,
RangeTestValidationSchema,
} from "@app/validation/moduleConfig/rangeTest.ts";
import { DynamicForm, type DynamicFormFormInit } from "@components/Form/DynamicForm.tsx";
import {
DynamicForm,
type DynamicFormFormInit,
} from "@components/Form/DynamicForm.tsx";
import { useDevice } from "@core/stores";
import { Protobuf } from "@meshtastic/sdk";
import { useConfigEditor, useSignal } from "@meshtastic/sdk-react";
@@ -14,8 +17,11 @@ interface RangeTestModuleConfigProps {
}
const EMPTY_MODULES_SIGNAL = {
value: {} as { rangeTest?: Protobuf.ModuleConfig.ModuleConfig_RangeTestConfig },
peek: () => ({}) as { rangeTest?: Protobuf.ModuleConfig.ModuleConfig_RangeTestConfig },
value: {} as {
rangeTest?: Protobuf.ModuleConfig.ModuleConfig_RangeTestConfig;
},
peek: () =>
({}) as { rangeTest?: Protobuf.ModuleConfig.ModuleConfig_RangeTestConfig },
subscribe: () => () => {},
} as const;

16
apps/web/src/components/PageComponents/ModuleConfig/RemoteHardware.tsx
View File

@@ -3,7 +3,10 @@ import {
type RemoteHardwareValidation,
RemoteHardwareValidationSchema,
} from "@app/validation/moduleConfig/remoteHardware.ts";
import { DynamicForm, type DynamicFormFormInit } from "@components/Form/DynamicForm.tsx";
import {
DynamicForm,
type DynamicFormFormInit,
} from "@components/Form/DynamicForm.tsx";
import { useDevice } from "@core/stores";
import { deepCompareConfig } from "@core/utils/deepCompareConfig.ts";
import { useTranslation } from "react-i18next";
@@ -12,10 +15,13 @@ interface RemoteHardwareModuleConfigProps {
onFormInit: DynamicFormFormInit<RemoteHardwareValidation>;
}
export const RemoteHardware = ({ onFormInit }: RemoteHardwareModuleConfigProps) => {
export const RemoteHardware = ({
onFormInit,
}: RemoteHardwareModuleConfigProps) => {
useWaitForConfig({ moduleConfigCase: "remoteHardware" });
const { moduleConfig, setChange, getEffectiveModuleConfig, removeChange } = useDevice();
const { moduleConfig, setChange, getEffectiveModuleConfig, removeChange } =
useDevice();
const { t } = useTranslation("moduleConfig");
const onSubmit = (data: RemoteHardwareValidation) => {
@@ -53,7 +59,9 @@ export const RemoteHardware = ({ onFormInit }: RemoteHardwareModuleConfigProps)
type: "toggle",
name: "allowUndefinedPinAccess",
label: t("remoteHardware.allowUndefinedPinAccess.label"),
description: t("remoteHardware.allowUndefinedPinAccess.description"),
description: t(
"remoteHardware.allowUndefinedPinAccess.description",
),
},
],
},

14
apps/web/src/components/PageComponents/ModuleConfig/Serial.tsx
View File

@@ -3,7 +3,10 @@ import {
type SerialValidation,
SerialValidationSchema,
} from "@app/validation/moduleConfig/serial.ts";
import { DynamicForm, type DynamicFormFormInit } from "@components/Form/DynamicForm.tsx";
import {
DynamicForm,
type DynamicFormFormInit,
} from "@components/Form/DynamicForm.tsx";
import { useDevice } from "@core/stores";
import { Protobuf } from "@meshtastic/sdk";
import { useConfigEditor, useSignal } from "@meshtastic/sdk-react";
@@ -15,7 +18,8 @@ interface SerialModuleConfigProps {
const EMPTY_MODULES_SIGNAL = {
value: {} as { serial?: Protobuf.ModuleConfig.ModuleConfig_SerialConfig },
peek: () => ({}) as { serial?: Protobuf.ModuleConfig.ModuleConfig_SerialConfig },
peek: () =>
({}) as { serial?: Protobuf.ModuleConfig.ModuleConfig_SerialConfig },
subscribe: () => () => {},
} as const;
@@ -83,7 +87,8 @@ export const Serial = ({ onFormInit }: SerialModuleConfigProps) => {
label: t("serial.baud.label"),
description: t("serial.baud.description"),
properties: {
enumValue: Protobuf.ModuleConfig.ModuleConfig_SerialConfig_Serial_Baud,
enumValue:
Protobuf.ModuleConfig.ModuleConfig_SerialConfig_Serial_Baud,
},
},
{
@@ -99,7 +104,8 @@ export const Serial = ({ onFormInit }: SerialModuleConfigProps) => {
label: t("serial.mode.label"),
description: t("serial.mode.description"),
properties: {
enumValue: Protobuf.ModuleConfig.ModuleConfig_SerialConfig_Serial_Mode,
enumValue:
Protobuf.ModuleConfig.ModuleConfig_SerialConfig_Serial_Mode,
formatEnumName: true,
},
},

18
apps/web/src/components/PageComponents/ModuleConfig/StatusMessage.tsx
View File

@@ -3,7 +3,10 @@ import {
type StatusMessageValidation,
StatusMessageValidationSchema,
} from "@app/validation/moduleConfig/statusMessage.ts";
import { DynamicForm, type DynamicFormFormInit } from "@components/Form/DynamicForm.tsx";
import {
DynamicForm,
type DynamicFormFormInit,
} from "@components/Form/DynamicForm.tsx";
import { useDevice } from "@core/stores";
import { deepCompareConfig } from "@core/utils/deepCompareConfig.ts";
import { useTranslation } from "react-i18next";
@@ -12,10 +15,13 @@ interface StatusMessageModuleConfigProps {
onFormInit: DynamicFormFormInit<StatusMessageValidation>;
}
export const StatusMessage = ({ onFormInit }: StatusMessageModuleConfigProps) => {
export const StatusMessage = ({
onFormInit,
}: StatusMessageModuleConfigProps) => {
useWaitForConfig({ moduleConfigCase: "statusmessage" });
const { moduleConfig, setChange, getEffectiveModuleConfig, removeChange } = useDevice();
const { moduleConfig, setChange, getEffectiveModuleConfig, removeChange } =
useDevice();
const { t } = useTranslation("moduleConfig");
const onSubmit = (data: StatusMessageValidation) => {
@@ -24,7 +30,11 @@ export const StatusMessage = ({ onFormInit }: StatusMessageModuleConfigProps) =>
return;
}
setChange({ type: "moduleConfig", variant: "statusmessage" }, data, moduleConfig.statusmessage);
setChange(
{ type: "moduleConfig", variant: "statusmessage" },
data,
moduleConfig.statusmessage,
);
};
return (

14
apps/web/src/components/PageComponents/ModuleConfig/StoreForward.tsx
View File

@@ -3,7 +3,10 @@ import {
type StoreForwardValidation,
StoreForwardValidationSchema,
} from "@app/validation/moduleConfig/storeForward.ts";
import { DynamicForm, type DynamicFormFormInit } from "@components/Form/DynamicForm.tsx";
import {
DynamicForm,
type DynamicFormFormInit,
} from "@components/Form/DynamicForm.tsx";
import { useDevice } from "@core/stores";
import { Protobuf } from "@meshtastic/sdk";
import { useConfigEditor, useSignal } from "@meshtastic/sdk-react";
@@ -14,8 +17,13 @@ interface StoreForwardModuleConfigProps {
}
const EMPTY_MODULES_SIGNAL = {
value: {} as { storeForward?: Protobuf.ModuleConfig.ModuleConfig_StoreForwardConfig },
peek: () => ({}) as { storeForward?: Protobuf.ModuleConfig.ModuleConfig_StoreForwardConfig },
value: {} as {
storeForward?: Protobuf.ModuleConfig.ModuleConfig_StoreForwardConfig;
},
peek: () =>
({}) as {
storeForward?: Protobuf.ModuleConfig.ModuleConfig_StoreForwardConfig;
},
subscribe: () => () => {},
} as const;

13
apps/web/src/components/PageComponents/ModuleConfig/Tak.tsx
View File

@@ -1,6 +1,12 @@
import { useWaitForConfig } from "@app/core/hooks/useWaitForConfig";
import { type TakValidation, TakValidationSchema } from "@app/validation/moduleConfig/tak.ts";
import { DynamicForm, type DynamicFormFormInit } from "@components/Form/DynamicForm.tsx";
import {
type TakValidation,
TakValidationSchema,
} from "@app/validation/moduleConfig/tak.ts";
import {
DynamicForm,
type DynamicFormFormInit,
} from "@components/Form/DynamicForm.tsx";
import { useDevice } from "@core/stores";
import { deepCompareConfig } from "@core/utils/deepCompareConfig.ts";
import { Protobuf } from "@meshtastic/core";
@@ -13,7 +19,8 @@ interface TakModuleConfigProps {
export const Tak = ({ onFormInit }: TakModuleConfigProps) => {
useWaitForConfig({ moduleConfigCase: "tak" });
const { moduleConfig, setChange, getEffectiveModuleConfig, removeChange } = useDevice();
const { moduleConfig, setChange, getEffectiveModuleConfig, removeChange } =
useDevice();
const { t } = useTranslation("moduleConfig");
const onSubmit = (data: TakValidation) => {

31
apps/web/src/components/PageComponents/ModuleConfig/Telemetry.tsx
View File

@@ -3,7 +3,10 @@ import {
type TelemetryValidation,
TelemetryValidationSchema,
} from "@app/validation/moduleConfig/telemetry.ts";
import { DynamicForm, type DynamicFormFormInit } from "@components/Form/DynamicForm.tsx";
import {
DynamicForm,
type DynamicFormFormInit,
} from "@components/Form/DynamicForm.tsx";
import { useDevice } from "@core/stores";
import { Protobuf } from "@meshtastic/sdk";
import { useConfigEditor, useSignal } from "@meshtastic/sdk-react";
@@ -14,8 +17,11 @@ interface TelemetryModuleConfigProps {
}
const EMPTY_MODULES_SIGNAL = {
value: {} as { telemetry?: Protobuf.ModuleConfig.ModuleConfig_TelemetryConfig },
peek: () => ({}) as { telemetry?: Protobuf.ModuleConfig.ModuleConfig_TelemetryConfig },
value: {} as {
telemetry?: Protobuf.ModuleConfig.ModuleConfig_TelemetryConfig;
},
peek: () =>
({}) as { telemetry?: Protobuf.ModuleConfig.ModuleConfig_TelemetryConfig },
subscribe: () => () => {},
} as const;
@@ -56,7 +62,12 @@ export const Telemetry = ({ onFormInit }: TelemetryModuleConfigProps) => {
// device_telemetry_enabled is only writable on firmware ≥ v2.7.12. Hide
// the toggle on older firmware so we don't push a value the device will
// ignore.
const canToggleTelemetry = firmwareAtLeast(metadata.get(0)?.firmwareVersion, 2, 7, 12);
const canToggleTelemetry = firmwareAtLeast(
metadata.get(0)?.firmwareVersion,
2,
7,
12,
);
const { t } = useTranslation("moduleConfig");
@@ -86,7 +97,9 @@ export const Telemetry = ({ onFormInit }: TelemetryModuleConfigProps) => {
type: "toggle" as const,
name: "deviceTelemetryEnabled" as const,
label: t("telemetry.deviceTelemetryEnabled.label"),
description: t("telemetry.deviceTelemetryEnabled.description"),
description: t(
"telemetry.deviceTelemetryEnabled.description",
),
},
]
: []),
@@ -101,7 +114,9 @@ export const Telemetry = ({ onFormInit }: TelemetryModuleConfigProps) => {
type: "toggle",
name: "environmentMeasurementEnabled",
label: t("telemetry.environmentMeasurementEnabled.label"),
description: t("telemetry.environmentMeasurementEnabled.description"),
description: t(
"telemetry.environmentMeasurementEnabled.description",
),
},
{
type: "number",
@@ -120,7 +135,9 @@ export const Telemetry = ({ onFormInit }: TelemetryModuleConfigProps) => {
type: "toggle",
name: "environmentDisplayFahrenheit",
label: t("telemetry.environmentDisplayFahrenheit.label"),
description: t("telemetry.environmentDisplayFahrenheit.description"),
description: t(
"telemetry.environmentDisplayFahrenheit.description",
),
},
{
type: "toggle",

60
apps/web/src/components/PageComponents/ModuleConfig/TrafficManagement.tsx
View File

@@ -3,7 +3,10 @@ import {
type TrafficManagementValidation,
TrafficManagementValidationSchema,
} from "@app/validation/moduleConfig/trafficManagement.ts";
import { DynamicForm, type DynamicFormFormInit } from "@components/Form/DynamicForm.tsx";
import {
DynamicForm,
type DynamicFormFormInit,
} from "@components/Form/DynamicForm.tsx";
import { useDevice } from "@core/stores";
import { deepCompareConfig } from "@core/utils/deepCompareConfig.ts";
import { useTranslation } from "react-i18next";
@@ -12,10 +15,13 @@ interface TrafficManagementModuleConfigProps {
onFormInit: DynamicFormFormInit<TrafficManagementValidation>;
}
export const TrafficManagement = ({ onFormInit }: TrafficManagementModuleConfigProps) => {
export const TrafficManagement = ({
onFormInit,
}: TrafficManagementModuleConfigProps) => {
useWaitForConfig({ moduleConfigCase: "trafficManagement" });
const { moduleConfig, setChange, getEffectiveModuleConfig, removeChange } = useDevice();
const { moduleConfig, setChange, getEffectiveModuleConfig, removeChange } =
useDevice();
const { t } = useTranslation("moduleConfig");
const onSubmit = (data: TrafficManagementValidation) => {
@@ -53,19 +59,25 @@ export const TrafficManagement = ({ onFormInit }: TrafficManagementModuleConfigP
type: "toggle",
name: "positionDedupEnabled",
label: t("trafficManagement.positionDedupEnabled.label"),
description: t("trafficManagement.positionDedupEnabled.description"),
description: t(
"trafficManagement.positionDedupEnabled.description",
),
},
{
type: "number",
name: "positionPrecisionBits",
label: t("trafficManagement.positionPrecisionBits.label"),
description: t("trafficManagement.positionPrecisionBits.description"),
description: t(
"trafficManagement.positionPrecisionBits.description",
),
},
{
type: "number",
name: "positionMinIntervalSecs",
label: t("trafficManagement.positionMinIntervalSecs.label"),
description: t("trafficManagement.positionMinIntervalSecs.description"),
description: t(
"trafficManagement.positionMinIntervalSecs.description",
),
properties: {
suffix: t("unit.second.plural"),
},
@@ -74,13 +86,17 @@ export const TrafficManagement = ({ onFormInit }: TrafficManagementModuleConfigP
type: "toggle",
name: "nodeinfoDirectResponse",
label: t("trafficManagement.nodeinfoDirectResponse.label"),
description: t("trafficManagement.nodeinfoDirectResponse.description"),
description: t(
"trafficManagement.nodeinfoDirectResponse.description",
),
},
{
type: "number",
name: "nodeinfoDirectResponseMaxHops",
label: t("trafficManagement.nodeinfoDirectResponseMaxHops.label"),
description: t("trafficManagement.nodeinfoDirectResponseMaxHops.description"),
description: t(
"trafficManagement.nodeinfoDirectResponseMaxHops.description",
),
},
{
type: "toggle",
@@ -92,7 +108,9 @@ export const TrafficManagement = ({ onFormInit }: TrafficManagementModuleConfigP
type: "number",
name: "rateLimitWindowSecs",
label: t("trafficManagement.rateLimitWindowSecs.label"),
description: t("trafficManagement.rateLimitWindowSecs.description"),
description: t(
"trafficManagement.rateLimitWindowSecs.description",
),
properties: {
suffix: t("unit.second.plural"),
},
@@ -101,37 +119,49 @@ export const TrafficManagement = ({ onFormInit }: TrafficManagementModuleConfigP
type: "number",
name: "rateLimitMaxPackets",
label: t("trafficManagement.rateLimitMaxPackets.label"),
description: t("trafficManagement.rateLimitMaxPackets.description"),
description: t(
"trafficManagement.rateLimitMaxPackets.description",
),
},
{
type: "toggle",
name: "dropUnknownEnabled",
label: t("trafficManagement.dropUnknownEnabled.label"),
description: t("trafficManagement.dropUnknownEnabled.description"),
description: t(
"trafficManagement.dropUnknownEnabled.description",
),
},
{
type: "number",
name: "unknownPacketThreshold",
label: t("trafficManagement.unknownPacketThreshold.label"),
description: t("trafficManagement.unknownPacketThreshold.description"),
description: t(
"trafficManagement.unknownPacketThreshold.description",
),
},
{
type: "toggle",
name: "exhaustHopTelemetry",
label: t("trafficManagement.exhaustHopTelemetry.label"),
description: t("trafficManagement.exhaustHopTelemetry.description"),
description: t(
"trafficManagement.exhaustHopTelemetry.description",
),
},
{
type: "toggle",
name: "exhaustHopPosition",
label: t("trafficManagement.exhaustHopPosition.label"),
description: t("trafficManagement.exhaustHopPosition.description"),
description: t(
"trafficManagement.exhaustHopPosition.description",
),
},
{
type: "toggle",
name: "routerPreserveHops",
label: t("trafficManagement.routerPreserveHops.label"),
description: t("trafficManagement.routerPreserveHops.description"),
description: t(
"trafficManagement.routerPreserveHops.description",
),
},
],
},

14
apps/web/src/components/PageComponents/Settings/Bluetooth.tsx
View File

@@ -3,7 +3,10 @@ import {
type BluetoothValidation,
BluetoothValidationSchema,
} from "@app/validation/config/bluetooth.ts";
import { DynamicForm, type DynamicFormFormInit } from "@components/Form/DynamicForm.tsx";
import {
DynamicForm,
type DynamicFormFormInit,
} from "@components/Form/DynamicForm.tsx";
import { useDevice } from "@core/stores";
import { Protobuf } from "@meshtastic/sdk";
import { useConfigEditor, useSignal } from "@meshtastic/sdk-react";
@@ -27,13 +30,18 @@ export const Bluetooth = ({ onFormInit }: BluetoothConfigProps) => {
const radio = useSignal(editor?.radio ?? EMPTY_RADIO_SIGNAL);
const effective =
radio.bluetooth ??
(getEffectiveConfig("bluetooth") as Protobuf.Config.Config_BluetoothConfig | undefined);
(getEffectiveConfig("bluetooth") as
| Protobuf.Config.Config_BluetoothConfig
| undefined);
const { t } = useTranslation("config");
const onSubmit = (data: BluetoothValidation) => {
if (!editor) return;
editor.setRadioSection("bluetooth", data as unknown as Protobuf.Config.Config_BluetoothConfig);
editor.setRadioSection(
"bluetooth",
data as unknown as Protobuf.Config.Config_BluetoothConfig,
);
};
return (

19
apps/web/src/components/PageComponents/Settings/Device/index.tsx
View File

@@ -1,7 +1,13 @@
import { useWaitForConfig } from "@app/core/hooks/useWaitForConfig";
import { type DeviceValidation, DeviceValidationSchema } from "@app/validation/config/device.ts";
import {
type DeviceValidation,
DeviceValidationSchema,
} from "@app/validation/config/device.ts";
import { useUnsafeRolesDialog } from "@components/Dialog/UnsafeRolesDialog/useUnsafeRolesDialog.ts";
import { DynamicForm, type DynamicFormFormInit } from "@components/Form/DynamicForm.tsx";
import {
DynamicForm,
type DynamicFormFormInit,
} from "@components/Form/DynamicForm.tsx";
import { useDevice } from "@core/stores";
import { Protobuf } from "@meshtastic/sdk";
import { useConfigEditor, useSignal } from "@meshtastic/sdk-react";
@@ -25,14 +31,19 @@ export const Device = ({ onFormInit }: DeviceConfigProps) => {
const radio = useSignal(editor?.radio ?? EMPTY_RADIO_SIGNAL);
const effective =
radio.device ??
(getEffectiveConfig("device") as Protobuf.Config.Config_DeviceConfig | undefined);
(getEffectiveConfig("device") as
| Protobuf.Config.Config_DeviceConfig
| undefined);
const { t } = useTranslation("config");
const { validateRoleSelection } = useUnsafeRolesDialog();
const onSubmit = (data: DeviceValidation) => {
if (!editor) return;
editor.setRadioSection("device", data as unknown as Protobuf.Config.Config_DeviceConfig);
editor.setRadioSection(
"device",
data as unknown as Protobuf.Config.Config_DeviceConfig,
);
};
return (

22
apps/web/src/components/PageComponents/Settings/Display.tsx
View File

@@ -1,6 +1,12 @@
import { useWaitForConfig } from "@app/core/hooks/useWaitForConfig";
import { type DisplayValidation, DisplayValidationSchema } from "@app/validation/config/display.ts";
import { DynamicForm, type DynamicFormFormInit } from "@components/Form/DynamicForm.tsx";
import {
type DisplayValidation,
DisplayValidationSchema,
} from "@app/validation/config/display.ts";
import {
DynamicForm,
type DynamicFormFormInit,
} from "@components/Form/DynamicForm.tsx";
import { useDevice } from "@core/stores";
import { Protobuf } from "@meshtastic/sdk";
import { useConfigEditor, useSignal } from "@meshtastic/sdk-react";
@@ -23,13 +29,18 @@ export const Display = ({ onFormInit }: DisplayConfigProps) => {
const radio = useSignal(editor?.radio ?? EMPTY_RADIO_SIGNAL);
const effective =
radio.display ??
(getEffectiveConfig("display") as Protobuf.Config.Config_DisplayConfig | undefined);
(getEffectiveConfig("display") as
| Protobuf.Config.Config_DisplayConfig
| undefined);
const { t } = useTranslation("config");
const onSubmit = (data: DisplayValidation) => {
if (!editor) return;
editor.setRadioSection("display", data as unknown as Protobuf.Config.Config_DisplayConfig);
editor.setRadioSection(
"display",
data as unknown as Protobuf.Config.Config_DisplayConfig,
);
};
return (
@@ -129,7 +140,8 @@ export const Display = ({ onFormInit }: DisplayConfigProps) => {
label: t("display.compassOrientation.label"),
description: t("display.compassOrientation.description"),
properties: {
enumValue: Protobuf.Config.Config_DisplayConfig_CompassOrientation,
enumValue:
Protobuf.Config.Config_DisplayConfig_CompassOrientation,
formatEnumName: true,
},
},

20
apps/web/src/components/PageComponents/Settings/LoRa.tsx
View File

@@ -1,6 +1,12 @@
import { useWaitForConfig } from "@app/core/hooks/useWaitForConfig";
import { type LoRaValidation, LoRaValidationSchema } from "@app/validation/config/lora.ts";
import { DynamicForm, type DynamicFormFormInit } from "@components/Form/DynamicForm.tsx";
import {
type LoRaValidation,
LoRaValidationSchema,
} from "@app/validation/config/lora.ts";
import {
DynamicForm,
type DynamicFormFormInit,
} from "@components/Form/DynamicForm.tsx";
import { useDevice } from "@core/stores";
import { Protobuf } from "@meshtastic/sdk";
import { useConfigEditor, useSignal } from "@meshtastic/sdk-react";
@@ -24,13 +30,19 @@ export const LoRa = ({ onFormInit }: LoRaConfigProps) => {
const radio = useSignal(editor?.radio ?? EMPTY_RADIO_SIGNAL);
const effectiveLora =
radio.lora ?? (getEffectiveConfig("lora") as Protobuf.Config.Config_LoRaConfig | undefined);
radio.lora ??
(getEffectiveConfig("lora") as
| Protobuf.Config.Config_LoRaConfig
| undefined);
const { t } = useTranslation("config");
const onSubmit = (data: LoRaValidation) => {
if (!editor) return;
editor.setRadioSection("lora", data as unknown as Protobuf.Config.Config_LoRaConfig);
editor.setRadioSection(
"lora",
data as unknown as Protobuf.Config.Config_LoRaConfig,
);
};
return (

58
apps/web/src/components/PageComponents/Settings/Network/index.tsx
View File

@@ -1,9 +1,18 @@
import { useWaitForConfig } from "@app/core/hooks/useWaitForConfig";
import { type NetworkValidation, NetworkValidationSchema } from "@app/validation/config/network.ts";
import {
type NetworkValidation,
NetworkValidationSchema,
} from "@app/validation/config/network.ts";
import { create } from "@bufbuild/protobuf";
import { DynamicForm, type DynamicFormFormInit } from "@components/Form/DynamicForm.tsx";
import {
DynamicForm,
type DynamicFormFormInit,
} from "@components/Form/DynamicForm.tsx";
import { useDevice } from "@core/stores";
import { convertIntToIpAddress, convertIpAddressToInt } from "@core/utils/ip.ts";
import {
convertIntToIpAddress,
convertIpAddressToInt,
} from "@core/utils/ip.ts";
import { Protobuf } from "@meshtastic/sdk";
import { useConfigEditor, useSignal } from "@meshtastic/sdk-react";
import { useTranslation } from "react-i18next";
@@ -18,7 +27,9 @@ const EMPTY_RADIO_SIGNAL = {
subscribe: () => () => {},
} as const;
const toFormShape = (cfg: Protobuf.Config.Config_NetworkConfig | undefined) => ({
const toFormShape = (
cfg: Protobuf.Config.Config_NetworkConfig | undefined,
) => ({
...cfg,
ipv4Config: {
ip: convertIntToIpAddress(cfg?.ipv4Config?.ip ?? 0),
@@ -27,7 +38,8 @@ const toFormShape = (cfg: Protobuf.Config.Config_NetworkConfig | undefined) => (
dns: convertIntToIpAddress(cfg?.ipv4Config?.dns ?? 0),
},
enabledProtocols:
cfg?.enabledProtocols ?? Protobuf.Config.Config_NetworkConfig_ProtocolFlags.NO_BROADCAST,
cfg?.enabledProtocols ??
Protobuf.Config.Config_NetworkConfig_ProtocolFlags.NO_BROADCAST,
});
export const Network = ({ onFormInit }: NetworkConfigProps) => {
@@ -38,7 +50,9 @@ export const Network = ({ onFormInit }: NetworkConfigProps) => {
const radio = useSignal(editor?.radio ?? EMPTY_RADIO_SIGNAL);
const effective =
radio.network ??
(getEffectiveConfig("network") as Protobuf.Config.Config_NetworkConfig | undefined);
(getEffectiveConfig("network") as
| Protobuf.Config.Config_NetworkConfig
| undefined);
const { t } = useTranslation("config");
@@ -46,14 +60,20 @@ export const Network = ({ onFormInit }: NetworkConfigProps) => {
if (!editor) return;
const payload = {
...data,
ipv4Config: create(Protobuf.Config.Config_NetworkConfig_IpV4ConfigSchema, {
ip: convertIpAddressToInt(data.ipv4Config?.ip ?? ""),
gateway: convertIpAddressToInt(data.ipv4Config?.gateway ?? ""),
subnet: convertIpAddressToInt(data.ipv4Config?.subnet ?? ""),
dns: convertIpAddressToInt(data.ipv4Config?.dns ?? ""),
}),
ipv4Config: create(
Protobuf.Config.Config_NetworkConfig_IpV4ConfigSchema,
{
ip: convertIpAddressToInt(data.ipv4Config?.ip ?? ""),
gateway: convertIpAddressToInt(data.ipv4Config?.gateway ?? ""),
subnet: convertIpAddressToInt(data.ipv4Config?.subnet ?? ""),
dns: convertIpAddressToInt(data.ipv4Config?.dns ?? ""),
},
),
};
editor.setRadioSection("network", payload as unknown as Protobuf.Config.Config_NetworkConfig);
editor.setRadioSection(
"network",
payload as unknown as Protobuf.Config.Config_NetworkConfig,
);
};
return (
@@ -144,7 +164,8 @@ export const Network = ({ onFormInit }: NetworkConfigProps) => {
disabledBy: [
{
fieldName: "addressMode",
selector: Protobuf.Config.Config_NetworkConfig_AddressMode.DHCP,
selector:
Protobuf.Config.Config_NetworkConfig_AddressMode.DHCP,
},
],
},
@@ -156,7 +177,8 @@ export const Network = ({ onFormInit }: NetworkConfigProps) => {
disabledBy: [
{
fieldName: "addressMode",
selector: Protobuf.Config.Config_NetworkConfig_AddressMode.DHCP,
selector:
Protobuf.Config.Config_NetworkConfig_AddressMode.DHCP,
},
],
},
@@ -168,7 +190,8 @@ export const Network = ({ onFormInit }: NetworkConfigProps) => {
disabledBy: [
{
fieldName: "addressMode",
selector: Protobuf.Config.Config_NetworkConfig_AddressMode.DHCP,
selector:
Protobuf.Config.Config_NetworkConfig_AddressMode.DHCP,
},
],
},
@@ -180,7 +203,8 @@ export const Network = ({ onFormInit }: NetworkConfigProps) => {
disabledBy: [
{
fieldName: "addressMode",
selector: Protobuf.Config.Config_NetworkConfig_AddressMode.DHCP,
selector:
Protobuf.Config.Config_NetworkConfig_AddressMode.DHCP,
},
],
},

66
apps/web/src/components/PageComponents/Settings/Position.tsx
View File

@@ -4,9 +4,15 @@ import {
PositionValidationSchema,
} from "@app/validation/config/position.ts";
import { create } from "@bufbuild/protobuf";
import { DynamicForm, type DynamicFormFormInit } from "@components/Form/DynamicForm.tsx";
import {
DynamicForm,
type DynamicFormFormInit,
} from "@components/Form/DynamicForm.tsx";
import { Button } from "@components/UI/Button.tsx";
import { type FlagName, usePositionFlags } from "@core/hooks/usePositionFlags.ts";
import {
type FlagName,
usePositionFlags,
} from "@core/hooks/usePositionFlags.ts";
import { useMyNodeAsProto } from "@core/hooks/useNodesAsProto.ts";
import { useToast } from "@core/hooks/useToast.ts";
import { useDevice } from "@core/stores";
@@ -41,16 +47,28 @@ function UseBrowserLocationButton() {
navigator.geolocation.getCurrentPosition(
(pos) => {
setBusy(false);
setValue("latitude", Number(pos.coords.latitude.toFixed(7)), { shouldDirty: true });
setValue("longitude", Number(pos.coords.longitude.toFixed(7)), { shouldDirty: true });
if (pos.coords.altitude !== null && !Number.isNaN(pos.coords.altitude)) {
setValue("altitude", Math.round(pos.coords.altitude), { shouldDirty: true });
setValue("latitude", Number(pos.coords.latitude.toFixed(7)), {
shouldDirty: true,
});
setValue("longitude", Number(pos.coords.longitude.toFixed(7)), {
shouldDirty: true,
});
if (
pos.coords.altitude !== null &&
!Number.isNaN(pos.coords.altitude)
) {
setValue("altitude", Math.round(pos.coords.altitude), {
shouldDirty: true,
});
}
},
(err) => {
setBusy(false);
toast({
title: t("position.useBrowserLocation.failed", "Could not read browser location"),
title: t(
"position.useBrowserLocation.failed",
"Could not read browser location",
),
description: err.message,
});
},
@@ -84,7 +102,9 @@ export const Position = ({ onFormInit }: PositionConfigProps) => {
const effectivePosition =
radio.position ??
(getEffectiveConfig("position") as Protobuf.Config.Config_PositionConfig | undefined);
(getEffectiveConfig("position") as
| Protobuf.Config.Config_PositionConfig
| undefined);
const { flagsValue, activeFlags, toggleFlag, getAllFlags } = usePositionFlags(
effectivePosition?.positionFlags ?? 0,
@@ -98,14 +118,23 @@ export const Position = ({ onFormInit }: PositionConfigProps) => {
return {
...config.position,
...effectivePosition,
latitude: currentPosition?.latitudeI ? currentPosition.latitudeI / 1e7 : undefined,
longitude: currentPosition?.longitudeI ? currentPosition.longitudeI / 1e7 : undefined,
latitude: currentPosition?.latitudeI
? currentPosition.latitudeI / 1e7
: undefined,
longitude: currentPosition?.longitudeI
? currentPosition.longitudeI / 1e7
: undefined,
altitude: currentPosition?.altitude ?? 0,
} as PositionValidation;
}, [config.position, effectivePosition, currentPosition]);
const onSubmit = (data: PositionValidation) => {
const { latitude: _latitude, longitude: _longitude, altitude: _altitude, ...configData } = data;
const {
latitude: _latitude,
longitude: _longitude,
altitude: _altitude,
...configData
} = data;
const payload = { ...configData, positionFlags: flagsValue };
if (editor) {
@@ -115,7 +144,11 @@ export const Position = ({ onFormInit }: PositionConfigProps) => {
);
}
if (data.fixedPosition && data.latitude !== undefined && data.longitude !== undefined) {
if (
data.fixedPosition &&
data.latitude !== undefined &&
data.longitude !== undefined
) {
const message = create(Protobuf.Admin.AdminMessageSchema, {
payloadVariant: {
case: "setFixedPosition",
@@ -225,14 +258,16 @@ export const Position = ({ onFormInit }: PositionConfigProps) => {
label: t("position.fixedPosition.altitude.label"),
description: t("position.fixedPosition.altitude.description", {
unit:
displayUnits === Protobuf.Config.Config_DisplayConfig_DisplayUnits.IMPERIAL
displayUnits ===
Protobuf.Config.Config_DisplayConfig_DisplayUnits.IMPERIAL
? "Feet"
: "Meters",
}),
properties: {
step: 0.0000001,
suffix:
displayUnits === Protobuf.Config.Config_DisplayConfig_DisplayUnits.IMPERIAL
displayUnits ===
Protobuf.Config.Config_DisplayConfig_DisplayUnits.IMPERIAL
? "Feet"
: "Meters",
},
@@ -266,7 +301,8 @@ export const Position = ({ onFormInit }: PositionConfigProps) => {
type: "multiSelect",
name: "positionFlags",
value: activeFlags,
isChecked: (name: string) => activeFlags?.includes(name as FlagName) ?? false,
isChecked: (name: string) =>
activeFlags?.includes(name as FlagName) ?? false,
onValueChange: onPositonFlagChange,
label: t("position.positionFlags.label"),
placeholder: t("position.flags.placeholder"),

20
apps/web/src/components/PageComponents/Settings/Power.tsx
View File

@@ -1,6 +1,12 @@
import { useWaitForConfig } from "@app/core/hooks/useWaitForConfig";
import { type PowerValidation, PowerValidationSchema } from "@app/validation/config/power.ts";
import { DynamicForm, type DynamicFormFormInit } from "@components/Form/DynamicForm.tsx";
import {
type PowerValidation,
PowerValidationSchema,
} from "@app/validation/config/power.ts";
import {
DynamicForm,
type DynamicFormFormInit,
} from "@components/Form/DynamicForm.tsx";
import { useDevice } from "@core/stores";
import { Protobuf } from "@meshtastic/sdk";
import { useConfigEditor, useSignal } from "@meshtastic/sdk-react";
@@ -23,13 +29,19 @@ export const Power = ({ onFormInit }: PowerConfigProps) => {
const editor = useConfigEditor();
const radio = useSignal(editor?.radio ?? EMPTY_RADIO_SIGNAL);
const effective =
radio.power ?? (getEffectiveConfig("power") as Protobuf.Config.Config_PowerConfig | undefined);
radio.power ??
(getEffectiveConfig("power") as
| Protobuf.Config.Config_PowerConfig
| undefined);
const { t } = useTranslation("config");
const onSubmit = (data: PowerValidation) => {
if (!editor) return;
editor.setRadioSection("power", data as unknown as Protobuf.Config.Config_PowerConfig);
editor.setRadioSection(
"power",
data as unknown as Protobuf.Config.Config_PowerConfig,
);
};
return (

40
apps/web/src/components/PageComponents/Settings/Security/Security.tsx
View File

@@ -7,7 +7,10 @@ import {
import { ManagedModeDialog } from "@components/Dialog/ManagedModeDialog.tsx";
import { PkiRegenerateDialog } from "@components/Dialog/PkiRegenerateDialog.tsx";
import { createZodResolver } from "@components/Form/createZodResolver.ts";
import { DynamicForm, type DynamicFormFormInit } from "@components/Form/DynamicForm.tsx";
import {
DynamicForm,
type DynamicFormFormInit,
} from "@components/Form/DynamicForm.tsx";
import { useDevice } from "@core/stores";
import { getX25519PrivateKey, getX25519PublicKey } from "@core/utils/x25519.ts";
import { Protobuf } from "@meshtastic/sdk";
@@ -27,7 +30,9 @@ const EMPTY_RADIO_SIGNAL = {
subscribe: () => () => {},
} as const;
const toFormShape = (cfg: Protobuf.Config.Config_SecurityConfig | undefined) => ({
const toFormShape = (
cfg: Protobuf.Config.Config_SecurityConfig | undefined,
) => ({
...cfg,
privateKey: fromByteArray(cfg?.privateKey ?? new Uint8Array(0)),
publicKey: fromByteArray(cfg?.publicKey ?? new Uint8Array(0)),
@@ -46,7 +51,9 @@ export const Security = ({ onFormInit }: SecurityConfigProps) => {
const radio = useSignal(editor?.radio ?? EMPTY_RADIO_SIGNAL);
const effective =
radio.security ??
(getEffectiveConfig("security") as Protobuf.Config.Config_SecurityConfig | undefined);
(getEffectiveConfig("security") as
| Protobuf.Config.Config_SecurityConfig
| undefined);
const { t } = useTranslation("config");
@@ -64,8 +71,10 @@ export const Security = ({ onFormInit }: SecurityConfigProps) => {
onFormInit?.(formMethods);
}, [onFormInit, formMethods]);
const [privateKeyDialogOpen, setPrivateKeyDialogOpen] = useState<boolean>(false);
const [managedModeDialogOpen, setManagedModeDialogOpen] = useState<boolean>(false);
const [privateKeyDialogOpen, setPrivateKeyDialogOpen] =
useState<boolean>(false);
const [managedModeDialogOpen, setManagedModeDialogOpen] =
useState<boolean>(false);
const onSubmit = (data: RawSecurity) => {
if (!formState.isReady || !editor) return;
@@ -80,7 +89,10 @@ export const Security = ({ onFormInit }: SecurityConfigProps) => {
toByteArray(data.adminKey.at(2) ?? ""),
],
};
editor.setRadioSection("security", payload as unknown as Protobuf.Config.Config_SecurityConfig);
editor.setRadioSection(
"security",
payload as unknown as Protobuf.Config.Config_SecurityConfig,
);
};
const pkiRegenerate = () => {
@@ -90,7 +102,9 @@ export const Security = ({ onFormInit }: SecurityConfigProps) => {
const updatePublicKey = async (privateKey: string) => {
try {
const publicKey = fromByteArray(getX25519PublicKey(toByteArray(privateKey)));
const publicKey = fromByteArray(
getX25519PublicKey(toByteArray(privateKey)),
);
setValue("privateKey", privateKey, { shouldDirty: true });
setValue("publicKey", publicKey, { shouldDirty: true });
@@ -176,7 +190,9 @@ export const Security = ({ onFormInit }: SecurityConfigProps) => {
bits,
devicePSKBitCount: 32,
actionButtons: [],
disabledBy: [{ fieldName: "adminChannelEnabled", invert: true }],
disabledBy: [
{ fieldName: "adminChannelEnabled", invert: true },
],
properties: { showCopyButton: true },
},
{
@@ -188,7 +204,9 @@ export const Security = ({ onFormInit }: SecurityConfigProps) => {
bits,
devicePSKBitCount: 32,
actionButtons: [],
disabledBy: [{ fieldName: "adminChannelEnabled", invert: true }],
disabledBy: [
{ fieldName: "adminChannelEnabled", invert: true },
],
properties: { showCopyButton: true },
},
{
@@ -200,7 +218,9 @@ export const Security = ({ onFormInit }: SecurityConfigProps) => {
bits,
devicePSKBitCount: 32,
actionButtons: [],
disabledBy: [{ fieldName: "adminChannelEnabled", invert: true }],
disabledBy: [
{ fieldName: "adminChannelEnabled", invert: true },
],
properties: { showCopyButton: true },
},
],

14
apps/web/src/components/PageComponents/Settings/User.tsx
View File

@@ -1,6 +1,12 @@
import { type UserValidation, UserValidationSchema } from "@app/validation/config/user.ts";
import {
type UserValidation,
UserValidationSchema,
} from "@app/validation/config/user.ts";
import { create } from "@bufbuild/protobuf";
import { DynamicForm, type DynamicFormFormInit } from "@components/Form/DynamicForm.tsx";
import {
DynamicForm,
type DynamicFormFormInit,
} from "@components/Form/DynamicForm.tsx";
import { useMyNodeAsProto } from "@core/hooks/useNodesAsProto.ts";
import { Protobuf } from "@meshtastic/sdk";
import { useConfigEditor, useSignal } from "@meshtastic/sdk-react";
@@ -55,7 +61,9 @@ export const User = ({ onFormInit }: UserConfigProps) => {
editor.setOwner(merged);
};
const hwName = Protobuf.Mesh.HardwareModel[baselineUser.hwModel] ?? String(baselineUser.hwModel);
const hwName =
Protobuf.Mesh.HardwareModel[baselineUser.hwModel] ??
String(baselineUser.hwModel);
return (
<DynamicForm<UserValidation>

14
apps/web/src/components/PageLayout.tsx
View File

@@ -68,7 +68,9 @@ export const PageLayout = ({
>
{/* Header Content */}
<div className="flex flex-1 items-center justify-between min-w-0">
<span className="text-lg font-medium text-foreground truncate px-2">{label}</span>
<span className="text-lg font-medium text-foreground truncate px-2">
{label}
</span>
<div className="flex items-center space-x-1 md:space-x-2 shrink-0 pr-6">
{actions?.map((action) => {
return (
@@ -91,9 +93,15 @@ export const PageLayout = ({
(action.isLoading ? (
<Spinner size="md" />
) : (
<action.icon className={cn("h-5 w-5", action.iconClasses)} />
<action.icon
className={cn("h-5 w-5", action.iconClasses)}
/>
))}
{action.label && <span className="text-sm px-1 pt-0.5">{action.label}</span>}
{action.label && (
<span className="text-sm px-1 pt-0.5">
{action.label}
</span>
)}
</button>
);
})}

28
apps/web/src/components/Sidebar.tsx
View File

@@ -3,7 +3,10 @@ import { SidebarButton } from "@components/UI/Sidebar/SidebarButton.tsx";
import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.tsx";
import { Spinner } from "@components/UI/Spinner.tsx";
import { Subtle } from "@components/UI/Typography/Subtle.tsx";
import { useMyNodeAsProto, useNodesAsProto } from "@core/hooks/useNodesAsProto.ts";
import {
useMyNodeAsProto,
useNodesAsProto,
} from "@core/hooks/useNodesAsProto.ts";
import {
type Page,
useActiveConnection,
@@ -61,7 +64,10 @@ const CollapseToggleButton = () => {
>
<CircleChevronLeft
size={24}
className={cn("transition-transform duration-300 ease-in-out", isCollapsed && "rotate-180")}
className={cn(
"transition-transform duration-300 ease-in-out",
isCollapsed && "rotate-180",
)}
/>
</button>
);
@@ -145,12 +151,18 @@ export const Sidebar = ({ children }: SidebarProps) => {
isCollapsed && "justify-center px-0",
)}
>
<img src="/logo.svg" alt={t("app.logo")} className="size-10 flex-shrink-0 rounded-xl" />
<img
src="/logo.svg"
alt={t("app.logo")}
className="size-10 flex-shrink-0 rounded-xl"
/>
<h2
className={cn(
"text-xl font-semibold text-gray-800 dark:text-gray-100 whitespace-nowrap",
"transition-all duration-300 ease-in-out",
isCollapsed ? "opacity-0 max-w-0 invisible ml-0" : "opacity-100 max-w-xs visible ml-2",
isCollapsed
? "opacity-0 max-w-0 invisible ml-0"
: "opacity-100 max-w-xs visible ml-2",
)}
>
{t("app.title")}
@@ -177,7 +189,9 @@ export const Sidebar = ({ children }: SidebarProps) => {
})}
</SidebarSection>
<div className={cn("flex-1 min-h-0", isCollapsed && "overflow-hidden")}>{children}</div>
<div className={cn("flex-1 min-h-0", isCollapsed && "overflow-hidden")}>
{children}
</div>
<div className=" pt-4 border-t-[0.5px] bg-background-primary border-slate-300 dark:border-slate-700 h-full flex-1">
{myNode === undefined ? (
@@ -198,7 +212,9 @@ export const Sidebar = ({ children }: SidebarProps) => {
setCommandPaletteOpen={() => setCommandPaletteOpen(true)}
setDialogOpen={() => setDialogOpen("deviceName", true)}
user={myNode.user}
firmwareVersion={myMetadata?.firmwareVersion ?? t("unknown.notAvailable")}
firmwareVersion={
myMetadata?.firmwareVersion ?? t("unknown.notAvailable")
}
deviceMetrics={{
batteryLevel: myNode.deviceMetrics?.batteryLevel,
voltage:

6
apps/web/src/components/ThemeSwitcher.tsx
View File

@@ -42,7 +42,8 @@ export default function ThemeSwitcher({
const toggleTheme = () => {
const preferences: ThemePreference[] = ["light", "dark", "system"];
const currentIndex = preferences.indexOf(preference);
const nextPreference = preferences[(currentIndex + 1) % preferences.length] ?? "system";
const nextPreference =
preferences[(currentIndex + 1) % preferences.length] ?? "system";
setPreference(nextPreference);
toggleShowTooltip();
};
@@ -89,7 +90,8 @@ export default function ThemeSwitcher({
"text-sm",
"text-gray-600 dark:text-gray-300",
"transition-colors duration-150",
!disableHover && "group-hover:text-gray-800 dark:group-hover:text-gray-100",
!disableHover &&
"group-hover:text-gray-800 dark:group-hover:text-gray-100",
)}
>
{t("theme.changeTheme")}

7
apps/web/src/components/Toaster.tsx
View File

@@ -14,7 +14,12 @@ export function Toaster() {
return (
<ToastProvider>
{toasts.map(({ id, title, description, action, duration, ...props }) => (
<Toast key={id} {...props} duration={duration} className="flex flex-col gap-4">
<Toast
key={id}
{...props}
duration={duration}
className="flex flex-col gap-4"
>
<div className="grid gap-1">
{title && <ToastTitle>{title}</ToastTitle>}
{description && <ToastDescription>{description}</ToastDescription>}

Some files were not shown because too many files have changed in this diff Show More