feat(protobufs): sync to firmware-current and consume workspace package (#1097)
* feat(protobufs): sync to firmware-current and consume workspace package Sync the vendored .proto sources to firmware-current (v2.7.25+48), regenerate the v2 TS bindings, and consume the workspace @meshtastic/protobufs (workspace:*) in place of the stale JSR 2.7.20 — finishing the monorepo migration (core was already workspace:*). Includes the one required breaking-change fix: admin nodedb_reset changed int32 to bool, so resetNodes() now sends value: true. * build(protobufs): vendor generated bindings for workspace consumers The package is consumed via workspace:* — its exports point at the TS source, which imports ./dist/meshtastic/*_pb.ts — so the generated output must exist at build time. CI builds web/core with no codegen step and the runners have no buf CLI, so the bindings are vendored here (kept gitignored; lint/format skip them). Regenerate with: pnpm --filter @meshtastic/protobufs gen * fix(protobufs): clean script removes the actual generated output dir buf writes bindings to packages/ts/dist, but clean was removing a non-existent root dist — so it never cleaned stale output. Addresses Copilot review feedback. * refactor: move web app packages/web -> apps/web Aligns the web app with the apps/web layout (matching the Vercel web-test Root Directory and the SDK-migration direction). Pure directory move plus root config: pnpm-workspace (adds apps/*), vitest projects, root tsconfig reference, and the pr/release-web/nightly workflows. vercel.json moved with the app. Build + 36 validation tests green. * feat: config fields, module pages, key verification, telemetry capture Incorporates the firmware-current feature work onto the protobuf foundation: new config fields (Display message bubbles; LoRa fem_lna_mode + serial_hal_only; Telemetry air_quality_screen_enabled); 4 new ModuleConfig pages (TrafficManagement, StatusMessage, TAK, RemoteHardware); the manual Key Verification flow (sendKeyVerification + ClientNotificationDialog stages + Verify Key button); live telemetry capture (nodeDB addDeviceMetrics) and admin hardening (toggleMutedNode, graceful PortNum default); plus the sdk-preview ConfigEditor demo and store/config tests. Build + lint + format + 131 tests green. * chore: drop #1062 (unsaved-change-detection) to match upstream revert #1062 was merged to main by accident (per @danditomaso) and is being reverted. Reverse-applied its diff here via 3-way so #1097 stays consistent with where main is headed, while keeping the feature changes layered on the same files (deviceStore/changeRegistry). Build + 131 tests + lint + format green. * fix(nodes): clean up SNR display in node table and map popup SNR is a ratio measured in dB, not dBm (which is absolute power); the node table and map popup both mislabeled it and crammed three values together: '0dBm/50%/50raw'. The trailing '%/raw' pair was the same heuristic ((snr+10)*5) shown twice — once clamped, once not. Render SNR in dB rounded to one decimal, color-coded by a 0-100% signal-quality heuristic (green/yellow/red), with the quality percentage as a muted secondary. Drop the redundant raw value. Adds unit.db; this matches the existing SNRTooltip, which already renders dB.
This commit is contained in:
Ben Meadors
@@ -0,0 +1,295 @@
|
||||
import type { ConnectionStatus } from "@app/core/stores/deviceStore/types.ts";
|
||||
import { cn } from "@core/utils/cn.ts";
|
||||
import type { Protobuf } from "@meshtastic/core";
|
||||
import { useNavigate } from "@tanstack/react-router";
|
||||
import {
|
||||
ChevronRight,
|
||||
CpuIcon,
|
||||
Languages,
|
||||
type LucideIcon,
|
||||
Palette,
|
||||
Search as SearchIcon,
|
||||
ZapIcon,
|
||||
} from "lucide-react";
|
||||
import type React from "react";
|
||||
import { Fragment } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import BatteryStatus from "./BatteryStatus.tsx";
|
||||
import LanguageSwitcher from "./LanguageSwitcher.tsx";
|
||||
import ThemeSwitcher from "./ThemeSwitcher.tsx";
|
||||
import type { DeviceMetrics } from "./types.ts";
|
||||
import { Avatar } from "./UI/Avatar.tsx";
|
||||
import { Button } from "./UI/Button.tsx";
|
||||
import { Subtle } from "./UI/Typography/Subtle.tsx";
|
||||
|
||||
interface DeviceInfoPanelProps {
|
||||
isCollapsed: boolean;
|
||||
deviceMetrics: DeviceMetrics;
|
||||
firmwareVersion: string;
|
||||
user?: Protobuf.Mesh.User;
|
||||
setDialogOpen: () => void;
|
||||
setCommandPaletteOpen: () => void;
|
||||
disableHover?: boolean;
|
||||
connectionStatus?: ConnectionStatus;
|
||||
connectionName?: string;
|
||||
}
|
||||
|
||||
interface InfoDisplayItem {
|
||||
id: string;
|
||||
label: string;
|
||||
icon?: LucideIcon;
|
||||
customComponent?: React.ReactNode;
|
||||
value?: string | number | null;
|
||||
}
|
||||
|
||||
interface ActionButtonConfig {
|
||||
id: string;
|
||||
label: string;
|
||||
icon: LucideIcon;
|
||||
onClick?: () => void;
|
||||
render?: () => React.ReactNode;
|
||||
}
|
||||
|
||||
export const DeviceInfoPanel = ({
|
||||
deviceMetrics,
|
||||
firmwareVersion,
|
||||
user,
|
||||
isCollapsed,
|
||||
setCommandPaletteOpen,
|
||||
disableHover = false,
|
||||
connectionStatus,
|
||||
connectionName,
|
||||
}: DeviceInfoPanelProps) => {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate({ from: "/" });
|
||||
const { batteryLevel, voltage } = deviceMetrics;
|
||||
|
||||
const getStatusColor = (status?: ConnectionStatus): string => {
|
||||
if (!status) {
|
||||
return "bg-gray-400";
|
||||
}
|
||||
switch (status) {
|
||||
case "connected":
|
||||
case "configured":
|
||||
case "online":
|
||||
return "bg-emerald-500";
|
||||
case "connecting":
|
||||
case "configuring":
|
||||
case "disconnecting":
|
||||
return "bg-amber-500";
|
||||
case "error":
|
||||
return "bg-red-500";
|
||||
default:
|
||||
return "bg-gray-400";
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusLabel = (status?: ConnectionStatus): string => {
|
||||
if (!status) {
|
||||
return t("unknown.notAvailable", "N/A");
|
||||
}
|
||||
// Show "connected" for configured state
|
||||
if (status === "configured") {
|
||||
return t("toasts.connected", { ns: "connections" });
|
||||
}
|
||||
return status;
|
||||
};
|
||||
|
||||
const deviceInfoItems: InfoDisplayItem[] = [
|
||||
{
|
||||
id: "battery",
|
||||
label: t("batteryStatus.title"),
|
||||
customComponent: <BatteryStatus deviceMetrics={deviceMetrics} />,
|
||||
value: batteryLevel !== undefined ? `${batteryLevel}%` : "N/A",
|
||||
},
|
||||
{
|
||||
id: "voltage",
|
||||
label: t("batteryVoltage.title"),
|
||||
icon: ZapIcon,
|
||||
value:
|
||||
voltage !== undefined ? `${voltage?.toPrecision(3)} V` : t("unknown.notAvailable", "N/A"),
|
||||
},
|
||||
{
|
||||
id: "firmware",
|
||||
label: t("sidebar.deviceInfo.firmware.title"),
|
||||
icon: CpuIcon,
|
||||
value: firmwareVersion ?? t("unknown.notAvailable", "N/A"),
|
||||
},
|
||||
];
|
||||
|
||||
const actionButtons: ActionButtonConfig[] = [
|
||||
{
|
||||
id: "theme",
|
||||
label: t("theme.changeTheme"),
|
||||
icon: Palette,
|
||||
render: () => <ThemeSwitcher />,
|
||||
},
|
||||
{
|
||||
id: "commandMenu",
|
||||
label: t("page.title", { ns: "commandPalette" }),
|
||||
icon: SearchIcon,
|
||||
onClick: setCommandPaletteOpen,
|
||||
},
|
||||
|
||||
{
|
||||
id: "language",
|
||||
label: t("languagePicker.label"),
|
||||
icon: Languages,
|
||||
render: () => <LanguageSwitcher />,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
{user && (
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center gap-3 p-1 flex-shrink-0",
|
||||
isCollapsed && "justify-center",
|
||||
)}
|
||||
>
|
||||
<Avatar
|
||||
nodeNum={parseInt(user.id.slice(1), 16)}
|
||||
className={cn("flex-shrink-0", isCollapsed && "")}
|
||||
size="sm"
|
||||
/>
|
||||
{!isCollapsed && (
|
||||
<p
|
||||
className={cn(
|
||||
"text-sm font-medium text-gray-800 dark:text-gray-200",
|
||||
"transition-opacity duration-300 ease-in-out truncate",
|
||||
)}
|
||||
>
|
||||
{user.longName}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{connectionStatus && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => navigate({ to: "/connections" })}
|
||||
aria-label={t("navigation.manageConnections", "Manage connections")}
|
||||
className={cn(
|
||||
"group flex items-center gap-2 px-1 py-2 flex-shrink-0 rounded-md w-full",
|
||||
"transition-colors duration-150",
|
||||
"hover:bg-gray-100 dark:hover:bg-gray-700",
|
||||
"focus:outline-none focus:ring-2 focus:ring-accent",
|
||||
isCollapsed && "justify-center",
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
"h-2.5 w-2.5 ml-2 rounded-full flex-shrink-0",
|
||||
getStatusColor(connectionStatus),
|
||||
)}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{!isCollapsed && (
|
||||
<>
|
||||
<div className="flex flex-col min-w-0 flex-1 text-left">
|
||||
<Subtle className="text-xs truncate transition-colors duration-150 group-hover:text-gray-800 dark:group-hover:text-gray-100">
|
||||
{connectionName || "Connection"}
|
||||
</Subtle>
|
||||
<Subtle className="text-xs capitalize text-gray-500 dark:text-gray-400 transition-colors duration-150">
|
||||
{getStatusLabel(connectionStatus)}
|
||||
</Subtle>
|
||||
</div>
|
||||
<ChevronRight
|
||||
size={14}
|
||||
className="flex-shrink-0 text-gray-400 dark:text-gray-500 transition-colors duration-150 group-hover:text-gray-600 dark:group-hover:text-gray-300"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{!isCollapsed && <div className="my-2 h-px bg-gray-200 dark:bg-gray-700 flex-shrink-0" />}
|
||||
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col gap-2 mt-1",
|
||||
"transition-all duration-300 ease-in-out",
|
||||
isCollapsed
|
||||
? "opacity-0 max-w-0 h-0 invisible pointer-events-none"
|
||||
: "opacity-100 max-w-xs h-auto visible",
|
||||
)}
|
||||
>
|
||||
{deviceInfoItems.map((item) => {
|
||||
const IconComponent = item.icon;
|
||||
return (
|
||||
<div key={item.id} className="flex items-center gap-2.5 text-sm">
|
||||
{IconComponent && (
|
||||
<IconComponent
|
||||
size={16}
|
||||
className="text-gray-500 dark:text-gray-400 w-4 flex-shrink-0"
|
||||
/>
|
||||
)}
|
||||
{item.customComponent}
|
||||
{item.id !== "battery" && (
|
||||
<Subtle className="text-gray-600 dark:text-gray-300">
|
||||
{item.label}: {item.value}
|
||||
</Subtle>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{!isCollapsed && <div className="my-2 h-px bg-gray-200 dark:bg-gray-700 flex-shrink-0" />}
|
||||
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col gap-1 mt-1",
|
||||
"transition-all duration-300 ease-in-out",
|
||||
isCollapsed
|
||||
? "opacity-0 max-w-0 h-0 invisible pointer-events-none"
|
||||
: "opacity-100 max-w-xs visible",
|
||||
)}
|
||||
>
|
||||
{actionButtons.map((buttonItem) => {
|
||||
const Icon = buttonItem.icon;
|
||||
if (buttonItem.render) {
|
||||
return <Fragment key={buttonItem.id}>{buttonItem.render()}</Fragment>;
|
||||
}
|
||||
return (
|
||||
<Button
|
||||
key={buttonItem.id}
|
||||
variant="ghost"
|
||||
aria-label={buttonItem.label}
|
||||
onClick={buttonItem.onClick}
|
||||
className={cn(
|
||||
"group",
|
||||
"flex w-full items-center justify-start text-sm p-1.5 rounded-md",
|
||||
"gap-2.5",
|
||||
"transition-colors duration-150",
|
||||
!disableHover && "hover:bg-gray-100 dark:hover:bg-gray-700",
|
||||
)}
|
||||
>
|
||||
<Icon
|
||||
size={16}
|
||||
className={cn(
|
||||
"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",
|
||||
)}
|
||||
/>
|
||||
<Subtle
|
||||
className={cn(
|
||||
"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",
|
||||
)}
|
||||
>
|
||||
{buttonItem.label}
|
||||
</Subtle>
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user