Tweak category buttons

src/components/searchViewComponents/BaseList.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { mdiMagnifyExpand, mdiPlaylistPlay, mdiPlaylistPlus } from "@mdi/js";
+import { mdiMagnifyExpand, mdiPlaylistPlay, mdiPlaylistPlus, mdiDotsHorizontal } from "@mdi/js";
 import CardContent from "@/components/searchViewComponents/subcomponents/genericCardContent.vue";
 import HoverCard from "./subcomponents/HoverCard.vue";
 import { Types, TypeListNames, TypeIcons } from "@/helpers/typeHelper";
@@ -48,6 +48,12 @@ const pageCount = computed(
   maxPages
 );
 
+const viewAllTo = computed(() => {
+  return { ...route, query: { ...route.query, type: props.fileType } };
+});
+
+const hasResults = computed(() => resultsTotal.value !== 0);
+
 /**
  * scroll down to the page from the query
  */
@@ -114,26 +120,17 @@ const queryPage = computed({
       class="justify-space-between d-flex mb-3"
       style="gap: 5px"
     >
-      <hyperlink
-        :disabled="!anyFileType"
-        :to="{ ...route, query: { ...route.query, type: fileType } }"
-        class="flex-grow-1"
-      >
-        <div
-          class="w-100 d-flex justify-start align-center text-ipfsPrimary-lighten-1 v-btn v-btn--density-default v-btn--size-default v-btn--variant-outlined"
-          color="ipfsPrimary"
+      <hyperlink :disabled="!anyFileType" :to="viewAllTo" class="flex-grow-1">
+        <!-- Note: v-btn has a "to" prop as well, which should eliminate the need for hyperlink here. However, it causes the btn to be rendered as 'tonal', overriding the text variant here -->
+        <v-btn
+          class="categoryBtn"
+          block
+          variant="text"
+          :prepend-icon="TypeIcons[fileType]"
+          :disabled="!anyFileType"
         >
-          <div class="mr-auto d-flex flex-row align-center">
-            <v-icon size="28" :icon="TypeIcons[fileType]" color="ipfsPrimary-lighten-1" />
-            <span> {{ TypeListNames[fileType] }} ({{ resultsTotal }}) </span>
-          </div>
-          <div v-if="anyFileType" class="d-flex flex-row align-center justify-end">
-            <div class="">
-              <span>View all</span>
-              <v-icon size="28" :icon="mdiMagnifyExpand" color="ipfsPrimary-lighten-1" />
-            </div>
-          </div>
-        </div>
+          {{ TypeListNames[fileType] }} ({{ resultsTotal }})
+        </v-btn>
       </hyperlink>
       <div
         v-if="fileType === Types.audio && pageHits.length"
@@ -169,7 +166,7 @@ const queryPage = computed({
       </v-col>
     </v-row>
 
-    <slot v-if="resultsTotal !== 0">
+    <slot v-if="hasResults">
       <v-row dense>
         <v-col v-for="(hit, index) in slicedHits(3)" :key="index" cols="12">
           <hover-card :hit="hit" :index="index" :file-type="fileType">
@@ -179,6 +176,12 @@ const queryPage = computed({
       </v-row>
     </slot>
 
+    <v-row v-if="hasResults" justify="center" class="mt-2 mb-1">
+      <v-col cols="12" sm="2" md="1">
+        <v-btn block rounded="pill" variant="text" :to="viewAllTo" :icon="mdiDotsHorizontal" />
+      </v-col>
+    </v-row>
+
     <v-row v-if="loading" dense justify="center">
       <v-progress-circular color="ipfsPrimary" indeterminate />
     </v-row>
@@ -189,3 +192,10 @@ const queryPage = computed({
     </div>
   </v-container>
 </template>
+
+<style>
+.categoryBtn {
+  opacity: initial; /* Prevent button from greying out as it gets disabled, as it also doubles as header. */
+  justify-content: left;
+}
+</style>