Project, Search, User redesign (#1281)

* New project page

* fix silly icon tailwind classes

* Start new versions page, add new ButtonStyled component

* Pagination and finish mocking up versions page functionality

* green download button

* hover animation

* New Modal, Avatar refactor, subpages in NavTabs

* lint

* Download modal

* New user page + fix lint

* fix ui lint

* Download animation fix

* Versions filter + finish project page

* Improve consistency of buttons on home page

* Fix ButtonStyled breaking

* Fix margin on version summary

* finish search, new modals, user + project page mobile

* fix gallery image pages

* New project header

* Fix gallery tab showing improperly

* Use auto direction + position for all popouts

* Preliminary user page

* test to see if this fixes login stuff

* remove extra slash

* Add version actions, move download button on versions page

* Listed -> public

* Shorten download modal selector height

* Fix user menu open direction

* Change breakpoint for header collapse

* Only underline title

* Tighten padding on stats a little

* New nav

* Make mobile breakpoint more consistent

* fix header breakpoint regression

* Add sign in button

* Fix edit icon color

* Fix margin at top of screen

* Fix user bios and ad width

* Fix user nav showing when there's only one type of project

* Fix plural projects on user page & extract i18n

* Remove ads on mobile for now

* Fix overflow menu showing hidden items

* NavTabs on mobile

* Fix navbar z index

* Search filter overhaul + negative filters

* fix no-max-height

* port version filters, fix following/collections, lint

* hide promos

* ui lint

* Disable modal background animation to reduce reported motion sickness

* Hide install with modrinth app button on mobile

---------

Signed-off-by: Geometrically <18202329+Geometrically@users.noreply.github.com>
Co-authored-by: Prospector <prospectordev@gmail.com>

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

@@ -8,8 +8,12 @@
   >
     <slot></slot>
     <template #menu>
-      <template v-for="(option, index) in options">
-        <div v-if="option.divider" :key="`divider-${index}`" class="card-divider"></div>
+      <template v-for="(option, index) in options.filter((x) => x.shown === undefined || x.shown)">
+        <div
+          v-if="option.divider"
+          :key="`divider-${index}`"
+          class="h-px mx-3 my-2 bg-button-bg"
+        ></div>
         <Button
           v-else
           :key="`option-${option.id}`"
@@ -19,8 +23,8 @@
           transparent
           :action="
             option.action
-              ? () => {
-                  option.action()
+              ? (event) => {
+                  option.action(event)
                   if (!option.remainOnClick) {
                     close()
                   }
@@ -45,29 +49,56 @@
   </PopoutMenu>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref } from 'vue'
 import Button from './Button.vue'
 import PopoutMenu from './PopoutMenu.vue'
 
-defineProps({
-  options: {
-    type: Array,
-    required: true,
+interface BaseOption {
+  shown?: boolean
+}
+
+interface Divider extends BaseOption {
+  divider?: boolean
+}
+
+interface Item extends BaseOption {
+  id: string
+  action?: () => void
+  link?: string
+  external?: boolean
+  color?:
+    | 'primary'
+    | 'danger'
+    | 'secondary'
+    | 'highlight'
+    | 'red'
+    | 'orange'
+    | 'green'
+    | 'blue'
+    | 'purple'
+  hoverFilled?: boolean
+  hoverFilledOnly?: boolean
+  remainOnClick?: boolean
+}
+
+type Option = Divider | Item
+
+const props = withDefaults(
+  defineProps<{
+    options: Option[]
+    disabled?: boolean
+    position?: string
+    direction?: string
+  }>(),
+  {
+    options: () => [],
+    disabled: false,
+    position: 'auto',
+    direction: 'auto',
   },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  position: {
-    type: String,
-    default: 'bottom',
-  },
-  direction: {
-    type: String,
-    default: 'left',
-  },
-})
+)
+
 defineOptions({
   inheritAttrs: false,
 })