New nav

.vscode/settings.json

@@ -1,4 +1,13 @@
 {
-    "prettier.endOfLine": "lf",
-    "editor.formatOnSave": true
-  }
+  "prettier.endOfLine": "lf",
+  "editor.formatOnSave": true,
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+  ],
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  }
+}

apps/frontend/src/pages/[type]/[id].vue

@@ -404,7 +404,7 @@
     >
       <div class="normal-page__header relative my-4">
         <div
-          class="grid grid-cols-1 gap-x-8 gap-y-6 border-0 border-b border-solid border-button-bg pb-6 lg:grid-cols-[1fr_auto]"
+          class="grid grid-cols-1 gap-x-8 gap-y-6 border-0 border-b border-solid border-button-bg pb-6 xl:grid-cols-[1fr_auto]"
         >
           <div class="flex gap-4">
             <Avatar :src="project.icon_url" :alt="project.title" size="96px" />
@@ -424,22 +424,22 @@
               </p>
               <div class="mt-auto flex flex-wrap gap-4">
                 <div
-                  class="flex items-center gap-2 border-0 border-r border-solid border-button-bg pr-4"
+                  class="flex items-center gap-3 border-0 border-r border-solid border-button-bg pr-4"
                 >
                   <DownloadIcon class="h-6 w-6 text-secondary" />
                   <span class="font-semibold">
                     {{ $formatNumber(project.downloads) }}
                   </span>
                 </div>
                 <div
-                  class="flex items-center gap-2 border-0 border-solid border-button-bg pr-4 md:border-r"
+                  class="flex items-center gap-3 border-0 border-solid border-button-bg pr-4 md:border-r"
                 >
                   <HeartIcon class="h-6 w-6 text-secondary" />
                   <span class="font-semibold">
                     {{ $formatNumber(project.followers) }}
                   </span>
                 </div>
-                <div class="hidden items-center gap-2 md:flex">
+                <div class="hidden items-center gap-3 md:flex">
                   <TagsIcon class="h-6 w-6 text-secondary" />
                   <div class="flex flex-wrap gap-2">
                     <div
@@ -524,7 +524,10 @@
                     <div v-else class="menu-text">
                       <p class="popout-text">No collections found.</p>
                     </div>
-                    <button class="btn collection-button" @click="$refs.modal_collection.show()">
+                    <button
+                      class="btn collection-button"
+                      @click="(event) => $refs.modal_collection.show(event)"
+                    >
                       <PlusIcon />
                       Create new collection
                     </button>
@@ -662,7 +665,6 @@ import {
   CopyrightIcon,
   DownloadIcon,
   ExternalIcon,
-  BoxIcon,
   EyeIcon,
   GameIcon,
   HeartIcon,

apps/frontend/src/pages/[type]/[id]/versions.vue

@@ -72,10 +72,10 @@
                   <VersionChannelIndicator :channel="version.version_type" />
                 </div>
               </div>
-              <div class="pointer-events-none relative z-[1] flex flex-col justify-center">
-                <div class="font-bold text-contrast group-hover:underline">
-                  {{ version.version_number }}
-                </div>
+              <div
+                class="pointer-events-none relative z-[1] flex flex-col justify-center group-hover:underline"
+              >
+                <div class="font-bold text-contrast">{{ version.version_number }}</div>
                 <div class="text-xs font-medium">{{ version.name }}</div>
               </div>
             </div>

apps/frontend/src/pages/dashboard/collections.vue

@@ -11,7 +11,7 @@
           <XIcon />
         </Button>
       </div>
-      <Button color="primary" @click="$refs.modal_creation.show()">
+      <Button color="primary" @click="(event) => $refs.modal_creation.show(event)">
         <PlusIcon /> {{ formatMessage(messages.createNewButton) }}
       </Button>
     </div>

apps/frontend/src/pages/dashboard/organizations.vue

@@ -76,8 +76,8 @@ if (error.value) {
   });
 }
 
-const openCreateOrgModal = () => {
-  createOrgModal.value?.show();
+const openCreateOrgModal = (event) => {
+  createOrgModal.value?.show(event);
 };
 </script>
 

apps/frontend/src/pages/user/[id].vue

@@ -5,7 +5,7 @@
     <div class="new-page sidebar">
       <div class="normal-page__header pt-4">
         <div
-          class="grid grid-cols-1 gap-x-8 gap-y-6 border-0 border-b border-solid border-button-bg pb-6 lg:grid-cols-[1fr_auto]"
+          class="grid grid-cols-1 gap-x-8 gap-y-6 border-0 border-b border-solid border-button-bg pb-6 xl:grid-cols-[1fr_auto]"
         >
           <div class="flex gap-4">
             <Avatar :src="user.avatar_url" :alt="user.username" size="96px" circle />
@@ -178,7 +178,10 @@
           <span v-if="auth.user && auth.user.id === user.id" class="preserve-lines text">
             <IntlFormatted :message-id="messages.profileNoCollectionsAuthLabel">
               <template #create-link="{ children }">
-                <a class="link" @click.prevent="$refs.modal_collection_creation.show()">
+                <a
+                  class="link"
+                  @click.prevent="(event) => $refs.modal_collection_creation.show(event)"
+                >
                   <component :is="() => children" />
                 </a>
               </template>

packages/assets/index.ts

@@ -29,13 +29,16 @@ import _YouTubeIcon from './icons/youtube.svg?component'
 // Icons
 import _AlignLeftIcon from './icons/align-left.svg?component'
 import _ArchiveIcon from './icons/archive.svg?component'
+import _ArrowBigUpDashIcon from './icons/arrow-big-up-dash.svg?component'
 import _AsteriskIcon from './icons/asterisk.svg?component'
 import _BellIcon from './icons/bell.svg?component'
 import _BellRingIcon from './icons/bell-ring.svg?component'
 import _BookIcon from './icons/book.svg?component'
 import _BookTextIcon from './icons/book-text.svg?component'
 import _BookmarkIcon from './icons/bookmark.svg?component'
 import _BoxIcon from './icons/box.svg?component'
+import _BoxImportIcon from './icons/box-import.svg?component'
+import _BracesIcon from './icons/braces.svg?component'
 import _CalendarIcon from './icons/calendar.svg?component'
 import _CardIcon from './icons/card.svg?component'
 import _ChartIcon from './icons/chart.svg?component'
@@ -49,6 +52,7 @@ import _ClientIcon from './icons/client.svg?component'
 import _ClipboardCopyIcon from './icons/clipboard-copy.svg?component'
 import _CodeIcon from './icons/code.svg?component'
 import _CoinsIcon from './icons/coins.svg?component'
+import _CollectionIcon from './icons/collection.svg?component'
 import _CompassIcon from './icons/compass.svg?component'
 import _ContractIcon from './icons/contract.svg?component'
 import _CopyIcon from './icons/copy.svg?component'
@@ -72,6 +76,7 @@ import _FolderSearchIcon from './icons/folder-search.svg?component'
 import _GapIcon from './icons/gap.svg?component'
 import _GameIcon from './icons/game.svg?component'
 import _GitHubIcon from './icons/github.svg?component'
+import _GlassesIcon from './icons/glasses.svg?component'
 import _GlobeIcon from './icons/globe.svg?component'
 import _GridIcon from './icons/grid.svg?component'
 import _HamburgerIcon from './icons/hamburger.svg?component'
@@ -103,6 +108,8 @@ import _MoreHorizontalIcon from './icons/more-horizontal.svg?component'
 import _MoreVerticalIcon from './icons/more-vertical.svg?component'
 import _NewspaperIcon from './icons/newspaper.svg?component'
 import _OmorphiaIcon from './icons/omorphia.svg?component'
+import _OrganizationIcon from './icons/organization.svg?component'
+import _PackageOpenIcon from './icons/package-open.svg?component'
 import _PaintBrushIcon from './icons/paintbrush.svg?component'
 import _PlayIcon from './icons/play.svg?component'
 import _PlusIcon from './icons/plus.svg?component'
@@ -146,6 +153,7 @@ import _UserXIcon from './icons/user-x.svg?component'
 import _UsersIcon from './icons/users.svg?component'
 import _VersionIcon from './icons/version.svg?component'
 import _WikiIcon from './icons/wiki.svg?component'
+import _WindowIcon from './icons/window.svg?component'
 import _WrenchIcon from './icons/wrench.svg?component'
 import _XIcon from './icons/x.svg?component'
 import _XCircleIcon from './icons/x-circle.svg?component'
@@ -190,13 +198,16 @@ export const WindowsIcon = _WindowsIcon
 export const YouTubeIcon = _YouTubeIcon
 export const AlignLeftIcon = _AlignLeftIcon
 export const ArchiveIcon = _ArchiveIcon
+export const ArrowBigUpDashIcon = _ArrowBigUpDashIcon
 export const AsteriskIcon = _AsteriskIcon
 export const BellIcon = _BellIcon
 export const BellRingIcon = _BellRingIcon
 export const BookIcon = _BookIcon
 export const BookTextIcon = _BookTextIcon
 export const BookmarkIcon = _BookmarkIcon
 export const BoxIcon = _BoxIcon
+export const BoxImportIcon = _BoxImportIcon
+export const BracesIcon = _BracesIcon
 export const CalendarIcon = _CalendarIcon
 export const ChartIcon = _ChartIcon
 export const CheckIcon = _CheckIcon
@@ -209,6 +220,7 @@ export const ClientIcon = _ClientIcon
 export const ClipboardCopyIcon = _ClipboardCopyIcon
 export const CodeIcon = _CodeIcon
 export const CoinsIcon = _CoinsIcon
+export const CollectionIcon = _CollectionIcon
 export const CompassIcon = _CompassIcon
 export const ContractIcon = _ContractIcon
 export const CopyIcon = _CopyIcon
@@ -233,6 +245,7 @@ export const FolderSearchIcon = _FolderSearchIcon
 export const GapIcon = _GapIcon
 export const GameIcon = _GameIcon
 export const GitHubIcon = _GitHubIcon
+export const GlassesIcon = _GlassesIcon
 export const GlobeIcon = _GlobeIcon
 export const GridIcon = _GridIcon
 export const HamburgerIcon = _HamburgerIcon
@@ -264,6 +277,8 @@ export const MoreHorizontalIcon = _MoreHorizontalIcon
 export const MoreVerticalIcon = _MoreVerticalIcon
 export const NewspaperIcon = _NewspaperIcon
 export const OmorphiaIcon = _OmorphiaIcon
+export const OrganizationIcon = _OrganizationIcon
+export const PackageOpenIcon = _PackageOpenIcon
 export const PaintBrushIcon = _PaintBrushIcon
 export const PlayIcon = _PlayIcon
 export const PlusIcon = _PlusIcon
@@ -306,6 +321,7 @@ export const UserXIcon = _UserXIcon
 export const UsersIcon = _UsersIcon
 export const VersionIcon = _VersionIcon
 export const WikiIcon = _WikiIcon
+export const WindowIcon = _WindowIcon
 export const WrenchIcon = _WrenchIcon
 export const XIcon = _XIcon
 export const XCircleIcon = _XCircleIcon

packages/ui/src/components/base/ButtonStyled.vue

@@ -206,5 +206,30 @@ const colorVariables = computed(() => {
   min-height: var(--_icon-size, 1rem);
 }
 
+.joined-buttons {
+  display: flex;
+  gap: 1px;
+
+  > .btn-wrapper:not(:first-child) {
+    :slotted(:is(button, a, .button-like):first-child),
+    :slotted(*) > :is(button, a, .button-like):first-child,
+    :slotted(*) > *:first-child > :is(button, a, .button-like):first-child,
+    :slotted(*) > *:first-child > *:first-child > :is(button, a, .button-like):first-child {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  > :not(:last-child) {
+    :slotted(:is(button, a, .button-like):first-child),
+    :slotted(*) > :is(button, a, .button-like):first-child,
+    :slotted(*) > *:first-child > :is(button, a, .button-like):first-child,
+    :slotted(*) > *:first-child > *:first-child > :is(button, a, .button-like):first-child {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+}
+
 /* guys, I know this is nuts, I know */
 </style>

packages/ui/src/components/base/DropdownSelect.vue

@@ -191,7 +191,7 @@ const isChildOfDropdown = (element) => {
 <style lang="scss" scoped>
 .animated-dropdown {
   width: 20rem;
-  min-height: 40px;
+  height: 40px;
   position: relative;
   display: inline-block;
 
@@ -267,6 +267,10 @@ const isChildOfDropdown = (element) => {
       cursor: pointer;
       user-select: none;
 
+      > label {
+        cursor: pointer;
+      }
+
       &:hover {
         filter: brightness(0.85);
         transition: filter 0.2s ease-in-out;

packages/ui/src/components/base/OverflowMenu.vue

@@ -23,8 +23,8 @@
           transparent
           :action="
             option.action
-              ? () => {
-                  option.action()
+              ? (event) => {
+                  option.action(event)
                   if (!option.remainOnClick) {
                     close()
                   }