add dictate and download video toolbar buttons, reorder context menu

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/workspaces/officerdev/src/apps/FileBrowser/FileBrowserApp/components/FileItem.tsx

@@ -118,6 +118,8 @@ const DropdownMenuItems = ({
   const showExtract = fileType === 'archive';
   const showPlay = fileType === 'audio' || entry.type === 'directory';
 
+  const hasActions = showPlay || showReadAloud || showOcr || showTranscribe || showExtractAudio || showExtract || matchingTasks.length > 0;
+
   return (
   <>
     {showPlay && (
@@ -126,18 +128,6 @@ const DropdownMenuItems = ({
         Play
       </DropdownMenuItem>
     )}
-    <DropdownMenuItem onClick={() => onChat(entry)} className="cursor-pointer">
-      <MessageSquare className="mr-2 h-4 w-4" />
-      Chat...
-    </DropdownMenuItem>
-    <DropdownMenuItem onClick={() => onCopyPath(entry)} className="cursor-pointer">
-      <ClipboardCopy className="mr-2 h-4 w-4" />
-      Copy path
-    </DropdownMenuItem>
-    <DropdownMenuItem onClick={() => onDownload(entry)} className="cursor-pointer">
-      <Download className="mr-2 h-4 w-4" />
-      Download
-    </DropdownMenuItem>
     {showReadAloud && (
       <DropdownMenuItem onClick={() => onReadAloud(entry)} className="cursor-pointer">
         <Volume2 className="mr-2 h-4 w-4" />
@@ -183,16 +173,7 @@ const DropdownMenuItems = ({
         </DropdownMenuSubContent>
       </DropdownMenuSub>
     )}
-    {entry.type === 'directory' && (
+    {hasActions && <DropdownMenuSeparator />}
-      <>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem onClick={() => onCreateDashboard(entry)} className="cursor-pointer">
-          <LayoutGrid className="mr-2 h-4 w-4" />
-          Create Dashboard here
-        </DropdownMenuItem>
-      </>
-    )}
-    <DropdownMenuSeparator />
     <DropdownMenuItem onClick={onCut} className="cursor-pointer">
       <Scissors className="mr-2 h-4 w-4" />
       Cut
@@ -207,6 +188,25 @@ const DropdownMenuItems = ({
         Rename
       </DropdownMenuItem>
     )}
+    <DropdownMenuItem onClick={() => onCopyPath(entry)} className="cursor-pointer">
+      <ClipboardCopy className="mr-2 h-4 w-4" />
+      Copy path
+    </DropdownMenuItem>
+    <DropdownMenuItem onClick={() => onDownload(entry)} className="cursor-pointer">
+      <Download className="mr-2 h-4 w-4" />
+      Download
+    </DropdownMenuItem>
+    <DropdownMenuSeparator />
+    <DropdownMenuItem onClick={() => onChat(entry)} className="cursor-pointer">
+      <MessageSquare className="mr-2 h-4 w-4" />
+      Chat...
+    </DropdownMenuItem>
+    {entry.type === 'directory' && (
+      <DropdownMenuItem onClick={() => onCreateDashboard(entry)} className="cursor-pointer">
+        <LayoutGrid className="mr-2 h-4 w-4" />
+        Create Dashboard here
+      </DropdownMenuItem>
+    )}
     <DropdownMenuSeparator />
     <DropdownMenuItem onClick={() => onDelete(entry)} className="text-red-600 cursor-pointer">
       <Trash2 className="mr-2 h-4 w-4" />
@@ -244,6 +244,8 @@ const ContextMenuItems = ({
   const showExtract = fileType === 'archive';
   const showPlay = fileType === 'audio' || entry.type === 'directory';
 
+  const hasActions = showPlay || showReadAloud || showOcr || showTranscribe || showExtractAudio || showExtract || matchingTasks.length > 0;
+
   return (
   <>
     {showPlay && (
@@ -252,18 +254,6 @@ const ContextMenuItems = ({
         Play
       </ContextMenuItem>
     )}
-    <ContextMenuItem onClick={() => onChat(entry)} className="cursor-pointer">
-      <MessageSquare className="mr-2 h-4 w-4" />
-      Chat...
-    </ContextMenuItem>
-    <ContextMenuItem onClick={() => onCopyPath(entry)} className="cursor-pointer">
-      <ClipboardCopy className="mr-2 h-4 w-4" />
-      Copy path
-    </ContextMenuItem>
-    <ContextMenuItem onClick={() => onDownload(entry)} className="cursor-pointer">
-      <Download className="mr-2 h-4 w-4" />
-      Download
-    </ContextMenuItem>
     {showReadAloud && (
       <ContextMenuItem onClick={() => onReadAloud(entry)} className="cursor-pointer">
         <Volume2 className="mr-2 h-4 w-4" />
@@ -309,16 +299,7 @@ const ContextMenuItems = ({
         </ContextMenuSubContent>
       </ContextMenuSub>
     )}
-    {entry.type === 'directory' && (
+    {hasActions && <ContextMenuSeparator />}
-      <>
-        <ContextMenuSeparator />
-        <ContextMenuItem onClick={() => onCreateDashboard(entry)} className="cursor-pointer">
-          <LayoutGrid className="mr-2 h-4 w-4" />
-          Create Dashboard here
-        </ContextMenuItem>
-      </>
-    )}
-    <ContextMenuSeparator />
     <ContextMenuItem onClick={onCut} className="cursor-pointer">
       <Scissors className="mr-2 h-4 w-4" />
       Cut
@@ -333,6 +314,25 @@ const ContextMenuItems = ({
         Rename
       </ContextMenuItem>
     )}
+    <ContextMenuItem onClick={() => onCopyPath(entry)} className="cursor-pointer">
+      <ClipboardCopy className="mr-2 h-4 w-4" />
+      Copy path
+    </ContextMenuItem>
+    <ContextMenuItem onClick={() => onDownload(entry)} className="cursor-pointer">
+      <Download className="mr-2 h-4 w-4" />
+      Download
+    </ContextMenuItem>
+    <ContextMenuSeparator />
+    <ContextMenuItem onClick={() => onChat(entry)} className="cursor-pointer">
+      <MessageSquare className="mr-2 h-4 w-4" />
+      Chat...
+    </ContextMenuItem>
+    {entry.type === 'directory' && (
+      <ContextMenuItem onClick={() => onCreateDashboard(entry)} className="cursor-pointer">
+        <LayoutGrid className="mr-2 h-4 w-4" />
+        Create Dashboard here
+      </ContextMenuItem>
+    )}
     <ContextMenuSeparator />
     <ContextMenuItem onClick={() => onDelete(entry)} className="text-red-600 cursor-pointer">
       <Trash2 className="mr-2 h-4 w-4" />

src/workspaces/officerdev/src/apps/FileBrowser/FileBrowserApp/components/Toolbar/Toolbar.tsx

@@ -1,4 +1,4 @@
-import { Loader2, LayoutGrid, List, Search, X, Check, GitBranch, Eye, EyeOff } from 'lucide-react';
+import { Loader2, LayoutGrid, List, Search, X, Check, GitBranch, Eye, EyeOff, Download, Mic } from 'lucide-react';
 import type { UseFileBrowserAppType } from '../../useFileBrowserApp';
 import { ActionButtons } from './ActionButtons';
 
@@ -21,6 +21,8 @@ export const Toolbar = ({ fileBrowserManager }: ToolbarProps) => {
     setShowHidden,
     viewMode,
     setViewMode,
+    setShowVideoDownload,
+    setShowDictate,
   } = fileBrowserManager;
 
   return (
@@ -71,6 +73,21 @@ export const Toolbar = ({ fileBrowserManager }: ToolbarProps) => {
           </button>
         </form>
       ) : (
+        <>
+          <button
+            onClick={() => setShowVideoDownload(true)}
+            title="Download video"
+            className="hidden md:block p-1.5 rounded-md text-duck-teal hover:bg-duck-dark/5 cursor-pointer transition-colors"
+          >
+            <Download className="h-4 w-4" />
+          </button>
+          <button
+            onClick={() => setShowDictate(true)}
+            title="Dictate"
+            className="hidden md:block p-1.5 rounded-md text-duck-teal hover:bg-duck-dark/5 cursor-pointer transition-colors"
+          >
+            <Mic className="h-4 w-4" />
+          </button>
           <button
             onClick={() => setShowCloneInput(true)}
             title="Git clone"
@@ -78,6 +95,7 @@ export const Toolbar = ({ fileBrowserManager }: ToolbarProps) => {
           >
             <GitBranch className="h-4 w-4" />
           </button>
+        </>
       )}
       <div className="relative flex items-center">
         <Search className="absolute left-2 h-4 w-4 text-duck-dark/40 pointer-events-none" />