mirror of
https://github.com/Studio-Saelix/sencho.git
synced 2026-08-25 09:46:47 +00:00
feat: add Reduced motion setting and polish chrome, files, and stack-detail (#1501)
A batch of UI/UX polish: - New independent "Reduced motion" appearance setting (separate from Reduced effects). Drives framer-motion via MotionConfig and clamps CSS transitions via data-motion on <html>; toasts are unaffected. Defaults off (OS preference still honored). - Stack-detail Files tab: rename "Files & Volumes" to "Files", add a persisted word-wrap toggle to the file viewer (default on), and add a fullscreen toggle that collapses the Command Center + Logs column so the editor fills the width. - Create Stack > From Git: remove the nested scroll clamp so the deploy toggle and footer are reachable. - Fleet: full-width tab band with icon-only Refresh / Export Dossier, icon-only Check-for-updates / Add-node on the Overview toolbar, theme-aware empty-state headings (calm drops the italic), and fix the Actions card body overlapping the action-row divider. - Snapshots: restyle Restore and Restore all to the ghost button design used by View / Preview / Download, and right-align the per-stack Restore. - Settings sidebar: App Store gradient active style and standard font size. - Compose Doctor: dismiss the high-risk banner (and clear the tab dot) until the findings change, via a shared fingerprint-keyed hook. - Stack-detail Storage: link the "no recent fleet snapshot" warning to the Fleet Snapshots tab (FleetView tabs are now controlled to support the deep link).
This commit is contained in:
Anso
@@ -426,55 +426,53 @@ export function CreateStackDialog({ open, onOpenChange, onStackCreated, onStacks
|
||||
|
||||
{createMode === 'git' && (
|
||||
<div role="tabpanel" id={panelId('git')} aria-labelledby={tabId('git')}>
|
||||
<ScrollArea block className="max-h-[60vh]">
|
||||
<ModalBody>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="create-git-stack-name">Stack Name</Label>
|
||||
<Input
|
||||
id="create-git-stack-name"
|
||||
placeholder="Stack name (e.g., myapp)"
|
||||
value={newStackName}
|
||||
onChange={(e) => setNewStackName(e.target.value)}
|
||||
disabled={creatingFromGit}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<GitSourceFields
|
||||
variant="create"
|
||||
<ModalBody>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="create-git-stack-name">Stack Name</Label>
|
||||
<Input
|
||||
id="create-git-stack-name"
|
||||
placeholder="Stack name (e.g., myapp)"
|
||||
value={newStackName}
|
||||
onChange={(e) => setNewStackName(e.target.value)}
|
||||
disabled={creatingFromGit}
|
||||
repoUrl={gitRepoUrl}
|
||||
branch={gitBranch}
|
||||
composePaths={gitComposePaths}
|
||||
contextDir={gitContextDir}
|
||||
syncEnv={gitSyncEnv}
|
||||
authType={gitAuthType}
|
||||
token={gitToken}
|
||||
hasStoredToken={false}
|
||||
applyMode={gitApplyMode}
|
||||
onRepoUrlChange={setGitRepoUrl}
|
||||
onBranchChange={setGitBranch}
|
||||
onComposePathsChange={setGitComposePaths}
|
||||
onContextDirChange={setGitContextDir}
|
||||
onSyncEnvChange={setGitSyncEnv}
|
||||
onAuthTypeChange={setGitAuthType}
|
||||
onTokenChange={setGitToken}
|
||||
onApplyModeChange={setGitApplyMode}
|
||||
onBrowse={browseGitRepo}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
id="create-git-deploy-now"
|
||||
checked={gitDeployNow}
|
||||
onCheckedChange={(c) => setGitDeployNow(c === true)}
|
||||
disabled={creatingFromGit}
|
||||
/>
|
||||
<Label htmlFor="create-git-deploy-now" className="text-xs cursor-pointer">
|
||||
Deploy after create
|
||||
</Label>
|
||||
</div>
|
||||
</ModalBody>
|
||||
</ScrollArea>
|
||||
<GitSourceFields
|
||||
variant="create"
|
||||
disabled={creatingFromGit}
|
||||
repoUrl={gitRepoUrl}
|
||||
branch={gitBranch}
|
||||
composePaths={gitComposePaths}
|
||||
contextDir={gitContextDir}
|
||||
syncEnv={gitSyncEnv}
|
||||
authType={gitAuthType}
|
||||
token={gitToken}
|
||||
hasStoredToken={false}
|
||||
applyMode={gitApplyMode}
|
||||
onRepoUrlChange={setGitRepoUrl}
|
||||
onBranchChange={setGitBranch}
|
||||
onComposePathsChange={setGitComposePaths}
|
||||
onContextDirChange={setGitContextDir}
|
||||
onSyncEnvChange={setGitSyncEnv}
|
||||
onAuthTypeChange={setGitAuthType}
|
||||
onTokenChange={setGitToken}
|
||||
onApplyModeChange={setGitApplyMode}
|
||||
onBrowse={browseGitRepo}
|
||||
/>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
id="create-git-deploy-now"
|
||||
checked={gitDeployNow}
|
||||
onCheckedChange={(c) => setGitDeployNow(c === true)}
|
||||
disabled={creatingFromGit}
|
||||
/>
|
||||
<Label htmlFor="create-git-deploy-now" className="text-xs cursor-pointer">
|
||||
Deploy after create
|
||||
</Label>
|
||||
</div>
|
||||
</ModalBody>
|
||||
<ModalFooter
|
||||
hint="HTTPS REPOS ONLY"
|
||||
secondary={
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Suspense, useRef, useEffect } from 'react';
|
||||
import { Suspense, useRef, useEffect, useState } from 'react';
|
||||
import { Editor } from '@/lib/monacoLoader';
|
||||
import {
|
||||
Save,
|
||||
@@ -8,6 +8,8 @@ import {
|
||||
ChevronDown,
|
||||
GitBranch,
|
||||
FolderOpen,
|
||||
Maximize2,
|
||||
Minimize2,
|
||||
} from 'lucide-react';
|
||||
import { Button } from '../ui/button';
|
||||
import { Card, CardContent, CardHeader } from '../ui/card';
|
||||
@@ -314,6 +316,14 @@ export function EditorView(props: EditorViewProps) {
|
||||
}
|
||||
}, [activeTab, canRead, setActiveTab]);
|
||||
|
||||
// Fullscreen the file browser + editor by collapsing the left column. Only
|
||||
// meaningful on the files tab; reset when leaving it or closing the editor so
|
||||
// it can never strand the compose/env panels in a single-column layout.
|
||||
const [filesFullscreen, setFilesFullscreen] = useState(false);
|
||||
useEffect(() => {
|
||||
if (!editingCompose || activeTab !== 'files') setFilesFullscreen(false);
|
||||
}, [editingCompose, activeTab]);
|
||||
|
||||
// Below md, render the segmented full-screen mobile detail instead of the
|
||||
// desktop two-pane grid. All hooks above run unconditionally before this
|
||||
// branch so hook order stays stable across breakpoints.
|
||||
@@ -324,8 +334,10 @@ export function EditorView(props: EditorViewProps) {
|
||||
|
||||
return (
|
||||
<ErrorBoundary>
|
||||
<div className="grid gap-6 grid-cols-1 lg:grid-cols-2 min-h-[600px] h-[calc(100vh-160px)] max-h-[1040px]">
|
||||
{/* Left column: identity + health strip + logs, stacked */}
|
||||
<div className={`grid gap-6 ${filesFullscreen ? 'grid-cols-1' : 'grid-cols-1 lg:grid-cols-2'} min-h-[600px] h-[calc(100vh-160px)] max-h-[1040px]`}>
|
||||
{/* Left column: identity + health strip + logs, stacked. Hidden in
|
||||
files fullscreen so the editor card fills the width. */}
|
||||
{!filesFullscreen && (
|
||||
<div className="flex flex-col gap-6 min-h-0">
|
||||
{/* Command Center Card (identity + health strip) */}
|
||||
<Card className="rounded-xl border-muted bg-card shrink-0">
|
||||
@@ -396,6 +408,7 @@ export function EditorView(props: EditorViewProps) {
|
||||
{/* Logs Section (fills remaining left-column height) */}
|
||||
<StackLogsSection stackName={stackName} logsMode={logsMode} setLogsMode={setLogsMode} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Right column: anatomy panel by default, Monaco editor when editing */}
|
||||
{editingCompose ? (
|
||||
@@ -415,7 +428,7 @@ export function EditorView(props: EditorViewProps) {
|
||||
<TabsHighlightItem value="files">
|
||||
<TabsTrigger value="files">
|
||||
<FolderOpen className="w-3.5 h-3.5 mr-1" strokeWidth={1.5} />
|
||||
Files & Volumes
|
||||
Files
|
||||
</TabsTrigger>
|
||||
</TabsHighlightItem>
|
||||
)}
|
||||
@@ -485,6 +498,20 @@ export function EditorView(props: EditorViewProps) {
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{activeTab === 'files' && (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="rounded-lg h-8 w-8 p-0"
|
||||
onClick={() => setFilesFullscreen((v) => !v)}
|
||||
aria-label={filesFullscreen ? 'Exit full screen' : 'Full screen'}
|
||||
title={filesFullscreen ? 'Exit full screen' : 'Full screen'}
|
||||
>
|
||||
{filesFullscreen
|
||||
? <Minimize2 className="w-4 h-4" strokeWidth={1.5} />
|
||||
: <Maximize2 className="w-4 h-4" strokeWidth={1.5} />}
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
|
||||
@@ -13,7 +13,7 @@ import HomeDashboard from '../HomeDashboard';
|
||||
import type { NotificationItem } from '../dashboard/types';
|
||||
import type { ScheduleTaskPrefill } from '../ScheduledOperationsView';
|
||||
import type { ActiveView } from './hooks/useViewNavigationState';
|
||||
import type { SecurityTab } from '@/lib/events';
|
||||
import type { SecurityTab, FleetTab } from '@/lib/events';
|
||||
|
||||
// Paid-tier views are loaded on demand. Their internal PaidGate /
|
||||
// CapabilityGate wrappers render
|
||||
@@ -89,6 +89,8 @@ export interface ViewRouterProps {
|
||||
onSecurityTabChange: (tab: SecurityTab) => void;
|
||||
fleetUpdatesIntent?: { tab: 'nodes' | 'changelog' } | null;
|
||||
onFleetUpdatesIntentConsumed?: () => void;
|
||||
fleetTab?: FleetTab | null;
|
||||
onFleetTabConsumed?: () => void;
|
||||
// Render slot for the inline editor view. Kept as a callback so the
|
||||
// (large) editor JSX is only allocated when activeView === 'editor',
|
||||
// not on every parent render that lands on a different view.
|
||||
@@ -116,6 +118,8 @@ export function ViewRouter({
|
||||
onSecurityTabChange,
|
||||
fleetUpdatesIntent,
|
||||
onFleetUpdatesIntentConsumed,
|
||||
fleetTab,
|
||||
onFleetTabConsumed,
|
||||
renderEditor,
|
||||
}: ViewRouterProps): ReactNode {
|
||||
const { can } = useAuth();
|
||||
@@ -183,6 +187,8 @@ export function ViewRouter({
|
||||
onNavigateToNode={onFleetNavigateToNode}
|
||||
fleetUpdatesIntent={fleetUpdatesIntent}
|
||||
onFleetUpdatesIntentConsumed={onFleetUpdatesIntentConsumed}
|
||||
fleetTab={fleetTab}
|
||||
onFleetTabConsumed={onFleetTabConsumed}
|
||||
/>
|
||||
</LazyView>
|
||||
</CapabilityGate>
|
||||
|
||||
@@ -155,6 +155,17 @@ describe('useViewNavigationState', () => {
|
||||
expect(result.current.filterNodeId).toBe(5);
|
||||
});
|
||||
|
||||
it('SENCHO_NAVIGATE_EVENT to fleet sets fleetTab then activeView (deep-link, no race)', () => {
|
||||
const { result } = renderHook(() => useViewNavigationState());
|
||||
act(() => {
|
||||
window.dispatchEvent(
|
||||
new CustomEvent(SENCHO_NAVIGATE_EVENT, { detail: { view: 'fleet', fleetTab: 'snapshots' } }),
|
||||
);
|
||||
});
|
||||
expect(result.current.activeView).toBe('fleet');
|
||||
expect(result.current.fleetTab).toBe('snapshots');
|
||||
});
|
||||
|
||||
it('SENCHO_NAVIGATE_EVENT with no nodeId sets filterNodeId to null', () => {
|
||||
const { result } = renderHook(() => useViewNavigationState());
|
||||
act(() => {
|
||||
|
||||
@@ -9,7 +9,7 @@ import { useLicense } from '@/context/LicenseContext';
|
||||
import { useNodes } from '@/context/NodeContext';
|
||||
import { SENCHO_NAVIGATE_EVENT } from '@/components/NodeManager';
|
||||
import type { SenchoNavigateDetail } from '@/components/NodeManager';
|
||||
import type { SecurityTab } from '@/lib/events';
|
||||
import type { SecurityTab, FleetTab } from '@/lib/events';
|
||||
import type { SectionId } from '@/components/settings/types';
|
||||
import type { ScheduleTaskPrefill } from '@/components/ScheduledOperationsView';
|
||||
|
||||
@@ -61,6 +61,7 @@ export function useViewNavigationState(options?: UseViewNavigationStateOptions)
|
||||
const [activeView, setActiveView] = useState<ActiveView>('dashboard');
|
||||
const [settingsSection, setSettingsSection] = useState<SectionId>('appearance');
|
||||
const [securityTab, setSecurityTab] = useState<SecurityTab>('overview');
|
||||
const [fleetTab, setFleetTab] = useState<FleetTab | null>(null);
|
||||
const [filterNodeId, setFilterNodeId] = useState<number | null>(null);
|
||||
const [schedulePrefill, setSchedulePrefill] = useState<ScheduleTaskPrefill | null>(null);
|
||||
const [mobileNavOpen, setMobileNavOpen] = useState(false);
|
||||
@@ -96,6 +97,14 @@ export function useViewNavigationState(options?: UseViewNavigationStateOptions)
|
||||
setFilterNodeId(detail.nodeId ?? null);
|
||||
return;
|
||||
}
|
||||
if (detail.view === 'fleet') {
|
||||
// Set the target sub-tab before switching so the controlled FleetView
|
||||
// lands on it (e.g. Snapshots from the stack storage warning).
|
||||
if (detail.fleetTab) setFleetTab(detail.fleetTab);
|
||||
setActiveView('fleet');
|
||||
setFilterNodeId(detail.nodeId ?? null);
|
||||
return;
|
||||
}
|
||||
setActiveView(detail.view as ActiveView);
|
||||
setFilterNodeId(detail.nodeId ?? null);
|
||||
};
|
||||
@@ -146,6 +155,7 @@ export function useViewNavigationState(options?: UseViewNavigationStateOptions)
|
||||
activeView, setActiveView,
|
||||
settingsSection, setSettingsSection,
|
||||
securityTab, setSecurityTab,
|
||||
fleetTab, setFleetTab,
|
||||
filterNodeId, setFilterNodeId,
|
||||
schedulePrefill, setSchedulePrefill,
|
||||
mobileNavOpen, setMobileNavOpen,
|
||||
|
||||
Reference in New Issue
Block a user