mirror of
https://github.com/Studio-Saelix/sencho.git
synced 2026-07-26 11:49:16 +00:00
feat(mobile): standardize secondary pages and the stack list on the status masthead (#1374)
* feat(security): reflow the node Security page for mobile Below the md breakpoint the Security page now reads as a phone surface instead of a squeezed desktop, with no change to the desktop layout. - Masthead stat cluster moves into a full-width 3-cell strip (critical / high / last scan) below the tab strip, since the masthead hides its inline cluster on a phone. - The eight-section tab strip becomes a horizontally scrollable mono row with an edge mask-fade and a cyan underline on the active tab; every section stays reachable by scroll. - The six totals render as a 3x2 hairline-divided grid instead of the 640px-wide rail that forced a horizontal scroll. - The Images tab becomes a filterable, scrollable list (severity dot, truncated ref, freshness, critical/high count tags) with a chip row, in place of the desktop table. - A freshness footer band states scan recency and scanner version. All mobile treatment is gated by useIsMobile() or max-md: utilities, so the desktop view is byte-identical. Charts are reused full-width. * feat(security): make the mobile Security page a bespoke masthead-led screen On a phone the Security page now drops the global top bar and leads with its masthead (the notifications + more-menu cluster moves into the masthead's right slot), matching Home and Fleet so the mobile shell is continuous across pages. The view is reclassified bespoke and rendered through the masthead-led path; the desktop layout is unchanged. The mobile "more" menu now lists every destination instead of omitting the bottom-tab views, so the same menu opens the same set on every screen rather than changing contents from page to page. * refactor(mobile): extract shared PageHead, sub-tabs, and chip-row primitives Add PageHead (the header for a pushed full-screen secondary view), MobileSubTabs (the mono tab scroller with the cyan active underline), and MobileChipRow (the cyan-filled filter chips) to the shared mobile-ui kit, and rewire the Security page's tab strip and Images filter to consume them. No visual change; this is the shared chrome the remaining mobile pages reuse. * feat(updates): make the mobile Updates page a bespoke masthead-led screen Below the md breakpoint the Auto-Update Readiness page becomes a pushed full-screen view: a PageHead (back chip, the rehomed notifications + more-menu, a "fleet readiness" crumb, and a Recheck action) leads, then a brand-tinted readiness hero, per-node sections, and one-up readiness cards that reuse the same risk badge, version delta, and apply/disabled logic as the desktop board. The desktop layout is unchanged. Reclassifies auto-updates as bespoke and renders it through renderMobileBespoke behind the same hub-only + capability gates as the desktop content path. Also lifts the PageHead, sub-tabs, and chip-row primitives' right-slot to host the rehomed global chrome. * feat(app-store): make the mobile App Store a bespoke masthead-led screen Below the md breakpoint the App Store becomes a pushed full-screen view: a PageHead (back chip, the rehomed notifications + more-menu, and an app-count crumb) leads, the category sidebar collapses into a horizontal chip scroller, and the featured hero plus the tile grid (already single-column on a phone) stack below. The featured hero, tile grid, and deploy sheet are shared with the desktop layout, which is unchanged. Reclassifies templates as bespoke and renders it through renderMobileBespoke. Adds tests for the shared chip row and sub-tabs. * feat(audit): make the mobile Audit Log a bespoke masthead-led screen Below the md breakpoint the Audit Log becomes a pushed full-screen view: a PageHead (back chip, the rehomed notifications + more-menu, an entry-count crumb, and Refresh) leads, then the Stream/Table sub-tabs and the stream view, where the signal-rail tiles fold to a 2x2 grid and the day-banded activity stream reflows. The columnar table reads best on a larger screen, so the Table tab points there on a phone. Desktop is unchanged. Reclassifies audit-log as bespoke behind the same hub-only + capability gates as the desktop content path. * feat(app-store): drop the featured hero and category chips on mobile On a phone the App Store is now search plus a single-column list of every matching app. The featured hero and the category chip row are removed; the would-be-featured app is folded into the list so nothing is dropped. Desktop keeps the featured hero, category sidebar, and grid. * feat(resources): make the mobile Resources page a bespoke masthead-led screen Below the md breakpoint Resources becomes a pushed full-screen view: a PageHead (back chip, the rehomed notifications + more-menu, a docker crumb) leads, then the reclaim hero, the disk-footprint segments, the 2x2 quick-clean grid, and the resource tabs. The raw resource tables scroll horizontally to fit; the detail sheets stay full-screen. The main content and the dialog/sheet overlays are shared with the desktop layout, which is unchanged. * chore(mobile): correct shared-primitive comments and dedupe the lazy fallback Fix the "shared by" consumer lists on the mobile-ui primitives, point the headerActions doc comments at the PageHead (not a masthead), drop the stale "all eight sections" count on the Security tab strip, rename a readiness-card test to match what it asserts, and extract a single Suspense fallback for the four bespoke phone-screen lazy imports. No behavior change. * feat(mobile): codify the fade+arrow tab scroller and fix the Resources tab clip Extract the horizontal tab scroller (edge fade + clickable chevron + wheel-to-horizontal) out of the stack anatomy panel into a shared ScrollableTabRow primitive, and adopt it in the stack anatomy tabs, the mobile sub-tabs (Security / Audit), and the Resources resource tabs. On a phone the Resources tabs now scroll horizontally, so the "Unmanaged" tab and its count no longer clip out of the frame. Desktop is unchanged. * feat(logs): make the mobile Logs page a bespoke masthead-led screen Below the md breakpoint the global Logs view drops the TopBar for a PageHead, hides the metrics rail, collapses the stream and level filters into a single Filters dropdown, turns the search into an icon that expands to an input, and folds the pause / clear / download controls into an expanding floating action button that retracts after each action. Desktop is unchanged. Reclassifies global-observability as bespoke behind the same hub-only gate as the desktop content path. * feat(mobile): standardize secondary pages on the status masthead Adopt the Home/Fleet/Security status masthead (cyan rail, kicker, serif- italic state word + tone dot, meta line, notifications + more-menu in the right slot) on every bespoke secondary page (Resources, App Store, Updates, Audit, Logs), replacing the title-led PageHead, which is removed. Each page derives a status word: Updates "Up to date" / "N pending", Logs Streaming / Idle / Offline, Audit Healthy / Review / Alerts, Resources Reclaimable / Tidy, App Store the app count. The "< Stacks" back chip is dropped (the bottom tab bar and more-menu own navigation), the page actions (Recheck, Refresh) move into the body, and the Updates readiness hero folds into the masthead. Also make the Resources tab tables scroll horizontally instead of clipping on the right. Desktop is unchanged. * feat(stacks): lead the mobile stack list with the status masthead On phones the stack list now opens with the shared status masthead instead of the global top bar plus an in-sidebar node row. The node switcher renders as a compact kicker chip in the masthead, the serif word summarizes stack health (down, updates, or all running), and notifications plus the more-menu sit in the right slot. This matches the Home, Fleet, and Security pages. The dropped top bar hosted global search, so the more-menu gains a Search item that opens the command palette. The masthead kicker now accepts either a styled kicker or a raw slot, enforced as a discriminated union so exactly one source is supplied. Desktop is unchanged: the new chrome is gated to the mobile shell and the sidebar rows hide via max-md only. * fix(stacks): only call the list "All running" when every stack is up The mobile stack masthead derived its health word from filterCounts, where up counts running stacks and down counts exited ones. Any other status, and the window before statuses load, counts as neither, so a list with no exited stacks but some not yet running fell through to "All running" even though it was not. Gate that label on up equal to all, and otherwise show the running count out of the total so the headline stays honest while statuses settle.
This commit is contained in:
Anso
@@ -1,4 +1,4 @@
|
||||
import { useState, useEffect, useMemo } from 'react';
|
||||
import { useState, useEffect, useMemo, type ReactNode } from 'react';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
@@ -13,6 +13,8 @@ import { apiFetch, withDeploySession } from '@/lib/api';
|
||||
import { useDeployFeedback } from '@/context/DeployFeedbackContext';
|
||||
import { useNodes } from '@/context/NodeContext';
|
||||
import { useAuth } from '@/context/AuthContext';
|
||||
import { useIsMobile } from '@/hooks/use-is-mobile';
|
||||
import { Masthead } from '@/components/mobile/mobile-ui';
|
||||
import { CategorySidebar } from '@/components/appstore/CategorySidebar';
|
||||
import { FeaturedHero } from '@/components/appstore/FeaturedHero';
|
||||
import { TemplateTile } from '@/components/appstore/TemplateTile';
|
||||
@@ -31,9 +33,12 @@ interface PortInUseInfo {
|
||||
|
||||
interface AppStoreViewProps {
|
||||
onDeploySuccess: (stackName: string) => void;
|
||||
/** Notifications + more-menu cluster for the mobile masthead, rehomed from the dropped TopBar. */
|
||||
headerActions?: ReactNode;
|
||||
}
|
||||
|
||||
export function AppStoreView({ onDeploySuccess }: AppStoreViewProps) {
|
||||
export function AppStoreView({ onDeploySuccess, headerActions }: AppStoreViewProps) {
|
||||
const isMobile = useIsMobile();
|
||||
const { can } = useAuth();
|
||||
const { activeNode } = useNodes();
|
||||
const { runWithLog } = useDeployFeedback();
|
||||
@@ -280,19 +285,107 @@ export function AppStoreView({ onDeploySuccess }: AppStoreViewProps) {
|
||||
return conflicts;
|
||||
}, [selectedTemplate, portVars, portsInUse]);
|
||||
|
||||
return (
|
||||
const searchInput = (
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
type="search"
|
||||
placeholder="Search App Store..."
|
||||
className="pl-8"
|
||||
value={searchQuery}
|
||||
onChange={(e) => { setSearchQuery(e.target.value); }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
const contentBody = loading ? (
|
||||
<div className="flex items-center justify-center h-48">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col gap-5 pb-8 pr-4">
|
||||
{featuredTemplate && (
|
||||
<FeaturedHero
|
||||
template={featuredTemplate}
|
||||
category={selectedCategory !== 'All' ? selectedCategory : undefined}
|
||||
onOpen={handleSelectTemplate}
|
||||
imgError={!!featuredTemplate.logo && !!imgErrors[featuredTemplate.logo]}
|
||||
onImgError={() => featuredTemplate.logo && setImgErrors(prev => ({ ...prev, [featuredTemplate.logo!]: true }))}
|
||||
/>
|
||||
)}
|
||||
|
||||
{gridTemplates.length > 0 ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
|
||||
{gridTemplates.map((t, idx) => (
|
||||
<TemplateTile
|
||||
key={`${t.title}-${idx}`}
|
||||
template={t}
|
||||
onSelect={handleSelectTemplate}
|
||||
imgError={!!t.logo && !!imgErrors[t.logo]}
|
||||
onImgError={() => t.logo && setImgErrors(prev => ({ ...prev, [t.logo!]: true }))}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : !featuredTemplate ? (
|
||||
<div className="py-12 text-center text-muted-foreground">
|
||||
<Info className="w-8 h-8 mx-auto mb-2 opacity-50" />
|
||||
{templates.length === 0 ? (
|
||||
<p>Registry returned no templates. Check your registry URL in Settings.</p>
|
||||
) : (
|
||||
<p>No apps found matching "{searchQuery}"</p>
|
||||
)}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
|
||||
// The phone view is search + a single-column list of every matching app:
|
||||
// no featured hero and no category chips (the featured app is folded into
|
||||
// the list so it is not dropped).
|
||||
const mobileContent = loading ? (
|
||||
<div className="flex items-center justify-center h-48">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : filtered.length > 0 ? (
|
||||
<div className="flex flex-col gap-3 pb-8">
|
||||
{filtered.map((t, idx) => (
|
||||
<TemplateTile
|
||||
key={`${t.title}-${idx}`}
|
||||
template={t}
|
||||
onSelect={handleSelectTemplate}
|
||||
imgError={!!t.logo && !!imgErrors[t.logo]}
|
||||
onImgError={() => t.logo && setImgErrors(prev => ({ ...prev, [t.logo!]: true }))}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="py-12 text-center text-muted-foreground">
|
||||
<Info className="w-8 h-8 mx-auto mb-2 opacity-50" />
|
||||
{templates.length === 0 ? (
|
||||
<p>Registry returned no templates. Check your registry URL in Settings.</p>
|
||||
) : (
|
||||
<p>No apps found matching "{searchQuery}"</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
const layout = isMobile ? (
|
||||
<div className="flex h-full min-h-0 flex-col">
|
||||
<Masthead
|
||||
kicker="app store"
|
||||
state={`${filtered.length} app${filtered.length !== 1 ? 's' : ''}`}
|
||||
stateTone="brand"
|
||||
live={false}
|
||||
meta={categoryEntries.length > 1 ? `${categoryEntries.length - 1} categories` : 'self-hosted templates'}
|
||||
right={headerActions}
|
||||
/>
|
||||
<div className="shrink-0 px-4 pt-3">{searchInput}</div>
|
||||
<div className="flex-1 min-h-0 overflow-y-auto px-4 pt-3">{mobileContent}</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col h-full gap-5">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
type="search"
|
||||
placeholder="Search App Store..."
|
||||
className="pl-8"
|
||||
value={searchQuery}
|
||||
onChange={(e) => { setSearchQuery(e.target.value); }}
|
||||
/>
|
||||
</div>
|
||||
{searchInput}
|
||||
<span className="text-xs text-stat-subtitle font-mono tabular-nums shrink-0">
|
||||
{filtered.length} app{filtered.length !== 1 ? 's' : ''}
|
||||
</span>
|
||||
@@ -307,49 +400,14 @@ export function AppStoreView({ onDeploySuccess }: AppStoreViewProps) {
|
||||
/>
|
||||
)}
|
||||
|
||||
<ScrollArea className="flex-1">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center h-48">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col gap-5 pb-8 pr-4">
|
||||
{featuredTemplate && (
|
||||
<FeaturedHero
|
||||
template={featuredTemplate}
|
||||
category={selectedCategory !== 'All' ? selectedCategory : undefined}
|
||||
onOpen={handleSelectTemplate}
|
||||
imgError={!!featuredTemplate.logo && !!imgErrors[featuredTemplate.logo]}
|
||||
onImgError={() => featuredTemplate.logo && setImgErrors(prev => ({ ...prev, [featuredTemplate.logo!]: true }))}
|
||||
/>
|
||||
)}
|
||||
|
||||
{gridTemplates.length > 0 ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
|
||||
{gridTemplates.map((t, idx) => (
|
||||
<TemplateTile
|
||||
key={`${t.title}-${idx}`}
|
||||
template={t}
|
||||
onSelect={handleSelectTemplate}
|
||||
imgError={!!t.logo && !!imgErrors[t.logo]}
|
||||
onImgError={() => t.logo && setImgErrors(prev => ({ ...prev, [t.logo!]: true }))}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : !featuredTemplate ? (
|
||||
<div className="py-12 text-center text-muted-foreground">
|
||||
<Info className="w-8 h-8 mx-auto mb-2 opacity-50" />
|
||||
{templates.length === 0 ? (
|
||||
<p>Registry returned no templates. Check your registry URL in Settings.</p>
|
||||
) : (
|
||||
<p>No apps found matching "{searchQuery}"</p>
|
||||
)}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
</ScrollArea>
|
||||
<ScrollArea className="flex-1">{contentBody}</ScrollArea>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{layout}
|
||||
|
||||
<SystemSheet
|
||||
open={isSheetOpen}
|
||||
@@ -612,6 +670,6 @@ export function AppStoreView({ onDeploySuccess }: AppStoreViewProps) {
|
||||
</>
|
||||
)}
|
||||
</SystemSheet>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useState, useEffect, useCallback, Fragment, useMemo } from 'react';
|
||||
import { useState, useEffect, useCallback, Fragment, useMemo, type ReactNode } from 'react';
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
@@ -12,6 +12,8 @@ import { ChevronLeft, ChevronRight, Search, ScrollText, RefreshCw, Download, Che
|
||||
import { apiFetch } from '@/lib/api';
|
||||
import { toast } from '@/components/ui/toast-store';
|
||||
import { useLicense } from '@/context/LicenseContext';
|
||||
import { useIsMobile } from '@/hooks/use-is-mobile';
|
||||
import { Masthead, MobileSubTabs } from '@/components/mobile/mobile-ui';
|
||||
|
||||
type AnomalyFlag = 'unusual_hour' | 'new_ip' | 'first_seen_actor';
|
||||
|
||||
@@ -109,7 +111,13 @@ function isExpiredSession(err: unknown): boolean {
|
||||
return err instanceof Error && err.message === 'Unauthorized';
|
||||
}
|
||||
|
||||
export function AuditLogView() {
|
||||
interface AuditLogViewProps {
|
||||
/** Notifications + more-menu cluster for the mobile masthead, rehomed from the dropped TopBar. */
|
||||
headerActions?: ReactNode;
|
||||
}
|
||||
|
||||
export function AuditLogView({ headerActions }: AuditLogViewProps = {}) {
|
||||
const isMobile = useIsMobile();
|
||||
// Community gets the recent-activity stream; CSV/JSON export, the stat
|
||||
// tiles, and per-row anomaly annotation are paid. The backend clamps the
|
||||
// list to a 14-day window for unpaid tiers, so this flag only governs the
|
||||
@@ -260,6 +268,65 @@ export function AuditLogView() {
|
||||
return groups;
|
||||
}, [entries]);
|
||||
|
||||
if (isMobile) {
|
||||
// Derive a health-style state word from the (paid) failure-rate signal,
|
||||
// matching the Home/Fleet/Security masthead standard.
|
||||
const auditSeverity = isPaid ? stats?.failure_rate.severity : undefined;
|
||||
const auditState = !auditSeverity ? 'Activity' : auditSeverity === 'alert' ? 'Alerts' : auditSeverity === 'warn' ? 'Review' : 'Healthy';
|
||||
const auditTone = auditSeverity === 'alert' ? 'destructive' : auditSeverity === 'warn' ? 'warning' : auditSeverity === 'ok' ? 'success' : 'brand';
|
||||
return (
|
||||
<div className="flex h-full min-h-0 flex-col">
|
||||
<Masthead
|
||||
kicker="audit · 24h"
|
||||
state={auditState}
|
||||
stateTone={auditTone}
|
||||
live={auditSeverity === 'alert' || auditSeverity === 'warn'}
|
||||
meta={`${total} ${total === 1 ? 'entry' : 'entries'}${isPaid && stats ? ` · ${stats.actors_24h.value} actors` : ''}`}
|
||||
right={headerActions}
|
||||
/>
|
||||
<MobileSubTabs
|
||||
tabs={[{ value: 'stream' as const, label: 'Stream' }, { value: 'table' as const, label: 'Table' }]}
|
||||
active={view}
|
||||
onSelect={setView}
|
||||
ariaLabel="Audit views"
|
||||
/>
|
||||
<div className="flex-1 min-h-0 overflow-y-auto p-4">
|
||||
<div className="mb-3 flex justify-end">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="gap-1.5"
|
||||
onClick={() => { fetchLogs(); if (view === 'stream' && isPaid) fetchStats(); }}
|
||||
disabled={loading}
|
||||
>
|
||||
<RefreshCw className={`h-3.5 w-3.5 ${loading ? 'animate-spin' : ''}`} strokeWidth={1.5} />
|
||||
Refresh
|
||||
</Button>
|
||||
</div>
|
||||
{view === 'stream' ? (
|
||||
<StreamView
|
||||
stats={stats}
|
||||
showStats={isPaid}
|
||||
loading={loading && entries.length === 0}
|
||||
groups={groupedEntries}
|
||||
now={now}
|
||||
totalPages={totalPages}
|
||||
page={page}
|
||||
onPage={setPage}
|
||||
/>
|
||||
) : (
|
||||
<div className="py-16 text-center">
|
||||
<p className="font-display italic text-xl text-stat-value">Table view</p>
|
||||
<p className="mx-auto mt-2 max-w-[260px] font-mono text-[11px] leading-[17px] text-stat-subtitle">
|
||||
The columnar table reads best on a larger screen. The Stream tab shows the same activity, reflowed for mobile.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex-1 flex flex-col gap-4 p-6 overflow-auto">
|
||||
<Card className="rounded-lg border border-card-border border-t-card-border-top bg-card text-card-foreground shadow-card-bevel">
|
||||
@@ -488,7 +555,7 @@ function StreamView({ stats, showStats, loading, groups, now, page, totalPages,
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
{showStats && (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-0 rounded-md border border-card-border bg-card/40 overflow-hidden">
|
||||
<div className="grid grid-cols-1 max-md:grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 gap-0 rounded-md border border-card-border bg-card/40 overflow-hidden">
|
||||
{tiles.length === 0 ? (
|
||||
Array.from({ length: 4 }).map((_, i) => (
|
||||
<div key={i} className="px-4 py-3 border-r last:border-r-0 border-card-border">
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
@@ -6,6 +6,8 @@ import { RefreshCw, Shield, AlertTriangle, ShieldAlert, CircleSlash, Clock, Play
|
||||
import { toast } from '@/components/ui/toast-store';
|
||||
import { apiFetch, fetchForNode } from '@/lib/api';
|
||||
import { useNodes } from '@/context/NodeContext';
|
||||
import { useIsMobile } from '@/hooks/use-is-mobile';
|
||||
import { Masthead, Kicker } from '@/components/mobile/mobile-ui';
|
||||
import { ImageSourceMenu } from './ImageSourceMenu';
|
||||
import type { ScheduledTask } from '@/types/scheduling';
|
||||
|
||||
@@ -39,7 +41,7 @@ interface UpdatePreview {
|
||||
changelog: string | null;
|
||||
}
|
||||
|
||||
interface StackCard {
|
||||
export interface StackCard {
|
||||
stack: string;
|
||||
nodeId: number;
|
||||
preview: UpdatePreview | null;
|
||||
@@ -367,7 +369,101 @@ function NodeGroupSection({
|
||||
);
|
||||
}
|
||||
|
||||
function AutoUpdateReadinessContent() {
|
||||
// --- mobile (<md) bespoke pieces ---------------------------------------------
|
||||
|
||||
/** One-up readiness card for the phone screen. Reuses RiskBadge + VersionDiff
|
||||
* and the same apply/disabled logic as the desktop card. Exported for tests. */
|
||||
export function MobileReadinessCard({ card, onApply }: { card: StackCard; onApply: (stack: string, nodeId: number) => void }) {
|
||||
const { stack, nodeId, preview, previewLoaded, scheduledTask, applying, autoUpdateEnabled } = card;
|
||||
const failed = previewLoaded && preview === null;
|
||||
const blocked = preview?.summary.blocked ?? false;
|
||||
const bump = preview?.summary.semver_bump ?? 'none';
|
||||
const nextRun = scheduledTask?.next_run_at ?? null;
|
||||
const changelog = preview?.changelog ?? 'No changelog available from the registry yet.';
|
||||
const dot = changelog.indexOf('.');
|
||||
const lead = dot > 0 ? changelog.slice(0, dot + 1) : '';
|
||||
const rest = dot > 0 ? changelog.slice(dot + 1) : changelog;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-[10px] rounded-xl border border-card-border border-t-card-border-top bg-card p-[14px] shadow-card-bevel">
|
||||
<div className="flex items-start justify-between gap-[10px]">
|
||||
<div className="min-w-0 flex-1">
|
||||
<Kicker>stack</Kicker>
|
||||
<div className="mt-px truncate font-display italic text-[23px] leading-[26px] text-stat-value">{stack}</div>
|
||||
</div>
|
||||
<div className="flex shrink-0 items-center gap-1.5">
|
||||
{!autoUpdateEnabled && (
|
||||
<span className="inline-flex items-center gap-1 rounded-full border border-card-border px-2 py-[3px] font-mono text-[10px] uppercase tracking-[0.1em] text-stat-subtitle">
|
||||
<CircleSlash className="h-3 w-3" strokeWidth={1.5} />Auto: Off
|
||||
</span>
|
||||
)}
|
||||
{previewLoaded && preview && <RiskBadge bump={bump} blocked={blocked} />}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!previewLoaded ? (
|
||||
<div className="font-mono text-xs text-stat-subtitle/80">Checking registry...</div>
|
||||
) : failed ? (
|
||||
<div className="font-mono text-xs text-destructive/80">Preview failed. Registry may be unreachable.</div>
|
||||
) : (
|
||||
<>
|
||||
{preview!.summary.update_kind === 'digest' ? (
|
||||
<div className="flex items-baseline gap-2 font-mono text-[13px]">
|
||||
<span className="text-stat-subtitle">{preview!.summary.current_tag}</span>
|
||||
<span className="text-[10px] uppercase tracking-[0.12em] text-brand">Rebuild available</span>
|
||||
</div>
|
||||
) : (
|
||||
<VersionDiff current={preview!.summary.current_tag} next={preview!.summary.next_tag} />
|
||||
)}
|
||||
<div className="truncate font-mono text-[11px] text-stat-subtitle">{preview!.summary.primary_image ?? '-'}</div>
|
||||
<div className="border-t border-dashed border-card-border pt-[9px] text-[12.5px] leading-[18px] text-stat-subtitle">
|
||||
{lead && <b className="text-stat-title">{lead}</b>}{rest}
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-[10px] pt-0.5">
|
||||
<span className={`font-mono text-[11px] ${blocked ? 'text-destructive' : 'text-stat-subtitle'}`}>
|
||||
{nextRun ? <>{formatClock(nextRun)} · {formatRelative(nextRun)}</> : (blocked ? 'Held for review' : 'No schedule')}
|
||||
</span>
|
||||
<Button
|
||||
size="sm"
|
||||
variant={blocked || !autoUpdateEnabled ? 'outline' : 'default'}
|
||||
onClick={() => onApply(stack, nodeId)}
|
||||
disabled={blocked || applying || !autoUpdateEnabled}
|
||||
className="gap-1.5"
|
||||
>
|
||||
<Play className="h-3.5 w-3.5" strokeWidth={1.5} aria-hidden="true" />
|
||||
{applying ? 'Applying...' : 'Apply now'}
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function MobileNodeSection({ group, onApply }: { group: NodeGroup; onApply: (stack: string, nodeId: number) => void }) {
|
||||
return (
|
||||
<section>
|
||||
<div className="mb-[13px] flex items-baseline gap-2 border-b border-hairline pb-2">
|
||||
<span className="truncate font-display italic text-[19px] leading-tight text-stat-value">{group.nodeName}</span>
|
||||
<span className="shrink-0 rounded-[5px] border border-card-border px-1.5 py-px font-mono text-[10px] uppercase tracking-[0.1em] text-stat-subtitle">{group.nodeType}</span>
|
||||
<span className="shrink-0 font-mono text-[11px] text-stat-icon">{group.cards.length} {group.cards.length === 1 ? 'stack' : 'stacks'}</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3">
|
||||
{group.cards.map(card => (
|
||||
<MobileReadinessCard key={`${card.nodeId}::${card.stack}`} card={card} onApply={onApply} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface AutoUpdateReadinessProps {
|
||||
/** Notifications + more-menu cluster for the mobile masthead, rehomed from the dropped TopBar. */
|
||||
headerActions?: ReactNode;
|
||||
}
|
||||
|
||||
function AutoUpdateReadinessContent({ headerActions }: AutoUpdateReadinessProps) {
|
||||
const isMobile = useIsMobile();
|
||||
const { nodes } = useNodes();
|
||||
const [groups, setGroups] = useState<NodeGroup[]>([]);
|
||||
const [reachableNodeCount, setReachableNodeCount] = useState<number | null>(null);
|
||||
@@ -618,6 +714,45 @@ function AutoUpdateReadinessContent() {
|
||||
&& onlineNodeCount > 0
|
||||
&& reachableNodeCount < onlineNodeCount;
|
||||
|
||||
if (isMobile) {
|
||||
return (
|
||||
<div className="flex h-full min-h-0 flex-col">
|
||||
<Masthead
|
||||
kicker="fleet · updates"
|
||||
state={total === 0 ? 'Up to date' : `${total} pending`}
|
||||
stateTone={total === 0 ? 'success' : 'warning'}
|
||||
live={total > 0}
|
||||
meta={total > 0 ? `${ready} ready · ${total - ready} in review` : 'all stacks current'}
|
||||
right={headerActions}
|
||||
/>
|
||||
<div className="flex-1 min-h-0 overflow-y-auto p-4 [&>*+*]:mt-4">
|
||||
<div className="flex justify-end">
|
||||
<Button variant="outline" size="sm" onClick={handleRefresh} disabled={refreshing} aria-label="Recheck registries" className="gap-1.5">
|
||||
<RefreshCw className={`h-3.5 w-3.5 ${refreshing ? 'animate-spin' : ''}`} strokeWidth={1.5} aria-hidden="true" />
|
||||
Recheck
|
||||
</Button>
|
||||
</div>
|
||||
{showPartialBanner && (
|
||||
<div className="font-mono text-[11px] text-stat-subtitle">
|
||||
{reachableNodeCount} of {onlineNodeCount} nodes reachable. Unreachable nodes are not shown.
|
||||
</div>
|
||||
)}
|
||||
{loading && groups.length === 0 ? (
|
||||
<div className="flex items-center justify-center py-16 font-mono text-xs text-stat-subtitle">Loading readiness...</div>
|
||||
) : groups.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-card-border bg-card/40 py-16 text-center">
|
||||
<Shield className="h-8 w-8 text-success/70" strokeWidth={1.5} aria-hidden="true" />
|
||||
<div className="font-display italic text-xl text-stat-value">All stacks on current builds</div>
|
||||
<div className="font-mono text-[11px] text-stat-subtitle">Sencho rechecks on the scheduler interval.</div>
|
||||
</div>
|
||||
) : (
|
||||
groups.map(group => <MobileNodeSection key={group.nodeId} group={group} onApply={handleApply} />)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6 p-6 max-w-[1600px] mx-auto w-full">
|
||||
<ReadinessHero
|
||||
@@ -657,6 +792,6 @@ function AutoUpdateReadinessContent() {
|
||||
);
|
||||
}
|
||||
|
||||
export default function AutoUpdateReadinessView() {
|
||||
return <AutoUpdateReadinessContent />;
|
||||
export default function AutoUpdateReadinessView(props: AutoUpdateReadinessProps = {}) {
|
||||
return <AutoUpdateReadinessContent {...props} />;
|
||||
}
|
||||
|
||||
@@ -44,18 +44,26 @@ import { toast } from '@/components/ui/toast-store';
|
||||
import { useIsMobile } from '@/hooks/use-is-mobile';
|
||||
import { MobileTabBar } from './MobileTabBar';
|
||||
import { MobileMoreMenu } from './MobileMoreMenu';
|
||||
import { Masthead, type Tone } from './mobile/mobile-ui';
|
||||
import { MobileDashboard } from './mobile/MobileDashboard';
|
||||
import { MobileFleet } from './mobile/MobileFleet';
|
||||
import { MobileSchedules } from './mobile/MobileSchedules';
|
||||
import { MobileSettings } from './mobile/MobileSettings';
|
||||
import { deriveMobileSurface, type MobileView } from './EditorLayout/mobile-surface';
|
||||
import { BESPOKE_MOBILE_VIEWS } from './EditorLayout/mobile-treatments';
|
||||
import { CapabilityGate } from './CapabilityGate';
|
||||
import { HubOnlyGate } from './HubOnlyGate';
|
||||
import type { SectionId } from './settings/types';
|
||||
|
||||
// The Security page is heavy (charts, scan sheets) and already code-split on the
|
||||
// desktop content path, so the bespoke phone screen reuses the same lazy chunk
|
||||
// rather than pulling SecurityView into the main shell bundle.
|
||||
// These bespoke phone screens reuse the desktop view's component (with a mobile
|
||||
// branch), code-split exactly like the desktop content path so the heavy chunks
|
||||
// stay out of the main shell bundle.
|
||||
const SecurityView = lazy(() => import('./SecurityView').then(m => ({ default: m.SecurityView })));
|
||||
const AutoUpdateReadinessView = lazy(() => import('./AutoUpdateReadinessView'));
|
||||
const AppStoreView = lazy(() => import('./AppStoreView').then(m => ({ default: m.AppStoreView })));
|
||||
const AuditLogView = lazy(() => import('./AuditLogView').then(m => ({ default: m.AuditLogView })));
|
||||
const ResourcesView = lazy(() => import('./ResourcesView'));
|
||||
const GlobalObservabilityView = lazy(() => import('./GlobalObservabilityView').then(m => ({ default: m.GlobalObservabilityView })));
|
||||
|
||||
export default function EditorLayout() {
|
||||
const { isAdmin, can } = useAuth();
|
||||
@@ -742,6 +750,12 @@ export default function EditorLayout() {
|
||||
// dropped and the screen renders its own masthead (with notifications +
|
||||
// more-menu rehomed into the right slot).
|
||||
const bespokeContent = mobileSurface === 'content' && BESPOKE_MOBILE_VIEWS.has(activeView);
|
||||
// Shared lazy-chunk fallback for the code-split bespoke phone screens.
|
||||
const lazyFallback = (
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<Loader2 className="h-5 w-5 animate-spin text-stat-subtitle" strokeWidth={1.5} />
|
||||
</div>
|
||||
);
|
||||
const renderMobileBespoke = () => {
|
||||
switch (activeView) {
|
||||
case 'dashboard':
|
||||
@@ -781,18 +795,101 @@ export default function EditorLayout() {
|
||||
/>
|
||||
</Suspense>
|
||||
);
|
||||
case 'auto-updates':
|
||||
// Same gates as the desktop content path (ViewRouter): hub-only +
|
||||
// the auto-updates capability, preserved on the phone surface.
|
||||
return (
|
||||
<HubOnlyGate>
|
||||
<CapabilityGate capability="auto-updates" featureName="Auto-Update Readiness">
|
||||
<Suspense fallback={lazyFallback}>
|
||||
<AutoUpdateReadinessView headerActions={mobileMastheadActions} />
|
||||
</Suspense>
|
||||
</CapabilityGate>
|
||||
</HubOnlyGate>
|
||||
);
|
||||
case 'templates':
|
||||
return (
|
||||
<Suspense fallback={lazyFallback}>
|
||||
<AppStoreView
|
||||
onDeploySuccess={(sName) => { refreshStacks(); void stackActions.loadFile(sName); }}
|
||||
headerActions={mobileMastheadActions}
|
||||
/>
|
||||
</Suspense>
|
||||
);
|
||||
case 'audit-log':
|
||||
return (
|
||||
<HubOnlyGate>
|
||||
<CapabilityGate capability="audit-log" featureName="Audit Log">
|
||||
<Suspense fallback={lazyFallback}>
|
||||
<AuditLogView headerActions={mobileMastheadActions} />
|
||||
</Suspense>
|
||||
</CapabilityGate>
|
||||
</HubOnlyGate>
|
||||
);
|
||||
case 'resources':
|
||||
return (
|
||||
<Suspense fallback={lazyFallback}>
|
||||
<ResourcesView headerActions={mobileMastheadActions} />
|
||||
</Suspense>
|
||||
);
|
||||
case 'global-observability':
|
||||
// Hub-only, like the desktop content path (ViewRouter); no capability gate.
|
||||
return (
|
||||
<HubOnlyGate>
|
||||
<Suspense fallback={lazyFallback}>
|
||||
<GlobalObservabilityView headerActions={mobileMastheadActions} />
|
||||
</Suspense>
|
||||
</HubOnlyGate>
|
||||
);
|
||||
default:
|
||||
return workspaceEl;
|
||||
}
|
||||
};
|
||||
|
||||
// The mobile Stacks list leads with the status masthead (no TopBar): the
|
||||
// node switcher is its kicker chip, the serif word summarizes stack
|
||||
// health, and notifications + the more-menu sit in the right slot.
|
||||
// up counts 'running' and down counts 'exited'; any other status (or the
|
||||
// window before statuses load) is neither, so "All running" must require
|
||||
// every stack to be up rather than just no stack being down.
|
||||
const { all: stacksAll, up: stacksUp, down: stacksDown, updates: stacksUpdates } = filterCounts;
|
||||
let stacksState = 'All running';
|
||||
let stacksTone: Tone = 'success';
|
||||
if (stacksAll === 0) {
|
||||
stacksState = 'No stacks';
|
||||
} else if (stacksDown > 0) {
|
||||
stacksState = `${stacksDown} down`;
|
||||
stacksTone = 'destructive';
|
||||
} else if (stacksUpdates > 0) {
|
||||
stacksState = `${stacksUpdates} update${stacksUpdates === 1 ? '' : 's'}`;
|
||||
stacksTone = 'warning';
|
||||
} else if (stacksUp !== stacksAll) {
|
||||
stacksState = `${stacksUp}/${stacksAll} up`;
|
||||
stacksTone = 'brand';
|
||||
}
|
||||
const stacksMasthead = (
|
||||
<Masthead
|
||||
kickerSlot={<NodeSwitcher compact onManageNodes={() => openSettings('nodes')} />}
|
||||
state={stacksState}
|
||||
stateTone={stacksTone}
|
||||
live={stacksDown > 0}
|
||||
meta={`${stacksAll} ${stacksAll === 1 ? 'stack' : 'stacks'} · ${stacksUp} up · ${stacksDown} down`}
|
||||
right={mobileMastheadActions}
|
||||
/>
|
||||
);
|
||||
|
||||
if (isMobile) {
|
||||
return (
|
||||
<div className="flex h-screen w-screen flex-col overflow-hidden app-canvas text-foreground">
|
||||
{commandPaletteEl}
|
||||
{mobileSurface !== 'detail' && !bespokeContent && topBarEl}
|
||||
{mobileSurface === 'content' && !bespokeContent && topBarEl}
|
||||
<div className="flex-1 min-h-0 flex flex-col overflow-hidden">
|
||||
{mobileSurface === 'list' && sidebarEl}
|
||||
{mobileSurface === 'list' && (
|
||||
<>
|
||||
{stacksMasthead}
|
||||
{sidebarEl}
|
||||
</>
|
||||
)}
|
||||
{mobileSurface === 'content' && (bespokeContent ? renderMobileBespoke() : workspaceEl)}
|
||||
{mobileSurface === 'detail' && (
|
||||
detailReady ? (
|
||||
|
||||
@@ -32,7 +32,7 @@ describe('mobile treatments', () => {
|
||||
// components/mobile/, or a masthead-led mobile branch of the desktop view as
|
||||
// Security does).
|
||||
expect([...BESPOKE_MOBILE_VIEWS].sort()).toEqual(
|
||||
['dashboard', 'fleet', 'scheduled-ops', 'security', 'settings'],
|
||||
['audit-log', 'auto-updates', 'dashboard', 'fleet', 'global-observability', 'resources', 'scheduled-ops', 'security', 'settings', 'templates'],
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -21,12 +21,12 @@ export const MOBILE_TREATMENTS: Record<ActiveView, MobileTreatment> = {
|
||||
'scheduled-ops': 'bespoke',
|
||||
settings: 'bespoke',
|
||||
editor: 'detail',
|
||||
resources: 'responsive',
|
||||
resources: 'bespoke',
|
||||
security: 'bespoke',
|
||||
templates: 'responsive',
|
||||
'global-observability': 'responsive',
|
||||
'auto-updates': 'responsive',
|
||||
'audit-log': 'responsive',
|
||||
templates: 'bespoke',
|
||||
'global-observability': 'bespoke',
|
||||
'auto-updates': 'bespoke',
|
||||
'audit-log': 'bespoke',
|
||||
'host-console': 'desktop-only',
|
||||
};
|
||||
|
||||
|
||||
@@ -67,7 +67,8 @@ export function GlobalCommandPaletteProvider({ children }: { children: ReactNode
|
||||
return <PaletteContext.Provider value={value}>{children}</PaletteContext.Provider>;
|
||||
}
|
||||
|
||||
function usePaletteState(): PaletteState {
|
||||
// eslint-disable-next-line react-refresh/only-export-components
|
||||
export function usePaletteState(): PaletteState {
|
||||
const ctx = useContext(PaletteContext);
|
||||
if (!ctx) throw new Error('usePaletteState must be used within GlobalCommandPaletteProvider');
|
||||
return ctx;
|
||||
|
||||
@@ -2,14 +2,16 @@ import { useEffect, useState, useMemo, useRef, useCallback, useLayoutEffect, mem
|
||||
import type { ReactNode } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
|
||||
import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import { PageMasthead } from '@/components/ui/PageMasthead';
|
||||
import { SignalRail, type SignalTile } from '@/components/ui/SignalRail';
|
||||
import { SegmentedControl, type SegmentedControlOption } from '@/components/ui/segmented-control';
|
||||
import { Download, Trash2, Search, Filter, AlertCircle, Pause, Play } from 'lucide-react';
|
||||
import { Download, Trash2, Search, Filter, AlertCircle, Pause, Play, SlidersHorizontal, X } from 'lucide-react';
|
||||
import { apiFetch } from '@/lib/api';
|
||||
import { useNodes } from '@/context/NodeContext';
|
||||
import { useIsMobile } from '@/hooks/use-is-mobile';
|
||||
import { Masthead } from '@/components/mobile/mobile-ui';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const MAX_LOG_ENTRIES = 2000;
|
||||
@@ -78,7 +80,15 @@ const LEVEL_OPTIONS: SegmentedControlOption<LevelFilter>[] = [
|
||||
{ value: 'ERROR', label: 'Error' },
|
||||
];
|
||||
|
||||
export function GlobalObservabilityView() {
|
||||
interface GlobalObservabilityViewProps {
|
||||
/** Notifications + more-menu cluster for the mobile masthead, rehomed from the dropped TopBar. */
|
||||
headerActions?: ReactNode;
|
||||
}
|
||||
|
||||
export function GlobalObservabilityView({ headerActions }: GlobalObservabilityViewProps = {}) {
|
||||
const isMobile = useIsMobile();
|
||||
const [searchOpen, setSearchOpen] = useState(false);
|
||||
const [fabOpen, setFabOpen] = useState(false);
|
||||
const { activeNode } = useNodes();
|
||||
const [logs, setLogs] = useState<LogEntry[]>([]);
|
||||
const [allStacks, setAllStacks] = useState<string[]>([]);
|
||||
@@ -360,16 +370,96 @@ export function GlobalObservabilityView() {
|
||||
|
||||
return (
|
||||
<div className="relative flex h-full w-full flex-col bg-background text-foreground">
|
||||
<PageMasthead
|
||||
kicker={kicker}
|
||||
state={stateWord}
|
||||
tone={masterTone}
|
||||
pulsing={masterTone === 'live'}
|
||||
metadata={mastheadMetadata}
|
||||
/>
|
||||
|
||||
<SignalRail tiles={signals} />
|
||||
{isMobile ? (
|
||||
<Masthead
|
||||
kicker="logs · local"
|
||||
state={stateWord}
|
||||
stateTone={fetchError ? 'destructive' : masterTone === 'live' ? 'success' : 'brand'}
|
||||
live={masterTone === 'live'}
|
||||
meta={`${buckets.reduce((a, b) => a + b, 0)}/min · ${counts.errors} err · ${counts.containers} containers`}
|
||||
right={headerActions}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<PageMasthead
|
||||
kicker={kicker}
|
||||
state={stateWord}
|
||||
tone={masterTone}
|
||||
pulsing={masterTone === 'live'}
|
||||
metadata={mastheadMetadata}
|
||||
/>
|
||||
<SignalRail tiles={signals} />
|
||||
</>
|
||||
)}
|
||||
|
||||
{isMobile ? (
|
||||
<div className="flex shrink-0 items-center gap-2 border-b border-card-border bg-card px-4 py-2">
|
||||
{searchOpen ? (
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-stat-icon" strokeWidth={1.5} />
|
||||
<Input
|
||||
autoFocus
|
||||
placeholder="Search logs..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
onBlur={() => { if (!searchQuery) setSearchOpen(false); }}
|
||||
className="h-9 w-full bg-transparent pl-8 text-sm focus-visible:ring-brand/50"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<Button variant="outline" size="icon" className="h-9 w-9 shrink-0" aria-label="Search logs" onClick={() => setSearchOpen(true)}>
|
||||
<Search className="h-4 w-4" strokeWidth={1.5} />
|
||||
</Button>
|
||||
)}
|
||||
{!searchOpen && (
|
||||
<>
|
||||
<DropdownMenu modal={false}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" size="sm" className="h-9 gap-2">
|
||||
<Filter className="h-3.5 w-3.5" strokeWidth={1.5} />
|
||||
<span className="font-mono text-[10px] uppercase tracking-[0.18em]">
|
||||
Stacks · {selectedStacks.length === 0 ? 'All' : selectedStacks.length}
|
||||
</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start" className="w-52">
|
||||
{allStacks.map(stack => (
|
||||
<DropdownMenuCheckboxItem key={stack} checked={selectedStacks.includes(stack)} onCheckedChange={() => handleStackToggle(stack)}>
|
||||
{stack}
|
||||
</DropdownMenuCheckboxItem>
|
||||
))}
|
||||
{allStacks.length === 0 && (
|
||||
<div className="px-2 py-1.5 text-sm text-stat-subtitle">No stacks found</div>
|
||||
)}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<DropdownMenu modal={false}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" size="sm" className="h-9 gap-2">
|
||||
<SlidersHorizontal className="h-3.5 w-3.5" strokeWidth={1.5} />
|
||||
<span className="font-mono text-[10px] uppercase tracking-[0.18em]">Filters</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-44">
|
||||
<DropdownMenuLabel className="font-mono text-[10px] uppercase tracking-[0.18em] text-stat-subtitle">Stream</DropdownMenuLabel>
|
||||
{STREAM_OPTIONS.map(o => (
|
||||
<DropdownMenuCheckboxItem key={o.value} checked={streamFilter === o.value} onCheckedChange={() => setStreamFilter(o.value)}>
|
||||
{o.label}
|
||||
</DropdownMenuCheckboxItem>
|
||||
))}
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuLabel className="font-mono text-[10px] uppercase tracking-[0.18em] text-stat-subtitle">Level</DropdownMenuLabel>
|
||||
{LEVEL_OPTIONS.map(o => (
|
||||
<DropdownMenuCheckboxItem key={o.value} checked={levelFilter === o.value} onCheckedChange={() => setLevelFilter(o.value)}>
|
||||
{o.label}
|
||||
</DropdownMenuCheckboxItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex shrink-0 flex-wrap items-center gap-2 border-b border-card-border bg-card px-[var(--density-row-x)] py-[var(--density-cell-y)]">
|
||||
<div className="relative flex items-center">
|
||||
<Search className="absolute left-2.5 h-3.5 w-3.5 text-stat-icon" strokeWidth={1.5} />
|
||||
@@ -419,6 +509,7 @@ export function GlobalObservabilityView() {
|
||||
ariaLabel="Level filter"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{fetchError && (
|
||||
<div className="flex shrink-0 items-center gap-2 border-b border-destructive/30 bg-destructive/[0.06] px-[var(--density-row-x)] py-1.5 text-xs text-destructive">
|
||||
@@ -456,6 +547,44 @@ export function GlobalObservabilityView() {
|
||||
</div>
|
||||
</ScrollArea>
|
||||
|
||||
{isMobile ? (
|
||||
<div className="pointer-events-none absolute bottom-4 right-4 z-10 flex flex-col items-end gap-2">
|
||||
{isPaused && pendingCount > 0 && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleResume}
|
||||
className="pointer-events-auto rounded-full border border-brand/40 bg-brand/15 px-3 py-1 font-mono text-[10px] uppercase tracking-[0.18em] text-brand shadow-btn-glow"
|
||||
>
|
||||
{pendingCount} new · resume
|
||||
</button>
|
||||
)}
|
||||
{fabOpen ? (
|
||||
<div className="pointer-events-auto flex items-center gap-1 rounded-full border border-glass-border bg-popover/95 p-1 shadow-md backdrop-blur-[10px] backdrop-saturate-[1.15]">
|
||||
<Button variant="ghost" size="icon" className="h-10 w-10" onClick={() => { setIsPaused(p => !p); setFabOpen(false); }} aria-label={isPaused ? 'Resume stream' : 'Pause stream'}>
|
||||
{isPaused ? <Play className="h-4 w-4" strokeWidth={1.5} /> : <Pause className="h-4 w-4" strokeWidth={1.5} />}
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" className="h-10 w-10 text-stat-subtitle hover:text-stat-value" onClick={() => { handleClearLogs(); setFabOpen(false); }} aria-label="Clear log buffer">
|
||||
<Trash2 className="h-4 w-4" strokeWidth={1.5} />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" className="h-10 w-10 text-stat-subtitle hover:text-stat-value disabled:opacity-40" disabled={filteredLogs.length === 0} onClick={() => { handleDownload(); setFabOpen(false); }} aria-label="Download logs">
|
||||
<Download className="h-4 w-4" strokeWidth={1.5} />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" className="h-10 w-10 text-stat-subtitle" onClick={() => setFabOpen(false)} aria-label="Close actions">
|
||||
<X className="h-4 w-4" strokeWidth={1.5} />
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setFabOpen(true)}
|
||||
aria-label="Log actions"
|
||||
className="pointer-events-auto flex h-12 w-12 items-center justify-center rounded-full border border-glass-border bg-popover/95 text-stat-value shadow-md backdrop-blur-[10px] backdrop-saturate-[1.15]"
|
||||
>
|
||||
{isPaused ? <Play className="h-5 w-5" strokeWidth={1.5} /> : <SlidersHorizontal className="h-5 w-5" strokeWidth={1.5} />}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="pointer-events-none absolute bottom-4 right-6 z-10 flex items-center gap-2">
|
||||
{isPaused && pendingCount > 0 && (
|
||||
<button
|
||||
@@ -505,6 +634,7 @@ export function GlobalObservabilityView() {
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@ import { describe, it, expect, vi } from 'vitest';
|
||||
import { render, screen, fireEvent } from '@testing-library/react';
|
||||
import { Home, Radar, Boxes, ShieldCheck } from 'lucide-react';
|
||||
import { MobileMoreMenu } from './MobileMoreMenu';
|
||||
import { GlobalCommandPaletteProvider, usePaletteState } from './GlobalCommandPalette';
|
||||
import type { NavItem } from './EditorLayout/hooks/useViewNavigationState';
|
||||
|
||||
// Includes a bottom-tab primary (dashboard) and secondary destinations; the
|
||||
@@ -20,7 +21,13 @@ function open(over: Partial<React.ComponentProps<typeof MobileMoreMenu>> = {}) {
|
||||
onNavigate: vi.fn(),
|
||||
...over,
|
||||
};
|
||||
render(<MobileMoreMenu {...props} />);
|
||||
// The Search item reaches the command palette via usePaletteState, so the
|
||||
// menu must render inside the palette provider.
|
||||
render(
|
||||
<GlobalCommandPaletteProvider>
|
||||
<MobileMoreMenu {...props} />
|
||||
</GlobalCommandPaletteProvider>,
|
||||
);
|
||||
// The destination list lives inside a Sheet that is closed until the trigger
|
||||
// is clicked, so open it before querying the nav buttons.
|
||||
fireEvent.click(screen.getByRole('button', { name: 'More destinations' }));
|
||||
@@ -46,4 +53,23 @@ describe('MobileMoreMenu', () => {
|
||||
expect(screen.getByRole('button', { name: 'Security' }).className).toContain('bg-glass-highlight');
|
||||
expect(screen.getByRole('button', { name: 'Resources' }).className).not.toContain('font-medium');
|
||||
});
|
||||
|
||||
it('opens the command palette from the Search item', () => {
|
||||
// The Stacks list drops the TopBar's search, so the menu's Search item is
|
||||
// the way back to the palette: clicking it flips the shared palette state.
|
||||
function PaletteProbe() {
|
||||
const { open: paletteOpen } = usePaletteState();
|
||||
return <span data-testid="palette-open">{String(paletteOpen)}</span>;
|
||||
}
|
||||
render(
|
||||
<GlobalCommandPaletteProvider>
|
||||
<PaletteProbe />
|
||||
<MobileMoreMenu navItems={navItems} activeView="security" onNavigate={vi.fn()} />
|
||||
</GlobalCommandPaletteProvider>,
|
||||
);
|
||||
fireEvent.click(screen.getByRole('button', { name: 'More destinations' }));
|
||||
expect(screen.getByTestId('palette-open').textContent).toBe('false');
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Search' }));
|
||||
expect(screen.getByTestId('palette-open').textContent).toBe('true');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import { useState, type ReactNode } from 'react';
|
||||
import { Menu } from 'lucide-react';
|
||||
import { Menu, Search } from 'lucide-react';
|
||||
import { Button } from './ui/button';
|
||||
import { Sheet, SheetContent, SheetTrigger } from './ui/sheet';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { usePaletteState } from './GlobalCommandPalette';
|
||||
import type { NavItem, ActiveView } from './EditorLayout/hooks/useViewNavigationState';
|
||||
|
||||
interface MobileMoreMenuProps {
|
||||
@@ -23,6 +24,9 @@ interface MobileMoreMenuProps {
|
||||
*/
|
||||
export function MobileMoreMenu({ navItems, activeView, onNavigate, footer }: MobileMoreMenuProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
// The Stacks list drops the TopBar (which hosted the global search), so the
|
||||
// command palette is reachable here instead.
|
||||
const { setOpen: setPaletteOpen } = usePaletteState();
|
||||
|
||||
return (
|
||||
<Sheet open={open} onOpenChange={setOpen}>
|
||||
@@ -41,6 +45,14 @@ export function MobileMoreMenu({ navItems, activeView, onNavigate, footer }: Mob
|
||||
<p className="font-mono text-[10px] uppercase tracking-[0.18em] text-stat-icon">Navigate</p>
|
||||
</div>
|
||||
<nav className="flex flex-1 flex-col gap-1 overflow-y-auto p-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { setPaletteOpen(true); setOpen(false); }}
|
||||
className="flex min-h-11 items-center gap-3 rounded-lg px-3 text-sm text-muted-foreground transition-colors hover:bg-glass-highlight hover:text-foreground"
|
||||
>
|
||||
<Search className="h-4 w-4" strokeWidth={1.5} />
|
||||
Search
|
||||
</button>
|
||||
{navItems.map(({ value, label, icon: Icon }) => (
|
||||
<button
|
||||
key={value}
|
||||
|
||||
@@ -13,6 +13,9 @@ import { isValidVersion } from '@/lib/version';
|
||||
|
||||
interface NodeSwitcherProps {
|
||||
onManageNodes: () => void;
|
||||
/** One-line chip for the mobile Stacks masthead kicker (node name + chevron),
|
||||
* instead of the full bordered card. */
|
||||
compact?: boolean;
|
||||
}
|
||||
|
||||
function dotClass(status: Node['status']): string {
|
||||
@@ -29,7 +32,7 @@ function typeLabel(type: Node['type'], mode: NodeMode | undefined): string {
|
||||
return 'Remote';
|
||||
}
|
||||
|
||||
export function NodeSwitcher({ onManageNodes }: NodeSwitcherProps) {
|
||||
export function NodeSwitcher({ onManageNodes, compact = false }: NodeSwitcherProps) {
|
||||
const { nodes, activeNode, setActiveNode, nodeMeta, isLoading } = useNodes();
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
@@ -79,15 +82,25 @@ export function NodeSwitcher({ onManageNodes }: NodeSwitcherProps) {
|
||||
</div>
|
||||
);
|
||||
|
||||
const compactTrigger = (
|
||||
<span className="inline-flex max-w-[55vw] items-center gap-1.5">
|
||||
<span className="truncate font-mono text-[10px] uppercase tracking-[0.18em] text-stat-subtitle">
|
||||
{activeNode?.name ?? (isLoading ? '…' : 'No node')}
|
||||
</span>
|
||||
{hasMultiple ? <ChevronsUpDown className="h-3 w-3 flex-shrink-0 text-stat-icon" strokeWidth={1.5} aria-hidden /> : null}
|
||||
</span>
|
||||
);
|
||||
const trigger = compact ? compactTrigger : triggerContent;
|
||||
|
||||
if (!hasMultiple) {
|
||||
return triggerContent;
|
||||
return trigger;
|
||||
}
|
||||
|
||||
return (
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<button type="button" className="w-full" aria-label="Switch node">
|
||||
{triggerContent}
|
||||
<button type="button" className={compact ? 'text-left' : 'w-full'} aria-label="Switch node">
|
||||
{trigger}
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { useState, useEffect, useRef, type ReactNode } from 'react';
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
|
||||
import { useIsMobile } from '@/hooks/use-is-mobile';
|
||||
import { Masthead, MobileSubTabs } from '@/components/mobile/mobile-ui';
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger, TabsHighlight, TabsHighlightItem } from "@/components/ui/tabs";
|
||||
import { springs } from '@/lib/motion';
|
||||
@@ -300,7 +302,14 @@ function TableSkeleton({ cols, rows = 5 }: { cols: number; rows?: number }) {
|
||||
|
||||
// ── Main Component ─────────────────────────────────────────────────────────────
|
||||
|
||||
export default function ResourcesView() {
|
||||
interface ResourcesViewProps {
|
||||
/** Notifications + more-menu cluster for the mobile masthead, rehomed from the dropped TopBar. */
|
||||
headerActions?: ReactNode;
|
||||
}
|
||||
|
||||
export default function ResourcesView({ headerActions }: ResourcesViewProps = {}) {
|
||||
const isMobile = useIsMobile();
|
||||
const [resourceTab, setResourceTab] = useState<'images' | 'volumes' | 'networks' | 'unmanaged'>('images');
|
||||
const { isAdmin } = useAuth();
|
||||
const { activeNode } = useNodes();
|
||||
const { isPaid } = useLicense();
|
||||
@@ -715,9 +724,8 @@ export default function ResourcesView() {
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-6 h-full overflow-auto text-foreground flex flex-col gap-6 animate-in fade-in-0 duration-300">
|
||||
|
||||
const mainContent = (
|
||||
<>
|
||||
{/* Reclaim hero */}
|
||||
{heroVisible && usage && (
|
||||
<ReclaimHero
|
||||
@@ -810,9 +818,23 @@ export default function ResourcesView() {
|
||||
|
||||
{/* Resource Tabs */}
|
||||
<Tabs
|
||||
defaultValue="images"
|
||||
value={resourceTab}
|
||||
onValueChange={(v) => setResourceTab(v as typeof resourceTab)}
|
||||
className="flex-1 flex flex-col w-full rounded-lg border bg-card shadow-card-bevel overflow-hidden min-h-[400px] animate-in fade-in-0 slide-in-from-bottom-2 duration-300 delay-150"
|
||||
>
|
||||
{isMobile ? (
|
||||
<MobileSubTabs
|
||||
ariaLabel="Resource sections"
|
||||
active={resourceTab}
|
||||
onSelect={setResourceTab}
|
||||
tabs={[
|
||||
{ value: 'images', label: 'Images', count: images.length },
|
||||
{ value: 'volumes', label: 'Volumes', count: volumes.length },
|
||||
{ value: 'networks', label: 'Networks', count: networks.length },
|
||||
{ value: 'unmanaged', label: 'Unmanaged', count: totalOrphansCount },
|
||||
]}
|
||||
/>
|
||||
) : (
|
||||
<div className="px-4 pt-3 pb-2 flex items-center justify-between gap-3">
|
||||
<TabsList className="grid grid-cols-4 w-full md:w-[680px] h-9 gap-1 p-0">
|
||||
<TabsHighlight className="rounded-md bg-glass-highlight" transition={springs.snappy}>
|
||||
@@ -853,6 +875,7 @@ export default function ResourcesView() {
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ScrollArea className="flex-1 bg-background relative text-sm">
|
||||
|
||||
@@ -1264,7 +1287,11 @@ export default function ResourcesView() {
|
||||
</TabsContent>
|
||||
</ScrollArea>
|
||||
</Tabs>
|
||||
</>
|
||||
);
|
||||
|
||||
const overlays = (
|
||||
<>
|
||||
{/* ── Dialogs ── */}
|
||||
|
||||
{/* Prune Confirm */}
|
||||
@@ -1474,6 +1501,32 @@ export default function ResourcesView() {
|
||||
canCompare
|
||||
canManageSuppressions={isAdmin}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
if (isMobile) {
|
||||
return (
|
||||
<div className="flex h-full min-h-0 flex-col">
|
||||
<Masthead
|
||||
kicker="resources · docker"
|
||||
state={totalReclaimableBytes > 0 ? 'Reclaimable' : 'Tidy'}
|
||||
stateTone={totalReclaimableBytes > 0 ? 'warning' : 'success'}
|
||||
live={false}
|
||||
meta={`${images.length} images · ${volumes.length} volumes · ${networks.length} networks`}
|
||||
right={headerActions}
|
||||
/>
|
||||
<div className="flex-1 min-h-0 overflow-auto p-4 flex flex-col gap-4 [&_[data-radix-scroll-area-viewport]>div]:!block [&_table]:min-w-[640px]">
|
||||
{mainContent}
|
||||
</div>
|
||||
{overlays}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-6 h-full overflow-auto text-foreground flex flex-col gap-6 animate-in fade-in-0 duration-300">
|
||||
{mainContent}
|
||||
{overlays}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { GitBranch, Pencil, ExternalLink, Rocket, FolderOpen, ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { GitBranch, Pencil, ExternalLink, Rocket, FolderOpen } from 'lucide-react';
|
||||
import { Button } from './ui/button';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
|
||||
import { ScrollableTabRow } from './ui/ScrollableTabRow';
|
||||
import { apiFetch } from '@/lib/api';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { type AnatomyMarkdownInput } from '@/lib/anatomyMarkdown';
|
||||
@@ -115,36 +116,6 @@ export default function StackAnatomyPanel({
|
||||
return () => { cancelled = true; };
|
||||
}, [stackName, activeNode?.id, doctorEnabled]);
|
||||
|
||||
// The tab row scrolls horizontally when its tabs overflow the panel width.
|
||||
// Clickable arrows appear only while there is more to scroll in that direction
|
||||
// (a wide panel that fits every tab looks unchanged), and a vertical mouse
|
||||
// wheel over the row is translated into horizontal scroll.
|
||||
const tabScrollRef = useRef<HTMLDivElement>(null);
|
||||
const [tabEdges, setTabEdges] = useState({ left: false, right: false });
|
||||
const measureTabEdges = useCallback((el: HTMLElement) => {
|
||||
setTabEdges({ left: el.scrollLeft > 1, right: Math.ceil(el.scrollLeft + el.clientWidth) < el.scrollWidth });
|
||||
}, []);
|
||||
const scrollTabs = useCallback((direction: -1 | 1) => {
|
||||
const el = tabScrollRef.current;
|
||||
if (el) el.scrollBy({ left: direction * Math.max(96, el.clientWidth * 0.7), behavior: 'smooth' });
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
const el = tabScrollRef.current;
|
||||
if (!el) return;
|
||||
measureTabEdges(el);
|
||||
// Non-passive so preventDefault works: turn a vertical wheel into horizontal
|
||||
// scroll only when the row overflows (trackpads already scroll horizontally).
|
||||
const onWheel = (e: WheelEvent) => {
|
||||
if (el.scrollWidth <= el.clientWidth || Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return;
|
||||
el.scrollLeft += e.deltaY;
|
||||
e.preventDefault();
|
||||
};
|
||||
el.addEventListener('wheel', onWheel, { passive: false });
|
||||
const ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(() => measureTabEdges(el)) : null;
|
||||
ro?.observe(el);
|
||||
return () => { el.removeEventListener('wheel', onWheel); ro?.disconnect(); };
|
||||
}, [measureTabEdges, doctorEnabled, preflightSeverity]);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
const run = async () => {
|
||||
@@ -310,59 +281,30 @@ export default function StackAnatomyPanel({
|
||||
<div className="flex h-full min-h-0 flex-col rounded-xl border border-muted bg-card/40">
|
||||
<Tabs defaultValue="anatomy" className="flex flex-col h-full min-h-0">
|
||||
<div className="flex items-center justify-between border-b border-muted px-3 py-1.5 gap-2">
|
||||
<div className="relative min-w-0 flex-1">
|
||||
<div
|
||||
ref={tabScrollRef}
|
||||
onScroll={e => measureTabEdges(e.currentTarget)}
|
||||
className="overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
|
||||
>
|
||||
<TabsList className="h-7 w-max gap-0.5 bg-transparent border-none p-0">
|
||||
<TabsTrigger value="anatomy" className="h-6 px-2.5 font-mono text-[10px] uppercase tracking-[0.18em]">Anatomy</TabsTrigger>
|
||||
<TabsTrigger value="activity" className="h-6 px-2.5 font-mono text-[10px] uppercase tracking-[0.18em]">Activity</TabsTrigger>
|
||||
<TabsTrigger value="dossier" className="h-6 px-2.5 font-mono text-[10px] uppercase tracking-[0.18em]">Dossier</TabsTrigger>
|
||||
<TabsTrigger value="drift" className="h-6 px-2.5 font-mono text-[10px] uppercase tracking-[0.18em]">Drift</TabsTrigger>
|
||||
{networkingEnabled && (
|
||||
<TabsTrigger value="networking" data-testid="networking-tab" className="h-6 px-2.5 font-mono text-[10px] uppercase tracking-[0.18em]">Networking</TabsTrigger>
|
||||
)}
|
||||
{doctorEnabled && (
|
||||
<TabsTrigger value="doctor" data-testid="doctor-tab" className="h-6 px-2.5 font-mono text-[10px] uppercase tracking-[0.18em]">
|
||||
<span className="inline-flex items-center gap-1">
|
||||
Doctor
|
||||
{(preflightSeverity === 'blocker' || preflightSeverity === 'high') && (
|
||||
<span
|
||||
data-testid="doctor-tab-dot"
|
||||
className={cn('h-1.5 w-1.5 rounded-full', preflightSeverity === 'blocker' ? 'bg-destructive' : 'bg-warning')}
|
||||
/>
|
||||
)}
|
||||
</span>
|
||||
</TabsTrigger>
|
||||
)}
|
||||
</TabsList>
|
||||
</div>
|
||||
{/* Clickable arrows over a fade: shown only when the row overflows that edge. */}
|
||||
{tabEdges.left && (
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Scroll tabs left"
|
||||
data-testid="tab-scroll-left"
|
||||
onClick={() => scrollTabs(-1)}
|
||||
className="absolute inset-y-0 left-0 flex w-7 items-center justify-start bg-gradient-to-r from-card via-card/90 to-transparent text-stat-subtitle hover:text-brand transition-colors"
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" strokeWidth={1.5} />
|
||||
</button>
|
||||
)}
|
||||
{tabEdges.right && (
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Scroll tabs right"
|
||||
data-testid="tab-scroll-right"
|
||||
onClick={() => scrollTabs(1)}
|
||||
className="absolute inset-y-0 right-0 flex w-7 items-center justify-end bg-gradient-to-l from-card via-card/90 to-transparent text-stat-subtitle hover:text-brand transition-colors"
|
||||
>
|
||||
<ChevronRight className="h-4 w-4" strokeWidth={1.5} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<ScrollableTabRow surface="card" wrapperClassName="min-w-0 flex-1">
|
||||
<TabsList className="h-7 w-max gap-0.5 bg-transparent border-none p-0">
|
||||
<TabsTrigger value="anatomy" className="h-6 px-2.5 font-mono text-[10px] uppercase tracking-[0.18em]">Anatomy</TabsTrigger>
|
||||
<TabsTrigger value="activity" className="h-6 px-2.5 font-mono text-[10px] uppercase tracking-[0.18em]">Activity</TabsTrigger>
|
||||
<TabsTrigger value="dossier" className="h-6 px-2.5 font-mono text-[10px] uppercase tracking-[0.18em]">Dossier</TabsTrigger>
|
||||
<TabsTrigger value="drift" className="h-6 px-2.5 font-mono text-[10px] uppercase tracking-[0.18em]">Drift</TabsTrigger>
|
||||
{networkingEnabled && (
|
||||
<TabsTrigger value="networking" data-testid="networking-tab" className="h-6 px-2.5 font-mono text-[10px] uppercase tracking-[0.18em]">Networking</TabsTrigger>
|
||||
)}
|
||||
{doctorEnabled && (
|
||||
<TabsTrigger value="doctor" data-testid="doctor-tab" className="h-6 px-2.5 font-mono text-[10px] uppercase tracking-[0.18em]">
|
||||
<span className="inline-flex items-center gap-1">
|
||||
Doctor
|
||||
{(preflightSeverity === 'blocker' || preflightSeverity === 'high') && (
|
||||
<span
|
||||
data-testid="doctor-tab-dot"
|
||||
className={cn('h-1.5 w-1.5 rounded-full', preflightSeverity === 'blocker' ? 'bg-destructive' : 'bg-warning')}
|
||||
/>
|
||||
)}
|
||||
</span>
|
||||
</TabsTrigger>
|
||||
)}
|
||||
</TabsList>
|
||||
</ScrollableTabRow>
|
||||
<div className="flex items-center gap-3 shrink-0">
|
||||
{onOpenFiles && (
|
||||
<button
|
||||
|
||||
@@ -0,0 +1,67 @@
|
||||
/**
|
||||
* MobileReadinessCard is the one-up phone card for the Updates readiness board.
|
||||
* Its Apply button must stay disabled when the update is blocked (major bump),
|
||||
* while in flight, or when no schedule covers the stack; enabled only when a
|
||||
* covering schedule exists and the preview loaded without a block.
|
||||
*/
|
||||
import { it, expect, vi } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { MobileReadinessCard, type StackCard } from '../AutoUpdateReadinessView';
|
||||
|
||||
function card(over: Partial<StackCard> = {}): StackCard {
|
||||
return {
|
||||
stack: 'nextcloud',
|
||||
nodeId: 1,
|
||||
previewLoaded: true,
|
||||
applying: false,
|
||||
autoUpdateEnabled: true,
|
||||
scheduledTask: null,
|
||||
preview: {
|
||||
stack_name: 'nextcloud',
|
||||
images: [],
|
||||
summary: {
|
||||
has_update: true,
|
||||
primary_image: 'nextcloud',
|
||||
current_tag: '27.1.4',
|
||||
next_tag: '27.1.5',
|
||||
semver_bump: 'patch',
|
||||
update_kind: 'tag',
|
||||
blocked: false,
|
||||
blocked_reason: null,
|
||||
},
|
||||
rollback_target: null,
|
||||
changelog: 'Fixes. Security patch.',
|
||||
},
|
||||
...over,
|
||||
};
|
||||
}
|
||||
|
||||
const apply = () => screen.getByRole('button', { name: /Apply now/i });
|
||||
|
||||
it('enables Apply when a covering schedule exists and the update is not blocked', () => {
|
||||
render(<MobileReadinessCard card={card()} onApply={vi.fn()} />);
|
||||
expect(apply()).toBeEnabled();
|
||||
});
|
||||
|
||||
it('disables Apply when the update is blocked (major bump)', () => {
|
||||
render(
|
||||
<MobileReadinessCard
|
||||
card={card({
|
||||
preview: {
|
||||
stack_name: 'gitea', images: [], rollback_target: null, changelog: 'Breaking.',
|
||||
summary: {
|
||||
has_update: true, primary_image: 'gitea', current_tag: '1.21', next_tag: '1.22',
|
||||
semver_bump: 'major', update_kind: 'tag', blocked: true, blocked_reason: 'Major version bump',
|
||||
},
|
||||
},
|
||||
})}
|
||||
onApply={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
expect(apply()).toBeDisabled();
|
||||
});
|
||||
|
||||
it('disables Apply when auto-update is off for the stack', () => {
|
||||
render(<MobileReadinessCard card={card({ autoUpdateEnabled: false })} onApply={vi.fn()} />);
|
||||
expect(apply()).toBeDisabled();
|
||||
});
|
||||
@@ -0,0 +1,51 @@
|
||||
/**
|
||||
* Shared mobile chrome: the chip row (the Security Images severity filter) and
|
||||
* the sub-tab scroller (the Security sections, the Audit Stream/Table views).
|
||||
* Both render a value/label[/count] list, mark the active item, and report
|
||||
* selection.
|
||||
*/
|
||||
import { describe, it, expect, vi } from 'vitest';
|
||||
import { render, screen, fireEvent } from '@testing-library/react';
|
||||
import { MobileChipRow, MobileSubTabs } from './mobile-ui';
|
||||
|
||||
describe('MobileChipRow', () => {
|
||||
const chips = [
|
||||
{ value: 'All', label: 'All', count: 124 },
|
||||
{ value: 'Media', label: 'Media', count: 28 },
|
||||
{ value: 'Dev', label: 'Dev', count: 34 },
|
||||
];
|
||||
|
||||
it('renders every category chip with its count', () => {
|
||||
render(<MobileChipRow chips={chips} active="All" onSelect={vi.fn()} />);
|
||||
expect(screen.getByRole('button', { name: /Media/ })).toHaveTextContent('28');
|
||||
expect(screen.getAllByRole('button')).toHaveLength(3);
|
||||
});
|
||||
|
||||
it('filters to the chosen category on click', () => {
|
||||
const onSelect = vi.fn();
|
||||
render(<MobileChipRow chips={chips} active="All" onSelect={onSelect} />);
|
||||
fireEvent.click(screen.getByRole('button', { name: /Dev/ }));
|
||||
expect(onSelect).toHaveBeenCalledWith('Dev');
|
||||
});
|
||||
|
||||
it('cyan-fills the active chip only', () => {
|
||||
render(<MobileChipRow chips={chips} active="Media" onSelect={vi.fn()} />);
|
||||
expect(screen.getByRole('button', { name: /Media/ }).className).toContain('bg-brand');
|
||||
expect(screen.getByRole('button', { name: /Dev/ }).className).not.toContain('bg-brand');
|
||||
});
|
||||
});
|
||||
|
||||
describe('MobileSubTabs', () => {
|
||||
const tabs = [
|
||||
{ value: 'images', label: 'Images', count: 42 },
|
||||
{ value: 'volumes', label: 'Volumes', count: 18 },
|
||||
];
|
||||
|
||||
it('marks the active tab and reports selection', () => {
|
||||
const onSelect = vi.fn();
|
||||
render(<MobileSubTabs tabs={tabs} active="images" onSelect={onSelect} ariaLabel="Resource sections" />);
|
||||
expect(screen.getByRole('tab', { name: /Images/ })).toHaveAttribute('aria-selected', 'true');
|
||||
fireEvent.click(screen.getByRole('tab', { name: /Volumes/ }));
|
||||
expect(onSelect).toHaveBeenCalledWith('volumes');
|
||||
});
|
||||
});
|
||||
@@ -4,6 +4,7 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Sparkline } from '@/components/ui/sparkline';
|
||||
import { ScrollableTabRow } from '@/components/ui/ScrollableTabRow';
|
||||
|
||||
export type Tone = 'success' | 'warning' | 'destructive' | 'brand';
|
||||
|
||||
@@ -148,32 +149,49 @@ export function BackChip({ label, onClick }: { label: string; onClick?: () => vo
|
||||
);
|
||||
}
|
||||
|
||||
// Status masthead for the bespoke mobile content leads (Home and Fleet today;
|
||||
// Schedules as it is re-skinned): 3px cyan left rail, kicker, serif-italic
|
||||
// state word, meta, optional right slot.
|
||||
export function Masthead({
|
||||
kicker,
|
||||
state,
|
||||
stateTone = 'success',
|
||||
meta,
|
||||
right,
|
||||
live = true,
|
||||
stateClassName,
|
||||
}: {
|
||||
kicker: ReactNode;
|
||||
// Status masthead: the ONE bespoke-mobile header. 3px cyan left rail, kicker,
|
||||
// serif-italic state word + tone-colored pulsing dot, mono meta line, and a
|
||||
// right slot for the rehomed global chrome (notifications + more-menu).
|
||||
//
|
||||
// This is the standard set by Home, Fleet, and Security, and EVERY bespoke
|
||||
// mobile page uses it (the Stacks list, Resources, App Store, Updates, Audit,
|
||||
// Logs; the Schedule page is the one exception). DO NOT introduce a second
|
||||
// header style (a title-led header, a back chip / "< Stacks" link, etc.) for
|
||||
// these pages - navigation back is via the bottom tab bar and the more-menu.
|
||||
// Derive a status word per page (e.g. "Up to date" / "4 pending", "Streaming",
|
||||
// "Healthy"), not a bare page title.
|
||||
//
|
||||
// The kicker has exactly one source: `kicker` (wrapped in the styled Kicker) or
|
||||
// `kickerSlot` (raw content, e.g. the Stacks node chip). The union forbids both
|
||||
// and neither.
|
||||
type MastheadProps = {
|
||||
state: ReactNode;
|
||||
stateTone?: Tone;
|
||||
meta?: ReactNode;
|
||||
right?: ReactNode;
|
||||
live?: boolean;
|
||||
stateClassName?: string;
|
||||
}) {
|
||||
} & (
|
||||
| { kicker: ReactNode; kickerSlot?: never }
|
||||
| { kickerSlot: ReactNode; kicker?: never }
|
||||
);
|
||||
|
||||
export function Masthead({
|
||||
kicker,
|
||||
kickerSlot,
|
||||
state,
|
||||
stateTone = 'success',
|
||||
meta,
|
||||
right,
|
||||
live = true,
|
||||
stateClassName,
|
||||
}: MastheadProps) {
|
||||
return (
|
||||
<div className="relative border-b border-hairline px-4 pb-[15px] pt-2">
|
||||
<span aria-hidden className="absolute left-0 top-2 bottom-[15px] w-[3px] bg-brand" />
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="min-w-0">
|
||||
<div className="mb-1"><Kicker>{kicker}</Kicker></div>
|
||||
<div className="mb-1">{kickerSlot ?? <Kicker>{kicker}</Kicker>}</div>
|
||||
<div className="flex items-center gap-[11px]">
|
||||
<StateDot tone={stateTone} size={11} pulse={live} />
|
||||
<span className={cn('font-display italic text-[38px] leading-[40px] text-stat-value', stateClassName)}>{state}</span>
|
||||
@@ -185,3 +203,84 @@ export function Masthead({
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export interface MobileSubTab<T extends string = string> {
|
||||
value: T;
|
||||
label: string;
|
||||
/** Optional trailing count badge (dimmed). */
|
||||
count?: number;
|
||||
}
|
||||
|
||||
// Horizontal mono tab scroller with a cyan underline on the active tab. When
|
||||
// the row overflows it gets the shared fade + arrow affordance (ScrollableTabRow).
|
||||
// Shared by the Security page and the Audit Log page. Tap targets are >=44px.
|
||||
export function MobileSubTabs<T extends string>({ tabs, active, onSelect, ariaLabel }: {
|
||||
tabs: MobileSubTab<T>[];
|
||||
active: T;
|
||||
onSelect: (value: T) => void;
|
||||
ariaLabel: string;
|
||||
}) {
|
||||
return (
|
||||
<ScrollableTabRow surface="background" wrapperClassName="shrink-0" className="border-b border-hairline">
|
||||
<div role="tablist" aria-label={ariaLabel} className="flex">
|
||||
{tabs.map((tab) => {
|
||||
const on = tab.value === active;
|
||||
return (
|
||||
<button
|
||||
key={tab.value}
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected={on}
|
||||
onClick={() => onSelect(tab.value)}
|
||||
className={cn(
|
||||
'min-h-11 shrink-0 whitespace-nowrap px-3 py-[13px] font-mono text-[12px] tracking-[0.04em] transition-colors',
|
||||
on ? 'text-brand shadow-[inset_0_-2px_0_0_var(--brand)]' : 'text-stat-subtitle',
|
||||
)}
|
||||
>
|
||||
{tab.label}
|
||||
{tab.count != null && <span className="ml-1.5 opacity-60">{tab.count}</span>}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</ScrollableTabRow>
|
||||
);
|
||||
}
|
||||
|
||||
export interface MobileChip<T extends string = string> {
|
||||
value: T;
|
||||
label: string;
|
||||
/** Optional trailing count badge (dimmed). */
|
||||
count?: number;
|
||||
}
|
||||
|
||||
// Horizontal filter-chip scroller; active chip is cyan-filled. Used by the
|
||||
// Security Images severity filter. Tap targets are >=44px.
|
||||
export function MobileChipRow<T extends string>({ chips, active, onSelect, className }: {
|
||||
chips: MobileChip<T>[];
|
||||
active: T;
|
||||
onSelect: (value: T) => void;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<div className={cn('flex gap-2 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden', className)}>
|
||||
{chips.map((chip) => {
|
||||
const on = chip.value === active;
|
||||
return (
|
||||
<button
|
||||
key={chip.value}
|
||||
type="button"
|
||||
onClick={() => onSelect(chip.value)}
|
||||
className={cn(
|
||||
'min-h-11 shrink-0 whitespace-nowrap rounded-[7px] border px-[11px] font-mono text-[11px] tracking-[0.04em] transition-colors',
|
||||
on ? 'border-brand bg-brand text-brand-foreground' : 'border-card-border bg-card text-stat-subtitle',
|
||||
)}
|
||||
>
|
||||
{chip.label}
|
||||
{chip.count != null && <span className="ml-1.5 opacity-60">{chip.count}</span>}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import { ChevronRight } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Kicker } from '@/components/mobile/mobile-ui';
|
||||
import { Kicker, MobileSubTabs, MobileChipRow } from '@/components/mobile/mobile-ui';
|
||||
import { getSeverityKey, SEVERITY_DOT_CLASSES, type ImageFilterValue } from '@/lib/severityStyles';
|
||||
import { formatTimeAgo } from '@/lib/relativeTime';
|
||||
import type { SecurityTab } from '@/lib/events';
|
||||
@@ -16,44 +16,14 @@ export interface SecurityMobileTab {
|
||||
label: string;
|
||||
}
|
||||
|
||||
/** Horizontal mono tab scroller with a cyan underline on the active tab and an
|
||||
* edge mask-fade so the overflow reads as scrollable. Keeps all tabs reachable
|
||||
* by scroll, matching the desktop tab IA. */
|
||||
/** The Security tab strip is the shared mono sub-tab scroller; every section
|
||||
* stays reachable by horizontal scroll, matching the desktop IA. */
|
||||
export function SecurityMobileTabs({ tabs, active, onSelect }: {
|
||||
tabs: SecurityMobileTab[];
|
||||
active: SecurityTab;
|
||||
onSelect: (tab: SecurityTab) => void;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
role="tablist"
|
||||
aria-label="Security sections"
|
||||
className="flex shrink-0 overflow-x-auto border-b border-hairline [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
|
||||
style={{
|
||||
maskImage: 'linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%)',
|
||||
WebkitMaskImage: 'linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%)',
|
||||
}}
|
||||
>
|
||||
{tabs.map((tab) => {
|
||||
const on = tab.value === active;
|
||||
return (
|
||||
<button
|
||||
key={tab.value}
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected={on}
|
||||
onClick={() => onSelect(tab.value)}
|
||||
className={cn(
|
||||
'min-h-11 shrink-0 whitespace-nowrap px-3 py-[13px] font-mono text-[12px] tracking-[0.04em] transition-colors',
|
||||
on ? 'text-brand shadow-[inset_0_-2px_0_0_var(--brand)]' : 'text-stat-subtitle',
|
||||
)}
|
||||
>
|
||||
{tab.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
return <MobileSubTabs tabs={tabs} active={active} onSelect={onSelect} ariaLabel="Security sections" />;
|
||||
}
|
||||
|
||||
function StripCell({ kicker, value, valueClass, last }: {
|
||||
@@ -185,32 +155,11 @@ export interface ImageFilterChip {
|
||||
label: string;
|
||||
}
|
||||
|
||||
/** Horizontal severity filter chips for the mobile Images list. */
|
||||
/** The Images severity filter is the shared mobile chip row. */
|
||||
export function ImageFilterChips({ chips, active, onSelect }: {
|
||||
chips: ImageFilterChip[];
|
||||
active: ImageFilterValue;
|
||||
onSelect: (value: ImageFilterValue) => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex gap-2 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
|
||||
{chips.map((chip) => {
|
||||
const on = chip.value === active;
|
||||
return (
|
||||
<button
|
||||
key={chip.value}
|
||||
type="button"
|
||||
onClick={() => onSelect(chip.value)}
|
||||
className={cn(
|
||||
'min-h-11 shrink-0 whitespace-nowrap rounded-[7px] border px-[11px] font-mono text-[11px] tracking-[0.04em] transition-colors',
|
||||
on
|
||||
? 'border-brand bg-brand text-brand-foreground'
|
||||
: 'border-card-border bg-card text-stat-subtitle',
|
||||
)}
|
||||
>
|
||||
{chip.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
return <MobileChipRow chips={chips} active={active} onSelect={onSelect} />;
|
||||
}
|
||||
|
||||
@@ -60,12 +60,13 @@ export function StackSidebar(props: StackSidebarProps) {
|
||||
|
||||
return (
|
||||
<div className="w-64 max-md:w-full max-md:flex-1 max-md:min-h-0 max-md:border-r-0 border-r border-glass-border bg-sidebar backdrop-blur-md flex flex-col">
|
||||
{/* The TopBar provides the global chrome on mobile, so the in-sidebar
|
||||
brand row is redundant there and hidden to save vertical space. */}
|
||||
{/* On mobile the status masthead leads (it carries the node switcher as
|
||||
its kicker chip), so the in-sidebar brand and node rows are redundant
|
||||
there and hidden to save vertical space. */}
|
||||
<div className="max-md:hidden">
|
||||
<SidebarBrand isDarkMode={isDarkMode} />
|
||||
</div>
|
||||
<div className="px-4 pt-2 pb-0">{nodeSwitcherSlot}</div>
|
||||
<div className="max-md:hidden px-4 pt-2 pb-0">{nodeSwitcherSlot}</div>
|
||||
{canCreate && createStackSlot !== null && (
|
||||
<SidebarActions
|
||||
createStackSlot={createStackSlot}
|
||||
|
||||
@@ -0,0 +1,106 @@
|
||||
import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react';
|
||||
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
// Horizontal scroller for a row of tabs/chips that overflows its width. When the
|
||||
// row overflows, a fade + a clickable chevron appears on the overflowing edge
|
||||
// (a row that fits looks unchanged); a vertical mouse wheel over the row is
|
||||
// translated into horizontal scroll. This is the one place the fade + arrow
|
||||
// affordance lives, so every tab strip (stack anatomy, the mobile page tabs)
|
||||
// reads and behaves the same.
|
||||
interface ScrollableTabRowProps {
|
||||
children: ReactNode;
|
||||
/** Surface the row sits on, so the edge fade blends into it. */
|
||||
surface?: 'card' | 'background';
|
||||
/** Applied to the scroll viewport (e.g. a border-b that should span full width). */
|
||||
className?: string;
|
||||
/** Applied to the relative wrapper (e.g. `min-w-0 flex-1` inside a flex row). */
|
||||
wrapperClassName?: string;
|
||||
}
|
||||
|
||||
const FADE: Record<'card' | 'background', { left: string; right: string }> = {
|
||||
card: {
|
||||
left: 'from-card via-card/90 to-transparent',
|
||||
right: 'from-card via-card/90 to-transparent',
|
||||
},
|
||||
background: {
|
||||
left: 'from-background via-background/90 to-transparent',
|
||||
right: 'from-background via-background/90 to-transparent',
|
||||
},
|
||||
};
|
||||
|
||||
export function ScrollableTabRow({ children, surface = 'card', className, wrapperClassName }: ScrollableTabRowProps) {
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
const [edges, setEdges] = useState({ left: false, right: false });
|
||||
|
||||
const measure = useCallback((el: HTMLElement) => {
|
||||
const left = el.scrollLeft > 1;
|
||||
const right = Math.ceil(el.scrollLeft + el.clientWidth) < el.scrollWidth;
|
||||
// Bail when unchanged so the per-render measure effect cannot loop (a fresh
|
||||
// object every render would re-trigger the effect forever).
|
||||
setEdges(prev => (prev.left === left && prev.right === right ? prev : { left, right }));
|
||||
}, []);
|
||||
|
||||
const scrollBy = useCallback((direction: -1 | 1) => {
|
||||
const el = scrollRef.current;
|
||||
if (el) el.scrollBy({ left: direction * Math.max(96, el.clientWidth * 0.7), behavior: 'smooth' });
|
||||
}, []);
|
||||
|
||||
// Re-measure after every render so a changed tab set (or width) updates the
|
||||
// arrows; cheap and avoids threading the row's contents through a dep array.
|
||||
useEffect(() => {
|
||||
const el = scrollRef.current;
|
||||
if (el) measure(el);
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const el = scrollRef.current;
|
||||
if (!el) return;
|
||||
// Non-passive so preventDefault works: turn a vertical wheel into horizontal
|
||||
// scroll only when the row overflows (trackpads already scroll horizontally).
|
||||
const onWheel = (e: WheelEvent) => {
|
||||
if (el.scrollWidth <= el.clientWidth || Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return;
|
||||
el.scrollLeft += e.deltaY;
|
||||
e.preventDefault();
|
||||
};
|
||||
el.addEventListener('wheel', onWheel, { passive: false });
|
||||
const ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(() => measure(el)) : null;
|
||||
ro?.observe(el);
|
||||
return () => { el.removeEventListener('wheel', onWheel); ro?.disconnect(); };
|
||||
}, [measure]);
|
||||
|
||||
const fade = FADE[surface];
|
||||
return (
|
||||
<div className={cn('relative', wrapperClassName)}>
|
||||
<div
|
||||
ref={scrollRef}
|
||||
onScroll={e => measure(e.currentTarget)}
|
||||
className={cn('overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden', className)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
{edges.left && (
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Scroll tabs left"
|
||||
data-testid="tab-scroll-left"
|
||||
onClick={() => scrollBy(-1)}
|
||||
className={cn('absolute inset-y-0 left-0 flex w-7 items-center justify-start bg-gradient-to-r text-stat-subtitle transition-colors hover:text-brand', fade.left)}
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" strokeWidth={1.5} />
|
||||
</button>
|
||||
)}
|
||||
{edges.right && (
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Scroll tabs right"
|
||||
data-testid="tab-scroll-right"
|
||||
onClick={() => scrollBy(1)}
|
||||
className={cn('absolute inset-y-0 right-0 flex w-7 items-center justify-end bg-gradient-to-l text-stat-subtitle transition-colors hover:text-brand', fade.right)}
|
||||
>
|
||||
<ChevronRight className="h-4 w-4" strokeWidth={1.5} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user