phughk/ottyl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Resolve ui stuff

Browse Source
This commit is contained in:
Hugh Kaznowski
2026-09-05 18:00:56 +01:00
parent 00c21c8032
commit 070e835fa4
11 changed files with 350 additions and 261 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp/src/components/CollapsibleSection.tsx
+10 -2
View File
@@ -1,6 +1,14 @@
import { useState } from 'react'
import type { TimeRange } from './LogTimeline'
/// Shared look for a primary section's title bar: shaded so it reads as a
/// distinct band rather than blending into the section body below it.
export const sectionHeaderClassName =
'flex items-center justify-between gap-2 border-b border-border-soft bg-surface-1 px-3 py-1.5'
/// Left-hand cluster of a section header: title text, help icon, collapse/pop-out controls.
export const sectionHeaderLeftClassName = 'flex items-center gap-1.5 text-sm font-medium text-text-secondary'
/// localStorage key holding a record of section id -> collapsed, mirroring LogPreview's VISIBLE_PARAM_COLUMNS_STORAGE_KEY pattern.
const COLLAPSED_SECTIONS_STORAGE_KEY = 'ottyl.collapsedSections'
@@ -46,7 +54,7 @@ export function CollapseToggle({ collapsed, onToggle }: { collapsed: boolean; on
title={collapsed ? 'Expand section' : 'Collapse section'}
aria-label={collapsed ? 'Expand section' : 'Collapse section'}
aria-expanded={!collapsed}
className="flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-border-soft text-[10px] leading-none text-text-faint hover:border-border-strong hover:text-text-secondary"
className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-border-soft bg-surface-2 text-xs leading-none text-text-muted hover:border-border-strong hover:text-text-secondary"
>
{collapsed ? '▸' : '▾'}
</button>
@@ -73,7 +81,7 @@ export function PopOutButton({ section, range }: { section: PopOutSectionId; ran
onClick={() => window.open(popOutUrl(section, range), '_blank')}
title="Open in new tab"
aria-label="Open in new tab"
className="flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-border-soft text-[10px] leading-none text-text-faint hover:border-border-strong hover:text-text-secondary"
className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-border-soft bg-surface-2 text-xs leading-none text-text-muted hover:border-border-strong hover:text-text-secondary"
>
↗
</button>