New collections (#1484)

* [WIP] Transfer collections to own branch

* fixes

* rewrite js

* Add visibility dropdown to collection edit modal

* Add visibility badges to collection page

* Update visibility options and icons in collection
page

* Add delete functionality to collection modal

* Collection project deletion flow

* remove "visit project" button on overflow

* Remove via checklist not individually

* Update manage title in settings.vue

* remove collections from settings page

* hook up collections page

* collection header to look like project header

* Refactor layout.scss and collections.vue

* fix omorphia

* Update

* Conform collections to old design structure

* Update navigation links and remove unused code

* Add collection view and collections to user page

* Refactor user project display logic

* Add collection creation functionality and update profile labels

* Add function calls to initialize user collections

* Refactor collection page layout and functionality

* Add initialization of user collections in create function

* Fix styling issue in collection page

* Update collection status to private

* remove name

* Refactor card component and update grid layout

* Finish collections

---------

Co-authored-by: Carter <safe@fea.st>

components/ui/CollectionCreateModal.vue

@@ -0,0 +1,118 @@
+<template>
+  <Modal ref="modal" header="Create a collection">
+    <div class="universal-modal modal-creation universal-labels">
+      <div class="markdown-body">
+        <p>
+          Your new collection will be created as a public collection with
+          {{ projectIds.length > 0 ? projectIds.length : 'no' }}
+          {{ projectIds.length !== 1 ? 'projects' : 'project' }}.
+        </p>
+      </div>
+      <label for="name">
+        <span class="label__title">Name<span class="required">*</span></span>
+      </label>
+      <input
+        id="name"
+        v-model="name"
+        type="text"
+        maxlength="64"
+        :placeholder="`Enter collection name...`"
+        autocomplete="off"
+      />
+      <label for="additional-information">
+        <span class="label__title">Summary<span class="required">*</span></span>
+        <span class="label__description">This appears on your collection's page.</span>
+      </label>
+      <div class="textarea-wrapper">
+        <textarea id="additional-information" v-model="description" maxlength="256" />
+      </div>
+      <div class="push-right input-group">
+        <Button @click="modal.hide()">
+          <CrossIcon />
+          Cancel
+        </Button>
+        <Button color="primary" @click="create">
+          <CheckIcon />
+          Continue
+        </Button>
+      </div>
+    </div>
+  </Modal>
+</template>
+<script setup>
+import { XIcon as CrossIcon, CheckIcon, Modal, Button } from 'omorphia'
+
+const router = useRouter()
+
+const name = ref('')
+const description = ref('')
+
+const modal = ref()
+
+const props = defineProps({
+  projectIds: {
+    type: Array,
+    default() {
+      return []
+    },
+  },
+})
+
+async function create() {
+  startLoading()
+  try {
+    const result = await useBaseFetch('collection', {
+      method: 'POST',
+      body: {
+        name: name.value.trim(),
+        description: description.value.trim(),
+        projects: props.projectIds,
+      },
+      apiVersion: 3,
+    })
+
+    await initUserCollections()
+
+    modal.value.hide()
+    await router.push(`/collection/${result.id}`)
+  } catch (err) {
+    addNotification({
+      group: 'main',
+      title: 'An error occurred',
+      text: err?.data?.description || err?.message || err,
+      type: 'error',
+    })
+  }
+  stopLoading()
+}
+function show() {
+  name.value = ''
+  description.value = ''
+  modal.value.show()
+}
+
+defineExpose({
+  show,
+})
+</script>
+
+<style scoped lang="scss">
+.modal-creation {
+  input {
+    width: 20rem;
+    max-width: 100%;
+  }
+
+  .text-input-wrapper {
+    width: 100%;
+  }
+
+  textarea {
+    min-height: 5rem;
+  }
+
+  .input-group {
+    margin-top: var(--gap-md);
+  }
+}
+</style>

components/ui/Modal.vue

@@ -11,7 +11,7 @@
     <div class="modal-container" :class="{ shown: actuallyShown }">
       <div class="modal-body">
         <div v-if="header" class="header">
-          <h1>{{ header }}</h1>
+          <strong>{{ header }}</strong>
           <button class="iconified-button icon-only transparent" @click="hide">
             <CrossIcon />
           </button>
@@ -127,8 +127,9 @@ export default {
       background-color: var(--color-bg);
       padding: var(--spacing-card-md) var(--spacing-card-lg);
 
-      h1 {
+      strong {
         font-size: 1.25rem;
+        margin: 0.67em 0;
       }
     }
 

components/ui/NotificationItem.vue

@@ -361,8 +361,6 @@ async function performAction(notification, actionIndex) {
   try {
     await read()
 
-    await userDeleteNotification(notification.id)
-
     if (actionIndex !== null) {
       await useBaseFetch(`${notification.actions[actionIndex].action_route[1]}`, {
         method: notification.actions[actionIndex].action_route[0].toUpperCase(),

components/ui/ProjectCard.vue

@@ -77,7 +77,7 @@
         <span class="date-label">Updated </span>{{ fromNow(updatedAt) }}
       </div>
       <div
-        v-else
+        v-else-if="showCreatedDate"
         v-tooltip="$dayjs(createdAt).format('MMMM D, YYYY [at] h:mm A')"
         class="stat date"
       >
@@ -198,6 +198,11 @@ export default {
       required: false,
       default: true,
     },
+    showCreatedDate: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     hideLoaders: {
       type: Boolean,
       required: false,