Add icon button visual labels

src/renderer/components/ft-icon-button/ft-icon-button.js

@@ -59,6 +59,10 @@ export default defineComponent({
     dropdownModalOnMobile: {
       type: Boolean,
       default: false
+    },
+    hideLabel: {
+      type: Boolean,
+      default: false
     }
   },
   data: function () {
@@ -68,6 +72,11 @@ export default defineComponent({
       useModal: false
     }
   },
+  computed: {
+    buttonPaddingProperty: function () {
+      return this.hideLabel ? 'padding' : 'padding-block'
+    }
+  },
   mounted: function () {
     if (this.dropdownModalOnMobile) {
       this.useModal = window.innerWidth <= 900

src/renderer/components/ft-icon-button/ft-icon-button.scss

@@ -8,12 +8,16 @@
   user-select: none;
 }
 
-.iconButton {
+.iconButtonContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  block-size: fit-content;
+  inline-size: min-content;
   border-radius: 50%;
   cursor: pointer;
-  block-size: 1em;
+
   transition: background 0.15s ease-out;
-  inline-size: 1em;
 
   &.shadow {
     box-shadow: 0 1px 2px rgb(0 0 0 / 50%);
@@ -78,6 +82,41 @@
 
   &.favorite, &.favorite:hover, &.favorite:focus-visible {
     color: var(--favorite-icon-color);
+
+    .iconButtonLabel {
+      color: var(--primary-text-color);
+    }
+  }
+
+  .iconButton {
+    block-size: 1em;
+    inline-size: 1em;
+  }
+
+  &:has(.iconButtonLabel) {
+    border-radius: 18px;
+    padding-inline: 5px;
+    inline-size: 105px;
+
+    .iconButton {
+      padding-block: 0.5em;
+      padding-inline: 5px;
+    }
+  }
+
+  .iconButtonLabel {
+    margin-block: 0;
+    padding-inline: 2px 5px;
+    font-size: 14px;
+    font-weight: 500;
+    text-align: start;
+    -webkit-line-clamp: 2;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-box-pack: end;
+    overflow: hidden;
+    overflow-wrap: break-word;
+    hyphens: auto;
   }
 }
 

src/renderer/components/ft-icon-button/ft-icon-button.vue

@@ -1,26 +1,35 @@
 <template>
   <div class="ftIconButton">
-    <font-awesome-icon
-      ref="iconButton"
-      class="iconButton"
-      :title="title"
-      :icon="icon"
+    <div
+      class="iconButtonContainer"
       :class="{
         [theme]: true,
         shadow: useShadow
       }"
-      :style="{
-        padding: padding + 'px',
-        fontSize: size + 'px'
-      }"
+      :title="title"
       tabindex="0"
       role="button"
       :aria-expanded="dropdownShown"
       @click="handleIconClick"
       @mousedown="handleIconMouseDown"
       @keydown.enter.prevent="handleIconClick"
       @keydown.space.prevent="handleIconClick"
-    />
+    >
+      <font-awesome-icon
+        class="iconButton"
+        :icon="icon"
+        :style="{
+          [buttonPaddingProperty]: padding + 'px',
+          fontSize: size + 'px'
+        }"
+      />
+      <p
+        v-if="!hideLabel"
+        class="iconButtonLabel"
+      >
+        {{ title }}
+      </p>
+    </div>
     <template
       v-if="dropdownShown"
     >

src/renderer/components/ft-list-playlist/ft-list-playlist.vue

@@ -59,6 +59,7 @@
       </div>
       <ft-icon-button
         v-if="externalPlayer !== '' && !isUserPlaylist"
+        :hide-label="true"
         :title="$t('Video.External Player.OpenInTemplate', { externalPlayer })"
         :icon="['fas', 'external-link-alt']"
         class="externalPlayerButton"

src/renderer/components/ft-list-video/ft-list-video.vue

@@ -37,6 +37,7 @@
         v-if="externalPlayer !== ''"
         :title="$t('Video.External Player.OpenInTemplate', { externalPlayer })"
         :icon="['fas', 'external-link-alt']"
+        :hide-label="true"
         class="externalPlayerIcon"
         theme="base"
         :padding="appearance === `watchPlaylistItem` ? 6 : 7"
@@ -49,6 +50,7 @@
           ref="addToPlaylistIcon"
           :title="$t('User Playlists.Add to Playlist')"
           :icon="['fas', 'plus']"
+          :hide-label="true"
           class="addToPlaylistIcon"
           :class="alwaysShowAddToPlaylistButton ? 'alwaysVisible' : ''"
           :padding="appearance === `watchPlaylistItem` ? 5 : 6"
@@ -59,6 +61,7 @@
           v-if="isQuickBookmarkEnabled && quickBookmarkButtonEnabled"
           :title="quickBookmarkIconText"
           :icon="isInQuickBookmarkPlaylist ? ['fas', 'check'] : ['fas', 'bookmark']"
+          :hide-label="true"
           class="quickBookmarkVideoIcon"
           :class="{
             bookmarked: isInQuickBookmarkPlaylist,
@@ -73,6 +76,7 @@
           v-if="inUserPlaylist && canMoveVideoUp"
           :title="$t('User Playlists.Move Video Up')"
           :icon="['fas', 'arrow-up']"
+          :hide-label="true"
           class="upArrowIcon"
           :padding="appearance === `watchPlaylistItem` ? 5 : 6"
           :size="appearance === `watchPlaylistItem` ? 14 : 18"
@@ -82,6 +86,7 @@
           v-if="inUserPlaylist && canMoveVideoDown"
           :title="$t('User Playlists.Move Video Down')"
           :icon="['fas', 'arrow-down']"
+          :hide-label="true"
           class="downArrowIcon"
           :padding="appearance === `watchPlaylistItem` ? 5 : 6"
           :size="appearance === `watchPlaylistItem` ? 14 : 18"
@@ -91,6 +96,7 @@
           v-if="inUserPlaylist && canRemoveFromPlaylist"
           :title="$t('User Playlists.Remove from Playlist')"
           :icon="['fas', 'trash']"
+          :hide-label="true"
           class="trashIcon"
           :padding="appearance === `watchPlaylistItem` ? 5 : 6"
           :size="appearance === `watchPlaylistItem` ? 14 : 18"
@@ -147,6 +153,7 @@
       </div>
       <ft-icon-button
         class="optionsButton"
+        :hide-label="true"
         :icon="['fas', 'ellipsis-v']"
         :title="$t('Video.More Options')"
         theme="base-no-default"

src/renderer/components/ft-profile-selector/ft-profile-selector.vue

@@ -37,6 +37,7 @@
       </h3>
       <ft-icon-button
         class="profileSettings"
+        :hide-label="true"
         :icon="['fas', 'sliders-h']"
         @click="openProfileSettings"
       />

src/renderer/components/ft-share-button/ft-share-button.vue

@@ -4,6 +4,7 @@
     :title="shareTitle"
     theme="secondary"
     :icon="['fas', 'share-alt']"
+    :hide-label="true"
     :dropdown-modal-on-mobile="true"
     dropdown-position-x="left"
     :dropdown-position-y="dropdownPositionY"

src/renderer/components/playlist-info/playlist-info.scss

@@ -67,10 +67,10 @@
 }
 
 .playlistOptions {
-  display: grid;
-  grid-auto-flow: column;
-  column-gap: 8px;
-  justify-content: flex-end;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: center;
 }
 
 .searchInputsRow {

src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.vue

@@ -57,6 +57,7 @@
     </ft-flex-box>
     <ft-icon-button
       v-if="!isLoading && activeSubscriptionList.length > 0"
+      :hide-label="true"
       :icon="['fas', 'sync']"
       class="floatingTopButton"
       :title="$t('Subscriptions.Refresh Subscriptions')"

src/renderer/components/watch-video-info/watch-video-info.scss

@@ -67,6 +67,9 @@
 
     @media screen and (max-width: 460px) {
       flex-wrap: nowrap;
+      max-inline-size: 100vw;
+      overflow-x: scroll;
+      justify-content: flex-start;
       :deep(.iconDropdown) {
         inset-inline-start: auto;
         inset-inline-end: auto;

src/renderer/components/watch-video-info/watch-video-info.vue

@@ -83,6 +83,7 @@
           v-if="showPlaylists && !isUpcoming"
           :title="$t('User Playlists.Add to Playlist')"
           :icon="['fas', 'plus']"
+          :hide-label="true"
           class="option"
           theme="base"
           @click="togglePlaylistPrompt"
@@ -91,6 +92,7 @@
           v-if="isQuickBookmarkEnabled"
           :title="quickBookmarkIconText"
           :icon="isInQuickBookmarkPlaylist ? ['fas', 'check'] : ['fas', 'bookmark']"
+          :hide-label="true"
           class="quickBookmarkVideoIcon"
           :class="{
             bookmarked: isInQuickBookmarkPlaylist,
@@ -102,10 +104,18 @@
           v-if="externalPlayer !== ''"
           :title="$t('Video.External Player.OpenInTemplate', { externalPlayer })"
           :icon="['fas', 'external-link-alt']"
+          :hide-label="true"
           class="option"
           theme="secondary"
           @click="handleExternalPlayer"
         />
+        <ft-share-button
+          v-if="!hideSharingActions"
+          :id="id"
+          :get-timestamp="getTimestamp"
+          :playlist-id="playlistId"
+          class="option"
+        />
         <ft-icon-button
           v-if="!isUpcoming && downloadLinks.length > 0"
           ref="downloadButton"
@@ -126,13 +136,6 @@
           :dropdown-options="formatTypeOptions"
           @click="$emit('change-format', $event)"
         />
-        <ft-share-button
-          v-if="!hideSharingActions"
-          :id="id"
-          :get-timestamp="getTimestamp"
-          :playlist-id="playlistId"
-          class="option"
-        />
       </div>
     </div>
   </ft-card>

src/renderer/views/Popular/Popular.vue

@@ -15,6 +15,7 @@
     </ft-card>
     <ft-icon-button
       v-if="!isLoading"
+      :hide-label="true"
       :icon="['fas', 'sync']"
       class="floatingTopButton"
       :size="12"

src/renderer/views/Trending/Trending.vue

@@ -87,6 +87,7 @@
     </ft-card>
     <ft-icon-button
       v-if="!isLoading"
+      :hide-label="true"
       :icon="['fas', 'sync']"
       class="floatingTopButton"
       :size="12"