feat: #822 collapsible sections

src/AppStorage.ts

@@ -118,6 +118,21 @@ export class AppStorage {
         this.setLocalStorageItem(this.SHOW_HEXA_OPCODE_KEY, newValue ? "true" : null)
     }
 
+    //
+    // sections collapsed state
+    //
+
+    private static readonly COLLAPSED_STATE_KEY = 'collapsed'
+
+    public static getCollapsedState(section: string): boolean | null {
+        const collapsed = this.getLocalStorageItem(`${section}_${this.COLLAPSED_STATE_KEY}`)
+        return collapsed ? collapsed === 'true' : null
+    }
+
+    public static setCollapsedState(section: string, collapsed: boolean | null): void {
+        this.setLocalStorageItem(`${section}_${this.COLLAPSED_STATE_KEY}`, collapsed != null ? (collapsed ? "true" : "false") : null)
+    }
+
     //
     // Private
     //

src/components/DashboardCard.vue

@@ -23,33 +23,46 @@
 <!-- --------------------------------------------------------------------------------------------------------------- -->
 
 <template>
-  <div :class="{'box': !isTouchDevice && isSmallScreen, 'h-box-border': !isTouchDevice && isSmallScreen}" style="height: 100%">
-    <div class="is-flex is-align-items-center is-justify-content-space-between">
-      <div>
-        <slot name="title"></slot>
-      </div>
-      <div>
-        <slot name="control"></slot>
-      </div>
+    <div :class="{'box': !isTouchDevice && isSmallScreen, 'h-box-border': !isTouchDevice && isSmallScreen}" style="height: 100%">
+        <div class="is-flex is-align-items-center is-justify-content-space-between">
+            <div>
+                <slot name="title"></slot>
+            </div>
+            <div class="is-flex is-align-items-center is-justify-content-end">
+                <div v-if="!isCollapsed" class="mr-4">
+                  <slot name="control"></slot>
+                </div>
+                <img v-if="isCollapsible && isCollapsed" alt="Expand section"
+                   @click="toggleCollapsed" src="@/assets/arrow-down.svg">
+                <img v-else-if="isCollapsible" alt="Collapse section"
+                   @click="toggleCollapsed" src="@/assets/arrow-up.svg">
+            </div>
+        </div>
+
+        <div>
+            <slot name="subtitle"></slot>
+        </div>
+
+        <div v-if="!isCollapsed">
+            <hr class="h-card-separator mb-3"/>
+
+            <div class="h-is-property-text">
+                <slot name="content"></slot>
+            </div>
+
+            <div class="columns is-multiline h-is-property-text">
+
+                <div :class="{'is-full': !isMediumScreen}" class="column is-6-desktop">
+                    <slot name="leftContent"></slot>
+                </div>
+                <div :class="{'h-has-column-separator':slots.rightContent&&isMediumScreen}" class="column is-6-desktop">
+                    <slot name="rightContent"></slot>
+                </div>
+
+            </div>
+        </div>
+        <p v-else class="mb-1"/>
     </div>
-
-    <hr class="h-card-separator mb-3"/>
-
-    <div class="h-is-property-text">
-      <slot name="content"></slot>
-    </div>
-
-    <div class="columns is-multiline h-is-property-text">
-
-      <div class="column is-6-desktop" :class="{'is-full': !isMediumScreen}">
-          <slot name="leftContent"></slot>
-      </div>
-      <div class="column is-6-desktop" :class="{'h-has-column-separator':slots.rightContent&&isMediumScreen}">
-          <slot name="rightContent"></slot>
-      </div>
-
-    </div>
-  </div>
 </template>
 
 <!-- --------------------------------------------------------------------------------------------------------------- -->
@@ -58,22 +71,58 @@
 
 <script lang="ts">
 
-import {defineComponent, inject, useSlots} from "vue";
+import {computed, defineComponent, inject, onMounted, ref, useSlots} from "vue";
+import {AppStorage} from "@/AppStorage";
 
 export default defineComponent({
-  name: "DashboardCard",
-
-  props: {
-    subtitle: Boolean
-  },
-
-  setup() {
-    const isSmallScreen = inject('isSmallScreen', true)
-    const isMediumScreen = inject('isMediumScreen', true)
-    const isTouchDevice = inject('isTouchDevice', false)
-    const slots = useSlots()
-    return { isSmallScreen, isMediumScreen, isTouchDevice, slots }
-  }
+    name: "DashboardCard",
+
+    props: {
+        subtitle: Boolean,
+        collapsibleKey: {
+            type: String,
+            default: ''
+        },
+        collapsed: {
+            type: Boolean,
+            default: false
+        }
+    },
+
+    setup(props) {
+        const isSmallScreen = inject('isSmallScreen', true)
+        const isMediumScreen = inject('isMediumScreen', true)
+        const isTouchDevice = inject('isTouchDevice', false)
+        const slots = useSlots()
+
+        const isCollapsible = computed(() => props.collapsibleKey != '')
+        const isCollapsed = ref(false)
+        onMounted(() => {
+            if (isCollapsible.value) {
+                const userPref = AppStorage.getCollapsedState(props.collapsibleKey)
+                isCollapsed.value = userPref != null ? userPref : props.collapsed
+            }
+        })
+        const toggleCollapsed = () => {
+            const newValue = !isCollapsed.value
+            if (newValue === props.collapsed) {
+                AppStorage.setCollapsedState(props.collapsibleKey, null)
+            } else {
+                AppStorage.setCollapsedState(props.collapsibleKey, newValue)
+            }
+            isCollapsed.value = newValue
+        }
+
+        return {
+            isSmallScreen,
+            isMediumScreen,
+            isTouchDevice,
+            slots,
+            isCollapsible,
+            isCollapsed,
+            toggleCollapsed
+        }
+    }
 })
 
 </script>
@@ -85,7 +134,7 @@ export default defineComponent({
 <style>
 
 td {
-  border: black
+    border: black
 }
 
 </style>

src/components/allowances/ApproveAllowanceSection.vue

@@ -24,9 +24,9 @@
 
 <template>
 
-  <DashboardCard v-if="accountId">
+  <DashboardCard v-if="accountId" collapsible-key="allowances">
     <template v-slot:title>
-      <span class="h-is-secondary-title">Allowances</span>
+      <span class="h-is-secondary-title">accountAllowances</span>
     </template>
     <template v-slot:control>
       <button v-if="isWalletConnected && isHederaWallet" id="approve-button" class="button is-white is-small"

src/components/contract/ContractByteCodeSection.vue

@@ -24,7 +24,7 @@
 
 <template>
 
-    <DashboardCard>
+    <DashboardCard collapsible-key="contractBytecode">
         <template v-slot:title>
             <div class="is-flex is-align-items-center is-flex-wrap-wrap">
                 <span class="h-is-secondary-title mr-3">Contract Bytecode</span>

src/components/contract/ContractResult.vue

@@ -26,7 +26,7 @@
 
   <div v-if="contractResult">
 
-    <DashboardCard class="h-card">
+    <DashboardCard class="h-card" collapsible-key="contractResult">
       <template v-slot:title>
         <span v-if="topLevel"  class="h-is-primary-title">
           Contract Result for {{ contractResult?.contract_id }} at {{ contractResult?.timestamp }}

src/components/contract/ContractResultLogs.vue

@@ -24,7 +24,7 @@
 
 <template>
 
-  <DashboardCard v-if="logs?.length" class="h-card">
+  <DashboardCard v-if="logs?.length" class="h-card" collapsible-key="contractEvents">
     <template v-slot:title>
       <span class="h-is-secondary-title">Events</span>
     </template>

src/components/contract/ContractResultStates.vue

@@ -24,7 +24,7 @@
 
 <template>
 
-  <DashboardCard v-if="stateChanges?.length && isSmallScreen" class="h-card">
+  <DashboardCard v-if="stateChanges?.length && isSmallScreen" class="h-card" collapsible-key="stateChanges">
     <template v-slot:title>
       <span class="h-is-secondary-title">Contract States Accessed & Changed</span>
     </template>
@@ -73,7 +73,7 @@
 
   </DashboardCard>
 
-  <DashboardCard v-else-if="stateChanges?.length" class="h-card">
+  <DashboardCard v-else-if="stateChanges?.length" class="h-card" collapsible-key="stateChanges">
     <template v-slot:title>
       <div class="h-is-secondary-title">Contract States Accessed & Changed</div>
     </template>

src/components/contract/ContractResultTrace.vue

@@ -24,7 +24,7 @@
 
 <template>
 
-  <DashboardCard v-if="actions?.length" class="h-card">
+  <DashboardCard v-if="actions?.length" class="h-card" collapsible-key="callTrace">
     <template v-slot:title>
       <span class="h-is-secondary-title">Call Trace</span>
     </template>

src/components/contracts/ContractResultsSection.vue

@@ -24,7 +24,7 @@
 
 <template>
 
-  <DashboardCard v-if="showContractResults">
+  <DashboardCard v-if="showContractResults" collapsible-key="contractCalls">
     <template v-slot:title>
       <p class="h-is-secondary-title">Recent Contract Calls</p>
     </template>

src/components/staking/RewardsCalculator.vue

@@ -24,7 +24,7 @@
 
 <template>
 
-  <DashboardCard>
+  <DashboardCard collapsible-key="rewardsEstimator">
     <template v-slot:title>
       <p class="h-is-secondary-title">Rewards Estimator</p>
     </template>

src/components/token/TokenCustomFees.vue

@@ -24,7 +24,7 @@
 
 <template>
 
-  <DashboardCard>
+  <DashboardCard collapsible-key="customFees">
 
     <template v-slot:title>
       <div class="h-is-secondary-title mb-2">Custom Fees</div>

src/components/topic/TopicMessage.vue

@@ -26,7 +26,7 @@
 
   <div v-if="message">
 
-    <DashboardCard class="h-card">
+    <DashboardCard class="h-card" collapsible-key="messageSubmitted">
       <template v-slot:title>
         <span class="h-is-secondary-title">Message Submitted</span>
       </template>

src/pages/AccountDetails.vue

@@ -26,9 +26,15 @@
 
   <section :class="{'h-mobile-background': isTouchDevice || !isSmallScreen}" class="section">
 
-    <DashboardCard>
+    <DashboardCard collapsible-key="accountDetails">
       <template v-if="!isInactiveEvmAddress" v-slot:title>
         <span class="h-is-primary-title">Account </span>
+      </template>
+      <template v-else v-slot:title>
+          <span class="h-is-primary-title">Inactive EVM Address</span>
+      </template>
+
+      <template v-if="!isInactiveEvmAddress" v-slot:subtitle>
         <div class="h-is-tertiary-text mt-3" id="entityId">
           <div class="is-inline-block h-is-property-text has-text-weight-light" style="min-width: 115px">Account ID:</div>
           <Copyable :content-to-copy="normalizedAccountId ?? ''">
@@ -57,8 +63,7 @@
           </router-link>
         </div>
       </template>
-      <template v-else v-slot:title>
-        <span class="h-is-primary-title">Inactive EVM Address</span>
+      <template v-else v-slot:subtitle>
         <div class="h-is-tertiary-text mt-3" id="entityId">
           <div class="is-inline-block h-is-property-text has-text-weight-light" style="min-width: 115px">Account ID:</div>
           <span class="has-text-grey">Assigned upon activation</span>
@@ -232,7 +237,7 @@
       </template>
     </DashboardCard>
 
-    <DashboardCard v-if="!isInactiveEvmAddress">
+    <DashboardCard v-if="!isInactiveEvmAddress" collapsible-key="recentTransactions">
       <template v-slot:title>
         <p id="recentTransactions" class="h-is-secondary-title">Recent Transactions</p>
       </template>
@@ -255,7 +260,7 @@
 
     <ApproveAllowanceSection :account-id="normalizedAccountId ?? undefined" :showApproveDialog="showApproveDialog"/>
 
-    <DashboardCard v-if="normalizedAccountId && availableAPI">
+    <DashboardCard v-if="normalizedAccountId && availableAPI" collapsible-key="recentAccountRewards">
       <template v-slot:title>
         <span class="h-is-secondary-title">Recent Staking Rewards</span>
       </template>

src/pages/BlockDetails.vue

@@ -26,7 +26,7 @@
 
   <section :class="{'h-mobile-background': isTouchDevice || !isSmallScreen}" class="section">
 
-    <DashboardCard>
+    <DashboardCard collapsible-key="blockDetails">
       <template v-slot:title>
         <span class="h-is-primary-title">Block {{ block?.number?.toString() ?? "" }}</span>
       </template>
@@ -89,7 +89,7 @@
       </template>
     </DashboardCard>
 
-    <DashboardCard id="blockTransactions">
+    <DashboardCard id="blockTransactions" collapsible-key="blockTransactions">
       <template v-slot:title>
         <span class="h-is-secondary-title">Block Transactions</span>
       </template>