hide disabled config buttons to avoid confusion (#184 )

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,6 +678,7 @@ function ConfigCard({
                             </Dropdown>
                         </div>
                     </Tooltip>
+                    {configFile.id !== 'default' && !isActive && !configFile.sync && (
                         <Tooltip content="Edit Config" color="foreground" size="lg">
                             <div>
                                 <Button
@@ -686,16 +689,13 @@ function ConfigCard({
                                         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>
+                    )}
+                    {configFile.id !== 'default' && (
                         <Tooltip content="Delete Config" color="danger" size="lg">
                             <div>
                                 <Button
@@ -718,15 +718,6 @@ function ConfigCard({
                                                 return
                                             }
 
-                                        if (configFile.id === 'default') {
-                                            await message('Default config cannot be deleted', {
-                                                title: 'Error',
-                                                kind: 'warning',
-                                                okLabel: 'OK',
-                                            })
-                                            return
-                                        }
-
                                             if (!configFile.sync) {
                                                 const path = await getConfigPath({
                                                     id: configFile.id!,
@@ -745,12 +736,12 @@ function ConfigCard({
                                             useHostStore.getState().removeConfigFile(configFile.id!)
                                         }, 100)
                                     }}
-                                isDisabled={configFile.id === 'default'}
                                 >
                                     <Trash2Icon className="w-5 h-5" />
                                 </Button>
                             </div>
                         </Tooltip>
+                    )}
                     <Tooltip content="Locate Config" color="foreground" size="lg">
                         <div>
                             <Button