New gallery creation/editing/deleting UI (#826)

* New gallery creation/editing/deleting UI

* Finish new gallery UI

* port dp changes here

* Add ordering fix optional fields

* Fix dropping

* Fix fmt

* Fix version creation broken, edit issues, project type setting

* Update gallery in search

components/ui/DropArea.vue

@@ -6,7 +6,7 @@
       (event) => {
         $refs.drop_area.style.visibility = 'hidden'
 
-        if (event.dataTransfer && event.dataTransfer.files) {
+        if (event.dataTransfer && event.dataTransfer.files && fileAllowed) {
           $emit('change', event.dataTransfer.files)
         }
       }
@@ -26,30 +26,40 @@ export default {
       default: '',
     },
   },
-  mounted() {
-    // eslint-disable-next-line nuxt/no-env-in-hooks
-    if (process.client) {
-      document.addEventListener('dragenter', () => {
-        this.$refs.drop_area.style.visibility = 'visible'
-      })
+  data() {
+    return {
+      fileAllowed: false,
     }
   },
+  mounted() {
+    document.addEventListener('dragenter', this.allowDrag)
+  },
   methods: {
     allowDrag(event) {
       const file = event.dataTransfer?.items[0]
 
+      console.log(file)
       if (
         file &&
         this.accept
           .split(',')
           .reduce(
-            (acc, t) => acc || file.type.startsWith(t) || file.type === t,
+            (acc, t) =>
+              acc || file.type.startsWith(t) || file.type === t || t === '*',
             false
           )
       ) {
-        // Adds file dropping indicator
+        this.fileAllowed = true
         event.dataTransfer.dropEffect = 'copy'
         event.preventDefault()
+
+        if (this.$refs.drop_area)
+          this.$refs.drop_area.style.visibility = 'visible'
+      } else {
+        this.fileAllowed = false
+
+        if (this.$refs.drop_area)
+          this.$refs.drop_area.style.visibility = 'hidden'
       }
     },
   },

components/ui/ModalCreation.vue

@@ -206,7 +206,14 @@ Questions? [Join the Modrinth Discord for support!](https://discord.gg/EUHuJHt)`
         })
 
         this.$refs.modal.hide()
-        await this.$router.replace(`/${projectType.actual}/${this.slug}`)
+        await this.$router.push({
+          name: 'type-id',
+          params: {
+            type: projectType.id,
+            id: this.slug,
+            overrideProjectType: projectType.id,
+          },
+        })
       } catch (err) {
         this.$notify({
           group: 'main',

components/ui/ProjectCard.vue

@@ -15,12 +15,9 @@
       class="gallery"
       tabindex="-1"
       :to="`/${$getProjectTypeForUrl(type, categories)}/${id}`"
+      :style="color ? `background-color: ${toColor};` : ''"
     >
-      <img
-        v-if="galleryImages.length > 0"
-        :src="galleryImages[0]"
-        alt="Gallery image TODO: improve this lol"
-      />
+      <img v-if="featuredImage" :src="featuredImage" alt="gallery image" />
     </nuxt-link>
     <div class="title">
       <nuxt-link :to="`/${$getProjectTypeForUrl(type, categories)}/${id}`">
@@ -99,6 +96,14 @@
           <ServerIcon aria-hidden="true" />
           Server
         </template>
+        <template
+          v-else-if="
+            serverSide === 'unsupported' && clientSide === 'unsupported'
+          "
+        >
+          <GlobeIcon aria-hidden="true" />
+          Unsupported
+        </template>
         <template v-else-if="moderation">
           <InfoIcon aria-hidden="true" />
           A {{ projectTypeDisplay }}
@@ -258,12 +263,10 @@ export default {
       required: false,
       default: false,
     },
-    galleryImages: {
-      type: Array,
+    featuredImage: {
+      type: String,
       required: false,
-      default() {
-        return []
-      },
+      default: null,
     },
     showUpdatedDate: {
       type: Boolean,
@@ -275,11 +278,25 @@ export default {
       required: false,
       default: false,
     },
+    color: {
+      type: Number,
+      required: false,
+      default: null,
+    },
   },
   computed: {
     projectTypeDisplay() {
       return this.$getProjectTypeForDisplay(this.type, this.categories)
     },
+    toColor() {
+      let color = this.color
+
+      color >>>= 0
+      const b = color & 0xff
+      const g = (color & 0xff00) >>> 8
+      const r = (color & 0xff0000) >>> 16
+      return 'rgba(' + [r, g, b, 1].join(',') + ')'
+    },
   },
 }
 </script>
@@ -338,7 +355,10 @@ export default {
     height: 10rem;
     background-color: var(--color-button-bg-active);
 
+    filter: brightness(0.7);
+
     img {
+      box-shadow: none;
       width: 100%;
       height: 10rem;
       object-fit: cover;
@@ -349,6 +369,13 @@ export default {
     margin-left: var(--spacing-card-bg);
     margin-top: -3rem;
     z-index: 1;
+
+    img,
+    svg {
+      border-radius: var(--size-rounded-lg);
+      border: 0.25rem solid var(--color-raised-bg);
+      border-bottom: none;
+    }
   }
 
   .title {