fix(editor): preserve snippet settings edits and polish completion UI

apps/desktop/src/components/editor/EditorSettingsDialog.vue

@@ -240,14 +240,6 @@ watch(
   { immediate: true },
 );
 
-watch(
-  () => settingsStore.editorSettings.snippets,
-  (snippets) => {
-    editSnippets.value = snippets.map((s) => ({ ...s }));
-  },
-  { deep: true },
-);
-
 const shortcutConflicts = computed(() =>
   SHORTCUT_DEFINITIONS.flatMap((definition) => {
     const conflict = findShortcutConflict(definition.id, editShortcuts.value[definition.id], editShortcuts.value);
@@ -1334,9 +1326,15 @@ watch(
                 <table class="w-full text-sm">
                   <thead>
                     <tr class="border-b bg-muted/50">
-                      <th class="px-3 py-2 text-left font-medium">{{ t("settings.snippetsLabel") }}</th>
-                      <th class="px-3 py-2 text-left font-medium">{{ t("settings.snippetsPrefix") }}</th>
-                      <th class="px-3 py-2 text-left font-medium">{{ t("settings.snippetsBody") }}</th>
+                      <th class="px-3 py-2 text-left font-medium whitespace-nowrap">
+                        {{ t("settings.snippetsLabel") }}
+                      </th>
+                      <th class="px-3 py-2 text-left font-medium whitespace-nowrap">
+                        {{ t("settings.snippetsPrefix") }}
+                      </th>
+                      <th class="px-3 py-2 text-left font-medium whitespace-nowrap">
+                        {{ t("settings.snippetsBody") }}
+                      </th>
                       <th class="px-3 py-2 w-20"></th>
                     </tr>
                   </thead>
@@ -1347,7 +1345,14 @@ watch(
                       class="border-b last:border-b-0 hover:bg-muted/30"
                     >
                       <td class="px-3 py-2">{{ snippet.label }}</td>
-                      <td class="px-3 py-2 font-mono text-xs">{{ snippet.prefix }}</td>
+                      <td class="px-3 py-2">
+                        <Badge
+                          variant="outline"
+                          class="h-5 rounded-md px-1.5 text-[11px] font-mono text-muted-foreground"
+                        >
+                          {{ snippet.prefix }}
+                        </Badge>
+                      </td>
                       <td class="px-3 py-2 font-mono text-xs text-muted-foreground max-w-[300px] truncate">
                         {{ snippet.body }}
                       </td>

apps/desktop/src/i18n/locales/en.ts

@@ -1447,6 +1447,8 @@ export default {
     redisScanPageSizeDescription: "Keys requested per Redis SCAN page when browsing keys.",
     redisScanPageSizeOption: "{count} keys",
     shortcutExecuteSql: "Execute SQL",
+    shortcutFind: "Find",
+    shortcutReplace: "Replace",
     shortcutSaveSql: "Save SQL",
     shortcutAcceptCompletion: "Accept completion",
     shortcutCopyCurrentRow: "Copy current data row",

apps/desktop/src/i18n/locales/es.ts

@@ -1342,6 +1342,8 @@ export default {
     redisScanPageSizeDescription: "Claves solicitadas por página SCAN al explorar claves Redis.",
     redisScanPageSizeOption: "{count} claves",
     shortcutExecuteSql: "Ejecutar SQL",
+    shortcutFind: "Buscar",
+    shortcutReplace: "Reemplazar",
     shortcutSaveSql: "Guardar SQL",
     shortcutAcceptCompletion: "Aceptar completado",
     shortcutCopyCurrentRow: "Copiar fila de datos actual",

apps/desktop/src/i18n/locales/zh-CN.ts

@@ -1413,6 +1413,8 @@ export default {
     redisScanPageSizeDescription: "浏览 Redis Key 时每次 SCAN 请求的 Key 数量。",
     redisScanPageSizeOption: "{count} 个 Key",
     shortcutExecuteSql: "执行 SQL",
+    shortcutFind: "查找",
+    shortcutReplace: "替换",
     shortcutSaveSql: "保存 SQL",
     shortcutAcceptCompletion: "接受补全",
     shortcutCopyCurrentRow: "复制当前数据行",

apps/desktop/src/lib/editorThemes.ts

@@ -26,6 +26,11 @@ const KEYWORD_ICON: LucideIconNode = [
 ];
 
 const SNIPPET_ICON: LucideIconNode = [
+  ["path", { d: "M8 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h1" }],
+  ["path", { d: "M16 3h1a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-1" }],
+];
+
+const FUNCTION_ICON: LucideIconNode = [
   ["path", { d: "m15 10 5 5-5 5" }],
   ["path", { d: "M4 4v7a4 4 0 0 0 4 4h12" }],
 ];
@@ -236,9 +241,13 @@ export function buildSqlCompletionThemeRules(): CodeMirrorStyleSpec {
       ...lucideCompletionIconMask(KEYWORD_ICON),
     },
     ".cm-completionIcon-snippet": {
-      color: "color-mix(in oklch, var(--emerald-500, #10b981) 92%, var(--popover-foreground))",
+      color: "color-mix(in oklch, var(--violet-500, #8b5cf6) 92%, var(--popover-foreground))",
       ...lucideCompletionIconMask(SNIPPET_ICON),
     },
+    ".cm-completionIcon-function": {
+      color: "color-mix(in oklch, var(--emerald-500, #10b981) 92%, var(--popover-foreground))",
+      ...lucideCompletionIconMask(FUNCTION_ICON),
+    },
     ".cm-completionIcon-schema": {
       color: "color-mix(in oklch, var(--amber-500, #f59e0b) 92%, var(--popover-foreground))",
       ...lucideCompletionIconMask(SCHEMA_ICON),

apps/desktop/src/stores/settingsStore.ts

@@ -425,20 +425,36 @@ export const useSettingsStore = defineStore("settings", () => {
   }
 
   function updateEditorSettings(partial: Partial<EditorSettings>) {
-    const normalizedPartial = {
-      ...partial,
-      ...(partial.pageSize !== undefined ? { pageSize: normalizeResultPageSize(partial.pageSize) } : {}),
-      ...(partial.queryTimeoutSecs !== undefined
-        ? { queryTimeoutSecs: normalizeQueryTimeoutSecs(partial.queryTimeoutSecs) }
-        : {}),
-      ...(partial.sidebarHiddenTablePrefixes !== undefined
-        ? { sidebarHiddenTablePrefixes: normalizeSidebarHiddenTablePrefixes(partial.sidebarHiddenTablePrefixes) }
-        : {}),
-      ...(partial.sidebarHideTableComments !== undefined
-        ? { sidebarHideTableComments: partial.sidebarHideTableComments }
-        : {}),
-    };
-    Object.assign(editorSettings.value, normalizedPartial);
+    if (partial.fontFamily !== undefined) editorSettings.value.fontFamily = partial.fontFamily;
+    if (partial.fontSize !== undefined) editorSettings.value.fontSize = partial.fontSize;
+    if (partial.theme !== undefined) editorSettings.value.theme = partial.theme;
+    if (partial.executeMode !== undefined) editorSettings.value.executeMode = partial.executeMode;
+    if (partial.wordWrap !== undefined) editorSettings.value.wordWrap = partial.wordWrap;
+    if (partial.compactTabTitle !== undefined) editorSettings.value.compactTabTitle = partial.compactTabTitle;
+    if (partial.appLayout !== undefined) editorSettings.value.appLayout = partial.appLayout;
+    if (partial.pageSize !== undefined) editorSettings.value.pageSize = normalizeResultPageSize(partial.pageSize);
+    if (partial.redisScanPageSize !== undefined) editorSettings.value.redisScanPageSize = partial.redisScanPageSize;
+    if (partial.mongoViewMode !== undefined) editorSettings.value.mongoViewMode = partial.mongoViewMode;
+    if (partial.showColumnCommentsInHeader !== undefined)
+      editorSettings.value.showColumnCommentsInHeader = partial.showColumnCommentsInHeader;
+    if (partial.compactColumnHeaderActions !== undefined)
+      editorSettings.value.compactColumnHeaderActions = partial.compactColumnHeaderActions;
+    if (partial.shortcuts !== undefined) editorSettings.value.shortcuts = normalizeShortcutSettings(partial.shortcuts);
+    if (partial.sidebarActivation !== undefined) editorSettings.value.sidebarActivation = partial.sidebarActivation;
+    if (partial.autoSelectActiveSidebarNode !== undefined)
+      editorSettings.value.autoSelectActiveSidebarNode = partial.autoSelectActiveSidebarNode;
+    if (partial.sidebarHiddenTablePrefixes !== undefined)
+      editorSettings.value.sidebarHiddenTablePrefixes = normalizeSidebarHiddenTablePrefixes(
+        partial.sidebarHiddenTablePrefixes,
+      );
+    if (partial.sidebarHideTableComments !== undefined)
+      editorSettings.value.sidebarHideTableComments = partial.sidebarHideTableComments;
+    if (partial.columnFormatters !== undefined) editorSettings.value.columnFormatters = partial.columnFormatters;
+    if (partial.customColumnFormatters !== undefined)
+      editorSettings.value.customColumnFormatters = partial.customColumnFormatters;
+    if (partial.snippets !== undefined) editorSettings.value.snippets = normalizeSqlSnippets(partial.snippets);
+    if (partial.queryTimeoutSecs !== undefined)
+      editorSettings.value.queryTimeoutSecs = normalizeQueryTimeoutSecs(partial.queryTimeoutSecs);
     saveEditorSettings(editorSettings.value);
   }