iarv/Remote-Terminal-for-MeshCore
1
0
Fork 1
mirror of https://github.com/jkingsman/Remote-Terminal-for-MeshCore.git synced 2026-03-28 17:43:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

Move controls to top

Browse Source
This commit is contained in:
Jack Kingsman
2026-03-03 16:19:33 -08:00
parent eb78285b8f
commit 5d2aaa802b
3 changed files with 31 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
frontend/src/components/PacketVisualizer3D.tsx
View File

@@ -1720,12 +1720,30 @@ export function PacketVisualizer3D({
)}
{/* Options */}
<div className="absolute top-4 left-4 bg-background/80 backdrop-blur-sm rounded-lg p-3 text-xs border border-border z-10">
<div
className={`absolute top-4 left-4 bg-background/80 backdrop-blur-sm rounded-lg p-3 text-xs border border-border z-10 transition-opacity ${!showControls ? 'opacity-40 hover:opacity-100' : ''}`}
>
<div className="flex flex-col gap-2">
<div className="flex flex-col gap-2">
<label className="flex items-center gap-2 cursor-pointer">
<Checkbox
checked={showControls}
onCheckedChange={(c) => setShowControls(c === true)}
/>
<span title="Toggle legends and controls visibility">Show controls</span>
</label>
{onFullScreenChange && (
<label className="flex items-center gap-2 cursor-pointer">
<Checkbox
checked={!fullScreen}
onCheckedChange={(c) => onFullScreenChange(c !== true)}
/>
<span title="Show or hide the packet feed sidebar">Show packet feed sidebar</span>
</label>
)}
</div>
{showControls && (
<>
<div>Nodes: {data.stats.nodes}</div>
<div>Links: {data.stats.links}</div>
<div className="border-t border-border pt-2 mt-1 flex flex-col gap-2">
<label className="flex items-center gap-2 cursor-pointer">
<Checkbox
@@ -1888,32 +1906,12 @@ export function PacketVisualizer3D({
Clear &amp; Reset
</button>
</div>
<div className="border-t border-border pt-2 mt-1">
<div>Nodes: {data.stats.nodes}</div>
<div>Links: {data.stats.links}</div>
</div>
</>
)}
<div
className={
!showControls
? 'flex flex-col gap-2'
: 'border-t border-border pt-2 mt-1 flex flex-col gap-2'
}
>
<label className="flex items-center gap-2 cursor-pointer">
<Checkbox
checked={showControls}
onCheckedChange={(c) => setShowControls(c === true)}
/>
<span title="Toggle legends and controls visibility">Show controls</span>
</label>
{onFullScreenChange && (
<label className="flex items-center gap-2 cursor-pointer">
<Checkbox
checked={!fullScreen}
onCheckedChange={(c) => onFullScreenChange(c !== true)}
/>
<span title="Show or hide the packet feed sidebar">Show packet feed sidebar</span>
</label>
)}
</div>
</div>
</div>

2
frontend/src/components/VisualizerView.tsx
View File

@@ -49,7 +49,7 @@ export function VisualizerView({ packets, contacts, config }: VisualizerViewProp
<div ref={containerRef} className="flex flex-col h-full bg-background">
{/* Header */}
<div className="flex justify-between items-center px-4 py-3 border-b border-border font-medium text-lg">
<span>Mesh Visualizer</span>
<span>{paneFullScreen ? 'RemoteTerm MeshCore Visualizer' : 'Mesh Visualizer'}</span>
<button
className="hidden md:inline-flex items-center justify-center rounded-md p-1.5 text-muted-foreground hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
onClick={toggleFullScreen}