From 958f2aeaba43e5048e18779142029138d2bcddd3 Mon Sep 17 00:00:00 2001
From: FTCHD <144691102+FTCHD@users.noreply.github.com>
Date: Sun, 10 May 2026 22:43:14 +0300
Subject: [PATCH] hide disabled config buttons to avoid confusion (#184 )

---
 src/pages/Settings/ConfigSection.tsx | 135 +++++++++++++--------------
 1 file changed, 63 insertions(+), 72 deletions(-)

diff --git a/src/pages/Settings/ConfigSection.tsx b/src/pages/Settings/ConfigSection.tsx
index 0bc42ec..3c379a7 100644
--- a/src/pages/Settings/ConfigSection.tsx
+++ b/src/pages/Settings/ConfigSection.tsx
@@ -489,8 +489,10 @@ function ConfigCard({
     locateConfigMutation: any
     exportConfigMutation: any
 }) {
+    const isActive = configFile.id === activeConfigFile?.id
+
     const disabledKeys = useMemo(() => {
-        if (configFile.id !== activeConfigFile?.id) {
+        if (!isActive) {
             return [
                 'enable',
                 'disable',
@@ -522,7 +524,7 @@ function ConfigCard({
         }
 
         return disabled
-    }, [configFile, activeConfigFile])
+    }, [configFile, isActive])
 
     return (
         <Card
@@ -676,81 +678,70 @@ function ConfigCard({
                             </Dropdown>
                         </div>
                     </Tooltip>
-                    <Tooltip content="Edit Config" color="foreground" size="lg">
-                        <div>
-                            <Button
-                                isIconOnly={true}
-                                variant="light"
-                                size="lg"
-                                onPress={() => {
-                                    setFocusedConfigId(configFile.id!)
-                                    setIsEditDrawerOpen(true)
-                                }}
-                                isDisabled={
-                                    configFile.id === 'default' ||
-                                    configFile.id === activeConfigFile?.id ||
-                                    Boolean(configFile.sync)
-                                }
-                            >
-                                <PencilIcon className="w-5 h-5" />
-                            </Button>
-                        </div>
-                    </Tooltip>
-                    <Tooltip content="Delete Config" color="danger" size="lg">
-                        <div>
-                            <Button
-                                isIconOnly={true}
-                                variant="light"
-                                size="lg"
-                                onPress={() => {
-                                    setTimeout(async () => {
-                                        const confirmed = await ask(
-                                            `Are you sure you want to delete config ${configFile.label}?`,
-                                            {
-                                                title: 'Delete Config',
-                                                kind: 'warning',
-                                                okLabel: 'Delete',
-                                                cancelLabel: 'Cancel',
+                    {configFile.id !== 'default' && !isActive && !configFile.sync && (
+                        <Tooltip content="Edit Config" color="foreground" size="lg">
+                            <div>
+                                <Button
+                                    isIconOnly={true}
+                                    variant="light"
+                                    size="lg"
+                                    onPress={() => {
+                                        setFocusedConfigId(configFile.id!)
+                                        setIsEditDrawerOpen(true)
+                                    }}
+                                >
+                                    <PencilIcon className="w-5 h-5" />
+                                </Button>
+                            </div>
+                        </Tooltip>
+                    )}
+                    {configFile.id !== 'default' && (
+                        <Tooltip content="Delete Config" color="danger" size="lg">
+                            <div>
+                                <Button
+                                    isIconOnly={true}
+                                    variant="light"
+                                    size="lg"
+                                    onPress={() => {
+                                        setTimeout(async () => {
+                                            const confirmed = await ask(
+                                                `Are you sure you want to delete config ${configFile.label}?`,
+                                                {
+                                                    title: 'Delete Config',
+                                                    kind: 'warning',
+                                                    okLabel: 'Delete',
+                                                    cancelLabel: 'Cancel',
+                                                }
+                                            )
+
+                                            if (!confirmed) {
+                                                return
                                             }
-                                        )
 
-                                        if (!confirmed) {
-                                            return
-                                        }
+                                            if (!configFile.sync) {
+                                                const path = await getConfigPath({
+                                                    id: configFile.id!,
+                                                    validate: true,
+                                                })
 
-                                        if (configFile.id === 'default') {
-                                            await message('Default config cannot be deleted', {
-                                                title: 'Error',
-                                                kind: 'warning',
-                                                okLabel: 'OK',
-                                            })
-                                            return
-                                        }
+                                                await remove(path.replace('rclone.conf', ''), {
+                                                    recursive: true,
+                                                })
+                                            }
 
-                                        if (!configFile.sync) {
-                                            const path = await getConfigPath({
-                                                id: configFile.id!,
-                                                validate: true,
-                                            })
+                                            if (activeConfigFile?.id === configFile.id) {
+                                                useHostStore.getState().setActiveConfigFile('default')
+                                            }
 
-                                            await remove(path.replace('rclone.conf', ''), {
-                                                recursive: true,
-                                            })
-                                        }
-
-                                        if (activeConfigFile?.id === configFile.id) {
-                                            useHostStore.getState().setActiveConfigFile('default')
-                                        }
-
-                                        useHostStore.getState().removeConfigFile(configFile.id!)
-                                    }, 100)
-                                }}
-                                isDisabled={configFile.id === 'default'}
-                            >
-                                <Trash2Icon className="w-5 h-5" />
-                            </Button>
-                        </div>
-                    </Tooltip>
+                                            useHostStore.getState().removeConfigFile(configFile.id!)
+                                        }, 100)
+                                    }}
+                                >
+                                    <Trash2Icon className="w-5 h-5" />
+                                </Button>
+                            </div>
+                        </Tooltip>
+                    )}
                     <Tooltip content="Locate Config" color="foreground" size="lg">
                         <div>
                             <Button