feat: add vault overview accordions

components/entities/vault/overview/SecuritizeVaultOverviewPair.vue

@@ -8,17 +8,17 @@ defineProps<{ pair: SecuritizeBorrowVaultPair, desktopOverview?: boolean }>()
 <template>
   <div
     class="flex flex-col"
-    :class="[!desktopOverview ? 'gap-12' : '']"
+    :class="[desktopOverview ? 'gap-16' : 'gap-12']"
   >
     <SecuritizeVaultOverviewPairBlockGeneral
       :pair="pair"
-      :class="[desktopOverview ? 'py-16 [&:first-child]:!pt-0 px-0' : '']"
+      :default-open="true"
     />
     <!-- Oracle adapters should always come from the liability (borrow) vault -->
     <VaultOverviewBlockOracleAdapters
       :vault="pair.borrow"
       :collateral-vaults="[pair.collateral as unknown as EVault]"
-      :class="[desktopOverview ? 'py-16 [&:first-child]:!pt-0 px-0' : '']"
+      :default-open="false"
     />
   </div>
 </template>

components/entities/vault/overview/SecuritizeVaultOverviewPairBlockGeneral.vue

@@ -9,7 +9,7 @@ import type { EVaultCollateral } from '@eulerxyz/euler-v2-sdk'
 import { formatNumber, formatSignificant } from '~/utils/string-utils'
 import { areTokenAddressesCorrelatedByTags } from '~/utils/token-categories'
 
-const { pair } = defineProps<{ pair: SecuritizeBorrowVaultPair }>()
+const { pair, defaultOpen = true } = defineProps<{ pair: SecuritizeBorrowVaultPair, defaultOpen?: boolean }>()
 const { getTokenCategoryTags } = useTokenList()
 
 const currentLiquidationLTV = computed(() => pair.ltv.currentLiquidationLTV)
@@ -98,10 +98,11 @@ const onRampDownInfoIconClick = (event: MouseEvent, pair: EVaultCollateral) => {
 </script>
 
 <template>
-  <div class="bg-body rounded-16 flex flex-col gap-24 p-24">
-    <p class="text-h3 text-white">
-      Overview
-    </p>
+  <VaultOverviewAccordionSection
+    title="Overview"
+    :default-open="defaultOpen"
+    content-class="flex flex-col items-start gap-24"
+  >
     <div class="flex flex-col items-start gap-24">
       <VaultOverviewLabelValue
         label="Price"
@@ -111,7 +112,7 @@ const onRampDownInfoIconClick = (event: MouseEvent, pair: EVaultCollateral) => {
           <span class="text-content-primary">{{ priceInvert.displaySymbol }}</span>
           <button
             type="button"
-            class="ml-4 text-content-primary hover:text-white transition-colors inline-flex"
+            class="ml-4 text-content-primary hover:text-accent-600 transition-colors inline-flex"
             @click.stop="priceInvert.toggle"
           >
             <SvgIcon
@@ -227,5 +228,5 @@ const onRampDownInfoIconClick = (event: MouseEvent, pair: EVaultCollateral) => {
         </span>
       </VaultOverviewLabelValue>
     </div>
-  </div>
+  </VaultOverviewAccordionSection>
 </template>

components/entities/vault/overview/VaultOverview.vue

@@ -18,33 +18,40 @@ const isCyclicalIRM = computed(() => isVaultCyclicalNote(vault.address))
   >
     <VaultOverviewBlockGeneral
       :vault="vault"
+      :default-open="true"
       @market-click="emits('market-click')"
     />
 
     <VaultOverviewBlockStats
       :vault="vault"
+      :default-open="true"
     />
 
     <VaultOverviewBlockRiskParameters
       :vault="vault"
+      :default-open="false"
     />
 
     <VaultOverviewBlockBorrow
       :vault="vault"
+      :default-open="false"
       @vault-click="(address: string) => emits('vault-click', address)"
     />
 
     <LazyVaultOverviewBlockCyclicalIRM
       v-if="isCyclicalIRM"
       :vault="vault"
+      :default-open="false"
     />
     <LazyVaultOverviewBlockIRM
       v-else
       :vault="vault"
+      :default-open="false"
     />
 
     <VaultOverviewBlockAddresses
       :vault="vault"
+      :default-open="false"
     />
   </div>
 </template>

components/entities/vault/overview/VaultOverviewAccordionSection.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  title: string
+  defaultOpen?: boolean
+  contentClass?: string
+  hasActions?: boolean
+}>(), {
+  defaultOpen: true,
+  contentClass: 'flex flex-col gap-24',
+  hasActions: true,
+})
+
+const isOpen = ref(props.defaultOpen)
+const panelId = useId()
+const sectionEl = ref<HTMLElement>()
+
+const expandIfOnlySection = () => {
+  const parentEl = sectionEl.value?.parentElement
+  if (!parentEl) return
+
+  const sectionCount = parentEl.querySelectorAll(':scope > [data-vault-overview-accordion-section]').length
+  if (sectionCount === 1) {
+    isOpen.value = true
+  }
+}
+
+const toggle = () => {
+  isOpen.value = !isOpen.value
+}
+
+onMounted(async () => {
+  await nextTick()
+  expandIfOnlySection()
+})
+</script>
+
+<template>
+  <section
+    ref="sectionEl"
+    class="bg-surface-secondary rounded-xl shadow-card"
+    data-vault-overview-accordion-section
+  >
+    <div class="group relative flex items-center gap-16 p-24">
+      <button
+        type="button"
+        class="absolute inset-0 z-0 rounded-xl transition-colors hover:bg-card-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-500 focus-visible:ring-inset"
+        :aria-expanded="isOpen"
+        :aria-controls="panelId"
+        :aria-label="`${isOpen ? 'Collapse' : 'Expand'} ${title}`"
+        @click="toggle"
+      />
+      <span class="pointer-events-none relative z-10 min-w-0 flex-1 text-h3 text-content-primary transition-colors group-hover:text-accent-500">
+        {{ title }}
+      </span>
+      <div
+        v-if="$slots.actions && hasActions"
+        class="relative z-20 shrink-0"
+        @click.stop
+      >
+        <slot name="actions" />
+      </div>
+      <SvgIcon
+        name="arrow-down"
+        class="pointer-events-none relative z-10 !w-20 !h-20 shrink-0 text-content-tertiary transition-transform group-hover:text-content-secondary"
+        :class="{ 'rotate-180': isOpen }"
+        aria-hidden="true"
+      />
+    </div>
+
+    <div
+      v-if="isOpen"
+      :id="panelId"
+      class="px-24 pb-24"
+    >
+      <div :class="contentClass">
+        <slot />
+      </div>
+    </div>
+  </section>
+</template>

components/entities/vault/overview/VaultOverviewBlockAddresses.vue

@@ -5,7 +5,7 @@ import { getSpecialAddressLabel } from '~/utils/special-addresses'
 import { getVaultHookTarget } from '~/utils/vault-hooks'
 import { isVaultBorrowable } from '~/utils/vault/classification'
 
-const { vault } = defineProps<{ vault: EVault }>()
+const { vault, defaultOpen = true } = defineProps<{ vault: EVault, defaultOpen?: boolean }>()
 
 const { chainId } = useEulerAddresses()
 
@@ -88,49 +88,48 @@ const getExplorerAddressLink = (address: string) => getExplorerLink(address, cha
 </script>
 
 <template>
-  <div class="bg-surface-secondary rounded-xl flex flex-col gap-24 p-24 shadow-card">
-    <p class="text-h3 text-content-primary">
-      Addresses
-    </p>
-    <div class="flex flex-col items-start gap-24">
-      <VaultOverviewLabelValue
-        v-for="infoItem in vaultAddresesInfo"
-        :key="infoItem.title"
-        :label="infoItem.title"
-        orientation="horizontal"
+  <VaultOverviewAccordionSection
+    title="Addresses"
+    :default-open="defaultOpen"
+    content-class="flex flex-col items-start gap-24"
+  >
+    <VaultOverviewLabelValue
+      v-for="infoItem in vaultAddresesInfo"
+      :key="infoItem.title"
+      :label="infoItem.title"
+      orientation="horizontal"
+    >
+      <template
+        v-if="infoItem.title === 'Unit of account'"
+        #label
       >
-        <template
-          v-if="infoItem.title === 'Unit of account'"
-          #label
+        <span class="flex items-center gap-4">
+          Unit of account
+          <UiFootnote
+            title="Unit of Account"
+            text="The reference currency used to denominate prices for LTV and health calculations in this vault. Typically USD or ETH. All collateral and debt values are converted to this unit when determining account health."
+            class="[--ui-footnote-icon-color:var(--text-muted)] hover:[--ui-footnote-icon-color:var(--text-secondary)]"
+          />
+        </span>
+      </template>
+      <div class="flex gap-4 items-center">
+        <NuxtLink
+          :to="getExplorerAddressLink(infoItem.address)"
+          class="text-accent-600 underline cursor-pointer hover:text-accent-500"
+          target="_blank"
         >
-          <span class="flex items-center gap-4">
-            Unit of account
-            <UiFootnote
-              title="Unit of Account"
-              text="The reference currency used to denominate prices for LTV and health calculations in this vault. Typically USD or ETH. All collateral and debt values are converted to this unit when determining account health."
-              class="[--ui-footnote-icon-color:var(--text-muted)] hover:[--ui-footnote-icon-color:var(--text-secondary)]"
-            />
-          </span>
-        </template>
-        <div class="flex gap-4 items-center">
-          <NuxtLink
-            :to="getExplorerAddressLink(infoItem.address)"
-            class="text-accent-600 underline cursor-pointer hover:text-accent-500"
-            target="_blank"
-          >
-            {{ getSpecialAddressLabel(infoItem.address) || shortenAddress(infoItem.address) }}
-          </NuxtLink>
-          <button
-            class="text-content-muted cursor-pointer outline-none hover:text-content-secondary active:text-content-primary"
-            @click="onCopyClick(infoItem.address)"
-          >
-            <SvgIcon
-              class="!w-18 !h-18"
-              name="copy"
-            />
-          </button>
-        </div>
-      </VaultOverviewLabelValue>
-    </div>
-  </div>
+          {{ getSpecialAddressLabel(infoItem.address) || shortenAddress(infoItem.address) }}
+        </NuxtLink>
+        <button
+          class="text-content-muted cursor-pointer outline-none hover:text-content-secondary active:text-content-primary"
+          @click="onCopyClick(infoItem.address)"
+        >
+          <SvgIcon
+            class="!w-18 !h-18"
+            name="copy"
+          />
+        </button>
+      </div>
+    </VaultOverviewLabelValue>
+  </VaultOverviewAccordionSection>
 </template>

components/entities/vault/overview/VaultOverviewBlockBorrow.vue

@@ -9,7 +9,7 @@ import { formatNumber } from '~/utils/string-utils'
 const emits = defineEmits<{
   'vault-click': [address: string]
 }>()
-const { vault } = defineProps<{ vault: EVault }>()
+const { vault, defaultOpen = true } = defineProps<{ vault: EVault, defaultOpen?: boolean }>()
 const { get: registryGet } = useVaultRegistry()
 
 const onCollateralClick = (address: string) => {
@@ -48,14 +48,13 @@ const allCollateralPairs = computed(() =>
 </script>
 
 <template>
-  <div
+  <VaultOverviewAccordionSection
     v-if="allCollateralPairs.length"
-    class="bg-surface-secondary rounded-xl flex flex-col gap-24 p-24 shadow-card"
+    title="Collateral exposure"
+    :default-open="defaultOpen"
+    content-class="flex flex-col gap-24"
   >
     <div>
-      <p class="text-h3 text-content-primary mb-12">
-        Collateral exposure
-      </p>
       <p class="text-content-secondary">
         Deposits in this vault can be borrowed.
         Please make sure you're comfortable accepting the collaterals
@@ -121,5 +120,5 @@ const allCollateralPairs = computed(() =>
         </div>
       </div>
     </div>
-  </div>
+  </VaultOverviewAccordionSection>
 </template>

components/entities/vault/overview/VaultOverviewBlockCyclicalIRM.vue

@@ -10,7 +10,7 @@ import { useVaultRegistry } from '~/composables/useVaultRegistry'
 import { zeroAddress, formatUnits } from 'viem'
 import { INTEREST_RATE_MODEL_TYPE, SECONDS_IN_YEAR } from '~/entities/constants'
 
-const { vault } = defineProps<{ vault: EVault }>()
+const { vault, defaultOpen = true } = defineProps<{ vault: EVault, defaultOpen?: boolean }>()
 
 const { get: registryGet } = useVaultRegistry()
 
@@ -282,16 +282,15 @@ const formatDuration = (seconds: bigint): string => {
 </script>
 
 <template>
-  <section
+  <VaultOverviewAccordionSection
     v-if="hasValidIRM && currentCycle"
-    class="bg-surface-secondary rounded-xl flex flex-col gap-24 p-24 shadow-card"
+    title="Interest rate model"
+    :default-open="defaultOpen"
+    content-class="flex flex-col gap-24"
   >
-    <header class="flex items-center justify-between gap-16">
-      <h2 class="text-h3 text-content-primary">
-        Interest rate model
-      </h2>
+    <template #actions>
       <CyclicalNoteBadge />
-    </header>
+    </template>
 
     <div
       v-if="currentCycle.preStartTimestamp !== null"
@@ -398,7 +397,7 @@ const formatDuration = (seconds: bigint): string => {
         </span>
       </div>
     </footer>
-  </section>
+  </VaultOverviewAccordionSection>
 </template>
 
 <style lang="scss" scoped>