feat(web): add local file access indicator to instance cards (#911)

Author: s0up4200

web/src/components/instances/InstanceCard.tsx

@@ -40,6 +40,7 @@ import {
   Edit,
   Eye,
   EyeOff,
+  HardDrive,
   MoreVertical,
   Power,
   RefreshCw,
@@ -312,6 +313,16 @@ export function InstanceCard({
               {instance.tlsSkipVerify ? "Skipped" : "Strict"}
             </span>
           </div>
+          <div className="flex justify-between items-center">
+            <span className="text-muted-foreground">Local File Access:</span>
+            <span className={cn(
+              "flex items-center gap-1",
+              instance.hasLocalFilesystemAccess ? "text-primary" : "text-muted-foreground"
+            )}>
+              <HardDrive className="h-3 w-3" />
+              {instance.hasLocalFilesystemAccess ? "Enabled" : "Disabled"}
+            </span>
+          </div>
         </div>
 
         <InstanceErrorDisplay instance={instance} onEdit={onEdit} showEditButton={true} compact />

web/src/components/instances/InstanceSettingsButton.tsx

@@ -3,11 +3,10 @@
  * SPDX-License-Identifier: GPL-2.0-or-later
  */
 
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
+import { Cog } from "lucide-react"
 import { useState } from "react"
-import { Button } from "@/components/ui/button"
-import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip"
 import { InstancePreferencesDialog } from "./preferences/InstancePreferencesDialog"
-import { Cog } from "lucide-react"
 
 interface InstanceSettingsButtonProps {
   instanceId: number
@@ -36,14 +35,20 @@ export function InstanceSettingsButton({
       {showButton && (
         <Tooltip>
           <TooltipTrigger asChild>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-6 w-6 p-0"
+            <span
+              role="button"
+              tabIndex={0}
+              className="cursor-pointer"
               onClick={handleClick}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault()
+                  handleClick(e as unknown as React.MouseEvent)
+                }
+              }}
             >
               <Cog className="h-4 w-4" />
-            </Button>
+            </span>
           </TooltipTrigger>
           <TooltipContent>
             Instance Settings

web/src/pages/Dashboard.tsx

@@ -32,8 +32,8 @@ import {
 } from "@/components/ui/dialog"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 import { ScrollArea } from "@/components/ui/scroll-area"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 import { Textarea } from "@/components/ui/textarea"
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
 import { TrackerIconImage } from "@/components/ui/tracker-icon"
@@ -266,7 +266,7 @@ function InstanceCard({
               </CardTitle>
               <ExternalLink className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
             </Link>
-            <div className="flex items-center gap-1 justify-end shrink-0 basis-full sm:basis-auto sm:min-w-[4.5rem]">
+            <div className="flex items-center gap-1.5 justify-end shrink-0 basis-full sm:basis-auto sm:min-w-[4.5rem]">
               {instance.reannounceSettings?.enabled && (
                 <Tooltip>
                   <TooltipTrigger asChild>
@@ -280,29 +280,44 @@ function InstanceCard({
               {instance.connected && !isFirstLoad && (
                 <Tooltip>
                   <TooltipTrigger asChild>
-                    <Button
-                      variant="ghost"
-                      size="sm"
+                    <span
+                      role="button"
+                      tabIndex={0}
                       onClick={(e) => {
                         e.preventDefault()
                         e.stopPropagation()
-                        setShowSpeedLimitDialog(true)
+                        if (!isToggling) setShowSpeedLimitDialog(true)
                       }}
-                      disabled={isToggling}
-                      className="h-8 w-8 p-0 shrink-0"
+                      onKeyDown={(e) => {
+                        if ((e.key === "Enter" || e.key === " ") && !isToggling) {
+                          e.preventDefault()
+                          setShowSpeedLimitDialog(true)
+                        }
+                      }}
+                      className={`cursor-pointer ${isToggling ? "opacity-50" : ""}`}
                     >
                       {altSpeedEnabled ? (
                         <Turtle className="h-4 w-4 text-orange-600" />
                       ) : (
                         <Rabbit className="h-4 w-4 text-green-600" />
                       )}
-                    </Button>
+                    </span>
                   </TooltipTrigger>
                   <TooltipContent>
                     Alternative speed limits: {altSpeedEnabled ? "On" : "Off"}
                   </TooltipContent>
                 </Tooltip>
               )}
+              {instance.hasLocalFilesystemAccess && (
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <HardDrive className="h-4 w-4 text-primary" />
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    Local file access enabled
+                  </TooltipContent>
+                </Tooltip>
+              )}
               <InstanceSettingsButton
                 instanceId={instance.id}
                 instanceName={instance.name}