Code cleanup, pin Discover text to the top, fix tag filter color

src/views/HomepageView.vue

@@ -15,8 +15,8 @@ export default {
   async setup() {
     let data = ref<CategoryPreviewInterface[]>()
     let status = ref<'ok' | 'error'>()
-    let followingStreaming = ref<string[]>()
-    let following = ref<string[]>()
+    let followingStreaming = ref<string[]>([])
+    let following = ref<string[]>([])
 
     return {
       data,
@@ -29,29 +29,21 @@ export default {
   methods: {
     filterSearches(toFilter: string) {
       const categories = this.$refs.categoryItem
-      const wantedTags: string[] = toFilter
+      const wantedTags = toFilter
         .toLowerCase()
         .split(',')
-        .filter((v) => v.toLowerCase())
+        .map(tag => tag.trim())
+        .filter(tag => tag);
 
-      for (let category of categories as any) {
+      for (let category of categories as HTMLElement[]) {
         let tagElements = category.getElementsByTagName('span')
-        let tags = []
+        const categoryTags = Array.from(tagElements, el => el.innerText.toLowerCase())
 
-        for (let tag of tagElements) {
-          tags.push(tag.innerText.toLowerCase())
-        }
-
-        // Create sets from the arrays
-        const [set1, set2] = [new Set(wantedTags), new Set(tags)]
-        const common = [...set1].filter((x) => set2.has(x))
-
-        if (common.length === wantedTags.length) {
-          category.style.display = ''
-        } else if (wantedTags[0] === '') {
-          category.style.display = ''
-        } else {
+        console.log(categoryTags)
+        if (!categoryTags.some(r=>wantedTags.includes(r))) {
           category.style.display = 'none'
+        } else {
+          category.style.display = 'block'
         }
       }
     },
@@ -60,8 +52,9 @@ export default {
         document.documentElement.scrollTop + window.innerHeight ===
         document.documentElement.offsetHeight
       if (bottomOfWindow && this.data) {
-        const cursor = this.data[this.data.length - 1].cursor
+        const cursor = this.data[this.data.length - 1]?.cursor ?? null
         if (!cursor) return
+        
         const res = await getEndpoint('api/discover?cursor=' + cursor)
 
         for (let category of res) {
@@ -69,7 +62,7 @@ export default {
         }
       }
     },
-    async handleFollowingScroll(event: UIEvent) {
+    handleFollowingScroll(event: Event) {
       let el = event.target as HTMLUListElement
       let fullyScrolled = el.scrollLeft === el.scrollWidth - el.clientWidth
       if (!fullyScrolled) return
@@ -77,8 +70,10 @@ export default {
 
       let offset = Math.floor(this.following.length / 35)
       console.log(offset)
-      let newFollowers = await followersStreaming(this.following, offset)
-      this.followingStreaming = [...this.following, ...newFollowers]
+      followersStreaming(this.following, offset).then((newFollowers) => {
+        this.followingStreaming = [...this.following, ...newFollowers]
+      })
+      
     }
   },
   async mounted() {
@@ -112,7 +107,7 @@ export default {
     <error-message></error-message>
   </div>
 
-  <div v-show="data" class="max-w-5xl w-[100vw] mx-auto">
+  <div v-show="data" class="max-w-5xl grow w-[100vw] mx-auto">
     <vue-title title="Discover"></vue-title>
     <div v-if="following && following.length > 0" class="p-2 text-contrast">
       <h1 class="font-bold text-5xl">{{ $t('home.following') }}</h1>
@@ -139,9 +134,8 @@ export default {
             name="searchBar"
             :placeholder="$t('main.search')"
             v-model="filterTags"
-            @keypress="filterSearches(filterTags)"
             @keyup="filterSearches(filterTags)"
-            class="rounded-md p-1 pl-8 placeholder:text-white"
+            class="rounded-md p-1 pl-8 text-primary"
           />
         </div>
       </div>