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/pages/library/Custom.vue

@@ -0,0 +1,17 @@
+<script setup>
+import GridDisplay from '@/components/GridDisplay.vue'
+
+defineProps({
+  instances: {
+    type: Array,
+    required: true,
+  },
+})
+</script>
+<template>
+  <GridDisplay
+    v-if="instances.length > 0"
+    label="Instances"
+    :instances="instances.filter((i) => !i.linked_data)"
+  />
+</template>

apps/app-frontend/src/pages/library/Downloaded.vue

@@ -0,0 +1,17 @@
+<script setup>
+import GridDisplay from '@/components/GridDisplay.vue'
+
+defineProps({
+  instances: {
+    type: Array,
+    required: true,
+  },
+})
+</script>
+<template>
+  <GridDisplay
+    v-if="instances.length > 0"
+    label="Instances"
+    :instances="instances.filter((i) => i.linked_data)"
+  />
+</template>

apps/app-frontend/src/pages/library/Index.vue

@@ -0,0 +1,87 @@
+<script setup>
+import { onUnmounted, ref, shallowRef } from 'vue'
+import { list } from '@/helpers/profile.js'
+import { useRoute } from 'vue-router'
+import { useBreadcrumbs } from '@/store/breadcrumbs.js'
+import { profile_listener } from '@/helpers/events.js'
+import { handleError } from '@/store/notifications.js'
+import { Button } from '@modrinth/ui'
+import { PlusIcon } from '@modrinth/assets'
+import InstanceCreationModal from '@/components/ui/InstanceCreationModal.vue'
+import { NewInstanceImage } from '@/assets/icons'
+import NavTabs from '@/components/ui/NavTabs.vue'
+
+const route = useRoute()
+const breadcrumbs = useBreadcrumbs()
+
+breadcrumbs.setRootContext({ name: 'Library', link: route.path })
+
+const instances = shallowRef(await list().catch(handleError))
+
+const offline = ref(!navigator.onLine)
+window.addEventListener('offline', () => {
+  offline.value = true
+})
+window.addEventListener('online', () => {
+  offline.value = false
+})
+
+const unlistenProfile = await profile_listener(async () => {
+  instances.value = await list().catch(handleError)
+})
+onUnmounted(() => {
+  unlistenProfile()
+})
+</script>
+
+<template>
+  <div class="p-6 flex flex-col gap-3">
+    <h1 class="m-0 text-2xl">Library</h1>
+    <NavTabs
+      :links="[
+        { label: 'All instances', href: `/library` },
+        { label: 'Downloaded', href: `/library/downloaded` },
+        { label: 'Custom', href: `/library/custom` },
+        { label: 'Shared with me', href: `/library/shared`, shown: false },
+        { label: 'Saved', href: `/library/saved`, shown: false },
+      ]"
+    />
+    <template v-if="instances.length > 0">
+      <RouterView :instances="instances" />
+    </template>
+    <div v-else class="no-instance">
+      <div class="icon">
+        <NewInstanceImage />
+      </div>
+      <h3>No instances found</h3>
+      <Button color="primary" :disabled="offline" @click="$refs.installationModal.show()">
+        <PlusIcon />
+        Create new instance
+      </Button>
+      <InstanceCreationModal ref="installationModal" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.no-instance {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  gap: var(--gap-md);
+
+  p,
+  h3 {
+    margin: 0;
+  }
+
+  .icon {
+    svg {
+      width: 10rem;
+      height: 10rem;
+    }
+  }
+}
+</style>

apps/app-frontend/src/pages/library/Overview.vue

@@ -0,0 +1,13 @@
+<script setup>
+import GridDisplay from '@/components/GridDisplay.vue'
+
+defineProps({
+  instances: {
+    type: Array,
+    required: true,
+  },
+})
+</script>
+<template>
+  <GridDisplay v-if="instances.length > 0" label="Instances" :instances="instances" />
+</template>

apps/app-frontend/src/pages/library/index.js

@@ -0,0 +1,6 @@
+import Index from './Index.vue'
+import Overview from './Overview.vue'
+import Downloaded from './Downloaded.vue'
+import Custom from './Custom.vue'
+
+export { Index, Overview, Downloaded, Custom }