From 2f53c9d96b7a99d11f058a86713fb0e535dfbd8f Mon Sep 17 00:00:00 2001
From: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Sun, 23 Feb 2025 16:23:00 -0500
Subject: [PATCH] Add icons to page headers + subscription tabs (#6669)

* Add icons to page headers

* fix most popular page

* Add icon to search page, hide settings icon on mobile

* use icon for hashtag as well

* Fix getting invidious hashtag

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>

* fix bug when fetching more hashtag in invidious, use hashtag ref instead of a paremeter

---------

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>
---
 .../FtSettingsMenu/FtSettingsMenu.css         |  9 +++
 .../FtSettingsMenu/FtSettingsMenu.vue         |  5 ++
 src/renderer/main.js                          | 10 +++-
 src/renderer/views/About/About.css            |  4 ++
 src/renderer/views/About/About.vue            |  9 ++-
 src/renderer/views/Hashtag/Hashtag.css        |  4 ++
 src/renderer/views/Hashtag/Hashtag.vue        | 59 +++++++------------
 src/renderer/views/History/History.css        |  4 ++
 src/renderer/views/History/History.vue        |  9 ++-
 src/renderer/views/Popular/Popular.css        |  4 ++
 src/renderer/views/Popular/Popular.vue        |  9 ++-
 src/renderer/views/Search/Search.css          |  4 ++
 src/renderer/views/Search/Search.vue          |  9 ++-
 .../SubscribedChannels/SubscribedChannels.css |  4 ++
 .../SubscribedChannels/SubscribedChannels.vue |  9 ++-
 .../views/Subscriptions/Subscriptions.css     |  6 +-
 .../views/Subscriptions/Subscriptions.vue     | 29 ++++++++-
 .../views/UserPlaylists/UserPlaylists.css     |  4 ++
 .../views/UserPlaylists/UserPlaylists.vue     |  5 ++
 19 files changed, 148 insertions(+), 48 deletions(-)

diff --git a/src/renderer/components/FtSettingsMenu/FtSettingsMenu.css b/src/renderer/components/FtSettingsMenu/FtSettingsMenu.css
index b6d613a3e0729..e11a3f764502c 100644
--- a/src/renderer/components/FtSettingsMenu/FtSettingsMenu.css
+++ b/src/renderer/components/FtSettingsMenu/FtSettingsMenu.css
@@ -14,6 +14,10 @@
   margin-block: 0 10px;
 }
 
+.headingIcon {
+  color: var(--primary-color);
+}
+
 .title {
   text-decoration: none;
   color: var(--tertiary-text-color);
@@ -104,6 +108,11 @@
   .header {
     font-size: 32px;
   }
+
+  /* hide the settings icon on mobile to avoid confusion */
+  .headingIcon {
+    display: none;
+  }
 }
 
 /* small height or width mobile breakpoint; intermediary text */
diff --git a/src/renderer/components/FtSettingsMenu/FtSettingsMenu.vue b/src/renderer/components/FtSettingsMenu/FtSettingsMenu.vue
index 2965d3388c356..cf5e7ad027927 100644
--- a/src/renderer/components/FtSettingsMenu/FtSettingsMenu.vue
+++ b/src/renderer/components/FtSettingsMenu/FtSettingsMenu.vue
@@ -3,6 +3,11 @@
     class="settingsMenu"
   >
     <h2 class="header">
+      <FontAwesomeIcon
+        :icon="['fas', 'sliders-h']"
+        class="headingIcon"
+        fixed-width
+      />
       {{ $t('Settings.Settings') }}
     </h2>
     <a
diff --git a/src/renderer/main.js b/src/renderer/main.js
index 65aa0ebedf23d..1955875bb2972 100644
--- a/src/renderer/main.js
+++ b/src/renderer/main.js
@@ -76,6 +76,7 @@ import {
   faList,
   faLocationDot,
   faLock,
+  faMessage,
   faMoneyCheckDollar,
   faMusic,
   faNetworkWired,
@@ -107,15 +108,17 @@ import {
   faThumbtack,
   faTimes,
   faTimesCircle,
+  faTowerBroadcast,
   faTrash,
   faUserCheck,
   faUserLock,
   faUsers,
   faUsersSlash,
-  faWifi,
+  faVideo,
   faVolumeHigh,
   faVolumeLow,
   faVolumeMute,
+  faWifi,
   faXmark
 } from '@fortawesome/free-solid-svg-icons'
 import {
@@ -200,6 +203,7 @@ library.add(
   faList,
   faLocationDot,
   faLock,
+  faMessage,
   faMoneyCheckDollar,
   faMusic,
   faNetworkWired,
@@ -231,15 +235,17 @@ library.add(
   faThumbtack,
   faTimes,
   faTimesCircle,
+  faTowerBroadcast,
   faTrash,
   faUserCheck,
   faUserLock,
   faUsers,
   faUsersSlash,
-  faWifi,
+  faVideo,
   faVolumeHigh,
   faVolumeLow,
   faVolumeMute,
+  faWifi,
   faXmark,
 
   // solid icons
diff --git a/src/renderer/views/About/About.css b/src/renderer/views/About/About.css
index a4f44d183d2a5..10dbf00864cb9 100644
--- a/src/renderer/views/About/About.css
+++ b/src/renderer/views/About/About.css
@@ -55,6 +55,10 @@
   grid-area: content;
 }
 
+.headingIcon {
+  color: var(--primary-color);
+}
+
 @media only screen and (width <=650px) {
   .about-chunks {
     grid-template-columns: 1fr;
diff --git a/src/renderer/views/About/About.vue b/src/renderer/views/About/About.vue
index e3257f35bf80e..e715d44884448 100644
--- a/src/renderer/views/About/About.vue
+++ b/src/renderer/views/About/About.vue
@@ -1,9 +1,14 @@
 <template>
   <div>
     <FtCard class="card">
-      <h1>
+      <h2>
+        <FontAwesomeIcon
+          :icon="['fas', 'info-circle']"
+          class="headingIcon"
+          fixed-width
+        />
         {{ $t("About.About") }}
-      </h1>
+      </h2>
       <section class="brand">
         <FtLogoFull class="logo" />
         <div class="version">
diff --git a/src/renderer/views/Hashtag/Hashtag.css b/src/renderer/views/Hashtag/Hashtag.css
index 372cb70483a83..19d0166a0c05d 100644
--- a/src/renderer/views/Hashtag/Hashtag.css
+++ b/src/renderer/views/Hashtag/Hashtag.css
@@ -20,6 +20,10 @@
   inline-size: 85%;
 }
 
+.headingIcon {
+  color: var(--primary-color);
+}
+
 @media only screen and (width <= 680px) {
   .card {
     inline-size: 90%;
diff --git a/src/renderer/views/Hashtag/Hashtag.vue b/src/renderer/views/Hashtag/Hashtag.vue
index af275fe5a6c73..fa481bfd28a8c 100644
--- a/src/renderer/views/Hashtag/Hashtag.vue
+++ b/src/renderer/views/Hashtag/Hashtag.vue
@@ -8,7 +8,15 @@
       v-else
       class="card"
     >
-      <h2>{{ hashtag }}</h2>
+      <h2>
+        <font-awesome-icon
+          :icon="['fas', 'hashtag']"
+          aria-hidden="false"
+          class="headingIcon"
+          fixed-width
+        />
+        {{ hashtag }}
+      </h2>
       <FtElementList
         v-if="videos.length > 0"
         :data="videos"
@@ -102,23 +110,21 @@ function resetData() {
 }
 
 async function getHashtag() {
-  const hashtagInRoute = decodeURIComponent(route.params.hashtag)
+  hashtag.value = decodeURIComponent(route.params.hashtag)
   if (process.env.SUPPORTS_LOCAL_API && backendPreference.value === 'local') {
-    await getLocalHashtag(hashtagInRoute)
+    await getLocalHashtag()
   } else {
-    await getInvidiousHashtag(hashtagInRoute)
+    await getInvidiousHashtag()
   }
-  store.commit('setAppTitle', `${hashtag.value} - ${packageDetails.productName}`)
+  store.commit('setAppTitle', `#${hashtag.value} - ${packageDetails.productName}`)
 }
 
 /**
- * @param {string} hashtagInRoute
  * @param {number} page
  */
-async function getInvidiousHashtag(hashtagInRoute, page) {
+async function getInvidiousHashtag(page = 1) {
   try {
-    const fetchedVideos = await getHashtagInvidious(hashtagInRoute, page)
-    hashtag.value = '#' + hashtagInRoute
+    const fetchedVideos = await getHashtagInvidious(hashtag.value, page)
     isLoading.value = false
     apiUsed.value = 'invidious'
     videos.value = videos.value.concat(fetchedVideos)
@@ -132,38 +138,16 @@ async function getInvidiousHashtag(hashtagInRoute, page) {
     if (process.env.SUPPORTS_LOCAL_API && backendPreference.value === 'invidious' && backendFallback.value) {
       showToast(t('Falling back to Local API'))
       resetData()
-      getLocalHashtag(hashtag)
+      getLocalHashtag()
     } else {
       isLoading.value = false
     }
   }
 }
 
-/**
- * @param {string} hashtagInRoute
- */
-async function getLocalHashtag(hashtagInRoute) {
+async function getLocalHashtag() {
   try {
-    const hashtagData = await getHashtagLocal(hashtagInRoute)
-
-    const header = hashtagData.header
-    if (header) {
-      switch (header.type) {
-        case 'HashtagHeader':
-          hashtag.value = header.hashtag.toString()
-          break
-        case 'PageHeader':
-          hashtag.value = header.content.title.text
-          break
-        default:
-          console.error(`Unknown hashtag header type: ${header.type}, falling back to query parameter.`)
-          hashtag.value = `#${hashtagInRoute}`
-      }
-    } else {
-      console.error(' Hashtag header missing, probably a layout change, falling back to query parameter.')
-      hashtag.value = `#${hashtagInRoute}`
-    }
-
+    const hashtagData = await getHashtagLocal(hashtag.value)
     videos.value = hashtagData.videos.map(parseLocalListVideo)
     apiUsed.value = 'local'
     hashtagContinuationData.value = hashtagData.has_continuation ? hashtagData : null
@@ -177,7 +161,7 @@ async function getLocalHashtag(hashtagInRoute) {
     if (backendPreference.value === 'local' && backendFallback.value) {
       showToast(t('Falling back to Invidious API'))
       resetData()
-      getInvidiousHashtag(hashtag)
+      getInvidiousHashtag()
     } else {
       isLoading.value = false
     }
@@ -198,9 +182,8 @@ async function getLocalHashtagMore() {
     })
     if (backendPreference.value === 'local' && backendFallback.value) {
       showToast(t('Falling back to Invidious API'))
-      const hashtagWithoutSymbol = hashtag.value.substring(1)
       resetData()
-      getInvidiousHashtag(hashtagWithoutSymbol)
+      getInvidiousHashtag()
     } else {
       isLoading.value = false
     }
@@ -211,7 +194,7 @@ function handleFetchMore() {
   if (process.env.SUPPORTS_LOCAL_API && apiUsed.value === 'local') {
     getLocalHashtagMore()
   } else if (apiUsed.value === 'invidious') {
-    getInvidiousHashtag(hashtag.value.substring(1), pageNumber.value)
+    getInvidiousHashtag(pageNumber.value)
   }
 }
 </script>
diff --git a/src/renderer/views/History/History.css b/src/renderer/views/History/History.css
index a902565bb94b5..8672572380933 100644
--- a/src/renderer/views/History/History.css
+++ b/src/renderer/views/History/History.css
@@ -8,6 +8,10 @@
   color: var(--tertiary-text-color);
 }
 
+.headingIcon {
+  color: var(--primary-color);
+}
+
 @media only screen and (width <= 680px) {
   .card {
     inline-size: 90%;
diff --git a/src/renderer/views/History/History.vue b/src/renderer/views/History/History.vue
index 27d2949165142..c13ff8f83bed3 100644
--- a/src/renderer/views/History/History.vue
+++ b/src/renderer/views/History/History.vue
@@ -8,7 +8,14 @@
       v-show="!isLoading"
       class="card"
     >
-      <h2>{{ $t("History.History") }}</h2>
+      <h2>
+        <FontAwesomeIcon
+          :icon="['fas', 'history']"
+          class="headingIcon"
+          fixed-width
+        />
+        {{ $t("History.History") }}
+      </h2>
       <ft-input
         v-show="fullData.length > 0"
         ref="searchBar"
diff --git a/src/renderer/views/Popular/Popular.css b/src/renderer/views/Popular/Popular.css
index b6f8ffc9db440..d60d8c6cb7a18 100644
--- a/src/renderer/views/Popular/Popular.css
+++ b/src/renderer/views/Popular/Popular.css
@@ -4,6 +4,10 @@
   margin-inline: auto;
 }
 
+.headingIcon {
+  color: var(--primary-color);
+}
+
 @media only screen and (width <= 680px) {
   .card {
     inline-size: 90%;
diff --git a/src/renderer/views/Popular/Popular.vue b/src/renderer/views/Popular/Popular.vue
index 491a5a99e7c86..a28cbf70f1fe3 100644
--- a/src/renderer/views/Popular/Popular.vue
+++ b/src/renderer/views/Popular/Popular.vue
@@ -8,7 +8,14 @@
       v-else
       class="card"
     >
-      <h2>{{ $t("Most Popular") }}</h2>
+      <h2>
+        <FontAwesomeIcon
+          :icon="['fas', 'users']"
+          class="headingIcon"
+          fixed-width
+        />
+        {{ $t("Most Popular") }}
+      </h2>
       <ft-element-list
         :data="shownResults"
       />
diff --git a/src/renderer/views/Search/Search.css b/src/renderer/views/Search/Search.css
index ec9031f0d9dcf..0f358ae41217e 100644
--- a/src/renderer/views/Search/Search.css
+++ b/src/renderer/views/Search/Search.css
@@ -20,6 +20,10 @@
   margin-inline: auto;
 }
 
+.headingIcon {
+  color: var(--primary-color);
+}
+
 @media only screen and (width <= 680px) {
   .card {
     inline-size: 90%;
diff --git a/src/renderer/views/Search/Search.vue b/src/renderer/views/Search/Search.vue
index ab30a9b4c6451..2131742971dbb 100644
--- a/src/renderer/views/Search/Search.vue
+++ b/src/renderer/views/Search/Search.vue
@@ -8,7 +8,14 @@
       v-else
       class="card"
     >
-      <h2>{{ $t("Search Filters.Search Results") }}</h2>
+      <h2>
+        <font-awesome-icon
+          :icon="['fas', 'search']"
+          class="headingIcon"
+          fixed-width
+        />
+        {{ $t("Search Filters.Search Results") }}
+      </h2>
       <ft-element-list
         :data="shownResults"
       />
diff --git a/src/renderer/views/SubscribedChannels/SubscribedChannels.css b/src/renderer/views/SubscribedChannels/SubscribedChannels.css
index 35affd939f6aa..1172cf641659b 100644
--- a/src/renderer/views/SubscribedChannels/SubscribedChannels.css
+++ b/src/renderer/views/SubscribedChannels/SubscribedChannels.css
@@ -68,6 +68,10 @@
   block-size: 80%;
 }
 
+.headingIcon {
+  color: var(--primary-color);
+}
+
 @media only screen and (width <= 680px) {
   .card {
     inline-size: 90%;
diff --git a/src/renderer/views/SubscribedChannels/SubscribedChannels.vue b/src/renderer/views/SubscribedChannels/SubscribedChannels.vue
index 4878482e84c59..bba9be39a7710 100644
--- a/src/renderer/views/SubscribedChannels/SubscribedChannels.vue
+++ b/src/renderer/views/SubscribedChannels/SubscribedChannels.vue
@@ -1,7 +1,14 @@
 <template>
   <div>
     <ft-card class="card">
-      <h2>{{ $t('Channels.Title') }}</h2>
+      <h2>
+        <FontAwesomeIcon
+          :icon="['fas', 'user-check']"
+          class="headingIcon"
+          fixed-width
+        />
+        {{ $t('Channels.Title') }}
+      </h2>
       <ft-input
         v-show="subscribedChannels.length > 0"
         ref="searchBarChannels"
diff --git a/src/renderer/views/Subscriptions/Subscriptions.css b/src/renderer/views/Subscriptions/Subscriptions.css
index ea5aa91d4d8b7..d726ba4bab68c 100644
--- a/src/renderer/views/Subscriptions/Subscriptions.css
+++ b/src/renderer/views/Subscriptions/Subscriptions.css
@@ -25,7 +25,7 @@
 .tab {
   text-align: center;
   padding: 15px;
-  font-size: 15px;
+  font-size: 1.1em;
   cursor: pointer;
   align-self: flex-end;
   text-transform: uppercase;
@@ -35,6 +35,10 @@
   font-weight: bold;
 }
 
+.subscriptionIcon {
+  color: var(--primary-color);
+}
+
 @media only screen and (width <= 680px) {
   .card {
     inline-size: 90%;
diff --git a/src/renderer/views/Subscriptions/Subscriptions.vue b/src/renderer/views/Subscriptions/Subscriptions.vue
index bc74c09eebd07..155041b14f100 100644
--- a/src/renderer/views/Subscriptions/Subscriptions.vue
+++ b/src/renderer/views/Subscriptions/Subscriptions.vue
@@ -1,7 +1,14 @@
 <template>
   <div>
     <FtCard class="card">
-      <h2>{{ $t("Subscriptions.Subscriptions") }}</h2>
+      <h2>
+        <FontAwesomeIcon
+          :icon="['fas', 'rss']"
+          class="subscriptionIcon"
+          fixed-width
+        />
+        {{ $t("Subscriptions.Subscriptions") }}
+      </h2>
       <FtFlexBox
         class="tabs"
         role="tablist"
@@ -21,6 +28,11 @@
           @keydown.space.enter.prevent="changeTab('videos')"
           @keydown.left.right="focusTab($event, 'videos')"
         >
+          <FontAwesomeIcon
+            :icon="['fa', 'video']"
+            class="subscriptionIcon"
+            fixed-width
+          />
           {{ $t("Global.Videos") }}
         </div>
         <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->
@@ -37,6 +49,11 @@
           @keydown.space.enter.prevent="changeTab('shorts')"
           @keydown.left.right="focusTab($event, 'shorts')"
         >
+          <FontAwesomeIcon
+            :icon="['fa', 'clapperboard']"
+            class="subscriptionIcon"
+            fixed-width
+          />
           {{ $t("Global.Shorts") }}
         </div>
         <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->
@@ -53,6 +70,11 @@
           @keydown.space.enter.prevent="changeTab('live')"
           @keydown.left.right="focusTab($event, 'live')"
         >
+          <FontAwesomeIcon
+            :icon="['fa', 'tower-broadcast']"
+            class="subscriptionIcon"
+            fixed-width
+          />
           {{ $t("Global.Live") }}
         </div>
         <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->
@@ -69,6 +91,11 @@
           @keydown.space.enter.prevent="changeTab('community')"
           @keydown.left.right="focusTab($event, 'community')"
         >
+          <FontAwesomeIcon
+            :icon="['fa', 'message']"
+            class="subscriptionIcon"
+            fixed-width
+          />
           {{ $t("Global.Community") }}
         </div>
       </FtFlexBox>
diff --git a/src/renderer/views/UserPlaylists/UserPlaylists.css b/src/renderer/views/UserPlaylists/UserPlaylists.css
index bdecb1640e17f..e70ea871672d2 100644
--- a/src/renderer/views/UserPlaylists/UserPlaylists.css
+++ b/src/renderer/views/UserPlaylists/UserPlaylists.css
@@ -56,6 +56,10 @@
   color: var(--tertiary-text-color);
 }
 
+.headingIcon {
+  color: var(--primary-color);
+}
+
 @media only screen and (width <= 680px) {
   .card {
     inline-size: 90%;
diff --git a/src/renderer/views/UserPlaylists/UserPlaylists.vue b/src/renderer/views/UserPlaylists/UserPlaylists.vue
index 3ca2a65c43d9d..fae6f73e332bf 100644
--- a/src/renderer/views/UserPlaylists/UserPlaylists.vue
+++ b/src/renderer/views/UserPlaylists/UserPlaylists.vue
@@ -10,6 +10,11 @@
     >
       <div class="heading">
         <h2 class="headingText">
+          <FontAwesomeIcon
+            :icon="['fas', 'bookmark']"
+            class="headingIcon"
+            fixed-width
+          />
           {{ $t("User Playlists.Your Playlists") }}
         </h2>
         <ft-icon-button