bugfixing

src/lib/components/Feedback.svelte

@@ -117,7 +117,7 @@
 <!--Start Create Watchlist Modal-->
 <input type="checkbox" id="feedbackInfo" class="modal-toggle" />
 
-<dialog id="feedbackInfo" class="modal overflow-hidden p-2 sm:p-0">
+<dialog id="feedbackInfo" class="modal overflow-hidden p-3 sm:p-0">
   <label
     for="feedbackInfo"
     class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.8]"
@@ -128,16 +128,30 @@
       <h1 class="text-white text-xl sm:text-2xl font-bold">
         Your Feedback matters!
       </h1>
+      <label
+        for="feedbackInfo"
+        class="inline-block cursor-pointer absolute right-3 top-3 text-[1.3rem] sm:text-[1.8rem] text-white"
+      >
+        <svg
+          class="w-6 h-6 sm:w-8 sm:h-8"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          ><path
+            fill="white"
+            d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"
+          /></svg
+        >
+      </label>
     </div>
 
     <div class="p-2">
       <div
-        class="bg-secondary w-full min-w-24 sm:w-full relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
+        class="bg-secondary w-full min-w-20 sm:w-full relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
       >
         {#each tabs as item, i}
           <button
             on:click={() => handleMode(i)}
-            class="group relative z-[1] rounded-full w-1/3 min-w-24 px-5 py-1 {activeIdx ===
+            class="group relative z-[1] rounded-full w-1/3 min-w-20 py-1 {activeIdx ===
             i
               ? 'z-0'
               : ''} "
@@ -157,7 +171,7 @@
       </div>
     </div>
 
-    <div class="p-2 mt-5 w-full h-[200px] max-h-[1000px]">
+    <div class="p-2 w-full h-[200px] max-h-[1000px]">
       <textarea
         class="max-h-[1000px] h-[200px] textarea textarea-bordered placeholder-gray-300 w-full bg-primary ring-1 text-white border border-gray-600"
         placeholder="Your feedback..."

src/lib/notifications.ts

@@ -0,0 +1,30 @@
+
+export async function requestNotificationPermission() {
+  // Check if the browser supports notifications
+  if (!('Notification' in window)) {
+    console.warn('This browser does not support desktop notification');
+    return false;
+  }
+  // Check the current permission status
+  if (Notification.permission === 'granted') {
+    return true;
+  }
+  // Request permission
+  try {
+    const permission = await Notification.requestPermission();
+    return permission === 'granted';
+  } catch (error) {
+    console.error('Error requesting notification permission:', error);
+    return false;
+  }
+}
+
+export function sendNotification(title: string, options?: NotificationOptions & { iconSize?: number }) {
+  // Only send if permission is granted
+  if (Notification.permission === 'granted') {
+    new Notification(title, {
+      icon: "/pwa-192x192.png", // Use the imported image directly
+      ...options
+    });
+  }
+}

src/routes/+layout.svelte

@@ -54,6 +54,11 @@
   import Gem from "lucide-svelte/icons/gem";
   import stocknear_logo from "$lib/images/stocknear_logo.png";
 
+  import {
+    requestNotificationPermission,
+    sendNotification,
+  } from "$lib/notifications";
+
   export let data;
 
   let hideHeader = false;
@@ -91,17 +96,18 @@
     $numberOfUnreadNotification = output?.numberOfUnreadNotification?.length;
     //pushNotification()
   };
-  /*
-  async function pushNotification() {
-    Notification?.requestPermission()?.then((perm) => {
-      if (perm === "granted") {
-        new Notification("Stocknear", {
-          body: "this is more text",
-        });
-      }
-    });
+
+  // Send notification and handle click redirection
+  async function handleNotificationClick() {
+    const permissionGranted = await requestNotificationPermission();
+
+    if (permissionGranted) {
+      sendNotification("Stocknear", {
+        body: "This is a detailed notification message",
+        iconSize: 12, // Smaller logo size
+      });
+    }
   }
-    */
 
   //Check Service Worker (SW)
   async function detectSWUpdate() {
@@ -114,7 +120,7 @@
         newSW?.addEventListener("statechange", () => {
           if (newSW.state === "installed") {
             const message =
-              "🚀 A fresh update is ready! Reload now to enjoy the latest features?";
+              "🚀 A fresh update is ready! Reload now to enjoy the latest features";
 
             if (confirm(message)) {
               newSW.postMessage({ type: "SKIP_WAITING" });
@@ -164,19 +170,15 @@
     typeof data?.cookieConsent !== "undefined" ? false : true;
 
   onMount(async () => {
-    //await fallbackWorker();
-    await Promise.all([checkMarketHour(), loadWorker(), detectSWUpdate()]);
-    //await pushNotification()
+    await Promise.all([checkMarketHour(), loadWorker()]);
 
     if ($showCookieConsent === true) {
       Cookie = (await import("$lib/components/Cookie.svelte")).default;
     }
 
-    /*
     if (window?.innerWidth <= 768) {
-      detectSWUpdate();
+      await detectSWUpdate();
     }
-      */
 
     //Clear all the cache every 20 min
     const interval = setInterval(
@@ -1218,6 +1220,11 @@
           </div>
           <div class="w-full 3xl:w-5/6">
             <main class="w-full overflow-y-auto bg-[#09090B] sm:p-4">
+              <!--
+              <button on:click={handleNotificationClick}>
+                Send Notification
+              </button>
+              -->
               <slot />
               <Toaster class="bg-[#1A1A27] text-white text-medium" />
               {#if Cookie && $showCookieConsent === true}

src/routes/watchlist/stocks/+page.server.ts

@@ -11,11 +11,15 @@ export const load = async ({ locals }) => {
       });
 
       return output;
+
+
     } catch (e) {
+      console.log(e)
       return [];
     }
   };
 
+
   // Make sure to return a promise
   return {
     //getMiniPlotsIndex: await getMiniPlotsIndex(),

src/routes/watchlist/stocks/+page.svelte

@@ -221,6 +221,7 @@
   }
 
   async function getWatchlistData() {
+    console.log(displayWatchList);
     const postData = {
       watchListId: displayWatchList?.id,
       ruleOfList: ruleOfList?.map((item) => item?.rule),
@@ -500,7 +501,7 @@
     });
 
     // Refresh the displayWatchList with the updated watchlist
-    displayWatchList = allList.find(
+    displayWatchList = allList?.find(
       (item) => item?.id === displayWatchList?.id,
     );
 
@@ -589,7 +590,6 @@
     try {
       const savedRules = localStorage?.getItem("watchlist-ruleOfList");
       const savedLastWatchlistId = localStorage?.getItem("last-watchlist-id");
-
       if (savedRules) {
         const parsedRules = JSON.parse(savedRules);
 
@@ -626,17 +626,20 @@
       checkedItems = new Set(ruleOfList.map((item) => item.name));
       allRows = sortIndicatorCheckMarks(allRows);
 
-      if (savedLastWatchlistId) {
-        displayWatchList = allList
-          ?.filter((item) => item?.id === JSON.parse(savedLastWatchlistId))
-          ?.at(0);
-      } else {
-        // Display the first watchlist if available
-        if (allList?.length !== 0) {
-          displayWatchList = allList?.at(0);
-        } else {
-          displayWatchList = "";
-        }
+      if (
+        typeof savedLastWatchlistId !== "undefined" &&
+        savedLastWatchlistId?.length > 0
+      ) {
+        displayWatchList = allList?.find(
+          (item) => item?.id === JSON?.parse(savedLastWatchlistId),
+        );
+      }
+
+      // If no valid watchlist found, default to the first element of allList
+      if (!displayWatchList && allList?.length > 0) {
+        displayWatchList = allList?.at(0);
+      } else if (!displayWatchList) {
+        displayWatchList = {};
       }
 
       await getWatchlistData();