Add gallery view to search pages (#773)

pages/user/_id.vue

@@ -164,23 +164,55 @@
               }),
             ]"
           />
-          <button
-            v-if="$auth.user && $auth.user.id === user.id"
-            class="iconified-button brand-button"
-            @click="$refs.modal_creation.show()"
-          >
-            <PlusIcon />
-            Create a project
-          </button>
+          <div class="input-group">
+            <NuxtLink
+              v-if="$auth.user && $auth.user.id === user.id"
+              class="iconified-button"
+              to="/dashboard/projects"
+            >
+              <SettingsIcon />
+              Manage projects
+            </NuxtLink>
+            <button
+              v-tooltip="
+                $capitalizeString($cosmetics.searchDisplayMode.user) + ' view'
+              "
+              :aria-label="
+                $capitalizeString($cosmetics.searchDisplayMode.user) + ' view'
+              "
+              class="square-button"
+              @click="cycleSearchDisplayMode()"
+            >
+              <GridIcon v-if="$cosmetics.searchDisplayMode.user === 'grid'" />
+              <ImageIcon
+                v-else-if="$cosmetics.searchDisplayMode.user === 'gallery'"
+              />
+              <ListIcon v-else />
+            </button>
+          </div>
         </nav>
-        <div v-if="projects.length > 0">
+        <div
+          v-if="projects.length > 0"
+          class="project-list"
+          :class="'display-mode--' + $cosmetics.searchDisplayMode.user"
+        >
           <ProjectCard
-            v-for="project in $route.query.type !== undefined
+            v-for="project in ($route.query.type !== undefined
               ? projects.filter((x) => x.project_type === $route.query.type)
-              : projects"
+              : projects
+            )
+              .slice()
+              .sort((a, b) => b.downloads - a.downloads)"
             :id="project.slug || project.id"
             :key="project.id"
             :name="project.title"
+            :display="$cosmetics.searchDisplayMode.user"
+            :gallery-images="
+              project.gallery
+                .slice()
+                .sort((a, b) => b.featured - a.featured)
+                .map((x) => x.url)
+            "
             :description="project.description"
             :created-at="project.published"
             :updated-at="project.updated"
@@ -200,18 +232,7 @@
             "
             :has-mod-message="project.moderator_message"
             :type="project.project_type"
-          >
-            <nuxt-link
-              v-if="$auth.user && $auth.user.id === user.id"
-              class="iconified-button"
-              :to="`/${project.project_type}/${
-                project.slug ? project.slug : project.id
-              }/settings`"
-            >
-              <SettingsIcon />
-              Settings
-            </nuxt-link>
-          </ProjectCard>
+          />
         </div>
         <div v-else class="error">
           <UpToDate class="icon" /><br />
@@ -239,13 +260,15 @@ import ReportIcon from '~/assets/images/utils/report.svg?inline'
 import SunriseIcon from '~/assets/images/utils/sunrise.svg?inline'
 import DownloadIcon from '~/assets/images/utils/download.svg?inline'
 import SettingsIcon from '~/assets/images/utils/settings.svg?inline'
-import PlusIcon from '~/assets/images/utils/plus.svg?inline'
 import UpToDate from '~/assets/images/illustrations/up_to_date.svg?inline'
 import UserIcon from '~/assets/images/utils/user.svg?inline'
 import EditIcon from '~/assets/images/utils/edit.svg?inline'
 import HeartIcon from '~/assets/images/utils/heart.svg?inline'
 import CrossIcon from '~/assets/images/utils/x.svg?inline'
 import SaveIcon from '~/assets/images/utils/save.svg?inline'
+import GridIcon from '~/assets/images/utils/grid.svg?inline'
+import ListIcon from '~/assets/images/utils/list.svg?inline'
+import ImageIcon from '~/assets/images/utils/image.svg?inline'
 import FileInput from '~/components/ui/FileInput'
 import ModalReport from '~/components/ui/ModalReport'
 import ModalCreation from '~/components/ui/ModalCreation'
@@ -269,7 +292,6 @@ export default {
     ReportIcon,
     Badge,
     SettingsIcon,
-    PlusIcon,
     UpToDate,
     UserIcon,
     EditIcon,
@@ -277,6 +299,9 @@ export default {
     HeartIcon,
     CrossIcon,
     SaveIcon,
+    GridIcon,
+    ListIcon,
+    ImageIcon,
   },
   async asyncData(data) {
     try {
@@ -486,6 +511,15 @@ export default {
       }
       this.$nuxt.$loading.finish()
     },
+    async cycleSearchDisplayMode() {
+      const value = this.$cosmetics.searchDisplayMode.user
+      const newValue = this.$cycleValue(value, this.$tag.projectViewModes)
+      await this.$store.dispatch('cosmetics/saveSearchDisplayMode', {
+        projectType: 'user',
+        mode: newValue,
+        $cookies: this.$cookies,
+      })
+    },
   },
 }
 </script>
@@ -533,6 +567,7 @@ export default {
   justify-content: space-between;
   flex-wrap: wrap;
   row-gap: 0.5rem;
+  padding-right: var(--spacing-card-bg);
 }
 
 .sidebar {