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>
2024-12-11 19:54:18 -08:00
parent 6ec1dcf088
commit c39bb78e38
257 changed files with 15713 additions and 9475 deletions
--- a/packages/ui/src/components/base/Accordion.vue
+++ b/packages/ui/src/components/base/Accordion.vue
@@ -0,0 +1,91 @@
+<template>
+  <div v-bind="$attrs">
+    <button
+      v-if="!!slots.title"
+      :class="buttonClass ?? 'flex flex-col gap-2'"
+      @click="() => (isOpen ? close() : open())"
+    >
+      <slot name="button" :open="isOpen">
+        <div class="flex items-center w-full">
+          <slot name="title" />
+          <DropdownIcon
+            class="ml-auto size-5 transition-transform duration-300 shrink-0 text-contrast"
+            :class="{ 'rotate-180': isOpen }"
+          />
+        </div>
+      </slot>
+      <slot name="summary" />
+    </button>
+    <div class="accordion-content" :class="{ open: isOpen }">
+      <div>
+        <div :class="contentClass ? contentClass : ''" :inert="!isOpen">
+          <slot />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { DropdownIcon } from '@modrinth/assets'
+import { ref, useSlots } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    openByDefault?: boolean
+    type?: 'standard' | 'outlined' | 'transparent'
+    buttonClass?: string
+    contentClass?: string
+    titleWrapperClass?: string
+  }>(),
+  {
+    type: 'standard',
+    openByDefault: false,
+  },
+)
+
+const isOpen = ref(props.openByDefault)
+const emit = defineEmits(['onOpen', 'onClose'])
+
+const slots = useSlots()
+
+function open() {
+  isOpen.value = true
+  emit('onOpen')
+}
+function close() {
+  isOpen.value = false
+  emit('onClose')
+}
+
+defineExpose({
+  open,
+  close,
+  isOpen,
+})
+
+defineOptions({
+  inheritAttrs: false,
+})
+</script>
+<style scoped>
+.accordion-content {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.3s ease-in-out;
+}
+
+@media (prefers-reduced-motion) {
+  .accordion-content {
+    transition: none !important;
+  }
+}
+
+.accordion-content.open {
+  grid-template-rows: 1fr;
+}
+
+.accordion-content > div {
+  overflow: hidden;
+}
+</style>