refactor modal of screener

src/lib/components/shadcn/progress/progress.svelte

@@ -1,21 +1,24 @@
 <script lang="ts">
-	import { Progress as ProgressPrimitive } from "bits-ui";
+  import { Progress as ProgressPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
+  import { cn } from "$lib/utils";
 
-	type $$Props = ProgressPrimitive.Props;
+  type $$Props = ProgressPrimitive.Props;
 
-	let className: $$Props["class"] = undefined;
+  let className: $$Props["class"] = undefined;
-	export let max: $$Props["max"] = 100;
+  export let max: $$Props["max"] = 100;
-	export let value: $$Props["value"] = undefined;
+  export let value: $$Props["value"] = undefined;
-	export { className as class };
+  export { className as class };
 </script>
 
 <ProgressPrimitive.Root
-	class={cn("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className)}
+  class={cn(
-	{...$$restProps}
+    "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
+    className,
+  )}
+  {...$$restProps}
 >
-	<div
+  <div
-		class="h-full w-full flex-1 bg-primary transition-all"
+    class="h-full w-full flex-1 transition-all"
-		style={`transform: translateX(-${100 - (100 * (value ?? 0)) / (max ?? 1)}%)`}
+    style={`transform: translateX(-${100 - (100 * (value ?? 0)) / (max ?? 1)}%)`}
-	></div>
+  ></div>
-</ProgressPrimitive.Root>
+</ProgressPrimitive.Root>

src/lib/components/shadcn/sheet/sheet-content.svelte

@@ -1,46 +1,48 @@
 <script lang="ts">
-	import { Dialog as SheetPrimitive } from "bits-ui";
+  import { Dialog as SheetPrimitive } from "bits-ui";
-	import X from "lucide-svelte/icons/x";
+  import X from "lucide-svelte/icons/x";
-	import { fly } from "svelte/transition";
+  import { fly } from "svelte/transition";
-	import {
+  import {
-		SheetOverlay,
+    SheetOverlay,
-		SheetPortal,
+    SheetPortal,
-		type Side,
+    type Side,
-		sheetTransitions,
+    sheetTransitions,
-		sheetVariants,
+    sheetVariants,
-	} from "./index.ts";
+  } from "./index.ts";
-	import { cn } from "$lib/utils.js";
+  import { cn } from "$lib/utils.js";
 
-	type $$Props = SheetPrimitive.ContentProps & {
+  type $$Props = SheetPrimitive.ContentProps & {
-		side?: Side;
+    side?: Side;
-	};
+  };
 
-	let className: $$Props["class"] = undefined;
+  let className: $$Props["class"] = undefined;
-	export let side: $$Props["side"] = "right";
+  export let side: $$Props["side"] = "right";
-	export { className as class };
+  export { className as class };
-	export let inTransition: $$Props["inTransition"] = fly;
+  export let inTransition: $$Props["inTransition"] = fly;
-	export let inTransitionConfig: $$Props["inTransitionConfig"] =
+  export let inTransitionConfig: $$Props["inTransitionConfig"] =
-		sheetTransitions[side ?? "right"].in;
+    sheetTransitions[side ?? "right"].in;
-	export let outTransition: $$Props["outTransition"] = fly;
+  export let outTransition: $$Props["outTransition"] = fly;
-	export let outTransitionConfig: $$Props["outTransitionConfig"] =
+  export let outTransitionConfig: $$Props["outTransitionConfig"] =
-		sheetTransitions[side ?? "right"].out;
+    sheetTransitions[side ?? "right"].out;
 </script>
 
 <SheetPortal>
-	<SheetOverlay />
+  <SheetOverlay />
-	<SheetPrimitive.Content
+  <SheetPrimitive.Content
-		{inTransition}
+    {inTransition}
-		{inTransitionConfig}
+    {inTransitionConfig}
-		{outTransition}
+    {outTransition}
-		{outTransitionConfig}
+    {outTransitionConfig}
-		class={cn(sheetVariants({ side }), className)}
+    class={cn(sheetVariants({ side }), className)}
-		{...$$restProps}
+    {...$$restProps}
-	>
+  >
-		<slot />
+    <slot />
-		<SheetPrimitive.Close id="close-sheet" class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
+    <SheetPrimitive.Close
-		>
+      id="close-sheet"
-			<X class="h-4 w-4" />
+      class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none "
-			<span class="sr-only">Close</span>
+    >
-		</SheetPrimitive.Close>
+      <X class="h-4 w-4" />
-	</SheetPrimitive.Content>
+      <span class="sr-only">Close</span>
-</SheetPortal>
+    </SheetPrimitive.Close>
+  </SheetPrimitive.Content>
+</SheetPortal>

src/lib/components/shadcn/table/table-footer.svelte

@@ -1,13 +1,16 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
+  import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils";
+  import { cn } from "$lib/utils";
 
-	type $$Props = HTMLAttributes<HTMLTableSectionElement>;
+  type $$Props = HTMLAttributes<HTMLTableSectionElement>;
 
-	let className: $$Props["class"] = undefined;
+  let className: $$Props["class"] = undefined;
-	export { className as class };
+  export { className as class };
 </script>
 
-<tfoot class={cn("bg-primary font-medium text-primary-foreground", className)} {...$$restProps}>
+<tfoot
-	<slot />
+  class={cn("font-medium text-primary-foreground", className)}
-</tfoot>
+  {...$$restProps}
+>
+  <slot />
+</tfoot>

src/routes/stock-screener/+page.svelte

@@ -43,7 +43,7 @@
   let strategyList = data?.getAllStrategies;
   let selectedStrategy = strategyList?.at(0)?.id ?? "";
   let ruleOfList = strategyList?.at(0)?.rules ?? [];
-
+  let groupedRules = {};
   let displayRules = [];
   let selectedPopularStrategy = "";
   let displayTableTab = "general";
@@ -69,6 +69,7 @@
 
       defaultCondition: "over",
       defaultValue: 0,
+      category: "Price & Volume",
     },
     volume: {
       label: "Volume",
@@ -76,6 +77,7 @@
 
       defaultCondition: "over",
       defaultValue: 0,
+      category: "Price & Volume",
     },
     rsi: {
       label: "Relative Strength Index",
@@ -1259,13 +1261,6 @@
 
   let filteredRows;
   let searchTerm = "";
-  /*
-      let taRows = allRows?.filter(row => row.category === 'ta');
-      let fundRows = allRows?.filter(row => row.category === 'fund');
-    
-      taRows?.sort((a, b) => a.label.localeCompare(b.label));
-      fundRows?.sort((a, b) => a.label.localeCompare(b.label));
-      */
 
   let ruleName = "";
 
@@ -1687,6 +1682,15 @@ const handleKeyDown = (event) => {
         isLoaded = true;
       }
     });
+
+    groupedRules = allRows.reduce((acc, row) => {
+      const category = row.category || "Others"; // Fallback to "Others" if no category is defined
+      if (!acc[category]) {
+        acc[category] = [];
+      }
+      acc[category].push(row);
+      return acc;
+    }, {});
   });
 
   onDestroy(() => {
@@ -3130,52 +3134,52 @@ const handleKeyDown = (event) => {
 <!--Start Choose Rule Modal-->
 <input type="checkbox" id="ruleModal" class="modal-toggle" />
 
-<dialog id="ruleModal" class="modal modal-bottom sm:modal-middle">
+<dialog id="ruleModal" class="modal p-2 sm:p-0">
   <label
     id="ruleModal"
     for="ruleModal"
     on:click={() => (searchTerm = "")}
-    class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.5]"
+    class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.8]"
   ></label>
 
   <div
-    class="modal-box w-full bg-[#141417] border border-gray-800 h-[800px] overflow-hidden"
+    class="modal-box relative z-50 mx-2 max-h-[80vh] rounded bg-default opacity-100 border border-gray-600 bp:mx-3 sm:mx-4 w-full max-w-3xl"
   >
-    <div class="flex flex-col w-full mt-10 sm:mt-0">
+    <div class="flex flex-col w-full">
-      <div class="text-white text-xl sm:text-3xl font-semibold mb-5">
+      <div class="flex flex-row items-center justify-between mb-2">
-        Add Filters
+        <h2 class="text-white text-[1rem] sm:text-xl font-semibold">
-      </div>
+          Select screener filters ({allRows?.length} total)
-
+        </h2>
-      <label
+        <label
-        for="ruleModal"
+          for="ruleModal"
-        class="cursor-pointer absolute right-5 top-5 bg-[#141417] text-[1.8rem] text-white"
+          class="cursor-pointer absolute right-3 top-3 text-[1rem] sm:text-[1.8rem] text-white"
-      >
-        <svg
-          class="w-8 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>
+          <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>
 
       <!--Start Search bar-->
       <form
-        class="w-11/12 h-8 mb-8"
+        class="w-full h-8"
         on:keydown={(e) => (e?.key === "Enter" ? e.preventDefault() : "")}
       >
-        <label
+        <label for="search" class="text-sm font-medium text-gray-200 sr-only"
-          for="search"
+          >Search</label
-          class="mb-2 text-sm font-medium text-gray-200 sr-only">Search</label
         >
-        <div class="relative">
+        <div class="relative w-full max-w-sm">
           <div
             class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none"
           >
             <svg
-              class="w-4 h-4 text-gray-200 dark:text-gray-400"
+              class="w-4 h-4 text-gray-200"
               aria-hidden="true"
               xmlns="http://www.w3.org/2000/svg"
               fill="none"
@@ -3194,72 +3198,38 @@ const handleKeyDown = (event) => {
             autocomplete="off"
             type="search"
             id="search"
-            class="placeholder-gray-300 block w-full p-2 ps-10 text-sm text-gray-200 border border-gray-300 rounded-md bg-[#404040] border border-blue-500"
+            class="placeholder-gray-300 block w-full p-2 ps-10 text-sm text-gray-200 border border-gray-600 rounded-md bg-secondary border border-blue-500"
-            placeholder="Search {allRows?.length} filters..."
+            placeholder="Search"
             bind:value={searchTerm}
           />
         </div>
       </form>
       <!-- End Search bar-->
-
+      <div class="border-t border-gray-600 mt-6 mb-3" />
-      <div
+      <div class="text-white">
-        class="text-white text-sm bg-[#141417] overflow-y-scroll scroller pt-3 rounded-md max-h-[500px] sm:max-h-[420px] md:max-h-[540px] lg:max-h-[600px]"
+        {#each Object.entries(groupedRules) as [category, rules]}
-      >
+          <h4 class="mb-0.5 font-semibold text-lg">{category}</h4>
-        <div class="text-white relative">
+          <div class="flex flex-wrap">
-          {#if searchTerm?.length !== 0 && filteredRows?.length === 0}
+            {#each rules as row}
-            <span
+              <div
-              class="text-lg text-white font-medium flex justify-center items-center m-auto"
+                class="flex w-full items-center space-x-1.5 py-1.5 md:w-1/2 lg:w-1/3 lg:py-1"
-            >
+              >
-              Nothing Found
+                <input
-            </span>
+                  on:click={() => changeRule(row?.rule)}
-          {:else}
+                  id={row?.rule}
-            <table class="table table-sm table-compact">
+                  type="checkbox"
-              <!-- head -->
+                  checked={ruleOfList?.find((rule) => rule?.name === row?.rule)}
-              <tbody>
+                  class="h-[18px] w-[18px] rounded-sm ring-offset-0 lg:h-4 lg:w-4"
-                {#each searchTerm?.length !== 0 ? filteredRows : allRows as row, index}
+                />
-                  <tr
+                <div class="-mt-0.5">
-                    on:click={() => changeRule(row?.rule)}
+                  <label for={row?.rule} class="cursor-pointer text-[1rem]"
-                    class="sm:hover:bg-[#333333] cursor-pointer"
+                    >{row?.label}</label
                   >
-                    <td class="border-b border-[#262626]">{index + 1}</td>
+                </div>
-                    <td class="text-start border-b border-[#262626]">
+              </div>
-                      {#if ruleOfList.find((rule) => rule?.name === row?.rule)}
+            {/each}
-                        <svg
+          </div>
-                          class="flex-shrink-0 w-5 h-5 sm:w-6 sm:h-6 text-green-400 inline-block"
+        {/each}
-                          fill="currentColor"
-                          viewBox="0 0 20 20"
-                          xmlns="http://www.w3.org/2000/svg"
-                          ><path
-                            fill-rule="evenodd"
-                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                            clip-rule="evenodd"
-                          ></path></svg
-                        >
-                      {/if}
-                    </td>
-                    <td class="text-start border-b border-[#262626]">
-                      {row?.label}
-                      {#if row?.rule === "score"}
-                        <svg
-                          class="{data?.user?.tier === 'Pro'
-                            ? 'hidden'
-                            : ''} ml-1 -mt-0.5 w-3.5 h-3.5 inline-block"
-                          xmlns="http://www.w3.org/2000/svg"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            fill="#A3A3A3"
-                            d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
-                          />
-                        </svg>
-                      {/if}
-                    </td>
-                  </tr>
-                {/each}
-              </tbody>
-            </table>
-          {/if}
-        </div>
       </div>
     </div>
   </div>

tailwind.config.cjs

@@ -25,14 +25,8 @@ module.exports = {
         ring: "hsl(var(--ring) / <alpha-value>)",
         background: "hsl(var(--background) / <alpha-value>)",
         foreground: "hsl(var(--foreground) / <alpha-value>)",
-        primary: {
+        primary: "#1E222D",
-          DEFAULT: "hsl(var(--primary) / <alpha-value>)",
+        secondary: "#2A2E39",
-          foreground: "hsl(var(--primary-foreground) / <alpha-value>)",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
-          foreground: "hsl(var(--secondary-foreground) / <alpha-value>)",
-        },
         destructive: {
           DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
           foreground: "hsl(var(--destructive-foreground) / <alpha-value>)",