Minor renaming and comments

src/lib/components/FilterForm.svelte

@@ -39,19 +39,19 @@
             class="p-4 space-y-4"
         >
             <div class="flex flex-row flex-wrap gap-2">
-                {#each filterOptions as option}
+                {#each filterOptions as filterOption}
                     <!-- checkboxes -->
                     <TagWrapper
-                        tagColor={option.color}
+                        tagColor={filterOption.color}
                         extraClasses="input-wrapper-focus flex justify-between gap-2"
                     >
                         <Checkbox
-                            name={option.name}
-                            bind:checked={option.active}
+                            name={filterOption.name}
+                            bind:checked={filterOption.active}
                         >
                             <span
                                 class="text-zinc-700 dark:text-zinc-300 italic"
-                                >({option.count})</span
+                                >({filterOption.count})</span
                             >
                         </Checkbox>
                     </TagWrapper>

src/lib/utils.ts

@@ -3,7 +3,7 @@ import type { YoutubeChannel } from "./interfaces";
 /**
  * format subcount for user display
  * @param number
- * @returns
+ * @returns number as string
  */
 export const semanticNumber = (number: number): string => {
   // number less than 1000

src/routes/resources/+page.svelte

@@ -42,7 +42,7 @@
     );
 
     // ! Need to refactor later to make more readable
-    // For Intersection filterTags.size
+    // For intersection, minCommonTags = filterTags.size
     // For union, minCommonTags = 1
     let minCommonTags = filterLogic === "and" ? filterTags.size : 1;