Add gallery view to search pages (#773)

pages/settings/follows.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="$user.follows.length > 0">
+  <div v-if="$user.follows.length > 0" class="project-list display-mode--list">
     <ProjectCard
       v-for="project in $user.follows"
       :id="project.id"

pages/settings/index.vue

@@ -59,6 +59,32 @@
         />
       </div>
     </section>
+    <section class="universal-card">
+      <h2>Project list display mode</h2>
+      <div
+        v-for="projectType in listTypes"
+        :key="projectType.id + '-display-mode-selector'"
+        class="adjacent-input small"
+      >
+        <label :for="projectType.id + '-search-display-mode'">
+          <span class="label__title">{{ projectType.name }} display mode</span>
+          <span class="label__description"
+            >Change the display view for {{ projectType.display }}.</span
+          >
+        </label>
+        <Multiselect
+          :id="projectType + '-search-display-mode'"
+          :value="searchDisplayMode[projectType.id]"
+          :options="$tag.projectViewModes"
+          :custom-label="$capitalizeString"
+          :searchable="false"
+          :close-on-select="true"
+          :show-labels="false"
+          :allow-empty="false"
+          @input="(value) => setSearchDisplayMode(projectType.id, value)"
+        />
+      </div>
+    </section>
     <section class="universal-card">
       <h2>Feature flags</h2>
       <div class="adjacent-input small">
@@ -129,25 +155,46 @@ export default {
       modpacksAlphaNotice: true,
       advancedRendering: true,
       externalLinksNewTab: true,
+      searchDisplayMode: {
+        mod: 'list',
+        plugin: 'list',
+        resourcepack: 'gallery',
+        modpack: 'list',
+        user: 'list',
+      },
     }
   },
   fetch() {
-    this.searchLayout =
-      this.$store.state.cosmetics.searchLayout ?? this.searchLayout
-    this.projectLayout =
-      this.$store.state.cosmetics.projectLayout ?? this.projectLayout
-    this.modpacksAlphaNotice =
-      this.$store.state.cosmetics.modpacksAlphaNotice ??
-      this.modpacksAlphaNotice
-    this.advancedRendering =
-      this.$store.state.cosmetics.advancedRendering ?? this.advancedRendering
-    this.externalLinksNewTab =
-      this.$store.state.cosmetics.externalLinksNewTab ??
-      this.externalLinksNewTab
+    this.searchLayout = this.$store.state.cosmetics.searchLayout
+    this.projectLayout = this.$store.state.cosmetics.projectLayout
+    this.modpacksAlphaNotice = this.$store.state.cosmetics.modpacksAlphaNotice
+    this.advancedRendering = this.$store.state.cosmetics.advancedRendering
+    this.externalLinksNewTab = this.$store.state.cosmetics.externalLinksNewTab
+    this.searchDisplayMode = this.$store.state.cosmetics.searchDisplayMode
   },
   head: {
     title: 'Display settings - Modrinth',
   },
+  computed: {
+    listTypes() {
+      const types = this.$tag.projectTypes.map((type) => {
+        return {
+          id: type.id,
+          name: this.$formatProjectType(type.id) + ' search',
+          display:
+            'the ' +
+            this.$formatProjectType(type.id).toLowerCase() +
+            's search page',
+        }
+      })
+      types.push({
+        id: 'user',
+        name: 'User page',
+        display: 'user pages',
+      })
+      return types
+    },
+  },
   methods: {
     async saveCosmeticSettings() {
       await this.$store.dispatch('cosmetics/save', {
@@ -156,9 +203,18 @@ export default {
         modpacksAlphaNotice: this.modpacksAlphaNotice,
         advancedRendering: this.advancedRendering,
         externalLinksNewTab: this.externalLinksNewTab,
+        searchDisplayMode: this.searchDisplayMode,
         $cookies: this.$cookies,
       })
     },
+    async setSearchDisplayMode(projectType, value) {
+      await this.$store.dispatch('cosmetics/saveSearchDisplayMode', {
+        projectType,
+        mode: value,
+        $cookies: this.$cookies,
+      })
+      this.searchDisplayMode = this.$store.state.cosmetics.searchDisplayMode
+    },
     changeTheme() {
       const shift = event.shiftKey
       switch (this.$colorMode.preference) {