fix: add Shiki SQL syntax highlighting to all SQL display components

Add useSqlHighlighter composable and integrate Shiki highlighting into
DangerConfirmDialog, QueryHistory, DataGrid (replacing regex-based
highlighting), SqlFileExecutionDialog, SchemaDiffDialog, TreeItem,
ObjectBrowser, and FieldLineageDialog. Also fix danger dialog overflow
by adding overflow-hidden to DialogContent and wrap/scroll support.

apps/desktop/src/components/lineage/FieldLineageDialog.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
+import { useSqlHighlighter } from "@/composables/useSqlHighlighter";
 import {
   ArrowUpRight,
   Check,
@@ -58,6 +59,7 @@ const emit = defineEmits<{
 
 const { t } = useI18n();
 const { toast } = useToast();
+const { highlight } = useSqlHighlighter();
 const connectionStore = useConnectionStore();
 const dialogOpen = computed({
   get: () => props.open,
@@ -452,8 +454,8 @@ function openItemTarget(item: FieldLineageItem) {
                     <pre
                       v-if="item.sqlSnippet"
                       class="mt-2 max-h-20 overflow-auto rounded-md bg-muted/40 p-2 text-xs whitespace-pre-wrap"
-                      >{{ item.sqlSnippet }}</pre
-                    >
+                      v-html="highlight(item.sqlSnippet)"
+                    />
                   </div>
                   <Button
                     variant="ghost"