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/base/ScrollablePanel.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="scrollable-pane-wrapper" :class="{ 'max-height': !props.noMaxHeight }">
+  <div class="scrollable-pane-wrapper">
     <div
       class="wrapper-wrapper"
       :class="{
-        'top-fade': !scrollableAtTop && !props.noMaxHeight,
-        'bottom-fade': !scrollableAtBottom && !props.noMaxHeight,
+        'top-fade': !scrollableAtTop && !props.disableScrolling,
+        'bottom-fade': !scrollableAtBottom && !props.disableScrolling,
       }"
     >
       <div ref="scrollablePane" class="scrollable-pane" @scroll="onScroll">
@@ -19,10 +19,10 @@ import { ref, onMounted, onUnmounted } from 'vue'
 
 const props = withDefaults(
   defineProps<{
-    noMaxHeight?: boolean
+    disableScrolling?: boolean
   }>(),
   {
-    noMaxHeight: false,
+    disableScrolling: false,
   },
 )
 
@@ -49,7 +49,7 @@ onUnmounted(() => {
 })
 function updateFade(scrollTop, offsetHeight, scrollHeight) {
   scrollableAtBottom.value = Math.ceil(scrollTop + offsetHeight) >= scrollHeight
-  scrollableAtTop.value = scrollTop === 0
+  scrollableAtTop.value = scrollTop <= 0
 }
 function onScroll({ target: { scrollTop, offsetHeight, scrollHeight } }) {
   updateFade(scrollTop, offsetHeight, scrollHeight)
@@ -61,47 +61,26 @@ function onScroll({ target: { scrollTop, offsetHeight, scrollHeight } }) {
   display: flex;
   flex-direction: column;
   position: relative;
-
-  &.max-height {
-    max-height: 19rem;
-  }
 }
+
 .wrapper-wrapper {
   flex-grow: 1;
   display: flex;
   overflow: hidden;
   position: relative;
+
   --_fade-height: 4rem;
-  margin-bottom: var(--gap-sm);
-  &.top-fade::before,
-  &.bottom-fade::after {
-    opacity: 1;
+
+  &.top-fade {
+    mask-image: linear-gradient(transparent, rgb(0 0 0 / 100%) var(--_fade-height));
   }
-  &::before,
-  &::after {
-    content: '';
-    left: 0;
-    right: 0;
-    opacity: 0;
-    position: absolute;
-    pointer-events: none;
-    transition: opacity 0.125s ease;
-    height: var(--_fade-height);
-    z-index: 1;
+
+  &.bottom-fade {
+    mask-image: linear-gradient(rgb(0 0 0 / 100%) calc(100% - var(--_fade-height)), transparent 100%);
   }
-  &::before {
-    top: 0;
-    background-image: linear-gradient(
-      var(--scrollable-pane-bg, var(--color-raised-bg)),
-      transparent
-    );
-  }
-  &::after {
-    bottom: 0;
-    background-image: linear-gradient(
-      transparent,
-      var(--scrollable-pane-bg, var(--color-raised-bg))
-    );
+
+  &.top-fade.bottom-fade {
+    mask-image: linear-gradient(transparent, rgb(0 0 0 / 100%) var(--_fade-height), rgb(0 0 0 / 100%) calc(100% - var(--_fade-height)), transparent 100%);
   }
 }
 .scrollable-pane {
@@ -113,26 +92,5 @@ function onScroll({ target: { scrollTop, offsetHeight, scrollHeight } }) {
   overflow-y: auto;
   overflow-x: hidden;
   position: relative;
-
-  ::-webkit-scrollbar {
-    transition: all;
-  }
-
-  &::-webkit-scrollbar {
-    width: var(--gap-md);
-    border: 3px solid var(--color-bg);
-  }
-
-  &::-webkit-scrollbar-track {
-    background: var(--color-bg);
-    border: 3px solid var(--color-bg);
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: var(--color-raised-bg);
-    border-radius: var(--radius-lg);
-    padding: 4px;
-    border: 3px solid var(--color-bg);
-  }
 }
 </style>