From 73bebe123708309e3e20ad59ef01d67459159678 Mon Sep 17 00:00:00 2001
From: Shubham Sharma <shubhamsharma.emails@gmail.com>
Date: Mon, 2 Dec 2024 08:04:22 +0000
Subject: [PATCH] feat: improve sound profile error message

- Update error message to provide clearer guidance when downloading a sound profile
- Add info button to show step-by-step manual installation instructions
- Show detailed instructions in a separate toast
- Use h() render function for dynamic toast content
- Use Info icon  from lucide-vue-next

This change helps users better understand how to manually install sound profiles when a download fails, improving the overall user experience.
---
 src/pages/dashboard/sound/Select.vue | 29 ++++++++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/pages/dashboard/sound/Select.vue b/src/pages/dashboard/sound/Select.vue
index f420fee..18bf6fd 100644
--- a/src/pages/dashboard/sound/Select.vue
+++ b/src/pages/dashboard/sound/Select.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { Info } from 'lucide-vue-next';
+import { h } from 'vue';
+
 import {
   Select,
   SelectContent,
@@ -36,8 +39,30 @@ const { run: selectSound } = useRequest(
     if (res.status === 'error') {
       toast({
         variant: 'destructive',
-        description:
-          'Your selected sound needs an update. Please re-download it.',
+        duration: 10000,
+        description: h('div', { class: 'flex items-center gap-2' }, [
+          h(
+            'span',
+            "Your selected sound needs an update. Please re-download it. If re-downloading the sound didn't resolve the problem, click on the info icon to the right for further instructions.",
+          ),
+          h(
+            'button',
+            {
+              class: 'p-1 rounded hover:bg-secondary',
+              onClick: () => {
+                toast({
+                  description: `To resolve this issue, you need to:
+1. Go to ~/Library/Application Support/xyz.waveapps.keyecho/sounds
+2. Create a folder named according to the sound name
+3. Copy sound.ogg and config.json into the newly created folder
+4. Go back to KeyEcho and it should work now.`,
+                  duration: 10000,
+                });
+              },
+            },
+            [h(Info, { class: 'w-4 h-4' })],
+          ),
+        ]),
       });
     } else {
       const soundItem = sounds.value?.find((s) => s.value === sound);