mirror/web
1
0
Fork 0
mirror of https://github.com/meshtastic/web.git synced 2026-04-26 00:37:54 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #544 from James9074/loading-device

Browse Source 
Cleaner Device Loading UX
This commit is contained in:
Dan Ditomaso
2025-03-30 17:26:10 -04:00
committed by GitHub
parent 11e820d1d0 88c4f84edb
commit 8f225f4d28
2 changed files with 57 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src/components/Sidebar.tsx
View File

@@ -3,6 +3,8 @@ import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.tsx";
import { Subtle } from "@components/UI/Typography/Subtle.tsx";
import { useDevice } from "@core/stores/deviceStore.ts";
import type { Page } from "@core/stores/deviceStore.ts";
import { Spinner } from "@components/UI/Spinner.tsx";
import {
BatteryMediumIcon,
CpuIcon,
@@ -67,46 +69,55 @@ export const Sidebar = ({ children }: SidebarProps) => {
return showSidebar
? (
<div className="min-w-[280px] max-w-min flex-col overflow-y-auto border-r-[0.5px] bg-background-primary border-slate-300 dark:border-slate-400">
<div className="flex justify-between px-8 pt-6">
<div>
<span className="text-lg font-medium">
{myNode?.user?.shortName ?? "UNK"}
</span>
<Subtle>{myNode?.user?.longName ?? "UNK"}</Subtle>
{myNode === undefined ? (
<div className="flex flex-col items-center justify-center px-8 py-6">
<Spinner />
<Subtle className="mt-2">Loading device info...</Subtle>
</div>
<button
type="button"
className="transition-all hover:text-accent"
onClick={() => setDialogOpen("deviceName", true)}
>
<EditIcon size={16} />
</button>
<button type="button" onClick={() => setShowSidebar(false)}>
<SidebarCloseIcon size={24} />
</button>
</div>
<div className="px-8 pb-6">
<div className="flex items-center">
<BatteryMediumIcon size={24} viewBox="0 0 28 24" />
<Subtle>
{myNode?.deviceMetrics?.batteryLevel
? myNode?.deviceMetrics?.batteryLevel > 100
? "Charging"
: `${myNode?.deviceMetrics?.batteryLevel}%`
: "UNK"}
</Subtle>
</div>
<div className="flex items-center">
<ZapIcon size={24} viewBox="0 0 36 24" />
<Subtle>
{myNode?.deviceMetrics?.voltage?.toPrecision(3) ?? "UNK"} volts
</Subtle>
</div>
<div className="flex items-center">
<CpuIcon size={24} viewBox="0 0 36 24" />
<Subtle>v{myMetadata?.firmwareVersion ?? "UNK"}</Subtle>
</div>
</div>
) : (
<>
<div className="flex justify-between px-8 pt-6">
<div>
<span className="text-lg font-medium">
{myNode.user?.shortName ?? "UNK"}
</span>
<Subtle>{myNode.user?.longName ?? "UNK"}</Subtle>
</div>
<button
type="button"
className="transition-all hover:text-accent"
onClick={() => setDialogOpen("deviceName", true)}
>
<EditIcon size={16} />
</button>
<button type="button" onClick={() => setShowSidebar(false)}>
<SidebarCloseIcon size={24} />
</button>
</div>
<div className="px-8 pb-6">
<div className="flex items-center">
<BatteryMediumIcon size={24} viewBox="0 0 28 24" />
<Subtle>
{myNode.deviceMetrics?.batteryLevel
? myNode.deviceMetrics.batteryLevel > 100
? "Charging"
: `${myNode.deviceMetrics.batteryLevel}%`
: "UNK"}
</Subtle>
</div>
<div className="flex items-center">
<ZapIcon size={24} viewBox="0 0 36 24" />
<Subtle>
{myNode.deviceMetrics?.voltage?.toPrecision(3) ?? "UNK"} volts
</Subtle>
</div>
<div className="flex items-center">
<CpuIcon size={24} viewBox="0 0 36 24" />
<Subtle>v{myMetadata?.firmwareVersion ?? "UNK"}</Subtle>
</div>
</div>
</>
)}
<SidebarSection label="Navigation">
{pages.map((link) => (
@@ -115,9 +126,12 @@ export const Sidebar = ({ children }: SidebarProps) => {
label={link.name}
Icon={link.icon}
onClick={() => {
setActivePage(link.page);
if (myNode !== undefined) {
setActivePage(link.page);
}
}}
active={link.page === activePage}
disabled={myNode === undefined}
/>
))}
</SidebarSection>

3
src/components/UI/Sidebar/sidebarButton.tsx
View File

@@ -7,6 +7,7 @@ export interface SidebarButtonProps {
Icon?: LucideIcon;
element?;
onClick?: () => void;
disabled?: boolean;
}
export const SidebarButton = ({
@@ -15,12 +16,14 @@ export const SidebarButton = ({
Icon,
element,
onClick,
disabled = false,
}: SidebarButtonProps) => (
<Button
onClick={onClick}
variant={active ? "subtle" : "ghost"}
size="sm"
className="flex gap-2 w-full"
disabled={disabled}
>
{Icon && <Icon size={16} />}
{element && element}