fix(jdbc): simplify driver selection and table edits

apps/desktop/src/components/connection/ConnectionDialog.vue

@@ -4,12 +4,14 @@ import { uuid } from "@/lib/utils";
 import { useI18n } from "vue-i18n";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Switch } from "@/components/ui/switch";
 import type { ConnectionConfig, DatabaseType, JdbcDriverInfo, JdbcMavenBundleInfo, ProxyTunnelConfig, SshTunnelConfig, TransportLayerConfig } from "@/types/database";
 import { useConnectionStore } from "@/stores/connectionStore";
 import { useSettingsStore } from "@/stores/settingsStore";
@@ -254,6 +256,7 @@ const jdbcDrivers = ref<JdbcDriverInfo[]>([]);
 const jdbcMavenBundles = ref<JdbcMavenBundleInfo[]>([]);
 const agentDrivers = ref<AgentDriverInstallState[]>([]);
 const selectedJdbcDriverPath = ref("");
+const jdbcManualClasspathOpen = ref(false);
 const connectionUrlInput = ref("");
 const oceanbaseSubMode = ref<"mysql" | "oracle">("mysql");
 const h2ConnectionMode = ref<H2ConnectionMode>("file");
@@ -293,6 +296,13 @@ const jdbcDriverSelectItems = computed<JdbcDriverSelectItem[]>(() => {
 });
 
 const jdbcDriverSelectItemById = computed(() => new Map(jdbcDriverSelectItems.value.map((item) => [item.id, item])));
+const jdbcManualClasspathCount = computed(
+  () =>
+    jdbcDriverPathsInput.value
+      .split(/\r?\n/)
+      .map((value) => value.trim())
+      .filter(Boolean).length,
+);
 
 function applyCustomColor(value: string) {
   form.value.color = value;
@@ -751,7 +761,7 @@ const iconTypeMap: Record<string, string> = {
   custom_postgres: "postgres",
 };
 
-const dbOptions = [
+const dbOptions: DbOption[] = [
   { value: "postgres", label: "PostgreSQL" },
   { value: "mysql", label: "MySQL" },
   { value: "mongodb", label: "MongoDB" },
@@ -811,12 +821,19 @@ const dbOptions = [
   { value: "influxdb", label: "InfluxDB" },
   { value: "iris", label: "IRIS" },
   { value: "jdbc", label: "JDBC" },
-  { value: "custom_mysql", label: "Custom (MySQL)" },
-  { value: "custom_postgres", label: "Custom (PostgreSQL)" },
 ];
 
 const dbCategories = computed<DbCategory[]>(() => [{ key: "all", title: "", options: dbOptions }]);
 
+function matchesDbOption(option: DbOption, keyword: string, categoryTitle = "") {
+  const profile = driverProfiles[option.value];
+  return [option.label, option.value, profile?.label, profile?.type, categoryTitle].some((value) =>
+    String(value || "")
+      .toLowerCase()
+      .includes(keyword),
+  );
+}
+
 const filteredDbCategories = computed<DbCategory[]>(() => {
   const keyword = dbSearchQuery.value.trim().toLowerCase();
   if (!keyword) return dbCategories.value;
@@ -824,14 +841,7 @@ const filteredDbCategories = computed<DbCategory[]>(() => {
   return dbCategories.value
     .map((category) => ({
       ...category,
-      options: category.options.filter((option) => {
-        const profile = driverProfiles[option.value];
-        return [option.label, option.value, profile?.label, profile?.type, category.title].some((value) =>
-          String(value || "")
-            .toLowerCase()
-            .includes(keyword),
-        );
-      }),
+      options: category.options.filter((option) => matchesDbOption(option, keyword, category.title)),
     }))
     .filter((category) => category.options.length > 0);
 });
@@ -2003,6 +2013,7 @@ function onJdbcDriverSelect(id: any) {
   if (!item) return;
   selectedJdbcDriverPath.value = id;
   addJdbcDriverPaths(item.paths);
+  jdbcManualClasspathOpen.value = false;
 }
 
 function openExternalUrl(url: string) {
@@ -2043,7 +2054,7 @@ function openExternalUrl(url: string) {
           <div class="max-h-[58vh] space-y-5 overflow-y-auto pr-2">
             <section v-for="category in filteredDbCategories" :key="category.key" class="space-y-2">
               <div class="flex items-center">
-                <h3 class="text-sm font-medium">{{ category.title }}</h3>
+                <h3 v-if="category.title" class="text-sm font-medium">{{ category.title }}</h3>
               </div>
 
               <div v-if="dbPickerView === 'icon'" class="grid grid-cols-2 gap-2 sm:grid-cols-4 lg:grid-cols-5">
@@ -2229,10 +2240,6 @@ function openExternalUrl(url: string) {
                     <Label class="text-right">{{ t("connection.password") }}</Label>
                     <Input v-model="form.password" type="password" class="col-span-3" />
                   </div>
-                  <div class="grid grid-cols-4 items-center gap-4">
-                    <Label class="text-right">{{ t("connection.jdbcDriverClass") }}</Label>
-                    <Input v-model="form.jdbc_driver_class" class="col-span-3" :placeholder="t('connection.jdbcDriverClassPlaceholder')" />
-                  </div>
                   <div class="grid grid-cols-4 items-start gap-4">
                     <Label class="text-right mt-2">{{ t("connection.jdbcDriverPaths") }}</Label>
                     <div class="col-span-3 space-y-2">
@@ -2246,7 +2253,16 @@ function openExternalUrl(url: string) {
                           </SelectItem>
                         </SelectContent>
                       </Select>
-                      <div class="flex items-start gap-1">
+                      <div class="flex items-center justify-between gap-3 rounded-md border bg-muted/20 px-3 py-2">
+                        <div class="flex min-w-0 items-center gap-2">
+                          <div class="truncate text-xs font-medium">{{ t("connection.jdbcManualClasspath") }}</div>
+                          <Badge variant="outline" class="h-5 shrink-0 rounded-full px-2 text-[10px] font-medium">
+                            {{ t("connection.jdbcManualClasspathCount", { count: jdbcManualClasspathCount }) }}
+                          </Badge>
+                        </div>
+                        <Switch v-model="jdbcManualClasspathOpen" />
+                      </div>
+                      <div v-if="jdbcManualClasspathOpen" class="flex items-start gap-1">
                         <textarea
                           v-model="jdbcDriverPathsInput"
                           class="flex min-h-12 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
@@ -2263,6 +2279,10 @@ function openExternalUrl(url: string) {
                       </div>
                     </div>
                   </div>
+                  <div class="grid grid-cols-4 items-center gap-4">
+                    <Label class="text-right">{{ t("connection.jdbcDriverClass") }}</Label>
+                    <Input v-model="form.jdbc_driver_class" class="col-span-3" :placeholder="t('connection.jdbcDriverClassPlaceholder')" />
+                  </div>
                   <div class="grid grid-cols-4 items-start gap-4">
                     <span />
                     <div class="col-span-3 space-y-2">