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/app-frontend/src/components/ui/NavButton.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="tooltip-parent flex items-center justify-center">
+    <RouterLink
+      v-if="typeof to === 'string'"
+      :to="to"
+      v-bind="$attrs"
+      :class="{
+        'router-link-active': isPrimary && isPrimary(route),
+        'subpage-active': isSubpage && isSubpage(route),
+      }"
+      class="w-12 h-12 rounded-full flex items-center justify-center text-2xl transition-all bg-transparent hover:bg-button-bg hover:text-contrast"
+    >
+      <slot />
+    </RouterLink>
+    <button
+      v-else
+      v-bind="$attrs"
+      class="button-animation border-none text-primary cursor-pointer w-12 h-12 rounded-full flex items-center justify-center text-2xl transition-all bg-transparent hover:bg-button-bg hover:text-contrast"
+      @click="to"
+    >
+      <slot />
+    </button>
+    <div class="tooltip-label">
+      <slot name="label" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
+import { RouterLink, useRoute } from 'vue-router'
+
+const route = useRoute()
+
+type RouteFunction = (route: RouteLocationNormalizedLoaded) => boolean
+
+defineProps<{
+  to: (() => void) | string
+  isPrimary?: RouteFunction
+  isSubpage?: RouteFunction
+}>()
+
+defineOptions({
+  inheritAttrs: false,
+})
+</script>
+
+<style lang="scss" scoped>
+.router-link-active,
+.subpage-active {
+  svg {
+    filter: drop-shadow(0 0 0.5rem black);
+  }
+}
+
+.router-link-active {
+  @apply text-[--color-button-text-selected] bg-[--color-button-bg-selected];
+}
+
+.subpage-active {
+  @apply text-contrast bg-button-bg;
+}
+
+.tooltip-parent {
+  position: relative;
+  border-radius: var(--radius-max);
+}
+
+.tooltip-parent:hover .tooltip-label {
+  opacity: 1;
+  translate: 0 0;
+  scale: 1;
+}
+
+.tooltip-label:not(:empty) {
+  --_tooltip-bg: black;
+  --_tooltip-color: var(--dark-color-contrast);
+
+  position: absolute;
+  background-color: var(--_tooltip-bg);
+  color: var(--_tooltip-color);
+  text-wrap: nowrap;
+  padding: 0.5rem 0.5rem;
+  border-radius: var(--radius-sm);
+  left: calc(100% + 0.5rem);
+  font-size: 1rem;
+  line-height: 1;
+  font-weight: bold;
+  filter: drop-shadow(5px 5px 0.8rem rgba(0, 0, 0, 0.35));
+  pointer-events: none;
+  user-select: none;
+
+  opacity: 0;
+  translate: -0.5rem 0;
+  scale: 0.9;
+  transition: all ease-in-out 0.1s;
+}
+
+.tooltip-label:not(:empty)::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  right: 100%; /* To the left of the tooltip */
+  margin-top: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: transparent var(--_tooltip-bg) transparent transparent;
+}
+</style>