feat(ui): move export/import features from board header to project settings

Relocate the export and import features functionality from the board header
dropdown menu to a new "Data" section in project settings for better UX.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Shirone
2026-01-21 17:43:33 +01:00
parent 7bb97953a7
commit 662f854203
7 changed files with 125 additions and 86 deletions

View File

@@ -1,27 +1,13 @@
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
DropdownMenuSeparator,
} from '@/components/ui/dropdown-menu';
import { ImageIcon, MoreHorizontal, Download, Upload } from 'lucide-react';
import { ImageIcon } from 'lucide-react';
import { cn } from '@/lib/utils';
interface BoardControlsProps {
isMounted: boolean;
onShowBoardBackground: () => void;
onExportFeatures?: () => void;
onImportFeatures?: () => void;
}
export function BoardControls({
isMounted,
onShowBoardBackground,
onExportFeatures,
onImportFeatures,
}: BoardControlsProps) {
export function BoardControls({ isMounted, onShowBoardBackground }: BoardControlsProps) {
if (!isMounted) return null;
const buttonClass = cn(
@@ -49,32 +35,6 @@ export function BoardControls({
<p>Board Background Settings</p>
</TooltipContent>
</Tooltip>
{/* More Options Menu */}
<DropdownMenu>
<Tooltip>
<TooltipTrigger asChild>
<DropdownMenuTrigger asChild>
<button className={buttonClass} data-testid="board-more-options-button">
<MoreHorizontal className="w-4 h-4" />
</button>
</DropdownMenuTrigger>
</TooltipTrigger>
<TooltipContent>
<p>More Options</p>
</TooltipContent>
</Tooltip>
<DropdownMenuContent align="end" className="w-48">
<DropdownMenuItem onClick={onExportFeatures} data-testid="export-features-menu-item">
<Download className="w-4 h-4 mr-2" />
Export Features
</DropdownMenuItem>
<DropdownMenuItem onClick={onImportFeatures} data-testid="import-features-menu-item">
<Upload className="w-4 h-4 mr-2" />
Import Features
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</TooltipProvider>
);

View File

@@ -35,8 +35,6 @@ interface BoardHeaderProps {
creatingSpecProjectPath?: string;
// Board controls props
onShowBoardBackground: () => void;
onExportFeatures?: () => void;
onImportFeatures?: () => void;
// View toggle props
viewMode: ViewMode;
onViewModeChange: (mode: ViewMode) => void;
@@ -62,8 +60,6 @@ export function BoardHeader({
isCreatingSpec,
creatingSpecProjectPath,
onShowBoardBackground,
onExportFeatures,
onImportFeatures,
viewMode,
onViewModeChange,
}: BoardHeaderProps) {
@@ -128,12 +124,7 @@ export function BoardHeader({
currentProjectPath={projectPath}
/>
{isMounted && <ViewToggle viewMode={viewMode} onViewModeChange={onViewModeChange} />}
<BoardControls
isMounted={isMounted}
onShowBoardBackground={onShowBoardBackground}
onExportFeatures={onExportFeatures}
onImportFeatures={onImportFeatures}
/>
<BoardControls isMounted={isMounted} onShowBoardBackground={onShowBoardBackground} />
</div>
<div className="flex gap-4 items-center">
{/* Usage Popover - show if either provider is authenticated, only on desktop */}