Scroll in room server control pane. Closes #99.

This commit is contained in:
Jack Kingsman
2026-03-20 19:15:42 -07:00
parent 3e2c48457d
commit d4a5f0f728
+25 -12
View File
@@ -3,6 +3,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
import { api } from '../api'; import { api } from '../api';
import { toast } from './ui/sonner'; import { toast } from './ui/sonner';
import { Button } from './ui/button'; import { Button } from './ui/button';
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from './ui/sheet';
import type { import type {
Contact, Contact,
PaneState, PaneState,
@@ -244,25 +245,37 @@ export function RoomServerPanel({ contact, onAuthenticatedChange }: RoomServerPa
return ( return (
<section className="border-b border-border bg-muted/20 px-4 py-3"> <section className="border-b border-border bg-muted/20 px-4 py-3">
<div className="flex flex-col gap-3"> <div className="flex justify-end">
<div className="flex justify-end"> <Button type="button" variant="outline" onClick={() => setAdvancedOpen((prev) => !prev)}>
<Button type="button" variant="outline" onClick={() => setAdvancedOpen((prev) => !prev)}> {advancedOpen ? 'Hide Tools' : 'Show Tools'}
{advancedOpen ? 'Hide Tools' : 'Show Tools'} </Button>
</Button> </div>
</div> <Sheet open={advancedOpen} onOpenChange={setAdvancedOpen}>
<SheetContent side="right" className="w-full sm:max-w-4xl p-0 flex flex-col">
{advancedOpen && ( <SheetHeader className="sr-only">
<div className="flex flex-col gap-3"> <SheetTitle>Room Server Tools</SheetTitle>
<div className="flex justify-end"> <SheetDescription>
Room server telemetry, ACL tools, sensor data, and CLI console
</SheetDescription>
</SheetHeader>
<div className="border-b border-border px-4 py-3 pr-14">
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<div className="min-w-0">
<h2 className="truncate text-base font-semibold">Room Server Tools</h2>
<p className="text-sm text-muted-foreground">{panelTitle}</p>
</div>
<Button <Button
type="button" type="button"
variant="outline" variant="outline"
onClick={handleLoginAsGuest} onClick={handleLoginAsGuest}
disabled={loginLoading} disabled={loginLoading}
className="self-start sm:self-auto"
> >
Refresh ACL Login Refresh ACL Login
</Button> </Button>
</div> </div>
</div>
<div className="flex-1 overflow-y-auto p-4">
<div className="grid gap-3 xl:grid-cols-2"> <div className="grid gap-3 xl:grid-cols-2">
<TelemetryPane <TelemetryPane
data={paneData.status} data={paneData.status}
@@ -288,8 +301,8 @@ export function RoomServerPanel({ contact, onAuthenticatedChange }: RoomServerPa
/> />
</div> </div>
</div> </div>
)} </SheetContent>
</div> </Sheet>
</section> </section>
); );
} }