feat: display column comments in sidebar and data grid header (#37)

- Add comment field to ColumnInfo (MySQL COLUMN_COMMENT, PostgreSQL col_description)
- Show column comments in sidebar tree nodes
- Show column comments on hover in data grid header
- Default MySQL charset to utf8mb4 for proper CJK support
Closes #14

src/components/grid/DataGrid.vue

@@ -63,6 +63,16 @@ const columnTypeMap = computed(() => {
   return map;
 });
 
+const columnCommentMap = computed(() => {
+  const map = new Map<string, string>();
+  if (props.tableMeta?.columns) {
+    for (const col of props.tableMeta.columns) {
+      if (col.comment) map.set(col.name, col.comment);
+    }
+  }
+  return map;
+});
+
 function shortTypeName(t: string): string {
   const s = t.toLowerCase();
   if (s === "character varying") return "varchar";
@@ -778,6 +788,7 @@ function escapeAndHighlightKeywords(s: string): string {
                 :key="col"
                 class="shrink-0 px-3 py-1.5 border-r border-border whitespace-nowrap cursor-pointer hover:bg-accent/50 select-none relative overflow-hidden"
                 :style="{ width: `var(--col-w-${colIdx})` }"
+                :title="columnCommentMap.get(col)"
                 @click="toggleSort(col)"
               >
                 <span class="flex min-w-0 items-center gap-1 overflow-hidden">

src/components/sidebar/TreeItem.vue

@@ -240,6 +240,7 @@ function disconnectConnection() {
 const canExpand = !leafTypes.has(props.node.type);
 const canPin = computed(() => pinnableTypes.has(props.node.type));
 const isPinned = computed(() => props.node.pinned || connectionStore.isTreeNodePinned(props.node.id));
+const columnComment = computed(() => props.node.type === "column" && props.node.meta && "comment" in props.node.meta ? (props.node.meta as any).comment : null);
 const paddingLeft = `${props.depth * 16 + 8}px`;
 const isConnected = computed(() =>
   props.node.type === "connection" && !!props.node.connectionId && connectionStore.connectedIds.has(props.node.connectionId)
@@ -299,6 +300,7 @@ async function showMore() {
           <component v-else :is="getIconInfo(node)?.icon || Database" class="w-3.5 h-3.5 shrink-0" :class="getIconInfo(node)?.colorClass" />
           <span v-if="node.type === 'connection' && connectionColor" class="h-3 w-1.5 rounded-full shrink-0" :style="{ backgroundColor: connectionColor }" />
           <span class="min-w-0 flex-1 truncate">{{ isGroupLabel(node) ? t(node.label) : node.label }}</span>
+          <span v-if="columnComment" class="truncate text-muted-foreground/60 text-[10px] max-w-[40%]">{{ columnComment }}</span>
           <span v-if="node.type === 'connection' && node.connectionId && connectionStore.connectedIds.has(node.connectionId)" class="w-1.5 h-1.5 rounded-full bg-green-500 shrink-0" />
           <button
             v-if="canPin"

src/types/database.ts

@@ -39,6 +39,7 @@ export interface ColumnInfo {
   column_default: string | null;
   is_primary_key: boolean;
   extra: string | null;
+  comment?: string | null;
 }
 
 export interface IndexInfo {