ui fixes

src/lib/components/Map.svelte

@@ -12,6 +12,7 @@
   import Feature from "ol/Feature";
   import Point from "ol/geom/Point";
   import { Style, Circle, Fill } from "ol/style";
+  import { defaults as defaultInteractions } from "ol/interaction";
 
   // White House coordinates
   const LON = -77.0365427;
@@ -89,6 +90,10 @@
         maxZoom: 18,
       }),
       controls: [],
+      interactions: defaultInteractions({
+        mouseWheelZoom: false, // Disable scroll zoom
+        pinchZoom: false, // Disable pinch-to-zoom
+      }),
     });
 
     animate();

src/routes/newsletter/+page.svelte

@@ -7,7 +7,7 @@
 
 <SEO
   title="Market Newsletter: Stay Informed in Just 2 Minutes Per Day"
-  description="Stay ahead in the market with our free newsletter! Get the latest updates, trends, and insights delivered straight to your inbox."
+  description="Stay ahead in the market with our pro newsletter! Get the latest updates, trends, and insights delivered straight to your inbox."
 />
 
 <div class="w-full max-w-7xl min-h-screen text-white m-auto mt-5">
@@ -20,7 +20,7 @@
         Stay informed in just 2 minutes per day
       </h1>
       <p>
-        Market Bullets is a free newsletter that makes it super easy to keep up
+        Market Bullets is a Pro Newsletter that makes it super easy to keep up
         with financial markets.
       </p>
       <p class="mt-4">

src/routes/potus-tracker/+page.svelte

@@ -4,6 +4,7 @@
   import Infobox from "$lib/components/Infobox.svelte";
   import { monthNames } from "$lib/utils";
   import { screenWidth } from "$lib/store";
+  import ArrowLogo from "lucide-svelte/icons/move-up-right";
 
   import { Chart } from "svelte-echarts";
 
@@ -42,6 +43,18 @@
     return acc;
   }, {});
 
+  let groupedOrders = executiveOrders.reduce((acc, item) => {
+    const dateKey = new Intl.DateTimeFormat("en-US", {
+      day: "2-digit",
+      month: "short",
+      year: "numeric",
+    }).format(new Date(item.date));
+
+    if (!acc[dateKey]) acc[dateKey] = [];
+    acc[dateKey].push(item);
+    return acc;
+  }, {});
+
   let modalTitle = "n/a";
   let modalDescription = "n/a";
   let modalLink = "#";
@@ -55,7 +68,17 @@
     },
   ];
 
+  const subTabs = [
+    {
+      title: "Presidential Schedule",
+    },
+    {
+      title: "Executive Orders",
+    },
+  ];
+
   let activeIdx = 0;
+  let subActiveIdx = 0;
 
   function plotData() {
     const history = data?.getEggPrice?.history || [];
@@ -167,7 +190,7 @@
           lineStyle: { width: 2 },
           data: yoyChangeList,
           itemStyle: {
-            color: "#9B5DC4",
+            color: "#2b7fff",
           },
           smooth: true,
           showSymbol: false,
@@ -215,21 +238,30 @@
                 class="flex flex-row items-center w-full text-[1rem] text-white"
               >
                 {#each tabs as item, i}
-                  <a
+                  <button
-                    href={item?.path}
                     on:click={() => (activeIdx = i)}
                     class="p-2 px-5 cursor-pointer {activeIdx === i
                       ? 'text-white bg-primary sm:hover:bg-opacity-[0.95] font-semibold'
                       : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
                   >
                     {item.title}
-                  </a>
+                  </button>
                 {/each}
               </ul>
             </nav>
 
             {#if activeIdx === 0}
-              <h2 class="text-white text-lg font-semibold mb-2 mt-4">
+              <div class="mt-5 mb-5">
+                <Infobox
+                  text={`Since the inauguration of Donald J. Trump on January 20, 2025, the 
+  S&P500 has ${data?.getData?.returnSince >= 0 ? "grown" : "declined"} by <span class="${data?.getData?.returnSince >= 0 ? "text-[#00FC50] before:content-['+']" : "text-[#FF2F1F]"}">
+  ${data?.getData?.returnSince ?? "n/a"}%</span>.`}
+                />
+              </div>
+
+              <h2
+                class="text-white text-[1rem] sm:text-lg font-semibold mb-2 mt-4"
+              >
                 The US President is currently located in {data?.getData?.city ??
                   "n/a"}
               </h2>
@@ -241,7 +273,9 @@
                 Map data © OpenStreetMap
               </span>
             {:else}
-              <h2 class="text-white text-lg font-semibold mt-4">Egg Stats:</h2>
+              <h2 class="text-white text-lg font-semibold mt-4">
+                Quick Stats:
+              </h2>
 
               <div
                 class="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-6 gap-x-0 text-white mt-2 text-sm sm:text-[1rem] w-full"
@@ -263,35 +297,50 @@
                 </div>
               </div>
 
-              <div class="app w-full relative">
+              <div
+                class="app w-full relative border border-gray-800 rounded mt-5 mb-5 p-3"
+              >
                 <Chart {init} {options} class="chart" />
               </div>
 
-              <span class="text-sm">
+              <Infobox
-                The Federal Reserve Economic Data is collected monthly and
+                text="The historical egg prices are sourced from Federal Reserve Economic Data (FRED), which collects egg prices nationwide once a month and calculates the average."
-                updates egg prices across the United States.
+              />
-              </span>
             {/if}
 
-            <h3 class="text-white text-xl font-semibold mb-2 mt-10">
+            <nav
+              class=" border-b-[2px] overflow-x-scroll whitespace-nowrap mt-10 sm:mt-6"
+            >
+              <ul
+                class="flex flex-row items-center w-full text-[1rem] text-white"
+              >
+                {#each subTabs as item, i}
+                  <button
+                    on:click={() => (subActiveIdx = i)}
+                    class="p-2 px-5 cursor-pointer {subActiveIdx === i
+                      ? 'text-white bg-primary sm:hover:bg-opacity-[0.95] font-semibold'
+                      : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  >
+                    {item.title}
+                  </button>
+                {/each}
+              </ul>
+            </nav>
+
+            {#if subActiveIdx === 0}
+              <h3 class="text-white text-lg font-semibold mb-2 mt-6">
                 Official Presidential Schedule
               </h3>
 
-            <div class="sm-mt-5 mb-5">
-              <Infobox
-                text={`Since the inauguration of Donald J. Trump on January 20, 2025, the 
-  S&P500 has ${data?.getData?.returnSince >= 0 ? "grown" : "declined"} by <span class="${data?.getData?.returnSince >= 0 ? "text-[#00FC50] before:content-['+']" : "text-[#FF2F1F]"}">
-  ${data?.getData?.returnSince ?? "n/a"}%</span>.`}
-              />
-            </div>
-
               <div class="space-y-4">
                 {#each Object.entries(groupedByDate) as [date, items], indexA}
                   <div class="my-4">
                     <div
                       class="border-b border-gray-800 pb-2 w-full flex flex-row items-center justify-between"
                     >
-                    <span class="text-lg font-semibold text-white">
+                      <span
+                        class="text-[1rem] sm:text-lg font-semibold text-white"
+                      >
                         {date}</span
                       >
                       {#if items?.at(0)?.changesPercentage}
@@ -365,68 +414,142 @@
                   </div>
                 {/each}
               </div>
+            {:else}
+              <h3 class="text-white text-lg font-semibold mb-2 mt-6">
+                Latest Executive Orders analyzed by AI
+              </h3>
+              <div class="space-y-4">
+                {#each Object.entries(groupedOrders) as [date, items]}
+                  <div class="my-4">
+                    <div
+                      class="border-b border-gray-800 pb-2 flex flex-row items-center justify-between"
+                    >
+                      <span class="text-lg font-semibold text-white"
+                        >{date}</span
+                      >
+                    </div>
+                    <br />
+
+                    {#each items as item, index}
+                      <div class="flex flex-col items-start space-y-1 mb-6">
+                        <div class="flex flex-row items-center space-x-2">
+                          <div class="relative">
+                            <svg
+                              fill={index === 0 ? "#2E86DE" : "#808080"}
+                              class="w-5 h-5 relative z-10"
+                              viewBox="-51.2 -51.2 614.40 614.40"
+                              xmlns="http://www.w3.org/2000/svg"
+                              stroke={index === 0 ? "#2E86DE" : "#808080"}
+                              stroke-width="0.00512"
+                            >
+                              <g id="SVGRepo_iconCarrier">
+                                <path
+                                  d="M256,512C114.625,512,0,397.375,0,256S114.625,0,256,0,512,114.625,512,256,397.375,512,256,512Zm0-448C149.969,64,64,149.969,64,256s85.969,192,192,192,192-85.969,192-192S362.031,64,256,64Zm0,320A128,128,0,1,1,384,256,128.006,128.006,0,0,1,256,384Z"
+                                  fill-rule="evenodd"
+                                ></path>
+                              </g>
+                            </svg>
+
+                            {#if index === 0}
+                              <span
+                                class="absolute -inset-1 rounded-full animate-ping w-3 h-3 m-auto bg-blue-400/75"
+                              ></span>
+                            {/if}
                           </div>
 
-          <div class="order-4 flex-shrink-0 lg:float-right lg:w-[336px]">
+                          <span class="text-sm">
-            <h3 class="text-xl text-white font-semibold mb-3">
-              Executive Orders
-            </h3>
-            <div class="overflow-y-auto max-h-[1000px]">
-              {#each executiveOrders as item}
-                <div class="bg-gray-800/50 rounded-lg p-4 mb-4">
-                  <!-- Badge and Time -->
-                  <div class="flex justify-between items-center mb-4">
                             <span
                               class="{item?.sentiment === 'Bullish'
-                        ? 'bg-emerald-500'
+                                ? 'bg-emerald-500 text-white'
                                 : item?.sentiment === 'Bearish'
-                          ? 'bg-red-600'
+                                  ? 'bg-red-600 text-white'
-                          : 'bg-[#6c757d]'} text-white px-4 py-1 rounded text-sm font-medium"
+                                  : 'bg-white text-black'} py-1 rounded text-xs w-fit px-2 font-medium"
                             >
                               {item?.sentiment}
                             </span>
-                    <span class="text-gray-400 text-sm"
+                            -
-                      >{#if item?.date !== null}
+                            <span class="text-white font-bold"
-                        {new Date(item?.date).toLocaleDateString("en-US", {
+                              >{item.title}</span
-                          year: "numeric",
+                            >
-                          month: "short",
-                          day: "numeric",
-                        })}
-                      {:else}
-                        ""
-                      {/if}
                           </span>
                         </div>
 
-                  <!-- Title -->
+                        <span class="text-sm ml-7 pt-3">{item.description}</span
-                  <h2 class="text-[#E5E7EB] text-[1rem] font-semibold mb-3">
-                    {item?.title}
-                  </h2>
-
-                  <!-- Description -->
-                  <p class="text-gray-400 text-sm mb-4">
-                    {item?.description?.length > 150
-                      ? item?.description?.slice(0, 150) + "..."
-                      : item?.description}
-                  </p>
-
-                  <!-- Read More Button -->
-                  <div class="flex justify-end">
-                    <label
-                      on:click={() => {
-                        modalTitle = item?.title;
-                        modalDescription = item?.description;
-                        modalLink = item?.link;
-                      }}
-                      for="readMore"
-                      class="cursor-pointer bg-blue-500 sm:hover:bg-blue-600 ease-out transition duration-100 text-white px-3 py-1.5 rounded text-sm"
                         >
-                      Read More
+
-                    </label>
+                        <a
-                  </div>
+                          href={item?.link}
+                          rel="noopener noreferrer"
+                          target="_blank"
+                          class="ml-7 inline-block text-sm text-white hover:underline"
+                        >
+                          Source
+                        </a>
                       </div>
                     {/each}
                   </div>
+                {/each}
+              </div>
+            {/if}
+          </div>
+
+          <div class="order-4 flex-shrink-0 lg:float-right lg:w-[336px]">
+            <div
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
+            >
+              <a
+                href={`/newsletter`}
+                class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
+              >
+                <div class="w-full flex justify-between items-center p-3 mt-3">
+                  <h2 class="text-start text-xl font-semibold text-white ml-3">
+                    Market Newsletter
+                  </h2>
+                  <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
+                </div>
+                <span class="text-white p-3 ml-3 mr-3">
+                  Get a daily email with the top market news in bullet point
+                  format.
+                </span>
+              </a>
+            </div>
+
+            <div
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
+            >
+              <a
+                href={"/stock-screener"}
+                class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
+              >
+                <div class="w-full flex justify-between items-center p-3 mt-3">
+                  <h2 class="text-start text-xl font-semibold text-white ml-3">
+                    Stock Screener
+                  </h2>
+                  <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
+                </div>
+                <span class="text-white p-3 ml-3 mr-3">
+                  Build your Stock Screener to find profitable stocks.
+                </span>
+              </a>
+            </div>
+            <div
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
+            >
+              <a
+                href={"/watchlist/stocks"}
+                class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
+              >
+                <div class="w-full flex justify-between items-center p-3 mt-3">
+                  <h2 class="text-start text-xl font-semibold text-white ml-3">
+                    Watchlist
+                  </h2>
+                  <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
+                </div>
+                <span class="text-white p-3 ml-3 mr-3">
+                  Keep track of your favorite stocks in real-time.
+                </span>
+              </a>
+            </div>
           </div>
         </div>
       </div>
@@ -434,47 +557,6 @@
   </div>
 </section>
 
-<!-- Desktop modal using dialog component -->
-<input type="checkbox" id="readMore" class="modal-toggle" />
-
-<dialog id="readMore" class="modal p-3 sm:p-0">
-  <label
-    for="readMore"
-    class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.8]"
-  ></label>
-
-  <!-- Desktop modal content -->
-  <div
-    class="modal-box rounded-md border border-gray-600 w-full bg-secondary flex flex-col items-center"
-  >
-    <div class="mx-auto h-1.5 w-20 flex-shrink-0 rounded-full" />
-    <div class="text-white mb-5 text-start">
-      <h3 class="font-bold text-lg mb-3">{modalTitle}</h3>
-      <span class="text-white text-sm font-normal"
-        >{@html modalDescription}</span
-      >
-    </div>
-
-    <a
-      href={modalLink}
-      rel="noopener noreferrer"
-      target="_blank"
-      class="ml-auto mb-3 cursor-pointer bg-blue-500 sm:hover:bg-blue-600 ease-out transition duration-100 text-white px-3 py-1.5 rounded text-sm"
-    >
-      Read Source
-    </a>
-
-    <div class="sm:hidden border-t border-gray-600 mt-2 w-full">
-      <label
-        for="readMore"
-        class="mt-4 font-semibold text-white text-xl m-auto flex justify-center cursor-pointer"
-      >
-        Close
-      </label>
-    </div>
-  </div>
-</dialog>
-
 <style>
   .app {
     height: 500px;