ui fixes

src/lib/components/OptionsNetFlow.svelte

@@ -113,7 +113,7 @@
     <div class="flex flex-row items-center">
       <label
         for="optionsNetFlowInfo"
-        class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold"
+        class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
       >
         Options Net Flow
       </label>

src/lib/components/Searchbar.svelte

@@ -10,7 +10,8 @@
   let dataLoaded = false; // Flag to track data loading
 
   let assetType = "";
-
+  let focusedSuggestion = "";
+  let arrowMovement = false;
   let showSuggestions = false;
   let notFoundTicker = false;
   let searchQuery = "";
@@ -164,14 +165,13 @@
 
   const onKeyPress = (e) => {
     if (e?.charCode === 13) {
-      focusedSuggestion = "";
       const assetActions = {
         ETF: () => goto(`/etf/${searchQuery}`),
         Stock: () => goto(`/stocks/${searchQuery}`),
         Crypto: () => goto(`/crypto/${searchQuery}`),
       };
-
+      console.log(arrowMovement);
-      if (searchResults?.length > 0) {
+      if (!arrowMovement && searchResults?.length > 0) {
         searchQuery = searchResults.at(0).symbol;
         assetType = searchResults.at(0).type;
       }
@@ -182,61 +182,42 @@
       // Trigger search bar action
       searchBarTicker(searchQuery);
     }
+
+    console.log(focusedSuggestion);
   };
 
-  let focusedSuggestion = null;
-
   function handleKeyDown(event) {
-    const newList = searchHistory?.length > 0 ? searchHistory : popularList;
+    if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
 
-    if (event.key === "ArrowDown" && showSuggestions) {
-      // Move down in the suggestions
     event.preventDefault(); // Prevent scrolling
-      const currentIndex = searchResults?.findIndex(
-        (item) => item?.symbol === searchQuery,
-      );
-      if (currentIndex < searchResults?.length - 1) {
-        searchQuery = searchResults[currentIndex + 1]?.symbol;
-        assetType = searchResults[currentIndex + 1]?.type;
-        focusedSuggestion = searchQuery; // Update the focused suggestion
-      }
-    } else if (event.key === "ArrowUp" && showSuggestions) {
-      // Move up in the suggestions
-      event.preventDefault(); // Prevent scrolling
-      const currentIndex = searchResults?.findIndex(
-        (item) => item?.symbol === searchQuery,
-      );
-      if (currentIndex > 0) {
-        searchQuery = searchResults[currentIndex - 1]?.symbol;
-        assetType = searchResults[currentIndex - 1]?.type;
-        focusedSuggestion = searchQuery; // Update the focused suggestion
-      }
-    } else if (event.key === "ArrowDown" && !showSuggestions) {
-      // Move down in the suggestions
-      event.preventDefault(); // Prevent scrolling
-      const currentIndex = newList?.findIndex(
-        (item) => item?.symbol === searchQuery,
-      );
-      if (currentIndex < newList?.length - 1) {
-        searchQuery = newList[currentIndex + 1]?.symbol;
-        assetType = newList[currentIndex + 1]?.type;
-        focusedSuggestion = searchQuery; // Update the focused suggestion
-      }
-    } else if (event.key === "ArrowUp" && !showSuggestions) {
-      // Move up in the suggestions
-      event.preventDefault(); // Prevent scrolling
-      const currentIndex = newList?.findIndex(
-        (item) => item?.symbol === searchQuery,
-      );
-      if (currentIndex > 0) {
-        searchQuery = newList[currentIndex - 1]?.symbol;
-        assetType = newList[currentIndex - 1]?.type;
-        focusedSuggestion = searchQuery; // Update the focused suggestion
-      }
-    }
-  }
 
-  const handleControlF = async (event) => {
+    const list = showSuggestions
+      ? searchResults
+      : searchHistory?.length > 0
+        ? searchHistory
+        : popularList;
+    if (!list?.length) return;
+
+    const currentIndex = list.findIndex((item) => item?.symbol === searchQuery);
+    const isMovingDown = event.key === "ArrowDown";
+
+    // Check if movement is within bounds
+    const isValidMove = isMovingDown
+      ? currentIndex < list.length - 1
+      : currentIndex > 0;
+
+    if (isValidMove) {
+      arrowMovement = true;
+      const newIndex = currentIndex + (isMovingDown ? 1 : -1);
+      const selectedItem = list[newIndex];
+
+      // Update all related states at once
+      searchQuery = selectedItem?.symbol;
+      assetType = selectedItem?.type;
+      focusedSuggestion = selectedItem?.symbol;
+    }
+  }
+  const handleControlD = async (event) => {
     if (event.ctrlKey && event.key === "k") {
       // Ctrl+F is pressed, open the modal
       const keyboardSearch = document.getElementById("searchBarModal");
@@ -274,10 +255,10 @@
       console.log(e);
     }
 
-    window.addEventListener("keydown", handleControlF);
+    window.addEventListener("keydown", handleControlD);
     window.addEventListener("keydown", handleEscape);
     return () => {
-      window.removeEventListener("keydown", handleControlF);
+      window.removeEventListener("keydown", handleControlD);
       window.removeEventListener("keydown", handleEscape);
     };
   });

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

@@ -89,7 +89,7 @@
 
     // Reset to original data when 'none' and stop further sorting
     if (sortOrder === "none") {
-      stockList = [...originalData]; // Reset to original data (spread to avoid mutation)
+      stockList = [...originalData]?.slice(0, 50); // Reset to original data (spread to avoid mutation)
       return;
     }
 
@@ -124,7 +124,7 @@
     };
 
     // Sort using the generic comparison function
-    stockList = [...originalData].sort(compareValues);
+    stockList = [...originalData].sort(compareValues)?.slice(0, 50);
   };
   $: charNumber = $screenWidth < 640 ? 20 : 25;
 </script>

src/routes/stocks/[tickerID]/financials/+page.svelte

@@ -374,7 +374,7 @@
         <main class="w-full">
           <div class="sm:p-7 m-auto mt-2 sm:mt-0">
             <div class="mb-3">
-              <h1 class="text-xl sm:text-2xl text-gray-200 font-bold">
+              <h1 class="text-xl sm:text-2xl text-white font-bold">
                 {#if $coolMode}
                   {statementConfig?.find(
                     (item) => item?.propertyName === displayStatement,

src/routes/stocks/[tickerID]/financials/balance-sheet/+page.svelte

@@ -459,7 +459,7 @@
       <main class="w-full">
         <div class="sm:p-7 m-auto mt-2 sm:mt-0">
           <div class="mb-3">
-            <h1 class="text-xl sm:text-2xl text-gray-200 font-bold">
+            <h1 class="text-xl sm:text-2xl text-white font-bold">
               {#if $coolMode}
                 {statementConfig?.find(
                   (item) => item?.propertyName === displayStatement,

src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte

@@ -404,7 +404,7 @@
       <main class="w-full">
         <div class="sm:p-7 m-auto mt-2 sm:mt-0 w-full">
           <div class="mb-3">
-            <h1 class="text-xl sm:text-2xl text-gray-200 font-bold">
+            <h1 class="text-xl sm:text-2xl text-white font-bold">
               {#if $coolMode}
                 {statementConfig?.find(
                   (item) => item?.propertyName === displayStatement,

src/routes/stocks/[tickerID]/financials/ratios/+page.svelte

@@ -368,7 +368,7 @@
       <main class="w-full">
         <div class="sm:p-7 m-auto mt-2 sm:mt-0 w-full">
           <div class="mb-3">
-            <h1 class="text-xl sm:text-2xl text-gray-200 font-bold">
+            <h1 class="text-xl sm:text-2xl text-white font-bold">
               {#if $coolMode}
                 {statementConfig?.find(
                   (item) => item?.propertyName === displayStatement,

src/routes/stocks/[tickerID]/forecast/analyst/+page.svelte

@@ -147,7 +147,7 @@
           <div
             class="mb-5 flex flex-col justify-between gap-y-2.5 sm:mb-2 sm:flex-row sm:items-end"
           >
-            <h1 class="mb-px text-xl font-bold bp:text-2xl sm:pl-1">
+            <h1 class="mb-px text-xl font-bold sm:text-2xl sm:pl-1">
               {$displayCompanyName} Analyst Ratings
             </h1>
             <div>

src/routes/stocks/[tickerID]/statistics/employees/+page.svelte

@@ -363,7 +363,7 @@
     >
       <div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
         <div class="mb-6">
-          <h2 class="text-xl sm:text-2xl text-gray-200 font-bold mb-4">
+          <h2 class="text-xl sm:text-2xl text-white font-bold mb-4">
             {$stockTicker} Employees
           </h2>
 

src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte

@@ -396,7 +396,7 @@
         <main class="w-full">
           <div class="sm:p-7 m-auto mt-2 sm:mt-0">
             <div class="mb-3">
-              <h1 class="text-xl sm:text-2xl text-gray-200 font-bold">
+              <h1 class="text-xl sm:text-2xl text-white font-bold">
                 Market Cap
               </h1>
             </div>