Added download button for file

Author: slinjhu

smoosense-gui/src/components/common/FileInfoPopover.tsx

@@ -1,12 +1,13 @@
 'use client'
 
-import { Info, Loader2, AlertCircle } from 'lucide-react'
+import { Info, Loader2, AlertCircle, Download } from 'lucide-react'
 import IconPopover from '@/components/common/IconPopover'
 import { useFileInfo } from '@/lib/hooks/useFileInfo'
 import { useAppSelector } from '@/lib/hooks'
 import CopyToClipboard from '@/components/ui/CopyToClipboard'
 import { pathBasename } from '@/lib/utils/pathUtils'
 import { CLS } from '@/lib/utils/styles'
+import { getFileUrl } from '@/lib/utils/apiUtils'
 
 export default function FileInfoPopover() {
   const filePath = useAppSelector((state) => state.ui.filePath)
@@ -17,6 +18,13 @@ export default function FileInfoPopover() {
     return null
   }
 
+  const handleDownload = () => {
+    if (filePath) {
+      const url = getFileUrl(filePath, true)
+      window.open(url, '_blank')
+    }
+  }
+
   const renderContent = () => {
     if (loading) {
       return (
@@ -62,6 +70,13 @@ export default function FileInfoPopover() {
               <span className="text-muted-foreground">Name:</span>
               <div className="flex items-center gap-1">
                 <span className="truncate max-w-[150px]">{pathBasename(filePath)}</span>
+                <button
+                  onClick={handleDownload}
+                  className={CLS.ICON_BUTTON_SM_SUBTLE}
+                  title="Download file"
+                >
+                  <Download className="h-3 w-3" />
+                </button>
                 <CopyToClipboard value={pathBasename(filePath)} />
               </div>
             </div>

smoosense-gui/src/components/ui/CellPopover.tsx

@@ -89,7 +89,7 @@ export default function CellPopover({
       {cellContent}
       {isHovered && copyValue && (
         <div className="absolute top-0 right-0 z-10">
-          <CopyToClipboard value={copyValue} />
+          <CopyToClipboard value={copyValue} className="bg-background/80" />
         </div>
       )}
     </div>

smoosense-gui/src/components/ui/CopyToClipboard.tsx

@@ -7,10 +7,12 @@ import { CLS } from '@/lib/utils/styles'
 
 interface CopyToClipboardProps {
   value: unknown
+  className?: string
 }
 
-export default function CopyToClipboard({ 
-  value
+export default function CopyToClipboard({
+  value,
+  className = ''
 }: CopyToClipboardProps) {
   const [copied, setCopied] = useState(false)
 
@@ -36,7 +38,7 @@ export default function CopyToClipboard({
   }
 
   const iconSize = 'h-3 w-3'
-  const buttonClass = CLS.ICON_BUTTON_SM_SUBTLE
+  const buttonClass = `${CLS.ICON_BUTTON_SM_SUBTLE} ${className}`
 
   return (
     <button

smoosense-gui/src/lib/utils/styles.ts

@@ -14,7 +14,7 @@ const BUTTON_SECONDARY = 'bg-secondary text-secondary-foreground hover:bg-primar
 const BUTTON_DESTRUCTIVE = 'bg-secondary text-secondary-foreground hover:bg-destructive/30'
 
 // Icon button variants
-const ICON_BUTTON_SUBTLE = 'bg-background/80 hover:bg-accent border border-border shadow-sm opacity-80 hover:opacity-100'
+const ICON_BUTTON_SUBTLE = ' border border-border shadow-sm opacity-80 hover:opacity-100'
 
 // Hyperlink styles
 const HYPERLINK = 'dark:text-sky-400 dark:hover:text-sky-300 text-blue-600 hover:text-blue-800 underline underline-offset-4 transition-colors'