+
{label}
-
);
}
-// ---------------------------------------------------------------------------
-// Shared styles
-// ---------------------------------------------------------------------------
+// --- Shared styles ---
+
+function bannerStyle(color: string): React.CSSProperties {
+ return {
+ background: `color-mix(in srgb, ${color} 10%, transparent)`,
+ border: `1px solid color-mix(in srgb, ${color} 30%, transparent)`,
+ borderRadius: 6,
+ padding: "var(--space-3) var(--space-4)",
+ marginBottom: "var(--space-4)",
+ fontSize: 13,
+ color,
+ };
+}
const cardStyle: React.CSSProperties = {
- background: "var(--card-bg, #1e1e2e)",
- border: "1px solid var(--border, #2e2e3e)",
- borderRadius: "8px",
- padding: "20px",
+ background: "var(--bg-surface)",
+ border: "1px solid var(--border)",
+ borderRadius: 8,
+ padding: "var(--space-5)",
};
-const stepTitle: React.CSSProperties = {
- fontSize: "16px",
+const stepTitleStyle: React.CSSProperties = {
+ fontSize: 16,
fontWeight: 600,
- color: "var(--text-primary, #e2e8f0)",
- margin: "0 0 4px",
+ color: "var(--text-primary)",
+ margin: "0 0 var(--space-1)",
+ fontFamily: "var(--font-sans)",
};
-const stepDesc: React.CSSProperties = {
- fontSize: "13px",
- color: "var(--text-secondary, #94a3b8)",
- marginBottom: "16px",
+const stepDescStyle: React.CSSProperties = {
+ fontSize: 13,
+ color: "var(--text-secondary)",
+ marginBottom: "var(--space-4)",
};
const labelStyle: React.CSSProperties = {
display: "block",
- fontSize: "12px",
+ fontSize: 12,
fontWeight: 600,
- color: "var(--text-secondary, #94a3b8)",
- marginBottom: "6px",
+ color: "var(--text-secondary)",
+ marginBottom: 6,
+ fontFamily: "var(--font-sans)",
};
-const inputStyle: React.CSSProperties = {
- width: "100%",
- padding: "8px 12px",
- border: "1px solid var(--border, #2e2e3e)",
- borderRadius: "6px",
- background: "var(--input-bg, #12121a)",
- color: "var(--text-primary, #e2e8f0)",
- fontSize: "13px",
- outline: "none",
- boxSizing: "border-box",
-};
-
-const primaryBtnStyle: React.CSSProperties = {
- padding: "8px 20px",
- border: "none",
- borderRadius: "6px",
- background: "var(--accent, #6366f1)",
+const primaryBtn: React.CSSProperties = {
+ padding: "var(--space-2) 20px",
+ borderRadius: 6,
+ background: "var(--accent)",
color: "#fff",
- fontSize: "13px",
+ fontSize: 13,
fontWeight: 600,
- cursor: "pointer",
};
-const secondaryBtnStyle: React.CSSProperties = {
- padding: "8px 16px",
- border: "1px solid var(--border, #2e2e3e)",
- borderRadius: "6px",
+const secondaryBtn: React.CSSProperties = {
+ padding: "var(--space-2) var(--space-4)",
+ border: "1px solid var(--border)",
+ borderRadius: 6,
background: "transparent",
- color: "var(--text-secondary, #94a3b8)",
- fontSize: "13px",
+ color: "var(--text-secondary)",
+ fontSize: 13,
fontWeight: 500,
- cursor: "pointer",
};
-const disabledBtnStyle: React.CSSProperties = {
- ...primaryBtnStyle,
- background: "var(--border, #2e2e3e)",
- color: "var(--text-muted, #64748b)",
- cursor: "not-allowed",
+const disabledBtn: React.CSSProperties = {
+ ...primaryBtn,
+ background: "var(--bg-active)",
+ color: "var(--text-muted)",
};
diff --git a/rust-port/wifi-densepose-rs/crates/wifi-densepose-desktop/ui/src/pages/Nodes.tsx b/rust-port/wifi-densepose-rs/crates/wifi-densepose-desktop/ui/src/pages/Nodes.tsx
index 64f4c8fa..df26fda0 100644
--- a/rust-port/wifi-densepose-rs/crates/wifi-densepose-desktop/ui/src/pages/Nodes.tsx
+++ b/rust-port/wifi-densepose-rs/crates/wifi-densepose-desktop/ui/src/pages/Nodes.tsx
@@ -16,34 +16,19 @@ export function Nodes() {
};
return (
-
+
{/* Header */}
-
- Nodes
-
-
+
Nodes
+
{nodes.length} node{nodes.length !== 1 ? "s" : ""} in registry
@@ -51,16 +36,12 @@ export function Nodes() {
onClick={scan}
disabled={isScanning}
style={{
- padding: "8px 16px",
- border: "none",
- borderRadius: "6px",
- background: isScanning
- ? "var(--border, #2e2e3e)"
- : "var(--accent, #6366f1)",
- color: isScanning ? "var(--text-muted, #64748b)" : "#fff",
- fontSize: "13px",
+ padding: "var(--space-2) var(--space-4)",
+ borderRadius: 6,
+ background: isScanning ? "var(--bg-active)" : "var(--accent)",
+ color: isScanning ? "var(--text-muted)" : "#fff",
+ fontSize: 13,
fontWeight: 600,
- cursor: isScanning ? "not-allowed" : "pointer",
}}
>
{isScanning ? "Scanning..." : "Refresh"}
@@ -71,13 +52,13 @@ export function Nodes() {
{error && (
{error}
@@ -88,13 +69,13 @@ export function Nodes() {
{nodes.length === 0 ? (
{isScanning ? "Scanning for nodes..." : "No nodes found. Run a scan to discover ESP32 devices."}
@@ -102,26 +83,15 @@ export function Nodes() {
) : (
-
+
-
+
| Status |
MAC |
IP |
@@ -133,12 +103,11 @@ export function Nodes() {
{nodes.map((node) => {
const key = node.mac ?? node.ip;
- const isExpanded = expandedMac === key;
return (
toggleExpand(node)}
/>
);
@@ -151,20 +120,17 @@ export function Nodes() {
);
}
-// ---------------------------------------------------------------------------
-// Sub-components
-// ---------------------------------------------------------------------------
-
function Th({ children }: { children: React.ReactNode }) {
return (
{children}
@@ -172,20 +138,15 @@ function Th({ children }: { children: React.ReactNode }) {
);
}
-function Td({
- children,
- mono = false,
-}: {
- children: React.ReactNode;
- mono?: boolean;
-}) {
+function Td({ children, mono = false }: { children: React.ReactNode; mono?: boolean }) {
return (
|
{children}
@@ -220,29 +181,23 @@ function NodeRow({
|
- (e.currentTarget.style.background = "rgba(255,255,255,0.02)")
- }
- onMouseLeave={(e) =>
- (e.currentTarget.style.background = "transparent")
- }
+ onMouseEnter={(e) => (e.currentTarget.style.background = "var(--bg-hover)")}
+ onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
>
- |
-
- |
+ |
{node.mac ?? "--"} |
{node.ip} |
- {node.firmware_version ?? "--"} |
+ {node.firmware_version ?? "--"} |
{node.chip.toUpperCase()} |
{formatLastSeen(node.last_seen)} |
{isExpanded && (
-
- |
+ |
+ |
|
@@ -255,17 +210,17 @@ function ExpandedDetails({ node }: { node: Node }) {
return (
-
+
- {node.friendly_name && (
-
- )}
+ {node.friendly_name && }
{node.notes && }
);
}
-function DetailField({ label, value }: { label: string; value: string }) {
+function DetailField({ label, value, mono = false }: { label: string; value: string; mono?: boolean }) {
return (
{label}
-
{value}
+
+ {value}
+
);
}
diff --git a/rust-port/wifi-densepose-rs/crates/wifi-densepose-desktop/ui/src/pages/Settings.tsx b/rust-port/wifi-densepose-rs/crates/wifi-densepose-desktop/ui/src/pages/Settings.tsx
index ff181470..891d9efc 100644
--- a/rust-port/wifi-densepose-rs/crates/wifi-densepose-desktop/ui/src/pages/Settings.tsx
+++ b/rust-port/wifi-densepose-rs/crates/wifi-densepose-desktop/ui/src/pages/Settings.tsx
@@ -5,7 +5,7 @@ const DEFAULT_SETTINGS: AppSettings = {
server_http_port: 8080,
server_ws_port: 8765,
server_udp_port: 5005,
- bind_address: "0.0.0.0",
+ bind_address: "127.0.0.1",
ui_path: "",
ota_psk: "",
auto_discover: true,
@@ -19,17 +19,14 @@ export function Settings() {
const [showPsk, setShowPsk] = useState(false);
const [error, setError] = useState(null);
- // Load persisted settings on mount
useEffect(() => {
(async () => {
try {
const { invoke } = await import("@tauri-apps/api/core");
const persisted = await invoke("get_settings");
- if (persisted) {
- setSettings(persisted);
- }
+ if (persisted) setSettings(persisted);
} catch {
- // Settings command may not exist yet -- use defaults
+ // Settings command may not exist yet
}
})();
}, []);
@@ -60,55 +57,38 @@ export function Settings() {
};
return (
-
-
- Settings
-
-
+
+
Settings
+
Configure server, network, and application preferences
- {/* Error */}
{error && (
{error}
)}
- {/* Saved toast */}
{saved && (
Settings saved.
@@ -117,50 +97,32 @@ export function Settings() {
{/* Sensing Server */}
-
+
- update("server_http_port", v)}
- min={1}
- max={65535}
- />
+ update("server_http_port", v)} min={1} max={65535} />
- update("server_ws_port", v)}
- min={1}
- max={65535}
- />
+ update("server_ws_port", v)} min={1} max={65535} />
- update("server_udp_port", v)}
- min={1}
- max={65535}
- />
+ update("server_udp_port", v)} min={1} max={65535} />
- update("bind_address", v)}
- placeholder="0.0.0.0"
+ onChange={(e) => update("bind_address", e.target.value)}
+ placeholder="127.0.0.1"
+ style={{ fontFamily: "var(--font-mono)" }}
/>
-
+
- update("ui_path", v)}
+ onChange={(e) => update("ui_path", e.target.value)}
placeholder="Leave empty for default"
/>
@@ -170,28 +132,19 @@ export function Settings() {
{/* Security */}
-
+
update("ota_psk", e.target.value)}
placeholder="Enter PSK for OTA authentication"
- style={{ ...inputStyle, flex: 1 }}
+ style={{ flex: 1, fontFamily: "var(--font-mono)" }}
/>
-
-
+
Used for authenticating OTA firmware updates to nodes.
@@ -199,36 +152,16 @@ export function Settings() {
{/* Discovery */}
-
+
-
@@ -245,51 +178,34 @@ export function Settings() {
{/* Actions */}
-
-
-
+
+
+
{title}
@@ -299,22 +215,17 @@ function Section({
);
}
-function Field({
- label,
- children,
-}: {
- label: string;
- children: React.ReactNode;
-}) {
+function Field({ label, children }: { label: string; children: React.ReactNode }) {
return (