From 0364be98d4eac162999b31b4851bd7a23ff0bb2e Mon Sep 17 00:00:00 2001
From: NoahCxrest <jxselinxe@gmail.com>
Date: Sat, 29 Mar 2025 20:47:59 -0600
Subject: [PATCH 01/13] sefs

---
 apps/frontend/nuxt.config.ts                  |   2 +-
 .../src/components/ui/ProjectCard.vue         |  28 +-
 .../src/components/ui/report/ReportView.vue   |   9 +-
 .../src/components/ui/user/UserHoverCard.vue  | 354 ++++++++++++++++++
 4 files changed, 387 insertions(+), 6 deletions(-)
 create mode 100644 apps/frontend/src/components/ui/user/UserHoverCard.vue

diff --git a/apps/frontend/nuxt.config.ts b/apps/frontend/nuxt.config.ts
index 354bff294c..cc20bf1565 100644
--- a/apps/frontend/nuxt.config.ts
+++ b/apps/frontend/nuxt.config.ts
@@ -8,7 +8,7 @@ import { globIterate } from "glob";
 import { match as matchLocale } from "@formatjs/intl-localematcher";
 import { consola } from "consola";
 
-const STAGING_API_URL = "https://staging-api.modrinth.com/v2/";
+const STAGING_API_URL = "https://api.modrinth.com/v2/";
 
 const preloadedFonts = [
   "inter/Inter-Regular.woff2",
diff --git a/apps/frontend/src/components/ui/ProjectCard.vue b/apps/frontend/src/components/ui/ProjectCard.vue
index 4a71f2ee3f..4c2754afda 100644
--- a/apps/frontend/src/components/ui/ProjectCard.vue
+++ b/apps/frontend/src/components/ui/ProjectCard.vue
@@ -25,9 +25,11 @@
       </nuxt-link>
       <p v-if="author" class="author">
         by
-        <nuxt-link class="title-link" :to="'/user/' + author">
-          {{ author }}
-        </nuxt-link>
+        <UserHoverCard :user-id="typeof author === 'object' ? author.id : author">
+          <nuxt-link :to="`/user/${typeof author === 'object' ? author.username : author}`">
+            {{ typeof author === 'object' ? author.username : author }}
+          </nuxt-link>
+        </UserHoverCard>
       </p>
       <Badge v-if="status && status !== 'approved'" :type="status" class="status" />
     </div>
@@ -95,6 +97,7 @@ import Categories from "~/components/ui/search/Categories.vue";
 import Badge from "~/components/ui/Badge.vue";
 import EnvironmentIndicator from "~/components/ui/EnvironmentIndicator.vue";
 import Avatar from "~/components/ui/Avatar.vue";
+import UserHoverCard from "~/components/ui/user/UserHoverCard.vue";
 
 export default {
   components: {
@@ -106,6 +109,7 @@ export default {
     UpdatedIcon,
     DownloadIcon,
     HeartIcon,
+    UserHoverCard,
   },
   props: {
     id: {
@@ -121,7 +125,7 @@ export default {
       default: "Project Name",
     },
     author: {
-      type: String,
+      type: [String, Object],
       default: null,
     },
     description: {
@@ -522,4 +526,20 @@ export default {
     }
   }
 }
+
+.author {
+  font-size: 0.9em;
+  color: var(--color-text-secondary);
+  font-weight: normal;
+  
+  a {
+    color: var(--color-link);
+    text-decoration: none;
+    
+    &:hover {
+      color: var(--color-link-hover);
+      text-decoration: underline;
+    }
+  }
+}
 </style>
diff --git a/apps/frontend/src/components/ui/report/ReportView.vue b/apps/frontend/src/components/ui/report/ReportView.vue
index ce3c2eb660..401d769334 100644
--- a/apps/frontend/src/components/ui/report/ReportView.vue
+++ b/apps/frontend/src/components/ui/report/ReportView.vue
@@ -7,7 +7,13 @@
         :link-stack="breadcrumbsStack"
       />
       <h2>Report details</h2>
-      <ReportInfo :report="report" :show-thread="false" :show-message="false" :auth="auth" />
+      <ReportInfo :report="report" :show-thread="false" :show-message="false" :auth="auth">
+        <template #reporter>
+          <UserHoverCard :user-id="report.reporter">
+            <span>{{ report.reporterUser.username }}</span>
+          </UserHoverCard>
+        </template>
+      </ReportInfo>
     </section>
     <section class="universal-card">
       <h2>Messages</h2>
@@ -24,6 +30,7 @@
 import Breadcrumbs from "~/components/ui/Breadcrumbs.vue";
 import ConversationThread from "~/components/ui/thread/ConversationThread.vue";
 import ReportInfo from "~/components/ui/report/ReportInfo.vue";
+import UserHoverCard from "~/components/ui/user/UserHoverCard.vue";
 import { addReportMessage } from "~/helpers/threads.js";
 
 const props = defineProps({
diff --git a/apps/frontend/src/components/ui/user/UserHoverCard.vue b/apps/frontend/src/components/ui/user/UserHoverCard.vue
new file mode 100644
index 0000000000..0de61859eb
--- /dev/null
+++ b/apps/frontend/src/components/ui/user/UserHoverCard.vue
@@ -0,0 +1,354 @@
+<template>
+  <span 
+    ref="triggerEl" 
+    class="user-hover-card-trigger" 
+    @mouseenter="startHover" 
+    @mouseleave="handleLeave"
+  >
+    <slot />
+  </span>
+  <Teleport to="body">
+    <Transition name="fade">
+      <div 
+        v-if="shown && userData?.username" 
+        ref="cardEl"
+        class="hover-content" 
+        :style="cardStyle"
+        @mouseenter="keepCard"
+        @mouseleave="handleLeave"
+      >
+        <div class="user-info">
+          <div class="user-header">
+            <nuxt-link :to="`/user/${userData.username}`" class="user-link">
+              <img
+                :src="userData.avatar_url"
+                :alt="`${userData.username}'s avatar`"
+                class="user-avatar"
+              />
+              <div>
+                <h3>{{ userData.username }}</h3>
+                <div class="user-joined">
+                  Joined {{ new Date(userData.created).toLocaleDateString() }}
+                </div>
+              </div>
+            </nuxt-link>
+          </div>
+          <div v-if="userData.bio" class="user-bio">
+            {{ userData.bio }}
+          </div>
+          <div class="user-stats">
+            <div>
+              <span class="stat-value">{{ userData.projects_count }}</span> projects
+            </div>
+          </div>
+          <div v-if="projects?.length" class="user-projects">
+            <div v-for="project in projects" :key="project.id" class="project-preview">
+              <img :src="project.icon_url" :alt="`${project.title} icon`" class="project-icon" />
+              <div class="project-info">
+                <nuxt-link 
+                  :to="`/${$getProjectTypeForUrl(project.project_type || project.type, project.categories)}/${project.slug || project.id}`" 
+                  class="project-title"
+                >
+                  {{ project.title }}
+                </nuxt-link>
+                <div class="project-stats">
+                  <span>{{ $formatNumber(project.downloads) }} downloads</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
+
+// Remove router import since we don't need it anymore
+
+const props = defineProps({
+  userId: { type: String, required: true }
+})
+
+const shown = ref(false)
+const userData = ref(null)
+const projects = ref([])
+const triggerEl = ref(null)
+const cardEl = ref(null)
+const cardStyle = ref({})
+
+let hoverTimeout = null
+let isHovering = false
+let isHoveringCard = false
+
+// Add delay before hiding to allow mouse movement to card
+let hideTimeout = null
+
+// Increase hide delay constant
+const HIDE_DELAY = 500
+
+function updatePosition() {
+  if (!triggerEl.value || !shown.value) return
+  
+  const rect = triggerEl.value.getBoundingClientRect()
+  const viewportHeight = window.innerHeight
+  const showAbove = rect.bottom > viewportHeight - 300 && rect.top > 300
+
+  const style = {
+    position: 'fixed',
+    left: `${rect.left}px`,
+    ...(showAbove 
+      ? { bottom: `${viewportHeight - rect.top + 8}px` }
+      : { top: `${rect.bottom + 8}px` }),
+    minWidth: '300px',
+    maxWidth: '400px',
+    maxHeight: '300px'
+  }
+  
+  Object.assign(cardStyle.value, style)
+}
+
+function handleScroll() {
+  // Immediate hide on scroll
+  hideCard()
+}
+
+function startHideCard() {
+  hideTimeout = setTimeout(() => {
+    if (!isHoveringCard && !isHovering) {
+      hideCard()
+    }
+  }, HIDE_DELAY)
+}
+
+function keepCard() {
+  isHoveringCard = true
+  if (hideTimeout) {
+    clearTimeout(hideTimeout)
+  }
+}
+
+function handleLeave() {
+  isHoveringCard = false
+  isHovering = false
+  startHideCard()
+}
+
+onMounted(() => {
+  window.addEventListener('scroll', handleScroll, { passive: true })
+  window.addEventListener('resize', handleScroll, { passive: true })
+})
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', handleScroll)
+  window.removeEventListener('resize', handleScroll)
+  clearTimeout(hoverTimeout)
+  if (hideTimeout) {
+    clearTimeout(hideTimeout)
+  }
+})
+
+async function startHover() {
+  if (hoverTimeout) return
+  
+  isHovering = true
+  hoverTimeout = setTimeout(async () => {
+    if (!isHovering) return
+
+    if (!userData.value) {
+      try {
+        const userResp = await useBaseFetch(`user/${props.userId}`)
+        const projectsResp = await useBaseFetch(`user/${props.userId}/projects`)
+        
+        userData.value = userResp || null
+        projects.value = (projectsResp || []).slice(0, 3)
+        
+        if (userData.value) {
+          userData.value.projects_count = projectsResp?.length || 0
+        }
+      } catch (err) {
+        console.error('Failed to load user data:', err)
+        return
+      }
+    }
+
+    if (isHovering) {
+      shown.value = true
+      nextTick(() => {
+        updatePosition()
+      })
+    }
+  }, 150) // 150ms delay before loading
+}
+
+function hideCard() {
+  shown.value = false
+  if (hoverTimeout) {
+    clearTimeout(hoverTimeout)
+    hoverTimeout = null
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+.user-hover-card-trigger {
+  position: relative;
+  color: inherit;
+  cursor: pointer;
+
+  a {
+    text-decoration: none;
+    
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.hover-content {
+  z-index: 9999;
+  position: fixed;
+  background: var(--color-raised-bg);
+  border: 1px solid var(--color-divider);
+  border-radius: var(--size-rounded-lg);
+  box-shadow: var(--shadow-card);
+  overflow-y: auto;
+  pointer-events: auto;
+}
+
+.loading-spinner {
+  display: inline-block;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 2px solid var(--color-text-secondary);
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.user-info {
+  padding: var(--spacing-card-md);
+}
+
+.user-header {
+  .user-link {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-card-sm);
+    color: inherit;
+    text-decoration: none;
+    
+    &:hover h3 {
+      color: var(--color-link);
+      text-decoration: underline;
+    }
+
+    h3 {
+      margin: 0;
+      line-height: 1.2;
+      transition: color 0.2s ease;
+    }
+  }
+}
+
+.user-avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+}
+
+.user-joined {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
+.user-bio {
+  margin-top: var(--spacing-card-sm);
+  font-size: var(--font-size-sm);
+}
+
+.user-stats {
+  margin-top: var(--spacing-card-sm);
+  display: flex;
+  gap: var(--spacing-card-md);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+
+  .stat-value {
+    font-weight: bold;
+    color: var(--color-text);
+  }
+}
+
+.loading {
+  padding: var(--spacing-card-md);
+}
+
+.user-projects {
+  margin-top: var(--spacing-card-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-card-sm);
+}
+
+.project-preview {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-card-sm);
+  padding: var(--spacing-card-sm);
+  border-radius: var(--size-rounded-sm);
+  background: var(--color-button-bg);
+  transition: background 0.2s ease;
+
+  &:hover {
+    background: var(--color-button-bg-hover);
+  }
+}
+
+.project-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--size-rounded-sm);
+}
+
+.project-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.project-title {
+  display: block;
+  font-weight: 500;
+  color: var(--color-text);
+  text-decoration: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &:hover {
+    color: var(--color-link);
+  }
+}
+
+.project-stats {
+  font-size: var(--font-size-sm);
+  color: var (--color-text-secondary);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.15s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

From 8a41e593c83bbec4bd2cd7f063709958f0285b5d Mon Sep 17 00:00:00 2001
From: NoahCxrest <jxselinxe@gmail.com>
Date: Sun, 30 Mar 2025 11:47:16 -0600
Subject: [PATCH 02/13] more stuffs

---
 .../src/components/ui/user/UserHoverCard.vue  | 77 ++++++++++---------
 .../src/pages/[type]/[id]/changelog.vue       |  9 ++-
 .../project/ProjectSidebarCreators.vue        | 29 ++++---
 3 files changed, 63 insertions(+), 52 deletions(-)

diff --git a/apps/frontend/src/components/ui/user/UserHoverCard.vue b/apps/frontend/src/components/ui/user/UserHoverCard.vue
index 0de61859eb..277a4229aa 100644
--- a/apps/frontend/src/components/ui/user/UserHoverCard.vue
+++ b/apps/frontend/src/components/ui/user/UserHoverCard.vue
@@ -201,9 +201,10 @@ function hideCard() {
 
   a {
     text-decoration: none;
+    transition: color 0.2s ease;
     
     &:hover {
-      text-decoration: underline;
+      color: var(--color-link);
     }
   }
 }
@@ -214,23 +215,10 @@ function hideCard() {
   background: var(--color-raised-bg);
   border: 1px solid var(--color-divider);
   border-radius: var(--size-rounded-lg);
-  box-shadow: var(--shadow-card);
+  box-shadow: var(--shadow-floating);
   overflow-y: auto;
   pointer-events: auto;
-}
-
-.loading-spinner {
-  display: inline-block;
-  width: 1.5rem;
-  height: 1.5rem;
-  border: 2px solid var(--color-text-secondary);
-  border-top-color: transparent;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
+  width: 320px;
 }
 
 .user-info {
@@ -244,14 +232,20 @@ function hideCard() {
     gap: var(--spacing-card-sm);
     color: inherit;
     text-decoration: none;
+    transition: opacity 0.2s ease;
     
-    &:hover h3 {
-      color: var(--color-link);
-      text-decoration: underline;
+    &:hover {
+      opacity: 0.8;
+
+      h3 {
+        color: var(--color-link);
+      }
     }
 
     h3 {
       margin: 0;
+      font-size: var(--font-size-lg);
+      font-weight: 600;
       line-height: 1.2;
       transition: color 0.2s ease;
     }
@@ -262,9 +256,11 @@ function hideCard() {
   width: 48px;
   height: 48px;
   border-radius: 50%;
+  box-shadow: var(--shadow-sm);
 }
 
 .user-joined {
+  margin-top: 2px;
   font-size: var(--font-size-sm);
   color: var(--color-text-secondary);
 }
@@ -272,83 +268,90 @@ function hideCard() {
 .user-bio {
   margin-top: var(--spacing-card-sm);
   font-size: var(--font-size-sm);
+  line-height: 1.5;
+  color: var(--color-text);
 }
 
 .user-stats {
   margin-top: var(--spacing-card-sm);
+  padding-top: var(--spacing-card-sm);
+  border-top: 1px solid var(--color-divider);
   display: flex;
   gap: var(--spacing-card-md);
   font-size: var(--font-size-sm);
   color: var(--color-text-secondary);
 
   .stat-value {
-    font-weight: bold;
+    font-weight: 600;
     color: var(--color-text);
   }
 }
 
-.loading {
-  padding: var(--spacing-card-md);
-}
-
 .user-projects {
-  margin-top: var(--spacing-card-md);
+  margin-top: var(--spacing-card-sm);
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-card-sm);
+  gap: var(--spacing-card-xs);
 }
 
 .project-preview {
   display: flex;
   align-items: center;
   gap: var(--spacing-card-sm);
-  padding: var(--spacing-card-sm);
-  border-radius: var(--size-rounded-sm);
+  padding: var(--spacing-card-xs);
+  border-radius: var(--size-rounded-md);
   background: var(--color-button-bg);
-  transition: background 0.2s ease;
+  transition: all 0.2s ease;
 
   &:hover {
     background: var(--color-button-bg-hover);
+    transform: translateY(-1px);
+    
+    .project-title {
+      color: var(--color-link);
+    }
   }
 }
 
 .project-icon {
-  width: 32px;
-  height: 32px;
+  width: 36px;
+  height: 36px;
   border-radius: var(--size-rounded-sm);
+  box-shadow: var(--shadow-sm);
 }
 
 .project-info {
   flex: 1;
   min-width: 0;
+  display: flex;
+  flex-direction: column;
 }
 
 .project-title {
   display: block;
   font-weight: 500;
+  font-size: var(--font-size-base);
   color: var(--color-text);
   text-decoration: none;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-
-  &:hover {
-    color: var(--color-link);
-  }
+  transition: color 0.2s ease;
 }
 
 .project-stats {
   font-size: var(--font-size-sm);
-  color: var (--color-text-secondary);
+  color: var(--color-text-secondary);
 }
 
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 0.15s ease;
+  transition: all 0.2s ease;
 }
 
 .fade-enter-from,
 .fade-leave-to {
   opacity: 0;
+  transform: translateY(-4px);
 }
 </style>
diff --git a/apps/frontend/src/pages/[type]/[id]/changelog.vue b/apps/frontend/src/pages/[type]/[id]/changelog.vue
index e6130fd9dc..64d84b6895 100644
--- a/apps/frontend/src/pages/[type]/[id]/changelog.vue
+++ b/apps/frontend/src/pages/[type]/[id]/changelog.vue
@@ -37,9 +37,11 @@
               </h2>
               <span v-if="version.author">
                 by
-                <nuxt-link class="text-link" :to="'/user/' + version.author.user.username">{{
-                  version.author.user.username
-                }}</nuxt-link>
+                <UserHoverCard :user-id="version.author.user.id">
+                  <nuxt-link class="text-link" :to="'/user/' + version.author.user.username">
+                    {{ version.author.user.username }}
+                  </nuxt-link>
+                </UserHoverCard>
               </span>
               <span>
                 on
@@ -75,6 +77,7 @@
 <script setup>
 import { Pagination } from "@modrinth/ui";
 import { DownloadIcon } from "@modrinth/assets";
+import UserHoverCard from "~/components/ui/user/UserHoverCard.vue";
 
 import VersionFilterControl from "@modrinth/ui/src/components/version/VersionFilterControl.vue";
 import { renderHighlightedString } from "~/helpers/highlight.js";
diff --git a/packages/ui/src/components/project/ProjectSidebarCreators.vue b/packages/ui/src/components/project/ProjectSidebarCreators.vue
index 9f158facb4..aec4356111 100644
--- a/packages/ui/src/components/project/ProjectSidebarCreators.vue
+++ b/packages/ui/src/components/project/ProjectSidebarCreators.vue
@@ -10,9 +10,11 @@
         >
           <Avatar :src="organization.icon_url" :alt="organization.name" size="32px" />
           <div class="flex flex-col flex-nowrap justify-center">
-            <span class="group-hover:underline">
-              {{ organization.name }}
-            </span>
+            <UserHoverCard :user-id="organization.id">
+              <span class="group-hover:underline">
+                {{ organization.name }}
+              </span>
+            </UserHoverCard>
             <span class="text-secondary text-sm font-medium flex items-center gap-1"
               ><OrganizationIcon /> Organization</span
             >
@@ -29,15 +31,17 @@
       >
         <Avatar :src="member.user.avatar_url" :alt="member.user.username" size="32px" circle />
         <div class="flex flex-col">
-          <span class="flex flex-row flex-nowrap items-center gap-1 group-hover:underline">
-            {{ member.user.username }}
-            <CrownIcon
-              v-if="member.is_owner"
-              v-tooltip="formatMessage(messages.owner)"
-              class="text-brand-orange"
-            />
-            <ExternalIcon v-if="linkTarget === '_blank'" />
-          </span>
+          <UserHoverCard :user-id="member.user.id">
+            <span class="flex flex-row flex-nowrap items-center gap-1 group-hover:underline">
+              {{ member.user.username }}
+              <CrownIcon
+                v-if="member.is_owner"
+                v-tooltip="formatMessage(messages.owner)"
+                class="text-brand-orange"
+              />
+              <ExternalIcon v-if="linkTarget === '_blank'" />
+            </span>
+          </UserHoverCard>
           <span class="text-secondary text-sm font-medium">{{ member.role }}</span>
         </div>
       </AutoLink>
@@ -49,6 +53,7 @@ import { CrownIcon, ExternalIcon, OrganizationIcon } from '@modrinth/assets'
 import { useVIntl, defineMessages } from '@vintl/vintl'
 import Avatar from '../base/Avatar.vue'
 import AutoLink from '../base/AutoLink.vue'
+import UserHoverCard from '@modrinth/frontend/src/components/ui/user/UserHoverCard.vue'
 import { computed } from 'vue'
 
 const { formatMessage } = useVIntl()

From c96c40761a0f08b1cb1142bd7717cd1103c98e53 Mon Sep 17 00:00:00 2001
From: NoahCxrest <jxselinxe@gmail.com>
Date: Sun, 30 Mar 2025 12:07:38 -0600
Subject: [PATCH 03/13] ext. link modal

---
 .../components/modal/ExternalLinkModal.vue    | 118 ++++++++++++++++++
 .../project/ProjectPageDescription.vue        |  37 +++++-
 2 files changed, 154 insertions(+), 1 deletion(-)
 create mode 100644 packages/ui/src/components/modal/ExternalLinkModal.vue

diff --git a/packages/ui/src/components/modal/ExternalLinkModal.vue b/packages/ui/src/components/modal/ExternalLinkModal.vue
new file mode 100644
index 0000000000..1fac79fa06
--- /dev/null
+++ b/packages/ui/src/components/modal/ExternalLinkModal.vue
@@ -0,0 +1,118 @@
+<template>
+  <NewModal ref="modal" danger>
+    <template #title>
+      <span class="flex items-center gap-2 text-lg font-extrabold text-contrast">
+        <ExternalIcon />
+        {{ formatMessage(messages.title) }}
+      </span>
+    </template>
+
+    <div class="flex flex-col gap-4 w-[450px]">
+      <Admonition type="warning" header="Please be careful">
+        {{ formatMessage(messages.warning) }}
+      </Admonition>
+
+      <div class="flex items-center gap-2 p-3 rounded-lg bg-bg text-contrast font-mono text-sm break-all">
+        <GlobeIcon class="flex-shrink-0 size-4" />
+        {{ targetUrl }}
+      </div>
+
+      <div class="flex justify-end gap-2">
+        <ButtonStyled>
+          <button @click="cancel">
+            <XIcon />
+            {{ formatMessage(messages.cancel) }}
+          </button>
+        </ButtonStyled>
+        <ButtonStyled color="brand">
+          <button @click="proceed">
+            <ExternalIcon />
+            {{ formatMessage(messages.proceed) }}
+          </button>
+        </ButtonStyled>
+      </div>
+    </div>
+  </NewModal>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import { NewModal, ButtonStyled, Admonition } from '@modrinth/ui'
+import { ExternalIcon, XIcon, GlobeIcon } from '@modrinth/assets'
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+  title: {
+    id: 'modal.external_link.title', 
+    defaultMessage: 'Leaving Modrinth',
+  },
+  warning: {
+    id: 'modal.external_link.warning',
+    defaultMessage: 'You are about to visit an external website. Please verify the link is from a trusted source before proceeding.',
+  },
+  proceed: {
+    id: 'modal.external_link.proceed',
+    defaultMessage: 'Continue to site',
+  },
+  cancel: {
+    id: 'modal.external_link.cancel',
+    defaultMessage: 'Cancel',
+  },
+})
+
+const modal = ref(null)
+const targetUrl = ref('')
+
+const show = (url) => {
+  targetUrl.value = url
+  modal.value?.show()
+  return new Promise((resolve) => {
+    proceedCallback = resolve
+  })
+}
+
+let proceedCallback = null
+
+const cancel = () => {
+  modal.value?.hide()
+  if (proceedCallback) {
+    proceedCallback(false)
+    proceedCallback = null
+  }
+}
+
+const proceed = () => {
+  modal.value?.hide()
+  if (proceedCallback) {
+    proceedCallback(true)
+    proceedCallback = null
+  }
+}
+
+defineExpose({ show })
+</script>
+
+<style lang="scss" scoped>
+.external-link-warning {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-card-md);
+  padding: var(--spacing-card-lg);
+  
+  .link-display {
+    padding: var(--spacing-card-sm);
+    background: var(--color-button-bg);
+    border-radius: var(--size-rounded-sm);
+    word-break: break-all;
+    font-family: monospace;
+  }
+
+  .button-group {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--spacing-card-sm);
+  }
+}
+</style>
diff --git a/packages/ui/src/components/project/ProjectPageDescription.vue b/packages/ui/src/components/project/ProjectPageDescription.vue
index 42b3bc00d4..6473c987e9 100644
--- a/packages/ui/src/components/project/ProjectPageDescription.vue
+++ b/packages/ui/src/components/project/ProjectPageDescription.vue
@@ -1,8 +1,43 @@
 <template>
-  <div class="markdown-body" v-html="renderHighlightedString(description ?? '')" />
+  <div 
+    class="markdown-body" 
+    @click="handleLinkClick"
+    v-html="renderHighlightedString(description ?? '')" 
+  />
+  <ExternalLinkModal ref="externalLinkModal" />
 </template>
+
 <script setup lang="ts">
 import { renderHighlightedString } from '@modrinth/utils'
+import { ref } from 'vue'
+import ExternalLinkModal from '../modal/ExternalLinkModal.vue'
+
+const externalLinkModal = ref<InstanceType<typeof ExternalLinkModal> | null>(null)
+
+const handleLinkClick = async (e: MouseEvent) => {
+  const link = (e.target as HTMLElement)?.closest('a')
+  if (!link) return
+
+  const href = link.getAttribute('href')
+  if (!href) return
+
+  try {
+    const url = new URL(href)
+    if (!url.hostname.includes('modrinth.com') && url.host !== window.location.host) {
+      e.preventDefault()
+      const proceed = await externalLinkModal.value?.show(href)
+      if (proceed) {
+        window.open(href, '_blank', 'noopener,noreferrer')
+      }
+    }
+  } catch {
+    // not sure how this'd happen. but if it does, just ignore it
+    // and let the default behavior happen
+    // e.g. if the link is a mailto link or something
+    // this is a bit of a hack, but it works
+    return
+  }
+}
 
 withDefaults(
   defineProps<{

From 3af75dc6128598d8f44407ef4b5e3577758a84fe Mon Sep 17 00:00:00 2001
From: NoahCxrest <jxselinxe@gmail.com>
Date: Sun, 30 Mar 2025 12:14:44 -0600
Subject: [PATCH 04/13] add padding.

---
 apps/frontend/src/pages/servers/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/src/pages/servers/index.vue b/apps/frontend/src/pages/servers/index.vue
index ecea9e0cb0..f808a7dca8 100644
--- a/apps/frontend/src/pages/servers/index.vue
+++ b/apps/frontend/src/pages/servers/index.vue
@@ -771,7 +771,7 @@
         </ul>
 
         <div
-          class="flex w-full flex-col items-start justify-between gap-4 rounded-2xl bg-bg p-8 text-left lg:flex-row lg:gap-0"
+          class="flex w-full flex-col items-start justify-between gap-4 rounded-2xl bg-bg p-8 text-left lg:flex-row lg:gap-0 mb-4"
         >
           <div class="flex flex-col gap-4">
             <h1 class="m-0">Build your own</h1>

From 8799b220a69140e97742ce0610f3726ba87e0884 Mon Sep 17 00:00:00 2001
From: NoahCxrest <jxselinxe@gmail.com>
Date: Sun, 30 Mar 2025 12:46:47 -0600
Subject: [PATCH 05/13] run pnpm fix

---
 .../src/components/ui/ProjectCard.vue         |   6 +-
 .../src/components/ui/user/UserHoverCard.vue  | 151 +++++++++---------
 .../src/pages/[type]/[id]/changelog.vue       |   2 +-
 apps/frontend/src/pages/servers/index.vue     |   2 +-
 .../components/modal/ExternalLinkModal.vue    |  11 +-
 .../project/ProjectPageDescription.vue        |   6 +-
 6 files changed, 90 insertions(+), 88 deletions(-)

diff --git a/apps/frontend/src/components/ui/ProjectCard.vue b/apps/frontend/src/components/ui/ProjectCard.vue
index 4c2754afda..86acfb83d9 100644
--- a/apps/frontend/src/components/ui/ProjectCard.vue
+++ b/apps/frontend/src/components/ui/ProjectCard.vue
@@ -27,7 +27,7 @@
         by
         <UserHoverCard :user-id="typeof author === 'object' ? author.id : author">
           <nuxt-link :to="`/user/${typeof author === 'object' ? author.username : author}`">
-            {{ typeof author === 'object' ? author.username : author }}
+            {{ typeof author === "object" ? author.username : author }}
           </nuxt-link>
         </UserHoverCard>
       </p>
@@ -531,11 +531,11 @@ export default {
   font-size: 0.9em;
   color: var(--color-text-secondary);
   font-weight: normal;
-  
+
   a {
     color: var(--color-link);
     text-decoration: none;
-    
+
     &:hover {
       color: var(--color-link-hover);
       text-decoration: underline;
diff --git a/apps/frontend/src/components/ui/user/UserHoverCard.vue b/apps/frontend/src/components/ui/user/UserHoverCard.vue
index 277a4229aa..08fbde62a6 100644
--- a/apps/frontend/src/components/ui/user/UserHoverCard.vue
+++ b/apps/frontend/src/components/ui/user/UserHoverCard.vue
@@ -1,18 +1,18 @@
 <template>
-  <span 
-    ref="triggerEl" 
-    class="user-hover-card-trigger" 
-    @mouseenter="startHover" 
+  <span
+    ref="triggerEl"
+    class="user-hover-card-trigger"
+    @mouseenter="startHover"
     @mouseleave="handleLeave"
   >
     <slot />
   </span>
   <Teleport to="body">
     <Transition name="fade">
-      <div 
-        v-if="shown && userData?.username" 
+      <div
+        v-if="shown && userData?.username"
         ref="cardEl"
-        class="hover-content" 
+        class="hover-content"
         :style="cardStyle"
         @mouseenter="keepCard"
         @mouseleave="handleLeave"
@@ -45,8 +45,8 @@
             <div v-for="project in projects" :key="project.id" class="project-preview">
               <img :src="project.icon_url" :alt="`${project.title} icon`" class="project-icon" />
               <div class="project-info">
-                <nuxt-link 
-                  :to="`/${$getProjectTypeForUrl(project.project_type || project.type, project.categories)}/${project.slug || project.id}`" 
+                <nuxt-link
+                  :to="`/${$getProjectTypeForUrl(project.project_type || project.type, project.categories)}/${project.slug || project.id}`"
                   class="project-title"
                 >
                   {{ project.title }}
@@ -64,133 +64,132 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
+import { ref, computed, onMounted, onUnmounted, nextTick } from "vue";
 
 // Remove router import since we don't need it anymore
 
 const props = defineProps({
-  userId: { type: String, required: true }
-})
+  userId: { type: String, required: true },
+});
 
-const shown = ref(false)
-const userData = ref(null)
-const projects = ref([])
-const triggerEl = ref(null)
-const cardEl = ref(null)
-const cardStyle = ref({})
+const shown = ref(false);
+const userData = ref(null);
+const projects = ref([]);
+const triggerEl = ref(null);
+const cardEl = ref(null);
+const cardStyle = ref({});
 
-let hoverTimeout = null
-let isHovering = false
-let isHoveringCard = false
+let hoverTimeout = null;
+let isHovering = false;
+let isHoveringCard = false;
 
 // Add delay before hiding to allow mouse movement to card
-let hideTimeout = null
+let hideTimeout = null;
 
 // Increase hide delay constant
-const HIDE_DELAY = 500
+const HIDE_DELAY = 500;
 
 function updatePosition() {
-  if (!triggerEl.value || !shown.value) return
-  
-  const rect = triggerEl.value.getBoundingClientRect()
-  const viewportHeight = window.innerHeight
-  const showAbove = rect.bottom > viewportHeight - 300 && rect.top > 300
+  if (!triggerEl.value || !shown.value) return;
+
+  const rect = triggerEl.value.getBoundingClientRect();
+  const viewportHeight = window.innerHeight;
+  const showAbove = rect.bottom > viewportHeight - 300 && rect.top > 300;
 
   const style = {
-    position: 'fixed',
+    position: "fixed",
     left: `${rect.left}px`,
-    ...(showAbove 
+    ...(showAbove
       ? { bottom: `${viewportHeight - rect.top + 8}px` }
       : { top: `${rect.bottom + 8}px` }),
-    minWidth: '300px',
-    maxWidth: '400px',
-    maxHeight: '300px'
-  }
-  
-  Object.assign(cardStyle.value, style)
+    minWidth: "300px",
+    maxWidth: "400px",
+    maxHeight: "300px",
+  };
+
+  Object.assign(cardStyle.value, style);
 }
 
 function handleScroll() {
   // Immediate hide on scroll
-  hideCard()
+  hideCard();
 }
 
 function startHideCard() {
   hideTimeout = setTimeout(() => {
     if (!isHoveringCard && !isHovering) {
-      hideCard()
+      hideCard();
     }
-  }, HIDE_DELAY)
+  }, HIDE_DELAY);
 }
 
 function keepCard() {
-  isHoveringCard = true
+  isHoveringCard = true;
   if (hideTimeout) {
-    clearTimeout(hideTimeout)
+    clearTimeout(hideTimeout);
   }
 }
 
 function handleLeave() {
-  isHoveringCard = false
-  isHovering = false
-  startHideCard()
+  isHoveringCard = false;
+  isHovering = false;
+  startHideCard();
 }
 
 onMounted(() => {
-  window.addEventListener('scroll', handleScroll, { passive: true })
-  window.addEventListener('resize', handleScroll, { passive: true })
-})
+  window.addEventListener("scroll", handleScroll, { passive: true });
+  window.addEventListener("resize", handleScroll, { passive: true });
+});
 
 onUnmounted(() => {
-  window.removeEventListener('scroll', handleScroll)
-  window.removeEventListener('resize', handleScroll)
-  clearTimeout(hoverTimeout)
+  window.removeEventListener("scroll", handleScroll);
+  window.removeEventListener("resize", handleScroll);
+  clearTimeout(hoverTimeout);
   if (hideTimeout) {
-    clearTimeout(hideTimeout)
+    clearTimeout(hideTimeout);
   }
-})
+});
 
 async function startHover() {
-  if (hoverTimeout) return
-  
-  isHovering = true
+  if (hoverTimeout) return;
+
+  isHovering = true;
   hoverTimeout = setTimeout(async () => {
-    if (!isHovering) return
+    if (!isHovering) return;
 
     if (!userData.value) {
       try {
-        const userResp = await useBaseFetch(`user/${props.userId}`)
-        const projectsResp = await useBaseFetch(`user/${props.userId}/projects`)
-        
-        userData.value = userResp || null
-        projects.value = (projectsResp || []).slice(0, 3)
-        
+        const userResp = await useBaseFetch(`user/${props.userId}`);
+        const projectsResp = await useBaseFetch(`user/${props.userId}/projects`);
+
+        userData.value = userResp || null;
+        projects.value = (projectsResp || []).slice(0, 3);
+
         if (userData.value) {
-          userData.value.projects_count = projectsResp?.length || 0
+          userData.value.projects_count = projectsResp?.length || 0;
         }
       } catch (err) {
-        console.error('Failed to load user data:', err)
-        return
+        console.error("Failed to load user data:", err);
+        return;
       }
     }
 
     if (isHovering) {
-      shown.value = true
+      shown.value = true;
       nextTick(() => {
-        updatePosition()
-      })
+        updatePosition();
+      });
     }
-  }, 150) // 150ms delay before loading
+  }, 150); // 150ms delay before loading
 }
 
 function hideCard() {
-  shown.value = false
+  shown.value = false;
   if (hoverTimeout) {
-    clearTimeout(hoverTimeout)
-    hoverTimeout = null
+    clearTimeout(hoverTimeout);
+    hoverTimeout = null;
   }
 }
-
 </script>
 
 <style lang="scss" scoped>
@@ -202,7 +201,7 @@ function hideCard() {
   a {
     text-decoration: none;
     transition: color 0.2s ease;
-    
+
     &:hover {
       color: var(--color-link);
     }
@@ -233,7 +232,7 @@ function hideCard() {
     color: inherit;
     text-decoration: none;
     transition: opacity 0.2s ease;
-    
+
     &:hover {
       opacity: 0.8;
 
@@ -306,7 +305,7 @@ function hideCard() {
   &:hover {
     background: var(--color-button-bg-hover);
     transform: translateY(-1px);
-    
+
     .project-title {
       color: var(--color-link);
     }
diff --git a/apps/frontend/src/pages/[type]/[id]/changelog.vue b/apps/frontend/src/pages/[type]/[id]/changelog.vue
index 64d84b6895..ef029baf3b 100644
--- a/apps/frontend/src/pages/[type]/[id]/changelog.vue
+++ b/apps/frontend/src/pages/[type]/[id]/changelog.vue
@@ -77,9 +77,9 @@
 <script setup>
 import { Pagination } from "@modrinth/ui";
 import { DownloadIcon } from "@modrinth/assets";
+import VersionFilterControl from "@modrinth/ui/src/components/version/VersionFilterControl.vue";
 import UserHoverCard from "~/components/ui/user/UserHoverCard.vue";
 
-import VersionFilterControl from "@modrinth/ui/src/components/version/VersionFilterControl.vue";
 import { renderHighlightedString } from "~/helpers/highlight.js";
 
 const props = defineProps({
diff --git a/apps/frontend/src/pages/servers/index.vue b/apps/frontend/src/pages/servers/index.vue
index f808a7dca8..1b5c6cd4a4 100644
--- a/apps/frontend/src/pages/servers/index.vue
+++ b/apps/frontend/src/pages/servers/index.vue
@@ -771,7 +771,7 @@
         </ul>
 
         <div
-          class="flex w-full flex-col items-start justify-between gap-4 rounded-2xl bg-bg p-8 text-left lg:flex-row lg:gap-0 mb-4"
+          class="mb-4 flex w-full flex-col items-start justify-between gap-4 rounded-2xl bg-bg p-8 text-left lg:flex-row lg:gap-0"
         >
           <div class="flex flex-col gap-4">
             <h1 class="m-0">Build your own</h1>
diff --git a/packages/ui/src/components/modal/ExternalLinkModal.vue b/packages/ui/src/components/modal/ExternalLinkModal.vue
index 1fac79fa06..cafdfb6ccc 100644
--- a/packages/ui/src/components/modal/ExternalLinkModal.vue
+++ b/packages/ui/src/components/modal/ExternalLinkModal.vue
@@ -12,7 +12,9 @@
         {{ formatMessage(messages.warning) }}
       </Admonition>
 
-      <div class="flex items-center gap-2 p-3 rounded-lg bg-bg text-contrast font-mono text-sm break-all">
+      <div
+        class="flex items-center gap-2 p-3 rounded-lg bg-bg text-contrast font-mono text-sm break-all"
+      >
         <GlobeIcon class="flex-shrink-0 size-4" />
         {{ targetUrl }}
       </div>
@@ -45,12 +47,13 @@ const { formatMessage } = useVIntl()
 
 const messages = defineMessages({
   title: {
-    id: 'modal.external_link.title', 
+    id: 'modal.external_link.title',
     defaultMessage: 'Leaving Modrinth',
   },
   warning: {
     id: 'modal.external_link.warning',
-    defaultMessage: 'You are about to visit an external website. Please verify the link is from a trusted source before proceeding.',
+    defaultMessage:
+      'You are about to visit an external website. Please verify the link is from a trusted source before proceeding.',
   },
   proceed: {
     id: 'modal.external_link.proceed',
@@ -100,7 +103,7 @@ defineExpose({ show })
   flex-direction: column;
   gap: var(--spacing-card-md);
   padding: var(--spacing-card-lg);
-  
+
   .link-display {
     padding: var(--spacing-card-sm);
     background: var(--color-button-bg);
diff --git a/packages/ui/src/components/project/ProjectPageDescription.vue b/packages/ui/src/components/project/ProjectPageDescription.vue
index 6473c987e9..fc095626af 100644
--- a/packages/ui/src/components/project/ProjectPageDescription.vue
+++ b/packages/ui/src/components/project/ProjectPageDescription.vue
@@ -1,8 +1,8 @@
 <template>
-  <div 
-    class="markdown-body" 
+  <div
+    class="markdown-body"
     @click="handleLinkClick"
-    v-html="renderHighlightedString(description ?? '')" 
+    v-html="renderHighlightedString(description ?? '')"
   />
   <ExternalLinkModal ref="externalLinkModal" />
 </template>

From bcb13313def8064dbf059c8b4e708f43f48fc1fb Mon Sep 17 00:00:00 2001
From: NoahCxrest <jxselinxe@gmail.com>
Date: Sun, 30 Mar 2025 12:48:10 -0600
Subject: [PATCH 06/13] fixes

---
 .../frontend/src/components/ui/user/UserHoverCard.vue | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/apps/frontend/src/components/ui/user/UserHoverCard.vue b/apps/frontend/src/components/ui/user/UserHoverCard.vue
index 08fbde62a6..406fa057f1 100644
--- a/apps/frontend/src/components/ui/user/UserHoverCard.vue
+++ b/apps/frontend/src/components/ui/user/UserHoverCard.vue
@@ -64,9 +64,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onUnmounted, nextTick } from "vue";
-
-// Remove router import since we don't need it anymore
+import { ref, onMounted, onUnmounted, nextTick } from "vue";
 
 const props = defineProps({
   userId: { type: String, required: true },
@@ -82,11 +80,8 @@ const cardStyle = ref({});
 let hoverTimeout = null;
 let isHovering = false;
 let isHoveringCard = false;
-
-// Add delay before hiding to allow mouse movement to card
 let hideTimeout = null;
 
-// Increase hide delay constant
 const HIDE_DELAY = 500;
 
 function updatePosition() {
@@ -110,8 +105,8 @@ function updatePosition() {
   Object.assign(cardStyle.value, style);
 }
 
+// hide the hover card on scroll cuz we dont want it stuck on a users screen!
 function handleScroll() {
-  // Immediate hide on scroll
   hideCard();
 }
 
@@ -180,7 +175,7 @@ async function startHover() {
         updatePosition();
       });
     }
-  }, 150); // 150ms delay before loading
+  }, 150);
 }
 
 function hideCard() {

From a2325ed81a4230669feb5fa7f0ed2d3cba02e2e5 Mon Sep 17 00:00:00 2001
From: NoahCxrest <jxselinxe@gmail.com>
Date: Sun, 30 Mar 2025 12:49:27 -0600
Subject: [PATCH 07/13] revert back to staging url even though it throws bad
 gateway

---
 apps/frontend/nuxt.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/nuxt.config.ts b/apps/frontend/nuxt.config.ts
index cc20bf1565..354bff294c 100644
--- a/apps/frontend/nuxt.config.ts
+++ b/apps/frontend/nuxt.config.ts
@@ -8,7 +8,7 @@ import { globIterate } from "glob";
 import { match as matchLocale } from "@formatjs/intl-localematcher";
 import { consola } from "consola";
 
-const STAGING_API_URL = "https://api.modrinth.com/v2/";
+const STAGING_API_URL = "https://staging-api.modrinth.com/v2/";
 
 const preloadedFonts = [
   "inter/Inter-Regular.woff2",

From 2dd29f3b35328e02571066c86ef5a8ef0248249a Mon Sep 17 00:00:00 2001
From: NoahCxrest <jxselinxe@gmail.com>
Date: Sun, 30 Mar 2025 13:09:37 -0600
Subject: [PATCH 08/13] hopefully fix lint

---
 .../project/ProjectSidebarCreators.vue        |   2 +-
 .../ui/src/components/user/UserHoverCard.vue  | 352 ++++++++++++++++++
 2 files changed, 353 insertions(+), 1 deletion(-)
 create mode 100644 packages/ui/src/components/user/UserHoverCard.vue

diff --git a/packages/ui/src/components/project/ProjectSidebarCreators.vue b/packages/ui/src/components/project/ProjectSidebarCreators.vue
index aec4356111..28eabcac53 100644
--- a/packages/ui/src/components/project/ProjectSidebarCreators.vue
+++ b/packages/ui/src/components/project/ProjectSidebarCreators.vue
@@ -53,7 +53,7 @@ import { CrownIcon, ExternalIcon, OrganizationIcon } from '@modrinth/assets'
 import { useVIntl, defineMessages } from '@vintl/vintl'
 import Avatar from '../base/Avatar.vue'
 import AutoLink from '../base/AutoLink.vue'
-import UserHoverCard from '@modrinth/frontend/src/components/ui/user/UserHoverCard.vue'
+import UserHoverCard from '../user/UserHoverCard.vue'
 import { computed } from 'vue'
 
 const { formatMessage } = useVIntl()
diff --git a/packages/ui/src/components/user/UserHoverCard.vue b/packages/ui/src/components/user/UserHoverCard.vue
new file mode 100644
index 0000000000..3b562963ed
--- /dev/null
+++ b/packages/ui/src/components/user/UserHoverCard.vue
@@ -0,0 +1,352 @@
+<template>
+    <span
+      ref="triggerEl"
+      class="user-hover-card-trigger"
+      @mouseenter="startHover"
+      @mouseleave="handleLeave"
+    >
+      <slot />
+    </span>
+    <Teleport to="body">
+      <Transition name="fade">
+        <div
+          v-if="shown && userData?.username"
+          ref="cardEl"
+          class="hover-content"
+          :style="cardStyle"
+          @mouseenter="keepCard"
+          @mouseleave="handleLeave"
+        >
+          <div class="user-info">
+            <div class="user-header">
+              <nuxt-link :to="`/user/${userData.username}`" class="user-link">
+                <img
+                  :src="userData.avatar_url"
+                  :alt="`${userData.username}'s avatar`"
+                  class="user-avatar"
+                />
+                <div>
+                  <h3>{{ userData.username }}</h3>
+                  <div class="user-joined">
+                    Joined {{ new Date(userData.created).toLocaleDateString() }}
+                  </div>
+                </div>
+              </nuxt-link>
+            </div>
+            <div v-if="userData.bio" class="user-bio">
+              {{ userData.bio }}
+            </div>
+            <div class="user-stats">
+              <div>
+                <span class="stat-value">{{ userData.projects_count }}</span> projects
+              </div>
+            </div>
+            <div v-if="projects?.length" class="user-projects">
+              <div v-for="project in projects" :key="project.id" class="project-preview">
+                <img :src="project.icon_url" :alt="`${project.title} icon`" class="project-icon" />
+                <div class="project-info">
+                  <nuxt-link
+                    :to="`/${$getProjectTypeForUrl(project.project_type || project.type, project.categories)}/${project.slug || project.id}`"
+                    class="project-title"
+                  >
+                    {{ project.title }}
+                  </nuxt-link>
+                  <div class="project-stats">
+                    <span>{{ $formatNumber(project.downloads) }} downloads</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </template>
+  
+  <script setup>
+  import { ref, onMounted, onUnmounted, nextTick } from "vue";
+  
+  const props = defineProps({
+    userId: { type: String, required: true },
+  });
+  
+  const shown = ref(false);
+  const userData = ref(null);
+  const projects = ref([]);
+  const triggerEl = ref(null);
+  const cardEl = ref(null);
+  const cardStyle = ref({});
+  
+  let hoverTimeout = null;
+  let isHovering = false;
+  let isHoveringCard = false;
+  let hideTimeout = null;
+  
+  const HIDE_DELAY = 500;
+  
+  function updatePosition() {
+    if (!triggerEl.value || !shown.value) return;
+  
+    const rect = triggerEl.value.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+    const showAbove = rect.bottom > viewportHeight - 300 && rect.top > 300;
+  
+    const style = {
+      position: "fixed",
+      left: `${rect.left}px`,
+      ...(showAbove
+        ? { bottom: `${viewportHeight - rect.top + 8}px` }
+        : { top: `${rect.bottom + 8}px` }),
+      minWidth: "300px",
+      maxWidth: "400px",
+      maxHeight: "300px",
+    };
+  
+    Object.assign(cardStyle.value, style);
+  }
+  
+  // hide the hover card on scroll cuz we dont want it stuck on a users screen!
+  function handleScroll() {
+    hideCard();
+  }
+  
+  function startHideCard() {
+    hideTimeout = setTimeout(() => {
+      if (!isHoveringCard && !isHovering) {
+        hideCard();
+      }
+    }, HIDE_DELAY);
+  }
+  
+  function keepCard() {
+    isHoveringCard = true;
+    if (hideTimeout) {
+      clearTimeout(hideTimeout);
+    }
+  }
+  
+  function handleLeave() {
+    isHoveringCard = false;
+    isHovering = false;
+    startHideCard();
+  }
+  
+  onMounted(() => {
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    window.addEventListener("resize", handleScroll, { passive: true });
+  });
+  
+  onUnmounted(() => {
+    window.removeEventListener("scroll", handleScroll);
+    window.removeEventListener("resize", handleScroll);
+    clearTimeout(hoverTimeout);
+    if (hideTimeout) {
+      clearTimeout(hideTimeout);
+    }
+  });
+  
+  async function startHover() {
+    if (hoverTimeout) return;
+  
+    isHovering = true;
+    hoverTimeout = setTimeout(async () => {
+      if (!isHovering) return;
+  
+      if (!userData.value) {
+        try {
+          const userResp = await useBaseFetch(`user/${props.userId}`);
+          const projectsResp = await useBaseFetch(`user/${props.userId}/projects`);
+  
+          userData.value = userResp || null;
+          projects.value = (projectsResp || []).slice(0, 3);
+  
+          if (userData.value) {
+            userData.value.projects_count = projectsResp?.length || 0;
+          }
+        } catch (err) {
+          console.error("Failed to load user data:", err);
+          return;
+        }
+      }
+  
+      if (isHovering) {
+        shown.value = true;
+        nextTick(() => {
+          updatePosition();
+        });
+      }
+    }, 150);
+  }
+  
+  function hideCard() {
+    shown.value = false;
+    if (hoverTimeout) {
+      clearTimeout(hoverTimeout);
+      hoverTimeout = null;
+    }
+  }
+  </script>
+  
+  <style lang="scss" scoped>
+  .user-hover-card-trigger {
+    position: relative;
+    color: inherit;
+    cursor: pointer;
+  
+    a {
+      text-decoration: none;
+      transition: color 0.2s ease;
+  
+      &:hover {
+        color: var(--color-link);
+      }
+    }
+  }
+  
+  .hover-content {
+    z-index: 9999;
+    position: fixed;
+    background: var(--color-raised-bg);
+    border: 1px solid var(--color-divider);
+    border-radius: var(--size-rounded-lg);
+    box-shadow: var(--shadow-floating);
+    overflow-y: auto;
+    pointer-events: auto;
+    width: 320px;
+  }
+  
+  .user-info {
+    padding: var(--spacing-card-md);
+  }
+  
+  .user-header {
+    .user-link {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-card-sm);
+      color: inherit;
+      text-decoration: none;
+      transition: opacity 0.2s ease;
+  
+      &:hover {
+        opacity: 0.8;
+  
+        h3 {
+          color: var(--color-link);
+        }
+      }
+  
+      h3 {
+        margin: 0;
+        font-size: var(--font-size-lg);
+        font-weight: 600;
+        line-height: 1.2;
+        transition: color 0.2s ease;
+      }
+    }
+  }
+  
+  .user-avatar {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    box-shadow: var(--shadow-sm);
+  }
+  
+  .user-joined {
+    margin-top: 2px;
+    font-size: var(--font-size-sm);
+    color: var(--color-text-secondary);
+  }
+  
+  .user-bio {
+    margin-top: var(--spacing-card-sm);
+    font-size: var(--font-size-sm);
+    line-height: 1.5;
+    color: var(--color-text);
+  }
+  
+  .user-stats {
+    margin-top: var(--spacing-card-sm);
+    padding-top: var(--spacing-card-sm);
+    border-top: 1px solid var(--color-divider);
+    display: flex;
+    gap: var(--spacing-card-md);
+    font-size: var(--font-size-sm);
+    color: var(--color-text-secondary);
+  
+    .stat-value {
+      font-weight: 600;
+      color: var(--color-text);
+    }
+  }
+  
+  .user-projects {
+    margin-top: var(--spacing-card-sm);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-card-xs);
+  }
+  
+  .project-preview {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-card-sm);
+    padding: var(--spacing-card-xs);
+    border-radius: var(--size-rounded-md);
+    background: var(--color-button-bg);
+    transition: all 0.2s ease;
+  
+    &:hover {
+      background: var(--color-button-bg-hover);
+      transform: translateY(-1px);
+  
+      .project-title {
+        color: var(--color-link);
+      }
+    }
+  }
+  
+  .project-icon {
+    width: 36px;
+    height: 36px;
+    border-radius: var(--size-rounded-sm);
+    box-shadow: var(--shadow-sm);
+  }
+  
+  .project-info {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .project-title {
+    display: block;
+    font-weight: 500;
+    font-size: var(--font-size-base);
+    color: var(--color-text);
+    text-decoration: none;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    transition: color 0.2s ease;
+  }
+  
+  .project-stats {
+    font-size: var(--font-size-sm);
+    color: var(--color-text-secondary);
+  }
+  
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: all 0.2s ease;
+  }
+  
+  .fade-enter-from,
+  .fade-leave-to {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  </style>
+  
\ No newline at end of file

From 472e9b8a168608acf1c974f65b56903509a24de6 Mon Sep 17 00:00:00 2001
From: NoahCxrest <jxselinxe@gmail.com>
Date: Sun, 30 Mar 2025 14:19:57 -0600
Subject: [PATCH 09/13] start cmd k

---
 .../src/components/ui/CommandPrompt.vue       | 369 ++++++++++++++++++
 apps/frontend/src/layouts/default.vue         |   3 +
 2 files changed, 372 insertions(+)
 create mode 100644 apps/frontend/src/components/ui/CommandPrompt.vue

diff --git a/apps/frontend/src/components/ui/CommandPrompt.vue b/apps/frontend/src/components/ui/CommandPrompt.vue
new file mode 100644
index 0000000000..890b983e6f
--- /dev/null
+++ b/apps/frontend/src/components/ui/CommandPrompt.vue
@@ -0,0 +1,369 @@
+<template>
+  <div v-if="isOpen" class="command-prompt-overlay" @click="close">
+    <div class="command-prompt" @click.stop>
+      <div class="search-header">
+        <div class="search-input">
+          <SearchIcon class="search-icon" aria-hidden="true" />
+          <input
+            ref="searchInput"
+            v-model="searchQuery"
+            type="text"
+            placeholder="Type to search..."
+            @keydown.esc="close"
+            @keydown.enter="onResultSelect"
+            @keydown.arrow-down="selectNextResult"
+            @keydown.arrow-up="selectPrevResult"
+          />
+        </div>
+        <div class="shortcut-hint">
+          <kbd>↑↓</kbd> to navigate
+          <kbd>enter</kbd> to select
+          <kbd>esc</kbd> to close
+        </div>
+      </div>
+      
+      <div v-if="searchQuery" class="search-results" :class="{ 'is-loading': loading }">
+        <div v-if="loading" class="loading-container">
+          <div class="loading-spinner"></div>
+          <span>Searching Modrinth...</span>
+        </div>
+        
+        <template v-else>
+          <div class="results-list">
+            <div 
+              v-for="(project, index) in projects" 
+              :key="project.id" 
+              class="result-item"
+              :class="{ 'selected': selectedIndex === index }" 
+              @click="navigateToResult(project)"
+              @mouseenter="selectedIndex = index"
+            >
+              <Avatar :src="project.icon_url" :alt="project.title" size="sm" class="project-avatar" />
+              <div class="project-info">
+                <span class="project-title">{{ project.title }}</span>
+                <span class="project-type">{{ project.project_type }}</span>
+              </div>
+              <ChevronRightIcon class="chevron-icon" />
+            </div>
+          </div>
+
+          <div v-if="!projects.length" class="empty-state">
+            <XIcon class="empty-icon" />
+            <span>No results found</span>
+            <p>Try searching for something else</p>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
+import { SearchIcon, ChevronRightIcon, XIcon } from '@modrinth/assets'
+import Avatar from './Avatar.vue'
+
+const isOpen = ref(false)
+const searchInput = ref(null)
+const searchQuery = ref('')
+const loading = ref(false)
+const projects = ref([])
+const selectedIndex = ref(-1)
+
+// Direct search without debounce
+watch(searchQuery, async (query) => {
+  if (!query) {
+    projects.value = []
+    return
+  }
+
+  loading.value = true
+  try {
+    const results = await $fetch(`${useRuntimeConfig().public.apiBaseUrl}search`, {
+      method: 'GET',
+      params: {
+        query: query,
+        limit: 10, // Increased limit since we only show projects now
+        index: 'relevance'
+      }
+    })
+    projects.value = results.hits
+  } catch (err) {
+    console.error('Search failed:', err)
+  }
+  loading.value = false
+  selectedIndex.value = -1
+})
+
+const open = () => {
+  isOpen.value = true
+  nextTick(() => {
+    searchInput.value?.focus()
+  })
+}
+
+const close = () => {
+  isOpen.value = false
+  searchQuery.value = ''
+}
+
+const navigateToResult = (result) => {
+  navigateTo(`/${result.project_type}/${result.slug}`)
+  close()
+}
+
+const selectNextResult = () => {
+  const maxIndex = projects.value.length - 1
+  selectedIndex.value = selectedIndex.value >= maxIndex ? 0 : selectedIndex.value + 1
+}
+
+const selectPrevResult = () => {
+  const maxIndex = projects.value.length - 1  
+  selectedIndex.value = selectedIndex.value <= 0 ? maxIndex : selectedIndex.value - 1
+}
+
+const onResultSelect = () => {
+  if (selectedIndex.value === -1) return
+  
+  const allResults = [...projects.value]
+  const selected = allResults[selectedIndex.value]
+  if (selected) {
+    navigateToResult(selected)
+  }
+}
+
+// Handle keyboard shortcut
+const handleKeydown = (e) => {
+  if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+    e.preventDefault()
+    if (!isOpen.value) {
+      open()
+    }
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('keydown', handleKeydown)
+})
+
+onUnmounted(() => {
+  window.addEventListener('keydown', handleKeydown)
+})
+
+defineExpose({ open, close })
+</script>
+
+<style lang="scss" scoped>
+.command-prompt-overlay {
+  position: fixed;
+  inset: 0;
+  background: color-mix(in srgb, var(--color-background) 40%, transparent);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 15vh;
+  z-index: 100;
+  backdrop-filter: blur(8px);
+  animation: overlayShow 150ms ease;
+}
+
+.command-prompt {
+  width: 90%;
+  max-width: 640px;
+  background: var(--color-raised-bg);
+  border: 1px solid var(--color-divider);
+  border-radius: var(--radius-lg);
+  box-shadow: 
+    0 4px 6px -1px rgb(0 0 0 / 0.1),
+    0 2px 4px -2px rgb(0 0 0 / 0.1),
+    0 0 0 1px rgb(255 255 255 / 0.05);
+  overflow: hidden;
+  animation: commandPromptShow 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.search-header {
+  padding: 1rem;
+  border-bottom: 1px solid var(--color-divider);
+}
+
+.search-input {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  background: var(--color-button-bg);
+  border-radius: var(--radius-md);
+  padding: 0.5rem 0.75rem;
+  margin-bottom: 0.5rem;
+
+  .search-icon {
+    width: 1rem;
+    height: 1rem;
+    color: var(--color-text-secondary);
+  }
+
+  input {
+    flex: 1;
+    border: none;
+    background: none;
+    font-size: 0.9375rem;
+    color: var(--color-text);
+    outline: none;
+
+    &::placeholder {
+      color: var(--color-text-secondary);
+    }
+  }
+}
+
+.shortcut-hint {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0 0.25rem;
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+
+  kbd {
+    padding: 0.125rem 0.375rem;
+    background: var(--color-button-bg);
+    border: 1px solid var(--color-divider);
+    border-radius: var(--radius-sm);
+    font-family: inherit;
+    font-size: 0.75rem;
+  }
+}
+
+.search-results {
+  max-height: min(400px, 60vh);
+  overflow-y: auto;
+
+  &.is-loading {
+    min-height: 150px;
+  }
+}
+
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  padding: 2rem;
+  color: var(--color-text-secondary);
+
+  .loading-spinner {
+    width: 1.5rem;
+    height: 1.5rem;
+    border: 2px solid var(--color-divider);
+    border-top-color: var(--color-brand);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+  }
+}
+
+.results-list {
+  padding: 0.5rem;
+}
+
+.result-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.625rem 0.75rem;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: background-color 150ms ease;
+
+  &:hover, &.selected {
+    background: var(--color-button-bg);
+  }
+
+  .project-avatar {
+    flex-shrink: 0;
+  }
+
+  .project-info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .project-title {
+    display: block;
+    font-size: 0.9375rem;
+    font-weight: 500;
+    color: var(--color-text);
+  }
+
+  .project-type {
+    display: block;
+    font-size: 0.8125rem;
+    color: var(--color-text-secondary);
+    text-transform: capitalize;
+  }
+
+  .chevron-icon {
+    width: 1rem;
+    height: 1rem;
+    color: var(--color-text-secondary);
+    opacity: 0;
+    transition: opacity 150ms ease;
+  }
+
+  &:hover .chevron-icon,
+  &.selected .chevron-icon {
+    opacity: 1;
+  }
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 3rem 1rem;
+  color: var(--color-text-secondary);
+  text-align: center;
+
+  .empty-icon {
+    width: 2rem;
+    height: 2rem;
+    margin-bottom: 0.5rem;
+    opacity: 0.5;
+  }
+
+  span {
+    font-weight: 500;
+    margin-bottom: 0.25rem;
+  }
+
+  p {
+    margin: 0;
+    font-size: 0.875rem;
+  }
+}
+
+@keyframes overlayShow {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes commandPromptShow {
+  from {
+    opacity: 0;
+    transform: translateY(-2vh);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index 118074246f..62d413436c 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -548,6 +548,8 @@
         </button>
       </div>
     </header>
+    <AppHeader />
+    <CommandPrompt ref="commandPrompt" />
     <main class="min-h-[calc(100vh-4.5rem-310.59px)]">
       <ModalCreation v-if="auth.user" ref="modal_creation" />
       <CollectionCreateModal ref="modal_collection_creation" />
@@ -692,6 +694,7 @@ import { getProjectTypeMessage } from "~/utils/i18n-project-type.ts";
 import CollectionCreateModal from "~/components/ui/CollectionCreateModal.vue";
 import OrganizationCreateModal from "~/components/ui/OrganizationCreateModal.vue";
 import TeleportOverflowMenu from "~/components/ui/servers/TeleportOverflowMenu.vue";
+import CommandPrompt from '~/components/ui/CommandPrompt.vue'
 
 const { formatMessage } = useVIntl();
 

From 5e28c8004be6103f3a7b1e16ba0c0d5d10db6179 Mon Sep 17 00:00:00 2001
From: NoahCxrest <jxselinxe@gmail.com>
Date: Sun, 30 Mar 2025 15:09:39 -0600
Subject: [PATCH 10/13] add command + k menu to search projects across
 modrinth!

---
 .../src/components/ui/CommandMenu.vue         | 447 ++++++++++++++++++
 .../src/components/ui/CommandPrompt.vue       | 369 ---------------
 apps/frontend/src/layouts/default.vue         |   8 +-
 3 files changed, 452 insertions(+), 372 deletions(-)
 create mode 100644 apps/frontend/src/components/ui/CommandMenu.vue
 delete mode 100644 apps/frontend/src/components/ui/CommandPrompt.vue

diff --git a/apps/frontend/src/components/ui/CommandMenu.vue b/apps/frontend/src/components/ui/CommandMenu.vue
new file mode 100644
index 0000000000..333d4f76f6
--- /dev/null
+++ b/apps/frontend/src/components/ui/CommandMenu.vue
@@ -0,0 +1,447 @@
+<template>
+  <Transition name="fade">
+    <div v-if="show" class="command-menu-overlay" @click="close">
+      <div class="command-menu" @click.stop>
+        <div class="command-menu-header">
+          <SearchIcon class="search-icon" aria-hidden="true" />
+          <input
+            ref="searchInput"
+            v-model="query"
+            class="command-menu-input"
+            type="text"
+            :placeholder="formatMessage(messages.searchPlaceholder)"
+            @keydown.esc="close"
+            @keydown.enter="handleEnter"
+            @keydown.arrow-up.prevent="selectPrevious"
+            @keydown.arrow-down.prevent="selectNext"
+          />
+          <div class="shortcuts" :class="{ 'mac': isMac }">
+            <kbd v-if="isMac">⌘</kbd><kbd v-else>Ctrl</kbd><kbd>K</kbd>
+          </div>
+        </div>
+
+        <div class="command-menu-content">
+          <div v-if="query" class="command-menu-section">
+            <div class="command-menu-section-header">
+              <SearchIcon class="section-icon" aria-hidden="true" />
+              {{ formatMessage(messages.searchResults) }}
+            </div>
+            <div v-if="results.length" ref="resultsContainer" class="command-menu-results" role="listbox">
+              <button
+                v-for="(result, index) in results"
+                :key="result.id"
+                class="command-menu-item"
+                :class="{ active: selectedIndex === index }"
+                role="option"
+                @click="selectResult(result)"
+                @mouseenter="selectedIndex = index"
+              >
+                <img :src="result.icon_url" :alt="result.title" class="project-icon" loading="lazy" />
+                <div class="project-info">
+                  <span class="project-title">{{ result.title }}</span>
+                  <span class="project-description">{{ result.description }}</span>
+                </div>
+                <kbd class="result-shortcut">{{ index + 1 }}</kbd>
+              </button>
+            </div>
+            <div v-else class="command-menu-empty">
+              <SearchIcon class="empty-icon" aria-hidden="true" />
+              {{ formatMessage(messages.noResults) }}
+            </div>
+          </div>
+          <div v-else class="command-menu-section">
+            <div class="command-menu-empty command-menu-start">
+              <CompassIcon class="empty-icon" aria-hidden="true" />
+              {{ formatMessage(messages.startTyping) }}
+              <div class="hints">
+                <span>{{ formatMessage(messages.searchHint) }}</span>
+                <span>{{ formatMessage(messages.navigationHint) }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
+import { SearchIcon, CompassIcon } from '@modrinth/assets'
+import { useRouter } from 'vue-router'
+import { defineMessage, defineMessages } from '@vintl/vintl'
+import { useVIntl } from '#imports'
+import { useBaseFetch } from '~/composables/fetch'
+
+const messages = defineMessages({
+  searchPlaceholder: {
+    id: 'command-menu.search.placeholder',
+    defaultMessage: 'Search projects, mods, users...',
+  },
+  searchResults: {
+    id: 'command-menu.search.results',
+    defaultMessage: 'Search Results',
+  },
+  quickActions: {
+    id: 'command-menu.quick-actions',
+    defaultMessage: 'Quick Actions',
+  },
+  noResults: {
+    id: 'command-menu.search.no-results',
+    defaultMessage: 'No matching results found',
+  },
+  startTyping: {
+    id: 'command-menu.search.start-typing',
+    defaultMessage: 'Start typing to search across Modrinth...',
+  },
+  searchHint: {
+    id: 'command-menu.search.hint',
+    defaultMessage: 'Search for projects, mods, plugins, and more',
+  },
+  navigationHint: {
+    id: 'command-menu.search.navigation-hint',
+    defaultMessage: 'Use ↑↓ to navigate, enter to select',
+  }
+})
+
+const { formatMessage } = useVIntl()
+const router = useRouter()
+
+const show = ref(false)
+const query = ref('')
+const results = ref([])
+const selectedIndex = ref(0)
+const searchInput = ref(null)
+const resultsContainer = ref(null)
+
+const isMac = ref(false)
+onMounted(() => {
+  isMac.value = navigator?.platform?.toLowerCase().includes('mac') ?? false
+})
+
+const searchProjects = async (searchQuery) => {
+  if (!searchQuery) {
+    results.value = []
+    return
+  }
+
+  try {
+    const response = await useBaseFetch(`search?query=${encodeURIComponent(searchQuery)}&limit=10`)
+    results.value = response.hits
+  } catch (error) {
+    console.error('Search error:', error)
+    results.value = []
+  }
+}
+
+watch(query, (newQuery) => {
+  selectedIndex.value = 0
+  searchProjects(newQuery)
+})
+
+const selectResult = (result) => {
+  router.push(`/project/${result.slug}`)
+  close()
+}
+
+const handleEnter = () => {
+  if (results.value[selectedIndex.value]) {
+    selectResult(results.value[selectedIndex.value])
+  }
+}
+
+const selectNext = () => {
+  selectedIndex.value = (selectedIndex.value + 1) % results.value.length
+  scrollSelectedIntoView()
+}
+
+const selectPrevious = () => {
+  selectedIndex.value = (selectedIndex.value - 1 + results.value.length) % results.value.length
+  scrollSelectedIntoView()
+}
+
+const scrollSelectedIntoView = () => {
+  if (resultsContainer.value) {
+    const activeItem = resultsContainer.value.children[selectedIndex.value]
+    if (activeItem) {
+      activeItem.scrollIntoView({ block: 'nearest' })
+    }
+  }
+}
+
+const props = defineProps({
+  onStateChange: {
+    type: Function,
+    default: async () => {},
+  }
+})
+
+const open = async () => {
+  show.value = true
+  await props.onStateChange(true)
+  nextTick(() => {
+    searchInput.value?.focus()
+  })
+}
+
+const close = async () => {
+  show.value = false
+  await props.onStateChange(false)
+  query.value = ''
+  results.value = []
+  selectedIndex.value = 0
+}
+
+const handleKeydown = (e) => {
+  if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+    e.preventDefault()
+    if (show.value) {
+      close()
+    } else {
+      open()
+    }
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('keydown', handleKeydown)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', handleKeydown)
+})
+
+defineExpose({
+  open,
+  close,
+})
+</script>
+
+<style lang="scss" scoped>
+.command-menu-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(12px);
+  z-index: 100;
+  display: grid;
+  place-items: start center;
+  padding-top: 8vh;
+}
+
+.command-menu {
+  width: min(640px, 90vw);
+  background: var(--color-raised-bg);
+  border: 1px solid var(--color-divider);
+  border-radius: 12px;
+  box-shadow: 
+    0 0 0 1px rgba(255, 255, 255, 0.1),
+    0 8px 32px rgba(0, 0, 0, 0.4);
+  overflow: hidden;
+  animation: slideDown 0.15s ease-out;
+
+  @media (max-width: 640px) {
+    width: 94vw;
+    margin: 0 12px;
+  }
+}
+
+.command-menu-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--color-divider);
+  background: var(--color-bg);
+
+  .search-icon {
+    width: 20px;
+    height: 20px;
+    color: var(--color-text-secondary);
+    transition: color 0.15s ease;
+  }
+
+  &:focus-within .search-icon {
+    color: var(--color-brand);
+  }
+}
+
+.command-menu-input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  outline: none;
+  font-size: 14px;
+  padding: 0 8px;
+  color: var(--color-text);
+  
+  &::placeholder {
+    color: var(--color-text-secondary);
+  }
+}
+
+.shortcuts {
+  display: flex;
+  gap: 4px;
+  padding: 4px 8px;
+  background: var(--color-button-bg);
+  border-radius: 6px;
+  margin-left: 4px;
+  
+  kbd {
+    padding: 1px 4px;
+    font-size: 11px;
+    font-family: inherit;
+    color: var(--color-text-secondary);
+    background: transparent;
+    border: none;
+  }
+
+  &.mac kbd:first-child {
+    font-size: 13px;
+  }
+}
+
+.command-menu-section {
+  &-header {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 12px;
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--color-text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    
+    .section-icon {
+      width: 14px;
+      height: 14px;
+      opacity: 0.7;
+    }
+  }
+}
+
+.command-menu-content {
+  max-height: min(400px, 60vh);
+  overflow-y: auto;
+}
+
+.command-menu-results {
+  padding: 4px;
+}
+
+.command-menu-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 8px 12px;
+  border-radius: 6px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--color-text);
+  text-align: left;
+  transition: all 0.15s ease;
+
+  &:hover,
+  &.active {
+    background: var(--color-button-bg);
+    
+    .project-title {
+      color: var(--color-brand);
+    }
+  }
+
+  .project-icon {
+    width: 32px;
+    height: 32px;
+    border-radius: 6px;
+    object-fit: cover;
+  }
+
+  .project-info {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .project-title {
+    font-weight: 600;
+    font-size: 14px;
+    transition: color 0.15s ease;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .project-description {
+    font-size: 12px;
+    color: var(--color-text-secondary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .result-shortcut {
+    padding: 2px 6px;
+    font-size: 11px;
+    color: var(--color-text-secondary);
+    background: var(--color-button-bg);
+    border-radius: 4px;
+  }
+}
+
+.command-menu-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 32px 16px;
+  color: var(--color-text-secondary);
+  font-size: 14px;
+  text-align: center;
+
+  .empty-icon {
+    width: 24px;
+    height: 24px;
+    opacity: 0.5;
+  }
+}
+
+.command-menu-start {
+  .hints {
+    margin-top: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    font-size: 12px;
+    opacity: 0.7;
+  }
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.15s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/apps/frontend/src/components/ui/CommandPrompt.vue b/apps/frontend/src/components/ui/CommandPrompt.vue
deleted file mode 100644
index 890b983e6f..0000000000
--- a/apps/frontend/src/components/ui/CommandPrompt.vue
+++ /dev/null
@@ -1,369 +0,0 @@
-<template>
-  <div v-if="isOpen" class="command-prompt-overlay" @click="close">
-    <div class="command-prompt" @click.stop>
-      <div class="search-header">
-        <div class="search-input">
-          <SearchIcon class="search-icon" aria-hidden="true" />
-          <input
-            ref="searchInput"
-            v-model="searchQuery"
-            type="text"
-            placeholder="Type to search..."
-            @keydown.esc="close"
-            @keydown.enter="onResultSelect"
-            @keydown.arrow-down="selectNextResult"
-            @keydown.arrow-up="selectPrevResult"
-          />
-        </div>
-        <div class="shortcut-hint">
-          <kbd>↑↓</kbd> to navigate
-          <kbd>enter</kbd> to select
-          <kbd>esc</kbd> to close
-        </div>
-      </div>
-      
-      <div v-if="searchQuery" class="search-results" :class="{ 'is-loading': loading }">
-        <div v-if="loading" class="loading-container">
-          <div class="loading-spinner"></div>
-          <span>Searching Modrinth...</span>
-        </div>
-        
-        <template v-else>
-          <div class="results-list">
-            <div 
-              v-for="(project, index) in projects" 
-              :key="project.id" 
-              class="result-item"
-              :class="{ 'selected': selectedIndex === index }" 
-              @click="navigateToResult(project)"
-              @mouseenter="selectedIndex = index"
-            >
-              <Avatar :src="project.icon_url" :alt="project.title" size="sm" class="project-avatar" />
-              <div class="project-info">
-                <span class="project-title">{{ project.title }}</span>
-                <span class="project-type">{{ project.project_type }}</span>
-              </div>
-              <ChevronRightIcon class="chevron-icon" />
-            </div>
-          </div>
-
-          <div v-if="!projects.length" class="empty-state">
-            <XIcon class="empty-icon" />
-            <span>No results found</span>
-            <p>Try searching for something else</p>
-          </div>
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
-import { SearchIcon, ChevronRightIcon, XIcon } from '@modrinth/assets'
-import Avatar from './Avatar.vue'
-
-const isOpen = ref(false)
-const searchInput = ref(null)
-const searchQuery = ref('')
-const loading = ref(false)
-const projects = ref([])
-const selectedIndex = ref(-1)
-
-// Direct search without debounce
-watch(searchQuery, async (query) => {
-  if (!query) {
-    projects.value = []
-    return
-  }
-
-  loading.value = true
-  try {
-    const results = await $fetch(`${useRuntimeConfig().public.apiBaseUrl}search`, {
-      method: 'GET',
-      params: {
-        query: query,
-        limit: 10, // Increased limit since we only show projects now
-        index: 'relevance'
-      }
-    })
-    projects.value = results.hits
-  } catch (err) {
-    console.error('Search failed:', err)
-  }
-  loading.value = false
-  selectedIndex.value = -1
-})
-
-const open = () => {
-  isOpen.value = true
-  nextTick(() => {
-    searchInput.value?.focus()
-  })
-}
-
-const close = () => {
-  isOpen.value = false
-  searchQuery.value = ''
-}
-
-const navigateToResult = (result) => {
-  navigateTo(`/${result.project_type}/${result.slug}`)
-  close()
-}
-
-const selectNextResult = () => {
-  const maxIndex = projects.value.length - 1
-  selectedIndex.value = selectedIndex.value >= maxIndex ? 0 : selectedIndex.value + 1
-}
-
-const selectPrevResult = () => {
-  const maxIndex = projects.value.length - 1  
-  selectedIndex.value = selectedIndex.value <= 0 ? maxIndex : selectedIndex.value - 1
-}
-
-const onResultSelect = () => {
-  if (selectedIndex.value === -1) return
-  
-  const allResults = [...projects.value]
-  const selected = allResults[selectedIndex.value]
-  if (selected) {
-    navigateToResult(selected)
-  }
-}
-
-// Handle keyboard shortcut
-const handleKeydown = (e) => {
-  if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
-    e.preventDefault()
-    if (!isOpen.value) {
-      open()
-    }
-  }
-}
-
-onMounted(() => {
-  window.addEventListener('keydown', handleKeydown)
-})
-
-onUnmounted(() => {
-  window.addEventListener('keydown', handleKeydown)
-})
-
-defineExpose({ open, close })
-</script>
-
-<style lang="scss" scoped>
-.command-prompt-overlay {
-  position: fixed;
-  inset: 0;
-  background: color-mix(in srgb, var(--color-background) 40%, transparent);
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  padding-top: 15vh;
-  z-index: 100;
-  backdrop-filter: blur(8px);
-  animation: overlayShow 150ms ease;
-}
-
-.command-prompt {
-  width: 90%;
-  max-width: 640px;
-  background: var(--color-raised-bg);
-  border: 1px solid var(--color-divider);
-  border-radius: var(--radius-lg);
-  box-shadow: 
-    0 4px 6px -1px rgb(0 0 0 / 0.1),
-    0 2px 4px -2px rgb(0 0 0 / 0.1),
-    0 0 0 1px rgb(255 255 255 / 0.05);
-  overflow: hidden;
-  animation: commandPromptShow 200ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.search-header {
-  padding: 1rem;
-  border-bottom: 1px solid var(--color-divider);
-}
-
-.search-input {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  background: var(--color-button-bg);
-  border-radius: var(--radius-md);
-  padding: 0.5rem 0.75rem;
-  margin-bottom: 0.5rem;
-
-  .search-icon {
-    width: 1rem;
-    height: 1rem;
-    color: var(--color-text-secondary);
-  }
-
-  input {
-    flex: 1;
-    border: none;
-    background: none;
-    font-size: 0.9375rem;
-    color: var(--color-text);
-    outline: none;
-
-    &::placeholder {
-      color: var(--color-text-secondary);
-    }
-  }
-}
-
-.shortcut-hint {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 0 0.25rem;
-  font-size: 0.75rem;
-  color: var(--color-text-secondary);
-
-  kbd {
-    padding: 0.125rem 0.375rem;
-    background: var(--color-button-bg);
-    border: 1px solid var(--color-divider);
-    border-radius: var(--radius-sm);
-    font-family: inherit;
-    font-size: 0.75rem;
-  }
-}
-
-.search-results {
-  max-height: min(400px, 60vh);
-  overflow-y: auto;
-
-  &.is-loading {
-    min-height: 150px;
-  }
-}
-
-.loading-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 1rem;
-  padding: 2rem;
-  color: var(--color-text-secondary);
-
-  .loading-spinner {
-    width: 1.5rem;
-    height: 1.5rem;
-    border: 2px solid var(--color-divider);
-    border-top-color: var(--color-brand);
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-  }
-}
-
-.results-list {
-  padding: 0.5rem;
-}
-
-.result-item {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.625rem 0.75rem;
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  transition: background-color 150ms ease;
-
-  &:hover, &.selected {
-    background: var(--color-button-bg);
-  }
-
-  .project-avatar {
-    flex-shrink: 0;
-  }
-
-  .project-info {
-    flex: 1;
-    min-width: 0;
-  }
-
-  .project-title {
-    display: block;
-    font-size: 0.9375rem;
-    font-weight: 500;
-    color: var(--color-text);
-  }
-
-  .project-type {
-    display: block;
-    font-size: 0.8125rem;
-    color: var(--color-text-secondary);
-    text-transform: capitalize;
-  }
-
-  .chevron-icon {
-    width: 1rem;
-    height: 1rem;
-    color: var(--color-text-secondary);
-    opacity: 0;
-    transition: opacity 150ms ease;
-  }
-
-  &:hover .chevron-icon,
-  &.selected .chevron-icon {
-    opacity: 1;
-  }
-}
-
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 3rem 1rem;
-  color: var(--color-text-secondary);
-  text-align: center;
-
-  .empty-icon {
-    width: 2rem;
-    height: 2rem;
-    margin-bottom: 0.5rem;
-    opacity: 0.5;
-  }
-
-  span {
-    font-weight: 500;
-    margin-bottom: 0.25rem;
-  }
-
-  p {
-    margin: 0;
-    font-size: 0.875rem;
-  }
-}
-
-@keyframes overlayShow {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes commandPromptShow {
-  from {
-    opacity: 0;
-    transform: translateY(-2vh);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-</style>
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index 62d413436c..c422cb16cd 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -548,12 +548,11 @@
         </button>
       </div>
     </header>
-    <AppHeader />
-    <CommandPrompt ref="commandPrompt" />
     <main class="min-h-[calc(100vh-4.5rem-310.59px)]">
       <ModalCreation v-if="auth.user" ref="modal_creation" />
       <CollectionCreateModal ref="modal_collection_creation" />
       <OrganizationCreateModal ref="modal_organization_creation" />
+      <CommandMenu ref="commandMenu" />
       <slot id="main" />
     </main>
     <footer
@@ -694,7 +693,7 @@ import { getProjectTypeMessage } from "~/utils/i18n-project-type.ts";
 import CollectionCreateModal from "~/components/ui/CollectionCreateModal.vue";
 import OrganizationCreateModal from "~/components/ui/OrganizationCreateModal.vue";
 import TeleportOverflowMenu from "~/components/ui/servers/TeleportOverflowMenu.vue";
-import CommandPrompt from '~/components/ui/CommandPrompt.vue'
+import CommandMenu from '~/components/ui/CommandMenu.vue'
 
 const { formatMessage } = useVIntl();
 
@@ -993,6 +992,9 @@ const disableRandomProjectsForRoute = computed(
     route.name.includes("admin"),
 );
 
+const commandMenu = ref(null)
+const commandMenuOpen = ref(false)
+
 async function onKeyDown(event) {
   if (disableRandomProjects.value || disableRandomProjectsForRoute.value) {
     return;

From 157d591af06be6a0e8905bc25f700315d3c6880f Mon Sep 17 00:00:00 2001
From: Noah <117038300+NoahCxrest@users.noreply.github.com>
Date: Mon, 31 Mar 2025 14:16:14 -0600
Subject: [PATCH 11/13] fix ci

Signed-off-by: Noah <117038300+NoahCxrest@users.noreply.github.com>
---
 packages/ui/src/components/modal/ExternalLinkModal.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/components/modal/ExternalLinkModal.vue b/packages/ui/src/components/modal/ExternalLinkModal.vue
index cafdfb6ccc..08fa677d94 100644
--- a/packages/ui/src/components/modal/ExternalLinkModal.vue
+++ b/packages/ui/src/components/modal/ExternalLinkModal.vue
@@ -40,7 +40,9 @@
 <script setup>
 import { ref } from 'vue'
 import { defineMessages, useVIntl } from '@vintl/vintl'
-import { NewModal, ButtonStyled, Admonition } from '@modrinth/ui'
+import NewModal from './NewModal.vue'
+import Admonition from '../base/Admonition.vue'
+import ButtonStyled from '../base/ButtonStyled.vue'
 import { ExternalIcon, XIcon, GlobeIcon } from '@modrinth/assets'
 
 const { formatMessage } = useVIntl()

From 58bd973a0ce068a60cb43bb1fce55209da83f52f Mon Sep 17 00:00:00 2001
From: Noah <117038300+NoahCxrest@users.noreply.github.com>
Date: Mon, 31 Mar 2025 14:01:57 -0600
Subject: [PATCH 12/13] fix #3430

---
 apps/app-frontend/src/pages/project/Index.vue | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/apps/app-frontend/src/pages/project/Index.vue b/apps/app-frontend/src/pages/project/Index.vue
index 1f5082b136..0d0c2a8839 100644
--- a/apps/app-frontend/src/pages/project/Index.vue
+++ b/apps/app-frontend/src/pages/project/Index.vue
@@ -189,13 +189,26 @@ const [allLoaders, allGameVersions] = await Promise.all([
   get_game_versions().catch(handleError).then(ref),
 ])
 
+async function loadVersionsInBatches(versionIds) {
+  const batchSize = 200
+  const batches = []
+  
+  for (let i = 0; i < versionIds.length; i += batchSize) {
+    const batch = versionIds.slice(i, i + batchSize)
+    batches.push(get_version_many(batch, 'must_revalidate').catch(handleError))
+  }
+
+  const batchResults = await Promise.all(batches)
+  return batchResults.flat()
+}
+
 async function fetchProjectData() {
   const project = await get_project(route.params.id, 'must_revalidate').catch(handleError)
 
   data.value = project
   ;[versions.value, members.value, categories.value, instance.value, instanceProjects.value] =
     await Promise.all([
-      get_version_many(project.versions, 'must_revalidate').catch(handleError),
+      loadVersionsInBatches(project.versions).catch(handleError),
       get_team(project.team).catch(handleError),
       get_categories().catch(handleError),
       route.query.i ? getInstance(route.query.i).catch(handleError) : Promise.resolve(),

From d9398e2bdaf5997b2df1105c924c85e7c824dffd Mon Sep 17 00:00:00 2001
From: Noah <117038300+NoahCxrest@users.noreply.github.com>
Date: Mon, 31 Mar 2025 14:36:58 -0600
Subject: [PATCH 13/13] pnpm fix

---
 apps/app-frontend/src/pages/project/Index.vue |   2 +-
 .../src/components/ui/CommandMenu.vue         | 185 ++---
 apps/frontend/src/layouts/default.vue         |   5 +-
 .../ui/src/components/user/UserHoverCard.vue  | 641 +++++++++---------
 4 files changed, 420 insertions(+), 413 deletions(-)

diff --git a/apps/app-frontend/src/pages/project/Index.vue b/apps/app-frontend/src/pages/project/Index.vue
index 0d0c2a8839..e16ead5cdd 100644
--- a/apps/app-frontend/src/pages/project/Index.vue
+++ b/apps/app-frontend/src/pages/project/Index.vue
@@ -192,7 +192,7 @@ const [allLoaders, allGameVersions] = await Promise.all([
 async function loadVersionsInBatches(versionIds) {
   const batchSize = 200
   const batches = []
-  
+
   for (let i = 0; i < versionIds.length; i += batchSize) {
     const batch = versionIds.slice(i, i + batchSize)
     batches.push(get_version_many(batch, 'must_revalidate').catch(handleError))
diff --git a/apps/frontend/src/components/ui/CommandMenu.vue b/apps/frontend/src/components/ui/CommandMenu.vue
index 333d4f76f6..825e5a140c 100644
--- a/apps/frontend/src/components/ui/CommandMenu.vue
+++ b/apps/frontend/src/components/ui/CommandMenu.vue
@@ -15,7 +15,7 @@
             @keydown.arrow-up.prevent="selectPrevious"
             @keydown.arrow-down.prevent="selectNext"
           />
-          <div class="shortcuts" :class="{ 'mac': isMac }">
+          <div class="shortcuts" :class="{ mac: isMac }">
             <kbd v-if="isMac">⌘</kbd><kbd v-else>Ctrl</kbd><kbd>K</kbd>
           </div>
         </div>
@@ -26,7 +26,12 @@
               <SearchIcon class="section-icon" aria-hidden="true" />
               {{ formatMessage(messages.searchResults) }}
             </div>
-            <div v-if="results.length" ref="resultsContainer" class="command-menu-results" role="listbox">
+            <div
+              v-if="results.length"
+              ref="resultsContainer"
+              class="command-menu-results"
+              role="listbox"
+            >
               <button
                 v-for="(result, index) in results"
                 :key="result.id"
@@ -36,7 +41,12 @@
                 @click="selectResult(result)"
                 @mouseenter="selectedIndex = index"
               >
-                <img :src="result.icon_url" :alt="result.title" class="project-icon" loading="lazy" />
+                <img
+                  :src="result.icon_url"
+                  :alt="result.title"
+                  class="project-icon"
+                  loading="lazy"
+                />
                 <div class="project-info">
                   <span class="project-title">{{ result.title }}</span>
                   <span class="project-description">{{ result.description }}</span>
@@ -66,155 +76,154 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
-import { SearchIcon, CompassIcon } from '@modrinth/assets'
-import { useRouter } from 'vue-router'
-import { defineMessage, defineMessages } from '@vintl/vintl'
-import { useVIntl } from '#imports'
-import { useBaseFetch } from '~/composables/fetch'
+import { ref, onMounted, onBeforeUnmount, watch, nextTick } from "vue";
+import { SearchIcon, CompassIcon } from "@modrinth/assets";
+import { useRouter } from "vue-router";
+import { useVIntl } from "#imports";
+import { useBaseFetch } from "~/composables/fetch.js";
 
 const messages = defineMessages({
   searchPlaceholder: {
-    id: 'command-menu.search.placeholder',
-    defaultMessage: 'Search projects, mods, users...',
+    id: "command-menu.search.placeholder",
+    defaultMessage: "Search projects, mods, users...",
   },
   searchResults: {
-    id: 'command-menu.search.results',
-    defaultMessage: 'Search Results',
+    id: "command-menu.search.results",
+    defaultMessage: "Search Results",
   },
   quickActions: {
-    id: 'command-menu.quick-actions',
-    defaultMessage: 'Quick Actions',
+    id: "command-menu.quick-actions",
+    defaultMessage: "Quick Actions",
   },
   noResults: {
-    id: 'command-menu.search.no-results',
-    defaultMessage: 'No matching results found',
+    id: "command-menu.search.no-results",
+    defaultMessage: "No matching results found",
   },
   startTyping: {
-    id: 'command-menu.search.start-typing',
-    defaultMessage: 'Start typing to search across Modrinth...',
+    id: "command-menu.search.start-typing",
+    defaultMessage: "Start typing to search across Modrinth...",
   },
   searchHint: {
-    id: 'command-menu.search.hint',
-    defaultMessage: 'Search for projects, mods, plugins, and more',
+    id: "command-menu.search.hint",
+    defaultMessage: "Search for projects, mods, plugins, and more",
   },
   navigationHint: {
-    id: 'command-menu.search.navigation-hint',
-    defaultMessage: 'Use ↑↓ to navigate, enter to select',
-  }
-})
+    id: "command-menu.search.navigation-hint",
+    defaultMessage: "Use ↑↓ to navigate, enter to select",
+  },
+});
 
-const { formatMessage } = useVIntl()
-const router = useRouter()
+const { formatMessage } = useVIntl();
+const router = useRouter();
 
-const show = ref(false)
-const query = ref('')
-const results = ref([])
-const selectedIndex = ref(0)
-const searchInput = ref(null)
-const resultsContainer = ref(null)
+const show = ref(false);
+const query = ref("");
+const results = ref([]);
+const selectedIndex = ref(0);
+const searchInput = ref(null);
+const resultsContainer = ref(null);
 
-const isMac = ref(false)
+const isMac = ref(false);
 onMounted(() => {
-  isMac.value = navigator?.platform?.toLowerCase().includes('mac') ?? false
-})
+  isMac.value = navigator?.platform?.toLowerCase().includes("mac") ?? false;
+});
 
 const searchProjects = async (searchQuery) => {
   if (!searchQuery) {
-    results.value = []
-    return
+    results.value = [];
+    return;
   }
 
   try {
-    const response = await useBaseFetch(`search?query=${encodeURIComponent(searchQuery)}&limit=10`)
-    results.value = response.hits
+    const response = await useBaseFetch(`search?query=${encodeURIComponent(searchQuery)}&limit=10`);
+    results.value = response.hits;
   } catch (error) {
-    console.error('Search error:', error)
-    results.value = []
+    console.error("Search error:", error);
+    results.value = [];
   }
-}
+};
 
 watch(query, (newQuery) => {
-  selectedIndex.value = 0
-  searchProjects(newQuery)
-})
+  selectedIndex.value = 0;
+  searchProjects(newQuery);
+});
 
 const selectResult = (result) => {
-  router.push(`/project/${result.slug}`)
-  close()
-}
+  router.push(`/project/${result.slug}`);
+  close();
+};
 
 const handleEnter = () => {
   if (results.value[selectedIndex.value]) {
-    selectResult(results.value[selectedIndex.value])
+    selectResult(results.value[selectedIndex.value]);
   }
-}
+};
 
 const selectNext = () => {
-  selectedIndex.value = (selectedIndex.value + 1) % results.value.length
-  scrollSelectedIntoView()
-}
+  selectedIndex.value = (selectedIndex.value + 1) % results.value.length;
+  scrollSelectedIntoView();
+};
 
 const selectPrevious = () => {
-  selectedIndex.value = (selectedIndex.value - 1 + results.value.length) % results.value.length
-  scrollSelectedIntoView()
-}
+  selectedIndex.value = (selectedIndex.value - 1 + results.value.length) % results.value.length;
+  scrollSelectedIntoView();
+};
 
 const scrollSelectedIntoView = () => {
   if (resultsContainer.value) {
-    const activeItem = resultsContainer.value.children[selectedIndex.value]
+    const activeItem = resultsContainer.value.children[selectedIndex.value];
     if (activeItem) {
-      activeItem.scrollIntoView({ block: 'nearest' })
+      activeItem.scrollIntoView({ block: "nearest" });
     }
   }
-}
+};
 
 const props = defineProps({
   onStateChange: {
     type: Function,
     default: async () => {},
-  }
-})
+  },
+});
 
 const open = async () => {
-  show.value = true
-  await props.onStateChange(true)
+  show.value = true;
+  await props.onStateChange(true);
   nextTick(() => {
-    searchInput.value?.focus()
-  })
-}
+    searchInput.value?.focus();
+  });
+};
 
 const close = async () => {
-  show.value = false
-  await props.onStateChange(false)
-  query.value = ''
-  results.value = []
-  selectedIndex.value = 0
-}
+  show.value = false;
+  await props.onStateChange(false);
+  query.value = "";
+  results.value = [];
+  selectedIndex.value = 0;
+};
 
 const handleKeydown = (e) => {
-  if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
-    e.preventDefault()
+  if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+    e.preventDefault();
     if (show.value) {
-      close()
+      close();
     } else {
-      open()
+      open();
     }
   }
-}
+};
 
 onMounted(() => {
-  window.addEventListener('keydown', handleKeydown)
-})
+  window.addEventListener("keydown", handleKeydown);
+});
 
 onBeforeUnmount(() => {
-  window.removeEventListener('keydown', handleKeydown)
-})
+  window.removeEventListener("keydown", handleKeydown);
+});
 
 defineExpose({
   open,
   close,
-})
+});
 </script>
 
 <style lang="scss" scoped>
@@ -234,7 +243,7 @@ defineExpose({
   background: var(--color-raised-bg);
   border: 1px solid var(--color-divider);
   border-radius: 12px;
-  box-shadow: 
+  box-shadow:
     0 0 0 1px rgba(255, 255, 255, 0.1),
     0 8px 32px rgba(0, 0, 0, 0.4);
   overflow: hidden;
@@ -274,7 +283,7 @@ defineExpose({
   font-size: 14px;
   padding: 0 8px;
   color: var(--color-text);
-  
+
   &::placeholder {
     color: var(--color-text-secondary);
   }
@@ -287,7 +296,7 @@ defineExpose({
   background: var(--color-button-bg);
   border-radius: 6px;
   margin-left: 4px;
-  
+
   kbd {
     padding: 1px 4px;
     font-size: 11px;
@@ -313,7 +322,7 @@ defineExpose({
     color: var(--color-text-secondary);
     text-transform: uppercase;
     letter-spacing: 0.5px;
-    
+
     .section-icon {
       width: 14px;
       height: 14px;
@@ -349,7 +358,7 @@ defineExpose({
   &:hover,
   &.active {
     background: var(--color-button-bg);
-    
+
     .project-title {
       color: var(--color-brand);
     }
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index c422cb16cd..a38d957e82 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -693,7 +693,7 @@ import { getProjectTypeMessage } from "~/utils/i18n-project-type.ts";
 import CollectionCreateModal from "~/components/ui/CollectionCreateModal.vue";
 import OrganizationCreateModal from "~/components/ui/OrganizationCreateModal.vue";
 import TeleportOverflowMenu from "~/components/ui/servers/TeleportOverflowMenu.vue";
-import CommandMenu from '~/components/ui/CommandMenu.vue'
+import CommandMenu from "~/components/ui/CommandMenu.vue";
 
 const { formatMessage } = useVIntl();
 
@@ -992,8 +992,7 @@ const disableRandomProjectsForRoute = computed(
     route.name.includes("admin"),
 );
 
-const commandMenu = ref(null)
-const commandMenuOpen = ref(false)
+const commandMenu = ref(null);
 
 async function onKeyDown(event) {
   if (disableRandomProjects.value || disableRandomProjectsForRoute.value) {
diff --git a/packages/ui/src/components/user/UserHoverCard.vue b/packages/ui/src/components/user/UserHoverCard.vue
index 3b562963ed..69f06b6a5c 100644
--- a/packages/ui/src/components/user/UserHoverCard.vue
+++ b/packages/ui/src/components/user/UserHoverCard.vue
@@ -1,352 +1,351 @@
 <template>
-    <span
-      ref="triggerEl"
-      class="user-hover-card-trigger"
-      @mouseenter="startHover"
-      @mouseleave="handleLeave"
-    >
-      <slot />
-    </span>
-    <Teleport to="body">
-      <Transition name="fade">
-        <div
-          v-if="shown && userData?.username"
-          ref="cardEl"
-          class="hover-content"
-          :style="cardStyle"
-          @mouseenter="keepCard"
-          @mouseleave="handleLeave"
-        >
-          <div class="user-info">
-            <div class="user-header">
-              <nuxt-link :to="`/user/${userData.username}`" class="user-link">
-                <img
-                  :src="userData.avatar_url"
-                  :alt="`${userData.username}'s avatar`"
-                  class="user-avatar"
-                />
-                <div>
-                  <h3>{{ userData.username }}</h3>
-                  <div class="user-joined">
-                    Joined {{ new Date(userData.created).toLocaleDateString() }}
-                  </div>
-                </div>
-              </nuxt-link>
-            </div>
-            <div v-if="userData.bio" class="user-bio">
-              {{ userData.bio }}
-            </div>
-            <div class="user-stats">
+  <span
+    ref="triggerEl"
+    class="user-hover-card-trigger"
+    @mouseenter="startHover"
+    @mouseleave="handleLeave"
+  >
+    <slot />
+  </span>
+  <Teleport to="body">
+    <Transition name="fade">
+      <div
+        v-if="shown && userData?.username"
+        ref="cardEl"
+        class="hover-content"
+        :style="cardStyle"
+        @mouseenter="keepCard"
+        @mouseleave="handleLeave"
+      >
+        <div class="user-info">
+          <div class="user-header">
+            <nuxt-link :to="`/user/${userData.username}`" class="user-link">
+              <img
+                :src="userData.avatar_url"
+                :alt="`${userData.username}'s avatar`"
+                class="user-avatar"
+              />
               <div>
-                <span class="stat-value">{{ userData.projects_count }}</span> projects
+                <h3>{{ userData.username }}</h3>
+                <div class="user-joined">
+                  Joined {{ new Date(userData.created).toLocaleDateString() }}
+                </div>
               </div>
+            </nuxt-link>
+          </div>
+          <div v-if="userData.bio" class="user-bio">
+            {{ userData.bio }}
+          </div>
+          <div class="user-stats">
+            <div>
+              <span class="stat-value">{{ userData.projects_count }}</span> projects
             </div>
-            <div v-if="projects?.length" class="user-projects">
-              <div v-for="project in projects" :key="project.id" class="project-preview">
-                <img :src="project.icon_url" :alt="`${project.title} icon`" class="project-icon" />
-                <div class="project-info">
-                  <nuxt-link
-                    :to="`/${$getProjectTypeForUrl(project.project_type || project.type, project.categories)}/${project.slug || project.id}`"
-                    class="project-title"
-                  >
-                    {{ project.title }}
-                  </nuxt-link>
-                  <div class="project-stats">
-                    <span>{{ $formatNumber(project.downloads) }} downloads</span>
-                  </div>
+          </div>
+          <div v-if="projects?.length" class="user-projects">
+            <div v-for="project in projects" :key="project.id" class="project-preview">
+              <img :src="project.icon_url" :alt="`${project.title} icon`" class="project-icon" />
+              <div class="project-info">
+                <nuxt-link
+                  :to="`/${$getProjectTypeForUrl(project.project_type || project.type, project.categories)}/${project.slug || project.id}`"
+                  class="project-title"
+                >
+                  {{ project.title }}
+                </nuxt-link>
+                <div class="project-stats">
+                  <span>{{ $formatNumber(project.downloads) }} downloads</span>
                 </div>
               </div>
             </div>
           </div>
         </div>
-      </Transition>
-    </Teleport>
-  </template>
-  
-  <script setup>
-  import { ref, onMounted, onUnmounted, nextTick } from "vue";
-  
-  const props = defineProps({
-    userId: { type: String, required: true },
-  });
-  
-  const shown = ref(false);
-  const userData = ref(null);
-  const projects = ref([]);
-  const triggerEl = ref(null);
-  const cardEl = ref(null);
-  const cardStyle = ref({});
-  
-  let hoverTimeout = null;
-  let isHovering = false;
-  let isHoveringCard = false;
-  let hideTimeout = null;
-  
-  const HIDE_DELAY = 500;
-  
-  function updatePosition() {
-    if (!triggerEl.value || !shown.value) return;
-  
-    const rect = triggerEl.value.getBoundingClientRect();
-    const viewportHeight = window.innerHeight;
-    const showAbove = rect.bottom > viewportHeight - 300 && rect.top > 300;
-  
-    const style = {
-      position: "fixed",
-      left: `${rect.left}px`,
-      ...(showAbove
-        ? { bottom: `${viewportHeight - rect.top + 8}px` }
-        : { top: `${rect.bottom + 8}px` }),
-      minWidth: "300px",
-      maxWidth: "400px",
-      maxHeight: "300px",
-    };
-  
-    Object.assign(cardStyle.value, style);
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+
+const props = defineProps({
+  userId: { type: String, required: true },
+})
+
+const shown = ref(false)
+const userData = ref(null)
+const projects = ref([])
+const triggerEl = ref(null)
+const cardEl = ref(null)
+const cardStyle = ref({})
+
+let hoverTimeout = null
+let isHovering = false
+let isHoveringCard = false
+let hideTimeout = null
+
+const HIDE_DELAY = 500
+
+function updatePosition() {
+  if (!triggerEl.value || !shown.value) return
+
+  const rect = triggerEl.value.getBoundingClientRect()
+  const viewportHeight = window.innerHeight
+  const showAbove = rect.bottom > viewportHeight - 300 && rect.top > 300
+
+  const style = {
+    position: 'fixed',
+    left: `${rect.left}px`,
+    ...(showAbove
+      ? { bottom: `${viewportHeight - rect.top + 8}px` }
+      : { top: `${rect.bottom + 8}px` }),
+    minWidth: '300px',
+    maxWidth: '400px',
+    maxHeight: '300px',
   }
-  
-  // hide the hover card on scroll cuz we dont want it stuck on a users screen!
-  function handleScroll() {
-    hideCard();
-  }
-  
-  function startHideCard() {
-    hideTimeout = setTimeout(() => {
-      if (!isHoveringCard && !isHovering) {
-        hideCard();
-      }
-    }, HIDE_DELAY);
-  }
-  
-  function keepCard() {
-    isHoveringCard = true;
-    if (hideTimeout) {
-      clearTimeout(hideTimeout);
+
+  Object.assign(cardStyle.value, style)
+}
+
+// hide the hover card on scroll cuz we dont want it stuck on a users screen!
+function handleScroll() {
+  hideCard()
+}
+
+function startHideCard() {
+  hideTimeout = setTimeout(() => {
+    if (!isHoveringCard && !isHovering) {
+      hideCard()
     }
+  }, HIDE_DELAY)
+}
+
+function keepCard() {
+  isHoveringCard = true
+  if (hideTimeout) {
+    clearTimeout(hideTimeout)
   }
-  
-  function handleLeave() {
-    isHoveringCard = false;
-    isHovering = false;
-    startHideCard();
+}
+
+function handleLeave() {
+  isHoveringCard = false
+  isHovering = false
+  startHideCard()
+}
+
+onMounted(() => {
+  window.addEventListener('scroll', handleScroll, { passive: true })
+  window.addEventListener('resize', handleScroll, { passive: true })
+})
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', handleScroll)
+  window.removeEventListener('resize', handleScroll)
+  clearTimeout(hoverTimeout)
+  if (hideTimeout) {
+    clearTimeout(hideTimeout)
   }
-  
-  onMounted(() => {
-    window.addEventListener("scroll", handleScroll, { passive: true });
-    window.addEventListener("resize", handleScroll, { passive: true });
-  });
-  
-  onUnmounted(() => {
-    window.removeEventListener("scroll", handleScroll);
-    window.removeEventListener("resize", handleScroll);
-    clearTimeout(hoverTimeout);
-    if (hideTimeout) {
-      clearTimeout(hideTimeout);
-    }
-  });
-  
-  async function startHover() {
-    if (hoverTimeout) return;
-  
-    isHovering = true;
-    hoverTimeout = setTimeout(async () => {
-      if (!isHovering) return;
-  
-      if (!userData.value) {
-        try {
-          const userResp = await useBaseFetch(`user/${props.userId}`);
-          const projectsResp = await useBaseFetch(`user/${props.userId}/projects`);
-  
-          userData.value = userResp || null;
-          projects.value = (projectsResp || []).slice(0, 3);
-  
-          if (userData.value) {
-            userData.value.projects_count = projectsResp?.length || 0;
-          }
-        } catch (err) {
-          console.error("Failed to load user data:", err);
-          return;
+})
+
+async function startHover() {
+  if (hoverTimeout) return
+
+  isHovering = true
+  hoverTimeout = setTimeout(async () => {
+    if (!isHovering) return
+
+    if (!userData.value) {
+      try {
+        const userResp = await useBaseFetch(`user/${props.userId}`)
+        const projectsResp = await useBaseFetch(`user/${props.userId}/projects`)
+
+        userData.value = userResp || null
+        projects.value = (projectsResp || []).slice(0, 3)
+
+        if (userData.value) {
+          userData.value.projects_count = projectsResp?.length || 0
         }
-      }
-  
-      if (isHovering) {
-        shown.value = true;
-        nextTick(() => {
-          updatePosition();
-        });
-      }
-    }, 150);
-  }
-  
-  function hideCard() {
-    shown.value = false;
-    if (hoverTimeout) {
-      clearTimeout(hoverTimeout);
-      hoverTimeout = null;
-    }
-  }
-  </script>
-  
-  <style lang="scss" scoped>
-  .user-hover-card-trigger {
-    position: relative;
-    color: inherit;
-    cursor: pointer;
-  
-    a {
-      text-decoration: none;
-      transition: color 0.2s ease;
-  
-      &:hover {
-        color: var(--color-link);
+      } catch (err) {
+        console.error('Failed to load user data:', err)
+        return
       }
     }
-  }
-  
-  .hover-content {
-    z-index: 9999;
-    position: fixed;
-    background: var(--color-raised-bg);
-    border: 1px solid var(--color-divider);
-    border-radius: var(--size-rounded-lg);
-    box-shadow: var(--shadow-floating);
-    overflow-y: auto;
-    pointer-events: auto;
-    width: 320px;
-  }
-  
-  .user-info {
-    padding: var(--spacing-card-md);
-  }
-  
-  .user-header {
-    .user-link {
-      display: flex;
-      align-items: center;
-      gap: var(--spacing-card-sm);
-      color: inherit;
-      text-decoration: none;
-      transition: opacity 0.2s ease;
-  
-      &:hover {
-        opacity: 0.8;
-  
-        h3 {
-          color: var(--color-link);
-        }
-      }
-  
-      h3 {
-        margin: 0;
-        font-size: var(--font-size-lg);
-        font-weight: 600;
-        line-height: 1.2;
-        transition: color 0.2s ease;
-      }
+
+    if (isHovering) {
+      shown.value = true
+      nextTick(() => {
+        updatePosition()
+      })
     }
+  }, 150)
+}
+
+function hideCard() {
+  shown.value = false
+  if (hoverTimeout) {
+    clearTimeout(hoverTimeout)
+    hoverTimeout = null
   }
-  
-  .user-avatar {
-    width: 48px;
-    height: 48px;
-    border-radius: 50%;
-    box-shadow: var(--shadow-sm);
-  }
-  
-  .user-joined {
-    margin-top: 2px;
-    font-size: var(--font-size-sm);
-    color: var(--color-text-secondary);
-  }
-  
-  .user-bio {
-    margin-top: var(--spacing-card-sm);
-    font-size: var(--font-size-sm);
-    line-height: 1.5;
-    color: var(--color-text);
-  }
-  
-  .user-stats {
-    margin-top: var(--spacing-card-sm);
-    padding-top: var(--spacing-card-sm);
-    border-top: 1px solid var(--color-divider);
-    display: flex;
-    gap: var(--spacing-card-md);
-    font-size: var(--font-size-sm);
-    color: var(--color-text-secondary);
-  
-    .stat-value {
-      font-weight: 600;
-      color: var(--color-text);
+}
+</script>
+
+<style lang="scss" scoped>
+.user-hover-card-trigger {
+  position: relative;
+  color: inherit;
+  cursor: pointer;
+
+  a {
+    text-decoration: none;
+    transition: color 0.2s ease;
+
+    &:hover {
+      color: var(--color-link);
     }
   }
-  
-  .user-projects {
-    margin-top: var(--spacing-card-sm);
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-card-xs);
-  }
-  
-  .project-preview {
+}
+
+.hover-content {
+  z-index: 9999;
+  position: fixed;
+  background: var(--color-raised-bg);
+  border: 1px solid var(--color-divider);
+  border-radius: var(--size-rounded-lg);
+  box-shadow: var(--shadow-floating);
+  overflow-y: auto;
+  pointer-events: auto;
+  width: 320px;
+}
+
+.user-info {
+  padding: var(--spacing-card-md);
+}
+
+.user-header {
+  .user-link {
     display: flex;
     align-items: center;
     gap: var(--spacing-card-sm);
-    padding: var(--spacing-card-xs);
-    border-radius: var(--size-rounded-md);
-    background: var(--color-button-bg);
-    transition: all 0.2s ease;
-  
+    color: inherit;
+    text-decoration: none;
+    transition: opacity 0.2s ease;
+
     &:hover {
-      background: var(--color-button-bg-hover);
-      transform: translateY(-1px);
-  
-      .project-title {
+      opacity: 0.8;
+
+      h3 {
         color: var(--color-link);
       }
     }
+
+    h3 {
+      margin: 0;
+      font-size: var(--font-size-lg);
+      font-weight: 600;
+      line-height: 1.2;
+      transition: color 0.2s ease;
+    }
   }
-  
-  .project-icon {
-    width: 36px;
-    height: 36px;
-    border-radius: var(--size-rounded-sm);
-    box-shadow: var(--shadow-sm);
-  }
-  
-  .project-info {
-    flex: 1;
-    min-width: 0;
-    display: flex;
-    flex-direction: column;
-  }
-  
-  .project-title {
-    display: block;
-    font-weight: 500;
-    font-size: var(--font-size-base);
+}
+
+.user-avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  box-shadow: var(--shadow-sm);
+}
+
+.user-joined {
+  margin-top: 2px;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
+.user-bio {
+  margin-top: var(--spacing-card-sm);
+  font-size: var(--font-size-sm);
+  line-height: 1.5;
+  color: var(--color-text);
+}
+
+.user-stats {
+  margin-top: var(--spacing-card-sm);
+  padding-top: var(--spacing-card-sm);
+  border-top: 1px solid var(--color-divider);
+  display: flex;
+  gap: var(--spacing-card-md);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+
+  .stat-value {
+    font-weight: 600;
     color: var(--color-text);
-    text-decoration: none;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    transition: color 0.2s ease;
   }
-  
-  .project-stats {
-    font-size: var(--font-size-sm);
-    color: var(--color-text-secondary);
-  }
-  
-  .fade-enter-active,
-  .fade-leave-active {
-    transition: all 0.2s ease;
-  }
-  
-  .fade-enter-from,
-  .fade-leave-to {
-    opacity: 0;
-    transform: translateY(-4px);
+}
+
+.user-projects {
+  margin-top: var(--spacing-card-sm);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-card-xs);
+}
+
+.project-preview {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-card-sm);
+  padding: var(--spacing-card-xs);
+  border-radius: var(--size-rounded-md);
+  background: var(--color-button-bg);
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: var(--color-button-bg-hover);
+    transform: translateY(-1px);
+
+    .project-title {
+      color: var(--color-link);
+    }
   }
-  </style>
-  
\ No newline at end of file
+}
+
+.project-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: var(--size-rounded-sm);
+  box-shadow: var(--shadow-sm);
+}
+
+.project-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.project-title {
+  display: block;
+  font-weight: 500;
+  font-size: var(--font-size-base);
+  color: var(--color-text);
+  text-decoration: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: color 0.2s ease;
+}
+
+.project-stats {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+</style>