App redesign (#2946)

* Start of app redesign

* format

* continue progress

* Content page nearly done

* Fix recursion issues with content page

* Fix update all alignment

* Discover page progress

* Settings progress

* Removed unlocked-size hack that breaks web

* Revamp project page, refactor web project page to share code with app, fixed loading bar, misc UI/UX enhancements, update ko-fi logo, update arrow icons, fix web issues caused by floating-vue migration, fix tooltip issues, update web tooltips, clean up web hydration issues

* Ads + run prettier

* Begin auth refactor, move common messages to ui lib, add i18n extraction to all apps, begin Library refactor

* fix ads not hiding when plus log in

* rev lockfile changes/conflicts

* Fix sign in page

* Add generated

* (mostly) Data driven search

* Fix search mobile issue

* profile fixes

* Project versions page, fix typescript on UI lib and misc fixes

* Remove unused gallery component

* Fix linkfunction err

* Search filter controls at top, localization for locked filters

* Fix provided filter names

* Fix navigating from instance browse to main browse

* Friends frontend (#2995)

* Friends system frontend

* (almost) finish frontend

* finish friends, fix lint

* Fix lint

---------

Signed-off-by: Geometrically <18202329+Geometrically@users.noreply.github.com>

* Refresh macOS app icon

* Update web search UI more

* Fix link opens

* Fix frontend build

---------

Signed-off-by: Geometrically <18202329+Geometrically@users.noreply.github.com>
Co-authored-by: Jai A <jaiagr+gpg@pm.me>
Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com>

apps/frontend/src/layouts/default.vue

@@ -1,4 +1,10 @@
 <template>
+  <div class="pointer-events-none fixed inset-0 z-[-1]">
+    <div id="fixed-background-teleport" class="relative"></div>
+  </div>
+  <div class="pointer-events-none absolute inset-0 z-[-1]">
+    <div id="absolute-background-teleport" class="relative"></div>
+  </div>
   <div ref="main_page" class="layout" :class="{ 'expanded-mobile-nav': isBrowseMenuOpen }">
     <div
       v-if="auth.user && !auth.user.email_verified && route.path !== '/auth/verify-email'"
@@ -54,7 +60,7 @@
       </div>
     </div>
     <header
-      class="experimental-styles-within desktop-only relative z-[5] mx-auto grid max-w-[1280px] grid-cols-[1fr_auto] items-center gap-2 px-3 py-4 lg:grid-cols-[auto_1fr_auto]"
+      class="experimental-styles-within desktop-only relative z-[5] mx-auto grid max-w-[1280px] grid-cols-[1fr_auto] items-center gap-2 px-6 py-4 lg:grid-cols-[auto_1fr_auto]"
     >
       <div>
         <NuxtLink to="/" aria-label="Modrinth home page">
@@ -203,7 +209,10 @@
 
           <ButtonStyled
             type="transparent"
-            :highlighted="route.name?.startsWith('servers')"
+            :highlighted="
+              route.name?.startsWith('servers') ||
+              (route.name?.startsWith('search-') && route.query.sid)
+            "
             :highlighted-style="
               route.name === 'servers' ? 'main-nav-primary' : 'main-nav-secondary'
             "
@@ -229,6 +238,7 @@
             class="btn-dropdown-animation flex items-center gap-1 rounded-xl bg-transparent px-2 py-1"
             position="bottom"
             direction="left"
+            :dropdown-id="createPopoutId"
             aria-label="Create new..."
             :options="[
               {
@@ -260,6 +270,7 @@
         </ButtonStyled>
         <OverflowMenu
           v-if="auth.user"
+          :dropdown-id="userPopoutId"
           class="btn-dropdown-animation flex items-center gap-1 rounded-xl bg-transparent px-2 py-1"
           :options="userMenuOptions"
         >
@@ -588,15 +599,14 @@ import {
   GlassesIcon,
   PaintBrushIcon,
   PackageOpenIcon,
+  XIcon as CrossIcon,
+  ScaleIcon as ModerationIcon,
+  BellIcon as NotificationIcon,
 } from "@modrinth/assets";
-import { Button, ButtonStyled, OverflowMenu, Avatar } from "@modrinth/ui";
+import { Button, ButtonStyled, OverflowMenu, Avatar, commonMessages } from "@modrinth/ui";
 
-import CrossIcon from "assets/images/utils/x.svg";
-import NotificationIcon from "assets/images/sidebar/notifications.svg";
-import ModerationIcon from "assets/images/sidebar/admin.svg";
 import ModalCreation from "~/components/ui/ModalCreation.vue";
 import { getProjectTypeMessage } from "~/utils/i18n-project-type.ts";
-import { commonMessages } from "~/utils/common-messages.ts";
 import CollectionCreateModal from "~/components/ui/CollectionCreateModal.vue";
 import OrganizationCreateModal from "~/components/ui/OrganizationCreateModal.vue";
 import TeleportOverflowMenu from "~/components/ui/servers/TeleportOverflowMenu.vue";
@@ -614,6 +624,9 @@ const config = useRuntimeConfig();
 const route = useNativeRoute();
 const link = config.public.siteUrl + route.path.replace(/\/+$/, "");
 
+const createPopoutId = useId();
+const userPopoutId = useId();
+
 const verifyEmailBannerMessages = defineMessages({
   title: {
     id: "layout.banner.verify-email.title",
@@ -907,9 +920,13 @@ const userMenuOptions = computed(() => {
   return options;
 });
 
-const isDiscovering = computed(() => route.name && route.name.startsWith("search-"));
+const isDiscovering = computed(
+  () => route.name && route.name.startsWith("search-") && !route.query.sid,
+);
 
-const isDiscoveringSubpage = computed(() => route.name && route.name.startsWith("type-id"));
+const isDiscoveringSubpage = computed(
+  () => route.name && route.name.startsWith("type-id") && !route.query.sid,
+);
 
 onMounted(() => {
   if (window && import.meta.client) {
@@ -1014,7 +1031,6 @@ function hideStagingBanner() {
 
 .layout {
   min-height: 100vh;
-  background-color: var(--color-bg);
   display: block;
 
   @media screen and (min-width: 1024px) {
@@ -1430,7 +1446,7 @@ function hideStagingBanner() {
   }
 
   main {
-    padding-top: 0.75rem;
+    padding-top: 1.5rem;
   }
 }
 </style>

apps/frontend/src/layouts/empty.vue

@@ -1 +1,4 @@
 <template><slot id="main" /></template>
+<style lang="scss">
+@import "~/assets/styles/global.scss";
+</style>