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>

packages/ui/src/components/project/ProjectBackgroundGradient.vue

@@ -0,0 +1,46 @@
+<template>
+  <div :style="`--_color: ${color}`" />
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    project: {
+      body: string,
+      color: number,
+    }
+  }>(),
+  {
+  },
+)
+
+function clamp (value: number) {
+  return Math.max(0, Math.min(255, value));
+}
+
+function toHex (value: number) {
+  return clamp(value).toString(16).padStart(2, '0');
+}
+
+function decimalToHexColor(decimal: number) {
+  const r = (decimal >> 16) & 255;
+  const g = (decimal >> 8) & 255;
+  const b = decimal & 255;
+
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+
+
+const color = computed(() => {
+  return decimalToHexColor(props.project.color)
+})
+</script>
+<style scoped lang="scss">
+div {
+  width: 100%;
+  height: 60rem;
+  background: linear-gradient(to bottom, var(--_color), transparent);
+  opacity: 0.075;
+}
+</style>