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/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 {