From c6933a4fdf83b6568fc8f25588be8f01543b4b93 Mon Sep 17 00:00:00 2001
From: Johnpaul <polymenjohn1@gmail.com>
Date: Fri, 5 Sep 2025 22:06:58 +0100
Subject: [PATCH] style: enhance MultiSelect component's overlay and list for
 better scrolling experience

---
 src/components/input/MultiSelect.vue |  5 ++-
 src/services/dialogService.ts        | 57 ++++++++++++++++++++++++++++
 2 files changed, 60 insertions(+), 2 deletions(-)

diff --git a/src/components/input/MultiSelect.vue b/src/components/input/MultiSelect.vue
index ffafde707..5dff84376 100644
--- a/src/components/input/MultiSelect.vue
+++ b/src/components/input/MultiSelect.vue
@@ -171,9 +171,10 @@ const pt = computed(() => ({
   }),
   // Overlay & list visuals unchanged
   overlay:
-    'mt-2 bg-white dark-theme:bg-zinc-800 text-neutral dark-theme:text-white rounded-lg border border-solid border-zinc-100 dark-theme:border-zinc-700',
+    'mt-2 bg-white dark-theme:bg-zinc-800 text-neutral dark-theme:text-white rounded-lg border border-solid border-zinc-100 dark-theme:border-zinc-700 max-h-64 overflow-y-scroll',
   list: {
-    class: 'flex flex-col gap-1 p-0 list-none border-none text-xs'
+    class:
+      'flex flex-col gap-1 p-0 list-none border-none text-xs overflow-y-scroll'
   },
   // Option row hover and focus tone
   option: ({ context }: MultiSelectPassThroughMethodOptions) => ({
diff --git a/src/services/dialogService.ts b/src/services/dialogService.ts
index 4d364178e..ee60fc14a 100644
--- a/src/services/dialogService.ts
+++ b/src/services/dialogService.ts
@@ -182,6 +182,62 @@ export const useDialogService = () => {
     })
   }
 
+  function parseError(error: Error) {
+    const filename =
+      'fileName' in error
+        ? (error.fileName as string)
+        : error.stack?.match(/(\/extensions\/.*\.js)/)?.[1]
+
+    const extensionFile = filename
+      ? filename.substring(filename.indexOf('/extensions/'))
+      : undefined
+
+    return {
+      errorMessage: error.toString(),
+      stackTrace: error.stack,
+      extensionFile
+    }
+  }
+
+  /**
+   * Show a error dialog to the user when an error occurs.
+   * @param error The error to show
+   * @param options The options for the dialog
+   */
+  function showErrorDialog(
+    error: unknown,
+    options: {
+      title?: string
+      reportType?: string
+    } = {}
+  ) {
+    const errorProps: {
+      errorMessage: string
+      stackTrace?: string
+      extensionFile?: string
+    } =
+      error instanceof Error
+        ? parseError(error)
+        : {
+            errorMessage: String(error)
+          }
+
+    const props: InstanceType<typeof ErrorDialogContent>['$props'] = {
+      error: {
+        exceptionType: options.title ?? 'Unknown Error',
+        exceptionMessage: errorProps.errorMessage,
+        traceback: errorProps.stackTrace ?? t('errorDialog.noStackTrace'),
+        reportType: options.reportType
+      }
+    }
+
+    dialogStore.showDialog({
+      key: 'global-error',
+      component: ErrorDialogContent,
+      props
+    })
+  }
+
   function showManagerProgressDialog(options?: {
     props?: InstanceType<typeof ManagerProgressDialogContent>['$props']
   }) {
@@ -492,6 +548,7 @@ export const useDialogService = () => {
     showUpdatePasswordDialog,
     showExtensionDialog,
     prompt,
+    showErrorDialog,
     confirm,
     toggleManagerDialog,
     toggleManagerProgressDialog,