ui: persist log timestamp toggle and add tooltips to log buttons

internal/site/src/components/containers-table/containers-table.tsx

@@ -32,7 +32,7 @@ import { Separator } from "../ui/separator"
 import { $router, Link } from "../router"
 import { listenKeys } from "nanostores"
 import { getPagePath } from "@nanostores/router"
-import { LogsDisplay, LogsFullscreenDialog, LogsTimestampToggle } from "@/components/logs-display"
+import { LogsDisplay, LogsFullscreenDialog, LogsIconButton, LogsTimestampToggle } from "@/components/logs-display"
 import { getLogTimestampDecorations } from "@/lib/logs"
 
 const syntaxTheme = "github-dark-dimmed"
@@ -325,8 +325,6 @@ function ContainerSheet({
 	activeContainer: RefObject<ContainerRecord | null>
 }) {
 	const [logsDisplay, setLogsDisplay] = useState<string>("")
-	const [showTimestamps, setShowTimestamps] = useState(false)
-	const toggleTimestamps = () => setShowTimestamps((shown) => !shown)
 	const [infoDisplay, setInfoDisplay] = useState<string>("")
 	const [logsFullscreenOpen, setLogsFullscreenOpen] = useState<boolean>(false)
 	const [infoFullscreenOpen, setInfoFullscreenOpen] = useState<boolean>(false)
@@ -385,8 +383,6 @@ function ContainerSheet({
 				name={container.name}
 				onRefresh={refreshLogs}
 				isRefreshing={isRefreshingLogs}
-				showTimestamps={showTimestamps}
-				onToggleTimestamps={toggleTimestamps}
 			/>
 			<InfoFullscreenDialog
 				open={infoFullscreenOpen}
@@ -421,23 +417,17 @@ function ContainerSheet({
 					<div className="px-3 pb-3 -mt-4 flex flex-col gap-3 h-full items-start">
 						<div className="flex items-center w-full">
 							<h3>{t`Logs`}</h3>
-							<LogsTimestampToggle showTimestamps={showTimestamps} onToggle={toggleTimestamps} className="ms-auto" />
+							<LogsTimestampToggle className="ms-auto" />
-							<Button
+							<LogsIconButton label={t`Refresh`} onClick={refreshLogs} disabled={isRefreshingLogs}>
-								variant="ghost"
-								size="sm"
-								onClick={refreshLogs}
-								className="h-8 w-8 p-0"
-								disabled={isRefreshingLogs}
-							>
 								<RefreshCwIcon
 									className={`size-4 transition-transform duration-300 ${isRefreshingLogs ? "animate-spin" : ""}`}
 								/>
-							</Button>
+							</LogsIconButton>
-							<Button variant="ghost" size="sm" onClick={() => setLogsFullscreenOpen(true)} className="h-8 w-8 p-0">
+							<LogsIconButton label={t`Fullscreen`} onClick={() => setLogsFullscreenOpen(true)}>
 								<MaximizeIcon className="size-4" />
-							</Button>
+							</LogsIconButton>
 						</div>
-						<LogsDisplay logsDisplay={logsDisplay} containerRef={logsContainerRef} showTimestamps={showTimestamps} />
+						<LogsDisplay logsDisplay={logsDisplay} containerRef={logsContainerRef} />
 						<div className="flex items-center w-full">
 							<h3>{t`Detail`}</h3>
 							<Button

internal/site/src/components/logs-display.tsx

@@ -1,43 +1,58 @@
 /** biome-ignore-all lint/security/noDangerouslySetInnerHtml: log HTML is generated locally by Shiki */
 import { t } from "@lingui/core/macro"
+import { useStore } from "@nanostores/react"
 import { ClockIcon, RefreshCwIcon } from "lucide-react"
-import { type RefObject, useEffect, useRef } from "react"
+import { type ComponentProps, type FocusEvent, type RefObject, useEffect, useRef } from "react"
 import { Button } from "@/components/ui/button"
 import { Dialog, DialogContent, DialogTitle, dialogIconButtonClassName } from "@/components/ui/dialog"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
+import { $showLogTimestamps, toggleLogTimestamps } from "@/lib/stores"
 import { cn } from "@/lib/utils"
 
 type LogsDisplayProps = {
 	logsDisplay: string
 	containerRef: RefObject<HTMLDivElement | null>
-	showTimestamps?: boolean
 }
 
-export function LogsTimestampToggle({
+// Radix opens a tooltip on any focus, including when a sheet or dialog moves focus to
-	showTimestamps,
+// the button on open / close. Limit it to keyboard focus.
-	onToggle,
+function keyboardFocusOnly(e: FocusEvent<HTMLButtonElement>) {
-	className,
+	if (!e.currentTarget.matches(":focus-visible")) {
-}: {
+		e.preventDefault()
-	showTimestamps: boolean
+	}
-	onToggle: () => void
+}
-	className?: string
+
-}) {
+// Icon button with a tooltip, used in the log panel headers.
+export function LogsIconButton({ label, className, ...props }: { label: string } & ComponentProps<typeof Button>) {
 	return (
-		<Button
+		<Tooltip>
-			variant="ghost"
+			<TooltipTrigger asChild onFocus={keyboardFocusOnly}>
-			size="sm"
+				<Button variant="ghost" size="sm" aria-label={label} className={cn("h-8 w-8 p-0", className)} {...props} />
-			onClick={onToggle}
+			</TooltipTrigger>
-			className={cn("h-8 w-8 p-0", showTimestamps && "bg-accent text-accent-foreground", className)}
+			<TooltipContent>{label}</TooltipContent>
+		</Tooltip>
+	)
+}
+
+// Timestamp visibility is a single persisted preference shared by all log views.
+export function LogsTimestampToggle({ className }: { className?: string }) {
+	const showTimestamps = useStore($showLogTimestamps)
+	return (
+		<LogsIconButton
+			label={showTimestamps ? t`Hide timestamps` : t`Show timestamps`}
+			onClick={toggleLogTimestamps}
+			className={cn(showTimestamps && "bg-accent text-accent-foreground", className)}
 			aria-label={t`Show timestamps`}
 			aria-pressed={showTimestamps}
-			title={showTimestamps ? t`Hide timestamps` : t`Show timestamps`}
 		>
 			<ClockIcon className="size-4" />
-		</Button>
+		</LogsIconButton>
 	)
 }
 
 // Shared by Docker and systemd service sheets so logs behave identically.
-export function LogsDisplay({ logsDisplay, containerRef, showTimestamps = true }: LogsDisplayProps) {
+export function LogsDisplay({ logsDisplay, containerRef }: LogsDisplayProps) {
+	const showTimestamps = useStore($showLogTimestamps)
 	return (
 		<div
 			ref={containerRef}
@@ -59,8 +74,6 @@ export function LogsFullscreenDialog({
 	name,
 	onRefresh,
 	isRefreshing,
-	showTimestamps,
-	onToggleTimestamps,
 }: {
 	open: boolean
 	onOpenChange: (open: boolean) => void
@@ -68,9 +81,8 @@ export function LogsFullscreenDialog({
 	name: string
 	onRefresh: () => void | Promise<void>
 	isRefreshing: boolean
-	showTimestamps: boolean
-	onToggleTimestamps: () => void
 }) {
+	const showTimestamps = useStore($showLogTimestamps)
 	const outerContainerRef = useRef<HTMLDivElement>(null)
 
 	useEffect(() => {
@@ -97,20 +109,22 @@ export function LogsFullscreenDialog({
 						<div className="py-3" dangerouslySetInnerHTML={{ __html: logsDisplay }} />
 					</div>
 				</div>
-				<LogsTimestampToggle
+				<LogsTimestampToggle className="absolute end-18 top-2 hover:bg-white/10 hover:text-white aria-pressed:bg-white/15 aria-pressed:text-white" />
-					showTimestamps={showTimestamps}
+				<Tooltip>
-					onToggle={onToggleTimestamps}
+					<TooltipTrigger asChild onFocus={keyboardFocusOnly}>
-					className="absolute end-18 top-2 hover:bg-white/10 hover:text-white aria-pressed:bg-white/15 aria-pressed:text-white"
+						<button
-				/>
+							onClick={onRefresh}
-				<button
+							className={cn("absolute end-11 top-3 opacity-60 hover:opacity-100", dialogIconButtonClassName)}
-					onClick={onRefresh}
+							disabled={isRefreshing}
-					className={cn("absolute end-11 top-3 opacity-60 hover:opacity-100", dialogIconButtonClassName)}
+							aria-label={t`Refresh`}
-					disabled={isRefreshing}
+						>
-					title={t`Refresh`}
+							<RefreshCwIcon
-					aria-label={t`Refresh`}
+								className={cn("size-4 transition-transform duration-300", isRefreshing && "animate-spin")}
-				>
+							/>
-					<RefreshCwIcon className={cn("size-4 transition-transform duration-300", isRefreshing && "animate-spin")} />
+						</button>
-				</button>
+					</TooltipTrigger>
+					<TooltipContent>{t`Refresh`}</TooltipContent>
+				</Tooltip>
 			</DialogContent>
 		</Dialog>
 	)

internal/site/src/components/systemd-table/systemd-table.tsx

@@ -19,9 +19,8 @@ import { memo, type ReactNode, useEffect, useMemo, useRef, useState } from "reac
 import { getStatusColor, systemdTableCols } from "@/components/systemd-table/systemd-table-columns"
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 import { Card, CardHeader, CardTitle } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
-import { LogsDisplay, LogsFullscreenDialog, LogsTimestampToggle } from "@/components/logs-display"
+import { LogsDisplay, LogsFullscreenDialog, LogsIconButton, LogsTimestampToggle } from "@/components/logs-display"
 import { getLogTimestampDecorations } from "@/lib/logs"
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "@/components/ui/sheet"
 import { TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
@@ -297,8 +296,6 @@ function SystemdSheet({
 	const [isLoading, setIsLoading] = useState(false)
 	const [error, setError] = useState<string | null>(null)
 	const [logs, setLogs] = useState("")
-	const [showTimestamps, setShowTimestamps] = useState(true)
-	const toggleTimestamps = () => setShowTimestamps((shown) => !shown)
 	const [logsStatus, setLogsStatus] = useState<"loading" | "ready" | "empty" | "error">("loading")
 	const [isLoadingLogs, setIsLoadingLogs] = useState(false)
 	const [logsFullscreenOpen, setLogsFullscreenOpen] = useState(false)
@@ -520,8 +517,6 @@ function SystemdSheet({
 				name={service.name}
 				onRefresh={loadLogs}
 				isRefreshing={isLoadingLogs}
-				showTimestamps={showTimestamps}
-				onToggleTimestamps={toggleTimestamps}
 			/>
 			<SheetContent className="w-full min-w-0 sm:max-w-220 p-6 overflow-y-auto">
 				<SheetHeader className="p-0">
@@ -537,32 +532,18 @@ function SystemdSheet({
 								<h3 className="text-sm font-medium">
 									<Trans>Logs</Trans>
 								</h3>
-								<LogsTimestampToggle showTimestamps={showTimestamps} onToggle={toggleTimestamps} className="ms-auto" />
+								<LogsTimestampToggle className="ms-auto" />
-								<Button
+								<LogsIconButton label={t`Refresh`} onClick={loadLogs} disabled={isLoadingLogs}>
-									variant="ghost"
-									size="sm"
-									onClick={loadLogs}
-									className="h-8 w-8 p-0"
-									disabled={isLoadingLogs}
-									aria-label={t`Refresh`}
-								>
 									<RefreshCwIcon
 										className={cn("size-4 transition-transform duration-300", isLoadingLogs && "animate-spin")}
 									/>
-								</Button>
+								</LogsIconButton>
-								<Button
+								<LogsIconButton label={t`Fullscreen`} onClick={() => setLogsFullscreenOpen(true)} disabled={!logs}>
-									variant="ghost"
-									size="sm"
-									onClick={() => setLogsFullscreenOpen(true)}
-									className="h-8 w-8 p-0"
-									aria-label={t`Logs`}
-									disabled={!logs}
-								>
 									<MaximizeIcon className="size-4" />
-								</Button>
+								</LogsIconButton>
 							</div>
 							{logs ? (
-								<LogsDisplay logsDisplay={logs} containerRef={logsContainerRef} showTimestamps={showTimestamps} />
+								<LogsDisplay logsDisplay={logs} containerRef={logsContainerRef} />
 							) : logsStatus === "loading" ? (
 								<>
 									<div className="h-28" aria-busy="true">

internal/site/src/lib/stores.ts

@@ -40,6 +40,17 @@ export const $chartTime = atom<ChartTimes>(defaultChartTime)
 /** Whether to display average or max chart values */
 export const $maxValues = atom(false)
 
+const logTimestampsKey = "besz-log-ts"
+
+/** Whether to show timestamps in Docker and systemd logs */
+export const $showLogTimestamps = atom<boolean>(JSON.parse(localStorage.getItem(logTimestampsKey) ?? "true"))
+
+export function toggleLogTimestamps() {
+	const next = !$showLogTimestamps.get()
+	$showLogTimestamps.set(next)
+	localStorage.setItem(logTimestampsKey, JSON.stringify(next))
+}
+
 // export const UserSettingsSchema = v.object({
 // 	chartTime: v.picklist(["1h", "12h", "24h", "1w", "30d"]),
 // 	emails: v.optional(v.array(v.pipe(v.string(), v.email())), [pb?.authStore?.record?.email ?? ""]),