From 17a3539faba50fe3e96c166bc8829b3141954543 Mon Sep 17 00:00:00 2001
From: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Sun, 16 Jul 2023 12:58:17 -0700
Subject: [PATCH 1/6] Add hashtags to search results

---
 .../ft-element-list/ft-element-list.vue       |  2 +-
 .../ft-list-hashtag/ft-list-hashtag.js        | 44 +++++++++++++++
 .../ft-list-hashtag/ft-list-hashtag.scss      | 11 ++++
 .../ft-list-hashtag/ft-list-hashtag.vue       | 53 +++++++++++++++++++
 .../ft-list-lazy-wrapper.js                   |  4 +-
 .../ft-list-lazy-wrapper.vue                  |  5 ++
 src/renderer/helpers/api/local.js             | 15 +++++-
 src/renderer/main.js                          |  2 +
 src/renderer/views/Search/Search.js           |  2 +-
 static/locales/en-US.yaml                     |  4 ++
 10 files changed, 138 insertions(+), 4 deletions(-)
 create mode 100644 src/renderer/components/ft-list-hashtag/ft-list-hashtag.js
 create mode 100644 src/renderer/components/ft-list-hashtag/ft-list-hashtag.scss
 create mode 100644 src/renderer/components/ft-list-hashtag/ft-list-hashtag.vue

diff --git a/src/renderer/components/ft-element-list/ft-element-list.vue b/src/renderer/components/ft-element-list/ft-element-list.vue
index 22c4a343fadad..162b7dcf88fd8 100644
--- a/src/renderer/components/ft-element-list/ft-element-list.vue
+++ b/src/renderer/components/ft-element-list/ft-element-list.vue
@@ -4,7 +4,7 @@
   >
     <ft-list-lazy-wrapper
       v-for="(result, index) in data"
-      :key="`${result.type}-${result.videoId || result.playlistId || result.postId || result.id || result.authorId}-${index}`"
+      :key="`${result.type}-${result.videoId || result.playlistId || result.postId || result.id || result.authorId || result.url}-${index}`"
       appearance="result"
       :data="result"
       :first-screen="index < 16"
diff --git a/src/renderer/components/ft-list-hashtag/ft-list-hashtag.js b/src/renderer/components/ft-list-hashtag/ft-list-hashtag.js
new file mode 100644
index 0000000000000..ad7b19309c624
--- /dev/null
+++ b/src/renderer/components/ft-list-hashtag/ft-list-hashtag.js
@@ -0,0 +1,44 @@
+import { defineComponent } from 'vue'
+import { formatNumber } from '../../helpers/utils'
+
+export default defineComponent({
+  name: 'FtListChannel',
+  props: {
+    data: {
+      type: Object,
+      required: true
+    },
+    appearance: {
+      type: String,
+      required: true
+    }
+  },
+  data: function () {
+    return {
+      title: '',
+      url: '',
+      channelCount: 0,
+      parsedChannelCount: '',
+      videoCount: 0,
+      parsedVideosCount: ''
+    }
+  },
+  computed: {
+    listType: function () {
+      return this.$store.getters.getListType
+    }
+  },
+  created: function () {
+    this.parseData()
+  },
+  methods: {
+    parseData: function () {
+      this.url = this.data.url
+      this.channelCount = this.data.channelCount
+      this.parsedChannelCount = formatNumber(this.channelCount)
+      this.videoCount = this.data.videoCount
+      this.parsedVideosCount = formatNumber(this.videoCount)
+      this.title = this.data.title
+    }
+  }
+})
diff --git a/src/renderer/components/ft-list-hashtag/ft-list-hashtag.scss b/src/renderer/components/ft-list-hashtag/ft-list-hashtag.scss
new file mode 100644
index 0000000000000..58ae940570942
--- /dev/null
+++ b/src/renderer/components/ft-list-hashtag/ft-list-hashtag.scss
@@ -0,0 +1,11 @@
+@use '../../scss-partials/_ft-list-item';
+
+.handle {
+  color: inherit;
+  text-decoration: none;
+}
+
+.hashtagImage {
+  color: var(--primary-text-color);
+  font-size: 150px;
+}
diff --git a/src/renderer/components/ft-list-hashtag/ft-list-hashtag.vue b/src/renderer/components/ft-list-hashtag/ft-list-hashtag.vue
new file mode 100644
index 0000000000000..8514ef5c5208e
--- /dev/null
+++ b/src/renderer/components/ft-list-hashtag/ft-list-hashtag.vue
@@ -0,0 +1,53 @@
+<template>
+  <div
+    class="ft-list-hashtag ft-list-item"
+    :class="{
+      list: listType === 'list',
+      grid: listType === 'grid',
+      [appearance]: true
+    }"
+  >
+    <div class="channelThumbnail">
+      <router-link
+        tabindex="-1"
+        aria-hidden="true"
+        :to="url"
+      >
+        <font-awesome-icon
+          class="hashtagImage"
+          :icon="['fas', 'hashtag']"
+        />
+      </router-link>
+    </div>
+    <div class="info">
+      <router-link
+        class="title"
+        :to="url"
+      >
+        {{ title }}
+      </router-link>
+      <div class="infoLine">
+        <span
+          v-if="channelCount"
+          class="channelCount"
+        >
+          {{ parsedChannelCount }}
+          <template v-if="channelCount === 1">{{ $t("Hashtag.Channel").toLowerCase() }}</template>
+          <template v-else>{{ $t("Hashtag.Channels").toLowerCase() }}</template>
+        </span>
+        <span
+          v-if="videoCount"
+          class="videoCount"
+        >
+          <template v-if="channelCount"> • </template>
+          {{ parsedVideosCount }}
+          <template v-if="videoCount === 1">{{ $t("Hashtag.Video").toLowerCase() }}</template>
+          <template v-else>{{ $t("Hashtag.Videos").toLowerCase() }}</template>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./ft-list-hashtag.js" />
+<style scoped lang="scss" src="./ft-list-hashtag.scss" />
diff --git a/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.js b/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.js
index 04ffbbc164df3..5d65aa2c8ded0 100644
--- a/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.js
+++ b/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.js
@@ -3,6 +3,7 @@ import FtListVideo from '../ft-list-video/ft-list-video.vue'
 import FtListChannel from '../ft-list-channel/ft-list-channel.vue'
 import FtListPlaylist from '../ft-list-playlist/ft-list-playlist.vue'
 import FtCommunityPost from '../ft-community-post/ft-community-post.vue'
+import FtListHashtag from '../ft-list-hashtag/ft-list-hashtag.vue'
 
 export default defineComponent({
   name: 'FtListLazyWrapper',
@@ -10,7 +11,8 @@ export default defineComponent({
     'ft-list-video': FtListVideo,
     'ft-list-channel': FtListChannel,
     'ft-list-playlist': FtListPlaylist,
-    'ft-community-post': FtCommunityPost
+    'ft-community-post': FtCommunityPost,
+    'ft-list-hashtag': FtListHashtag,
   },
   props: {
     data: {
diff --git a/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.vue b/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.vue
index 62c800472c6f9..65fbd2b6be595 100644
--- a/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.vue
+++ b/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.vue
@@ -34,6 +34,11 @@
         :appearance="appearance"
         :data="data"
       />
+      <ft-list-hashtag
+        v-else-if="data.type === 'hashtag'"
+        :appearance="appearance"
+        :data="data"
+      />
     </template>
   </div>
 </template>
diff --git a/src/renderer/helpers/api/local.js b/src/renderer/helpers/api/local.js
index 852a86b0fd72e..3f3affa8897af 100644
--- a/src/renderer/helpers/api/local.js
+++ b/src/renderer/helpers/api/local.js
@@ -405,7 +405,7 @@ function handleSearchResponse(response) {
 
   const results = response.results
     .filter((item) => {
-      return item.type === 'Video' || item.type === 'Channel' || item.type === 'Playlist'
+      return item.type === 'Video' || item.type === 'Channel' || item.type === 'Playlist' || item.type === 'HashtagTile'
     })
     .map((item) => parseListItem(item))
 
@@ -551,6 +551,18 @@ function parseListItem(item) {
         descriptionShort: channel.description_snippet.text
       }
     }
+    case 'HashtagTile': {
+      /** @type {import('youtubei.js').YTNodes.HashtagTile} */
+      const hashtag = item
+
+      return {
+        type: 'hashtag',
+        title: hashtag.hashtag,
+        videoCount: parseLocalSubscriberCount(hashtag.hashtag_video_count.text),
+        channelCount: parseLocalSubscriberCount(hashtag.hashtag_channel_count.text),
+        url: hashtag.endpoint.metadata.url ?? `hashtag/${encodeURIComponent(hashtag.hashtag.substring(1))}`
+      }
+    }
     case 'Playlist': {
       return parseLocalListPlaylist(item)
     }
@@ -813,6 +825,7 @@ export function filterLocalFormats(formats, allowAv1 = false) {
  * @param {string} text
  */
 export function parseLocalSubscriberCount(text) {
+  if (typeof (text) === 'undefined' || text === null) { return null }
   const match = text
     .replace(',', '.')
     .toUpperCase()
diff --git a/src/renderer/main.js b/src/renderer/main.js
index 06a7999dd94cb..eff386553e862 100644
--- a/src/renderer/main.js
+++ b/src/renderer/main.js
@@ -31,6 +31,7 @@ import {
   faFilter,
   faFire,
   faGlobe,
+  faHashtag,
   faHeart,
   faHistory,
   faInfoCircle,
@@ -97,6 +98,7 @@ library.add(
   faFilter,
   faFire,
   faGlobe,
+  faHashtag,
   faHeart,
   faHistory,
   faInfoCircle,
diff --git a/src/renderer/views/Search/Search.js b/src/renderer/views/Search/Search.js
index 3f3cd8d6fa291..e888af50bff33 100644
--- a/src/renderer/views/Search/Search.js
+++ b/src/renderer/views/Search/Search.js
@@ -211,7 +211,7 @@ export default defineComponent({
         this.apiUsed = 'invidious'
 
         const returnData = result.filter((item) => {
-          return item.type === 'video' || item.type === 'channel' || item.type === 'playlist'
+          return item.type === 'video' || item.type === 'channel' || item.type === 'playlist' || item.type === 'hashtag'
         })
 
         if (this.searchPage !== 1) {
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index 4336e38839978..2c7c37aae6887 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -886,6 +886,10 @@ Hashtag:
   Hashtag: Hashtag
   This hashtag does not currently have any videos: This hashtag does not currently
       have any videos
+  Video: Video
+  Videos: Videos
+  Channel: Channel
+  Channels: Channels
 Yes: Yes
 No: No
 Ok: Ok

From 8fe3df7cbea6352cab6baae899f2c2fd9ca0444e Mon Sep 17 00:00:00 2001
From: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Sat, 26 Aug 2023 09:03:31 -0700
Subject: [PATCH 2/6] add global count , implement changes from code review

Co-Authored-By: absidue <48293849+absidue@users.noreply.github.com>
---
 .../components/ft-list-hashtag/ft-list-hashtag.js         | 2 +-
 .../components/ft-list-hashtag/ft-list-hashtag.vue        | 8 ++------
 src/renderer/helpers/api/local.js                         | 5 ++---
 static/locales/en-US.yaml                                 | 7 +++----
 4 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/src/renderer/components/ft-list-hashtag/ft-list-hashtag.js b/src/renderer/components/ft-list-hashtag/ft-list-hashtag.js
index ad7b19309c624..88876a746699b 100644
--- a/src/renderer/components/ft-list-hashtag/ft-list-hashtag.js
+++ b/src/renderer/components/ft-list-hashtag/ft-list-hashtag.js
@@ -2,7 +2,7 @@ import { defineComponent } from 'vue'
 import { formatNumber } from '../../helpers/utils'
 
 export default defineComponent({
-  name: 'FtListChannel',
+  name: 'FtListHashtag',
   props: {
     data: {
       type: Object,
diff --git a/src/renderer/components/ft-list-hashtag/ft-list-hashtag.vue b/src/renderer/components/ft-list-hashtag/ft-list-hashtag.vue
index 8514ef5c5208e..6b22aabe93f19 100644
--- a/src/renderer/components/ft-list-hashtag/ft-list-hashtag.vue
+++ b/src/renderer/components/ft-list-hashtag/ft-list-hashtag.vue
@@ -31,18 +31,14 @@
           v-if="channelCount"
           class="channelCount"
         >
-          {{ parsedChannelCount }}
-          <template v-if="channelCount === 1">{{ $t("Hashtag.Channel").toLowerCase() }}</template>
-          <template v-else>{{ $t("Hashtag.Channels").toLowerCase() }}</template>
+          {{ $tc('Global.Counts.Channel Count', channelCount, {count: parsedChannelCount}) }}
         </span>
         <span
           v-if="videoCount"
           class="videoCount"
         >
           <template v-if="channelCount"> • </template>
-          {{ parsedVideosCount }}
-          <template v-if="videoCount === 1">{{ $t("Hashtag.Video").toLowerCase() }}</template>
-          <template v-else>{{ $t("Hashtag.Videos").toLowerCase() }}</template>
+          {{ $tc('Global.Counts.Video Count', videoCount, {count: parsedVideosCount}) }}
         </span>
       </div>
     </div>
diff --git a/src/renderer/helpers/api/local.js b/src/renderer/helpers/api/local.js
index 751876262c3c5..a1c925b953388 100644
--- a/src/renderer/helpers/api/local.js
+++ b/src/renderer/helpers/api/local.js
@@ -587,8 +587,8 @@ function parseListItem(item) {
       return {
         type: 'hashtag',
         title: hashtag.hashtag,
-        videoCount: parseLocalSubscriberCount(hashtag.hashtag_video_count.text),
-        channelCount: parseLocalSubscriberCount(hashtag.hashtag_channel_count.text),
+        videoCount: hashtag.hashtag_video_count.isEmpty() ? null : parseLocalSubscriberCount(hashtag.hashtag_video_count.text),
+        channelCount: hashtag.hashtag_channel_count.isEmpty() ? null : parseLocalSubscriberCount(hashtag.hashtag_channel_count.text),
         url: hashtag.endpoint.metadata.url ?? `hashtag/${encodeURIComponent(hashtag.hashtag.substring(1))}`
       }
     }
@@ -854,7 +854,6 @@ export function filterLocalFormats(formats, allowAv1 = false) {
  * @param {string} text
  */
 export function parseLocalSubscriberCount(text) {
-  if (typeof (text) === 'undefined' || text === null) { return null }
   const match = text
     .replace(',', '.')
     .toUpperCase()
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index d18c02cbae629..7af828b3763c9 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -45,6 +45,9 @@ Global:
   Videos: Videos
   Shorts: Shorts
   Live: Live
+  Counts:
+    Video Count: 1 video | {count} videos
+    Channel Count: 1 channel | {count} channels
 
 # Search Bar
 Search / Go to URL: Search / Go to URL
@@ -912,10 +915,6 @@ Hashtag:
   Hashtag: Hashtag
   This hashtag does not currently have any videos: This hashtag does not currently
       have any videos
-  Video: Video
-  Videos: Videos
-  Channel: Channel
-  Channels: Channels
 Yes: Yes
 No: No
 Ok: Ok

From 18b5582ff14eb5e80bf4da0f78a75fff32265473 Mon Sep 17 00:00:00 2001
From: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Sat, 26 Aug 2023 09:08:21 -0700
Subject: [PATCH 3/6] use h3 for title of hashtag element

---
 src/renderer/components/ft-list-hashtag/ft-list-hashtag.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/ft-list-hashtag/ft-list-hashtag.vue b/src/renderer/components/ft-list-hashtag/ft-list-hashtag.vue
index 6b22aabe93f19..d7a4311e7112e 100644
--- a/src/renderer/components/ft-list-hashtag/ft-list-hashtag.vue
+++ b/src/renderer/components/ft-list-hashtag/ft-list-hashtag.vue
@@ -24,7 +24,9 @@
         class="title"
         :to="url"
       >
-        {{ title }}
+        <h3 class="h3Title">
+          {{ title }}
+        </h3>
       </router-link>
       <div class="infoLine">
         <span

From 55ddb218d480e4d65db0307a3d0814971be6df4d Mon Sep 17 00:00:00 2001
From: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Sun, 27 Aug 2023 13:44:33 -0700
Subject: [PATCH 4/6] implement suggestions from code review

---
 src/renderer/components/ft-element-list/ft-element-list.vue  | 2 +-
 src/renderer/components/ft-list-hashtag/ft-list-hashtag.scss | 5 -----
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/renderer/components/ft-element-list/ft-element-list.vue b/src/renderer/components/ft-element-list/ft-element-list.vue
index 162b7dcf88fd8..5bdb836059ef1 100644
--- a/src/renderer/components/ft-element-list/ft-element-list.vue
+++ b/src/renderer/components/ft-element-list/ft-element-list.vue
@@ -4,7 +4,7 @@
   >
     <ft-list-lazy-wrapper
       v-for="(result, index) in data"
-      :key="`${result.type}-${result.videoId || result.playlistId || result.postId || result.id || result.authorId || result.url}-${index}`"
+      :key="`${result.type}-${result.videoId || result.playlistId || result.postId || result.id || result.authorId || result.title}-${index}`"
       appearance="result"
       :data="result"
       :first-screen="index < 16"
diff --git a/src/renderer/components/ft-list-hashtag/ft-list-hashtag.scss b/src/renderer/components/ft-list-hashtag/ft-list-hashtag.scss
index 58ae940570942..c524018e4b808 100644
--- a/src/renderer/components/ft-list-hashtag/ft-list-hashtag.scss
+++ b/src/renderer/components/ft-list-hashtag/ft-list-hashtag.scss
@@ -1,10 +1,5 @@
 @use '../../scss-partials/_ft-list-item';
 
-.handle {
-  color: inherit;
-  text-decoration: none;
-}
-
 .hashtagImage {
   color: var(--primary-text-color);
   font-size: 150px;

From 9ce3ffda5ed703b0f483ce234a89764452d30b7c Mon Sep 17 00:00:00 2001
From: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Tue, 29 Aug 2023 06:05:15 -0700
Subject: [PATCH 5/6] use hashtag.text, move url update logic

---
 src/renderer/components/ft-list-hashtag/ft-list-hashtag.js | 4 ++--
 src/renderer/helpers/api/local.js                          | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/ft-list-hashtag/ft-list-hashtag.js b/src/renderer/components/ft-list-hashtag/ft-list-hashtag.js
index 88876a746699b..6dbb485aa454b 100644
--- a/src/renderer/components/ft-list-hashtag/ft-list-hashtag.js
+++ b/src/renderer/components/ft-list-hashtag/ft-list-hashtag.js
@@ -33,12 +33,12 @@ export default defineComponent({
   },
   methods: {
     parseData: function () {
-      this.url = this.data.url
+      this.title = this.data.title
       this.channelCount = this.data.channelCount
       this.parsedChannelCount = formatNumber(this.channelCount)
       this.videoCount = this.data.videoCount
       this.parsedVideosCount = formatNumber(this.videoCount)
-      this.title = this.data.title
+      this.url = this.data.url ?? `hashtag/${encodeURIComponent(this.data.title.substring(1))}`
     }
   }
 })
diff --git a/src/renderer/helpers/api/local.js b/src/renderer/helpers/api/local.js
index a1c925b953388..e3e54f1d2f638 100644
--- a/src/renderer/helpers/api/local.js
+++ b/src/renderer/helpers/api/local.js
@@ -586,10 +586,10 @@ function parseListItem(item) {
 
       return {
         type: 'hashtag',
-        title: hashtag.hashtag,
+        title: hashtag.hashtag.text,
         videoCount: hashtag.hashtag_video_count.isEmpty() ? null : parseLocalSubscriberCount(hashtag.hashtag_video_count.text),
         channelCount: hashtag.hashtag_channel_count.isEmpty() ? null : parseLocalSubscriberCount(hashtag.hashtag_channel_count.text),
-        url: hashtag.endpoint.metadata.url ?? `hashtag/${encodeURIComponent(hashtag.hashtag.substring(1))}`
+        url: hashtag.endpoint.metadata.url
       }
     }
     case 'Playlist': {

From 4ebe05c8b473aa9e8afdc0c11a91e3c627e87b68 Mon Sep 17 00:00:00 2001
From: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Wed, 6 Sep 2023 13:25:35 -0400
Subject: [PATCH 6/6] encodeURI for hashtag url

---
 src/renderer/components/ft-list-hashtag/ft-list-hashtag.js | 2 +-
 src/renderer/helpers/api/local.js                          | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/ft-list-hashtag/ft-list-hashtag.js b/src/renderer/components/ft-list-hashtag/ft-list-hashtag.js
index 6dbb485aa454b..a8890f62751d0 100644
--- a/src/renderer/components/ft-list-hashtag/ft-list-hashtag.js
+++ b/src/renderer/components/ft-list-hashtag/ft-list-hashtag.js
@@ -38,7 +38,7 @@ export default defineComponent({
       this.parsedChannelCount = formatNumber(this.channelCount)
       this.videoCount = this.data.videoCount
       this.parsedVideosCount = formatNumber(this.videoCount)
-      this.url = this.data.url ?? `hashtag/${encodeURIComponent(this.data.title.substring(1))}`
+      this.url = `/hashtag/${encodeURIComponent(this.data.title.substring(1))}`
     }
   }
 })
diff --git a/src/renderer/helpers/api/local.js b/src/renderer/helpers/api/local.js
index e3e54f1d2f638..0865bff9f3b1f 100644
--- a/src/renderer/helpers/api/local.js
+++ b/src/renderer/helpers/api/local.js
@@ -588,8 +588,7 @@ function parseListItem(item) {
         type: 'hashtag',
         title: hashtag.hashtag.text,
         videoCount: hashtag.hashtag_video_count.isEmpty() ? null : parseLocalSubscriberCount(hashtag.hashtag_video_count.text),
-        channelCount: hashtag.hashtag_channel_count.isEmpty() ? null : parseLocalSubscriberCount(hashtag.hashtag_channel_count.text),
-        url: hashtag.endpoint.metadata.url
+        channelCount: hashtag.hashtag_channel_count.isEmpty() ? null : parseLocalSubscriberCount(hashtag.hashtag_channel_count.text)
       }
     }
     case 'Playlist': {