add top analyst notification

src/lib/components/HoverStockChart.svelte

@@ -8,6 +8,7 @@
   import { afterUpdate } from "svelte";
   export let symbol;
   export let assetType = "stock";
+  export let link = null;
 
   let priceData = [];
   let changesPercentage = 0;
@@ -54,18 +55,19 @@
   function getHref(symbol: string) {
     let path = "";
     if (symbol?.length !== 0) {
-      if (["stocks", "stock"]?.includes(assetType?.toLowerCase())) {
+      if (["stocks", "stock"].includes(assetType?.toLowerCase())) {
-        path = `/stocks/${symbol}`;
+        path = `/stocks/${symbol}${link ? `/${link}` : ""}`;
       } else if (assetType?.toLowerCase() === "etf") {
-        path = `/etf/${symbol}`;
+        path = `/etf/${symbol}${link ? `/${link}` : ""}`;
-      } else if (["BTC", "USD"]?.includes(symbol)) {
+      } else if (["BTC", "USD"].includes(symbol)) {
         path = "";
       } else {
-        path = `/index/${symbol}`;
+        path = `/index/${symbol}${link ? `/${link}` : ""}`;
       }
     }
     return path;
   }
+
   $: topLineColor = changesPercentage >= 0 ? "#71CA96" : "#FF7070";
 
   let width = $screenWidth < 640 ? 80 : 150; //= ($screenWidth <= 1200 && $screenWidth > 900) ? 360 : ($screenWidth <= 900 && $screenWidth > 700) ? 260 : ($screenWidth <= 700 && $screenWidth >=600 ) ? 200 : ($screenWidth < 600 && $screenWidth >=500 ) ? 150 : 80;

src/routes/api/update-notification-channels/+server.ts

@@ -1,22 +1,27 @@
 import type { RequestHandler } from "./$types";
 
 export const POST: RequestHandler = async ({ request, locals }) => {
-  const data = await request.json();
   const { pb } = locals;
-  let output = 'failure';
-
 
   try {
-        await pb.collection("notificationChannels").update(data?.id, {
+    const payload = await request.json();
-          'earningsSurprise': data?.earningsSurprise,
+    const { id, ...updateData } = payload;
-          'wiim': data?.wiim,
+
-        })
+    if (!id) {
-        output = 'success';
+      return new Response(
-    }
+        JSON.stringify({ status: "failure", message: "Missing id" }),
-    catch(e) {
+        { status: 400 }
-        console.log(e)
+      );
-        output = 'failure';
     }
 
-  return new Response(JSON.stringify(output));
+    await pb.collection("notificationChannels").update(id, updateData);
+
+    return new Response(JSON.stringify({ status: "success" }), { status: 200 });
+  } catch (e: any) {
+    console.error(e);
+    return new Response(
+      JSON.stringify({ status: "failure", error: e.message }),
+      { status: 500 }
+    );
+  }
 };

src/routes/notifications/+page.svelte

@@ -187,6 +187,55 @@
                       </div>
                     </div>
                   </div>
+                {:else if item?.notifyType === "topAnalyst"}
+                  <div
+                    class=" pb-3 sm:p-3 mb-6 sm:mb-3 text-white w-full {!item?.readed
+                      ? 'bg-[#F9AB00] bg-opacity-[0.1]'
+                      : ''} "
+                  >
+                    <div class="flex flex-row items-center w-full">
+                      <!-- svelte-ignore a11y-label-has-associated-control -->
+                      <a class="avatar w-8 h-8 flex-shrink-0 mr-4">
+                        <img
+                          style="clip-path: circle(50%);"
+                          class="flex-shrink-0 w-8 h-8 rounded-full inline-block"
+                          src={`https://financialmodelingprep.com/image-stock/${item?.liveResults?.symbol}.png`}
+                          alt="Company Logo"
+                        />
+                      </a>
+
+                      <div class="text-white text-sm sm:text-[1rem]">
+                        <!-- svelte-ignore a11y-click-events-have-key-events -->
+                        <!-- svelte-ignore a11y-label-has-associated-control -->
+                        <div class="flex flex-col items-start">
+                          <div>
+                            <div class="flex flex-col items-start">
+                              <div class="text-md mt-0.5">
+                                <span class="font-semibold"
+                                  >New Top Analyst Rating for</span
+                                >
+                                <HoverStockChart
+                                  symbol={item?.liveResults?.symbol}
+                                  assetType={item?.liveResults?.assetType}
+                                  link="forecast/analyst"
+                                />
+                              </div>
+                              <div class="text-md mt-0.5">
+                                The rating company {item?.liveResults?.analyst} has
+                                issued a new rating of „{item?.liveResults
+                                  ?.rating_current}“ with an updated price
+                                target of ${item?.liveResults
+                                  ?.adjusted_pt_current}.
+                              </div>
+                            </div>
+                          </div>
+                          <span class="text-sm mt-1 text-[#A6ADBB0"
+                            >{formatDate(item?.created)}
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
                 {:else if item?.notifyType === "earningsSurprise"}
                   <div
                     class=" pb-3 sm:p-3 mb-6 sm:mb-3 text-white w-full {!item?.readed

src/routes/profile/+page.svelte

@@ -343,6 +343,35 @@
                   ></div>
                 </label>
               </div>
+              <div
+                class=" mt-2 flex w-full md:w-1/3 justify-between items-center"
+              >
+                <div class="flex flex-row items-center">
+                  <label
+                    for="topAnalystInfo"
+                    class=" cursor-pointer flex flex-row items-center text-white"
+                  >
+                    <h4>Top Analyst Rating</h4>
+                  </label>
+                  <InfoModal
+                    title={"Top Analysts"}
+                    content={" Filter for analysts rated 4+ stars focusing on their win rate and average return per rating. Analysts with 4+ stars typically exhibit both high accuracy and high return per rating."}
+                    id={"topAnalystInfo"}
+                  />
+                </div>
+                <label class="inline-flex cursor-pointer relative">
+                  <input
+                    on:click={() => toggleMode("topAnalyst")}
+                    type="checkbox"
+                    checked={mode["topAnalyst"]}
+                    value={mode["topAnalyst"]}
+                    class="sr-only peer"
+                  />
+                  <div
+                    class="w-10 h-5 bg-gray-600 rounded-full peer-checked:after:translate-x-4 peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[0.25rem] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-purple-500"
+                  ></div>
+                </label>
+              </div>
             </div>
 
             <h3 class="text-white text-xl font-semibold mb-2 mt-4">