feat(ui): add export and import features functionality

- Introduced new routes for exporting and importing features, enhancing project management capabilities.
- Added UI components for export and import dialogs, allowing users to easily manage feature data.
- Updated HTTP API client to support export and import operations with appropriate options and responses.
- Enhanced board view with controls for triggering export and import actions, improving user experience.
- Defined new types for feature export and import, ensuring type safety and clarity in data handling.

apps/ui/src/components/views/board-view/board-controls.tsx

@@ -1,29 +1,45 @@
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
-import { ImageIcon } from 'lucide-react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+} from '@/components/ui/dropdown-menu';
+import { ImageIcon, MoreHorizontal, Download, Upload } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
 interface BoardControlsProps {
   isMounted: boolean;
   onShowBoardBackground: () => void;
+  onExportFeatures?: () => void;
+  onImportFeatures?: () => void;
 }
 
-export function BoardControls({ isMounted, onShowBoardBackground }: BoardControlsProps) {
+export function BoardControls({
+  isMounted,
+  onShowBoardBackground,
+  onExportFeatures,
+  onImportFeatures,
+}: BoardControlsProps) {
   if (!isMounted) return null;
 
+  const buttonClass = cn(
+    'inline-flex h-8 items-center justify-center rounded-md px-2 text-sm font-medium transition-all duration-200 cursor-pointer',
+    'text-muted-foreground hover:text-foreground hover:bg-accent',
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+    'border border-border'
+  );
+
   return (
     <TooltipProvider>
-      <div className="flex items-center gap-5">
+      <div className="flex items-center gap-2">
         {/* Board Background Button */}
         <Tooltip>
           <TooltipTrigger asChild>
             <button
               onClick={onShowBoardBackground}
-              className={cn(
-                'inline-flex h-8 items-center justify-center rounded-md px-2 text-sm font-medium transition-all duration-200 cursor-pointer',
-                'text-muted-foreground hover:text-foreground hover:bg-accent',
-                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-                'border border-border'
-              )}
+              className={buttonClass}
               data-testid="board-background-button"
             >
               <ImageIcon className="w-4 h-4" />
@@ -33,6 +49,32 @@ export function BoardControls({ isMounted, onShowBoardBackground }: BoardControl
             <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>
   );