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/Breadcrumbs.vue

@@ -1,13 +1,18 @@
 <template>
-  <div class="breadcrumbs">
-    <Button class="breadcrumbs__back transparent" icon-only @click="$router.back()">
+  <div data-tauri-drag-region class="flex items-center gap-1 pl-3">
+    <Button v-if="false" class="breadcrumbs__back transparent" icon-only @click="$router.back()">
       <ChevronLeftIcon />
     </Button>
-    <Button class="breadcrumbs__forward transparent" icon-only @click="$router.forward()">
+    <Button
+      v-if="false"
+      class="breadcrumbs__forward transparent"
+      icon-only
+      @click="$router.forward()"
+    >
       <ChevronRightIcon />
     </Button>
     {{ breadcrumbData.resetToNames(breadcrumbs) }}
-    <div v-for="breadcrumb in breadcrumbs" :key="breadcrumb.name" class="breadcrumbs__item">
+    <template v-for="breadcrumb in breadcrumbs" :key="breadcrumb.name">
       <router-link
         v-if="breadcrumb.link"
         :to="{
@@ -20,13 +25,18 @@
             : breadcrumb.name
         }}
       </router-link>
-      <span v-else class="selected">{{
-        breadcrumb.name.charAt(0) === '?'
-          ? breadcrumbData.getName(breadcrumb.name.slice(1))
-          : breadcrumb.name
-      }}</span>
-      <ChevronRightIcon v-if="breadcrumb.link" class="chevron" />
-    </div>
+      <span
+        v-else
+        data-tauri-drag-region
+        class="text-contrast font-semibold cursor-default select-none"
+        >{{
+          breadcrumb.name.charAt(0) === '?'
+            ? breadcrumbData.getName(breadcrumb.name.slice(1))
+            : breadcrumb.name
+        }}</span
+      >
+      <ChevronRightIcon v-if="breadcrumb.link" data-tauri-drag-region class="w-5 h-5" />
+    </template>
   </div>
 </template>
 
@@ -50,38 +60,3 @@ const breadcrumbs = computed(() => {
   return additionalContext ? [additionalContext, ...route.meta.breadcrumb] : route.meta.breadcrumb
 })
 </script>
-
-<style scoped lang="scss">
-.breadcrumbs {
-  display: flex;
-  flex-direction: row;
-
-  .breadcrumbs__item {
-    display: flex;
-    flex-direction: row;
-    vertical-align: center;
-    margin: auto 0;
-
-    .chevron,
-    a {
-      margin: auto 0;
-    }
-  }
-
-  .breadcrumbs__back,
-  .breadcrumbs__forward {
-    margin: auto 0;
-    color: var(--color-base);
-    height: unset;
-    width: unset;
-  }
-
-  .breadcrumbs__forward {
-    margin-right: 1rem;
-  }
-}
-
-.selected {
-  color: var(--color-contrast);
-}
-</style>