Knossos Catch-up (#58)

* Knossos Catch-up

* bump version

* fix build

* fix build again

* Fix lint

* downgrade pnpm

* fix modals

* fix btn style

* add missing styles

lib/components/base/Avatar.vue

@@ -2,10 +2,13 @@
   <img
     v-if="src"
     ref="img"
-    :class="`avatar size-${size} ${circle ? 'circle' : ''} ${noShadow ? 'no-shadow' : ''}`"
+    :class="`avatar size-${size} ${circle ? 'circle' : ''} ${noShadow ? 'no-shadow' : ''} ${
+      pixelated ? 'pixelated' : ''
+    }`"
     :src="src"
     :alt="alt"
     :loading="loading"
+    @load="updatePixelated"
   />
   <svg
     v-else
@@ -60,21 +63,20 @@ export default {
       default: 'eager',
     },
   },
-  mounted() {
-    if (this.$refs.img && this.$refs.img.naturalWidth) {
-      const isPixelated = () => {
-        if (this.$refs.img.naturalWidth < 96 && this.$refs.img.naturalWidth > 0) {
-          this.$refs.img.style.imageRendering = 'pixelated'
-        }
-      }
-
-      if (this.$refs.img.naturalWidth) {
-        isPixelated()
-      } else {
-        this.$refs.img.onload = isPixelated
-      }
+  data() {
+    return {
+      pixelated: false,
     }
   },
+  methods: {
+    updatePixelated() {
+      if (this.$refs.img && this.$refs.img.naturalWidth && this.$refs.img.naturalWidth <= 96) {
+        this.pixelated = true
+      } else {
+        this.pixelated = false
+      }
+    },
+  },
 }
 </script>
 
@@ -122,5 +124,9 @@ export default {
   &.no-shadow {
     box-shadow: none;
   }
+
+  &.pixelated {
+    image-rendering: pixelated;
+  }
 }
 </style>

lib/components/base/Badge.vue

@@ -91,6 +91,7 @@ defineProps({
 
   &.type--accepted,
   &.type--admin,
+  &.type--success,
   &.green {
     --badge-color: var(--color-green);
   }
@@ -98,12 +99,12 @@ defineProps({
   &.type--creator,
   &.type--approved,
   &.blue {
-    color: var(--color-blue);
+    --badge-color: var(--color-blue);
   }
 
   &.type--unlisted,
   &.purple {
-    color: var(--color-purple);
+    --badge-color: var(--color-purple);
   }
 
   &.type--private,

lib/components/base/Breadcrumbs.vue

@@ -0,0 +1,51 @@
+<template>
+  <nav class="breadcrumbs">
+    <template v-for="(link, index) in linkStack" :key="index">
+      <RouterLink
+        :to="link.href"
+        class="breadcrumb goto-link"
+        :class="{ trim: link.allowTrimming ? link.allowTrimming : false }"
+      >
+        {{ link.label }}
+      </RouterLink>
+      <ChevronRightIcon />
+    </template>
+    <span class="breadcrumb">{{ currentTitle }}</span>
+  </nav>
+</template>
+
+<script setup>
+import { ChevronRightIcon } from '@/components'
+defineProps({
+  linkStack: {
+    type: Array,
+    default: () => [],
+  },
+  currentTitle: {
+    type: String,
+    required: true,
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.breadcrumbs {
+  display: flex;
+  margin-bottom: var(--gap-lg);
+  align-items: center;
+  flex-wrap: wrap;
+
+  svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  a.breadcrumb {
+    padding-block: var(--gap-xs);
+    &.trim {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
+</style>

lib/components/base/FileInput.vue

@@ -2,7 +2,13 @@
   <label :class="{ 'long-style': longStyle }" @drop.prevent="handleDrop" @dragover.prevent>
     <slot />
     {{ prompt }}
-    <input type="file" :multiple="multiple" :accept="accept" @change="handleChange" />
+    <input
+      type="file"
+      :multiple="multiple"
+      :accept="accept"
+      :disabled="disabled"
+      @change="handleChange"
+    />
   </label>
 </template>
 
@@ -42,6 +48,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ['change'],
   data() {

lib/components/base/Modal.vue

@@ -1,58 +1,66 @@
 <template>
-  <div>
+  <div v-if="shown">
     <div
       :class="{
-        shown: shown,
-        noblur: noblur,
+        shown: actuallyShown,
+        noblur: props.noblur,
       }"
       class="modal-overlay"
       @click="hide"
     />
-    <div class="modal-body" :class="{ shown: shown }">
-      <div v-if="header" class="header">
-        <h1>{{ header }}</h1>
-        <button class="btn icon-only transparent" @click="hide">
-          <XIcon />
-        </button>
-      </div>
-      <div class="content">
-        <slot />
+    <div class="modal-container" :class="{ shown: actuallyShown }">
+      <div class="modal-body">
+        <div v-if="props.header" class="header">
+          <h1>{{ props.header }}</h1>
+          <button class="btn icon-only transparent" @click="hide">
+            <XIcon />
+          </button>
+        </div>
+        <div class="content">
+          <slot />
+        </div>
       </div>
     </div>
   </div>
+  <div v-else></div>
 </template>
 
 <script setup>
 import { XIcon } from '@/components'
-</script>
-<script>
-import { defineComponent } from 'vue'
+import { ref } from 'vue'
 
-export default defineComponent({
-  props: {
-    header: {
-      type: String,
-      default: null,
-    },
-    noblur: {
-      type: Boolean,
-      default: false,
-    },
+const props = defineProps({
+  header: {
+    type: String,
+    default: null,
   },
-  data() {
-    return {
-      shown: false,
-    }
-  },
-  methods: {
-    show() {
-      this.shown = true
-    },
-    hide() {
-      this.shown = false
-    },
+  noblur: {
+    type: Boolean,
+    default: false,
   },
 })
+
+const shown = ref(false)
+const actuallyShown = ref(false)
+
+function show() {
+  shown.value = true
+  setTimeout(() => {
+    actuallyShown.value = true
+  }, 50)
+}
+
+function hide() {
+  actuallyShown.value = false
+  setTimeout(() => {
+    shown.value = false
+  }, 300)
+}
+
+defineExpose({
+  show,
+  hide,
+})
 </script>
 
 <style lang="scss" scoped>
@@ -64,7 +72,6 @@ export default defineComponent({
   width: 100%;
   height: 100%;
   z-index: 20;
-
   transition: all 0.3s ease-in-out;
 
   &.shown {
@@ -79,48 +86,62 @@ export default defineComponent({
   }
 }
 
-.modal-body {
+.modal-container {
   position: fixed;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   z-index: 21;
-  box-shadow: var(--shadow-raised), var(--shadow-inset);
-  border-radius: var(--radius-lg);
-  max-height: calc(100% - 2 * var(--gap-lg));
-  overflow-y: auto;
-  width: 600px;
+  visibility: hidden;
+  pointer-events: none;
 
-  .header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background-color: var(--color-bg);
-    padding: var(--gap-md) var(--gap-lg);
-
-    h1 {
-      font-size: 1.25rem;
-      color: var(--color-contrast);
-      font-weight: bolder;
+  &.shown {
+    visibility: visible;
+    .modal-body {
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0);
     }
   }
 
-  .content {
-    background-color: var(--color-raised-bg);
-  }
+  .modal-body {
+    position: fixed;
+    box-shadow: var(--shadow-raised), var(--shadow-inset);
+    border-radius: var(--radius-lg);
+    max-height: calc(100% - 2 * var(--gap-lg));
+    overflow-y: auto;
+    width: 600px;
+    pointer-events: auto;
 
-  top: calc(100% + 400px);
-  visibility: hidden;
-  opacity: 0;
-  transition: all 0.25s ease-in-out;
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      background-color: var(--color-bg);
+      padding: var(--gap-md) var(--gap-lg);
 
-  &.shown {
-    opacity: 1;
-    visibility: visible;
-    top: 50%;
-  }
+      h1 {
+        font-weight: bold;
+        font-size: 1.25rem;
+      }
+    }
 
-  @media screen and (max-width: 650px) {
-    width: calc(100% - 2 * var(--gap-lg));
+    .content {
+      background-color: var(--color-raised-bg);
+    }
+
+    transform: translateY(50vh);
+    visibility: hidden;
+    opacity: 0;
+    transition: all 0.25s ease-in-out;
+
+    @media screen and (max-width: 650px) {
+      width: calc(100% - 2 * var(--gap-lg));
+    }
   }
 }
 </style>

lib/components/base/ModalConfirm.vue

@@ -0,0 +1,122 @@
+<template>
+  <Modal ref="modal" :header="props.title">
+    <div class="modal-delete">
+      <div class="markdown-body" v-html="renderString(props.description)" />
+      <label v-if="props.hasToType" for="confirmation" class="confirmation-label">
+        <span>
+          <strong>To verify, type</strong>
+          <em class="confirmation-text">{{ props.confirmationText }}</em>
+          <strong>below:</strong>
+        </span>
+      </label>
+      <div class="confirmation-input">
+        <input
+          v-if="props.hasToType"
+          id="confirmation"
+          v-model="confirmation_typed"
+          type="text"
+          placeholder="Type here..."
+          @input="type"
+        />
+      </div>
+      <div class="input-group push-right">
+        <button class="btn" @click="modal.hide()">
+          <XIcon />
+          Cancel
+        </button>
+        <button class="btn btn-danger" :disabled="action_disabled" @click="proceed">
+          <TrashIcon />
+          {{ props.proceedLabel }}
+        </button>
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<script setup>
+import { renderString } from '@/helpers/parse'
+import { XIcon, TrashIcon, Modal } from '@/components'
+import { ref } from 'vue'
+
+const props = defineProps({
+  confirmationText: {
+    type: String,
+    default: '',
+  },
+  hasToType: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: 'No title defined',
+    required: true,
+  },
+  description: {
+    type: String,
+    default: 'No description defined',
+    required: true,
+  },
+  proceedLabel: {
+    type: String,
+    default: 'Proceed',
+  },
+})
+
+const emit = defineEmits(['proceed'])
+const modal = ref(null)
+
+const action_disabled = ref(props.hasToType)
+const confirmation_typed = ref('')
+
+function proceed() {
+  modal.value.hide()
+  emit('proceed')
+}
+
+function type() {
+  if (props.hasToType) {
+    action_disabled.value =
+      confirmation_typed.value.toLowerCase() !== props.confirmationText.toLowerCase()
+  }
+}
+
+function show() {
+  modal.value.show()
+}
+
+defineExpose({ show })
+</script>
+
+<style scoped lang="scss">
+.modal-delete {
+  padding: var(--gap-lg);
+  display: flex;
+  flex-direction: column;
+
+  .markdown-body {
+    margin-bottom: 1rem;
+  }
+
+  .confirmation-label {
+    margin-bottom: 0.5rem;
+  }
+
+  .confirmation-text {
+    padding-right: 0.25ch;
+    margin: 0 0.25rem;
+  }
+
+  .confirmation-input {
+    input {
+      width: 20rem;
+      max-width: 100%;
+    }
+  }
+
+  .button-group {
+    margin-left: auto;
+    margin-top: 1.5rem;
+  }
+}
+</style>

lib/components/base/ModalReport.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal ref="modal" :header="`Report ${itemType}`">
+  <Modal ref="modal" :header="`Report ${props.itemType}`">
     <div class="modal-report">
       <div class="markdown-body">
         <p>
@@ -10,7 +10,7 @@
           <router-link to="/legal/rules">Rules</router-link>
           . Rest assured, we’ll keep your identifying information private.
         </p>
-        <p v-if="itemType === 'project' || itemType === 'version'">
+        <p v-if="props.itemType === 'project' || props.itemType === 'version'">
           Please <strong>do not</strong> use this to report bugs with the project itself. This form
           is only for submitting a report to Modrinth staff. If the project has an Issues link or a
           Discord invite, consider reporting it there.
@@ -25,7 +25,7 @@
         <DropdownSelect
           id="report-type"
           v-model="reportType"
-          :options="reportTypes"
+          :options="props.reportTypes"
           default-value="Choose report type"
           class="multiselect"
         />
@@ -41,7 +41,7 @@
         </div>
         <div v-else class="preview" v-html="renderString(body)"></div>
       </div>
-      <div class="button-group">
+      <div class="input-group push-right">
         <Button @click="cancel">
           <XIcon />
           Cancel
@@ -59,52 +59,46 @@ import { Modal, Chips, XIcon, CheckIcon, DropdownSelect } from '@/components'
 import { renderString } from '@/helpers/parse.js'
 import { ref } from 'vue'
 
-const modal = ref('modal')
-defineExpose({
-  modal: modal,
+const props = defineProps({
+  itemType: {
+    type: String,
+    default: '',
+  },
+  itemId: {
+    type: String,
+    default: '',
+  },
+  reportTypes: {
+    type: Array,
+    default: () => [],
+  },
+  submitReport: {
+    type: Function,
+    default: () => {},
+  },
 })
-</script>
-<script>
-export default {
-  props: {
-    itemType: {
-      type: String,
-      default: '',
-    },
-    itemId: {
-      type: String,
-      default: '',
-    },
-    reportTypes: {
-      type: Array,
-      default: () => [],
-    },
-    submitReport: {
-      type: Function,
-      default: () => {},
-    },
-  },
-  data() {
-    return {
-      reportType: '',
-      body: '',
-      bodyViewType: 'source',
-    }
-  },
-  methods: {
-    renderString,
-    cancel() {
-      this.reportType = ''
-      this.body = ''
-      this.bodyViewType = 'source'
 
-      this.$refs.modal.hide()
-    },
-    show() {
-      this.$refs.modal.show()
-    },
-  },
+const reportType = ref('')
+const body = ref('')
+const bodyViewType = ref('source')
+
+const modal = ref(null)
+
+function cancel() {
+  reportType.value = ''
+  body.value = ''
+  bodyViewType.value = 'source'
+
+  modal.value.hide()
 }
+
+function show() {
+  modal.value.show()
+}
+
+defineExpose({
+  show,
+})
 </script>
 
 <style scoped lang="scss">
@@ -126,13 +120,6 @@ export default {
   margin-bottom: 0.5rem;
 }
 
-.button-group {
-  margin-left: auto;
-  display: flex;
-  grid-gap: 0.5rem;
-  flex-wrap: wrap;
-}
-
 .text-input {
   height: 12rem;
   gap: 1rem;