ui: improve proposal details ui (#2067)

Co-authored-by: Jean Ribeiro <[email protected]>
bloomwalletio · Mar 4, 2024 · 3939302 · 3939302
1 parent 6c043e9
commit 3939302
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 29 deletions.
diff --git a/packages/desktop/views/dashboard/governance/components/ProposalList.svelte b/packages/desktop/views/dashboard/governance/components/ProposalList.svelte
@@ -4,6 +4,7 @@
     import { isVisibleProposal, sortProposals } from '@contexts/governance/utils'
     import { SearchInput } from '@ui'
     import { ProposalCard } from './'
+    import ProposalListMenu from './ProposalListMenu.svelte'
 
     $: proposals = Object.values($registeredProposalsForSelectedAccount)
 
@@ -31,6 +32,7 @@
         <div class="flex flex-row gap-5 items-center">
             <SearchInput bind:value={searchTerm} />
             <Filter filterStore={proposalFilter} />
+            <ProposalListMenu />
         </div>
     </header-container>
     <ul class="grid grid-cols-2 auto-rows-min gap-4 flex-1 overflow-y-scroll pr-3 -mr-5">

diff --git a/packages/desktop/views/dashboard/governance/components/ProposalListDetails.svelte b/packages/desktop/views/dashboard/governance/components/ProposalListDetails.svelte
@@ -15,9 +15,7 @@
     import { selectedAccount } from '@core/account/stores'
     import { localize } from '@core/i18n'
     import { activeProfileId } from '@core/profile/stores'
-    import { PopupId, openPopup } from '@desktop/auxiliary/popup'
     import { onMount } from 'svelte'
-    import { Button, Text } from '@bloomwalletio/ui'
 
     let details = <IProposalListDetails>{
         totalProposals: null,
@@ -47,25 +45,12 @@
         }
     }
 
-    function onAddProposalClick(): void {
-        openPopup({
-            id: PopupId.AddProposal,
-            overflow: true,
-        })
-    }
-
     onMount(setParticipationOverview)
 </script>
 
-<proposal-list-details class="space-y-6">
-    <Text type="body2">
-        {localize('views.governance.proposalsDetails.title')}
-    </Text>
-    <Table
-        items={Object.keys(details).map((key) => ({
-            key: localize(`views.governance.proposalsDetails.${key}`),
-            value: details[key] ?? 0,
-        }))}
-    />
-    <Button variant="outlined" on:click={onAddProposalClick} width="full" text={localize('actions.addProposal')} />
-</proposal-list-details>
+<Table
+    items={Object.keys(details).map((key) => ({
+        key: localize(`views.governance.proposalsDetails.${key}`),
+        value: details[key] ?? 0,
+    }))}
+/>
diff --git a/packages/desktop/views/dashboard/governance/components/ProposalListMenu.svelte b/packages/desktop/views/dashboard/governance/components/ProposalListMenu.svelte
@@ -0,0 +1,26 @@
+<script lang="typescript">
+    import { IconName, Menu } from '@bloomwalletio/ui'
+    import { localize } from '@core/i18n'
+    import { PopupId, openPopup } from '@desktop/auxiliary/popup'
+
+    let menu: Menu | undefined
+
+    function onAddProposalClick(): void {
+        openPopup({
+            id: PopupId.AddProposal,
+            overflow: true,
+        })
+        menu?.close()
+    }
+</script>
+
+<Menu
+    bind:this={menu}
+    items={[
+        {
+            icon: IconName.Import,
+            title: localize('actions.addProposal'),
+            onClick: onAddProposalClick,
+        },
+    ]}
+/>
diff --git a/packages/desktop/views/dashboard/governance/components/index.ts b/packages/desktop/views/dashboard/governance/components/index.ts
@@ -4,6 +4,7 @@ export { default as ProposalAnswer } from './ProposalAnswer.svelte'
 export { default as ProposalCard } from './ProposalCard.svelte'
 export { default as ProposalDetailsMenu } from './ProposalDetailsMenu.svelte'
 export { default as ProposalList } from './ProposalList.svelte'
+export { default as ProposalListMenu } from './ProposalListMenu.svelte'
 export { default as ProposalListDetails } from './ProposalListDetails.svelte'
 export { default as ProposalQuestion } from './ProposalQuestion.svelte'
 export { default as ProposalStatusInfo } from './ProposalStatusInfo.svelte'

diff --git a/packages/desktop/views/dashboard/governance/views/GovernanceDashboardView.svelte b/packages/desktop/views/dashboard/governance/views/GovernanceDashboardView.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-    import { IconName, Text, Pill } from '@bloomwalletio/ui'
+    import { IconName, Pill, Text } from '@bloomwalletio/ui'
     import { EmptyListPlaceholder } from '@components'
-    import { Pane } from '@ui'
-    import { ManageVotingPowerPane, ProposalList, ProposalListDetails } from '../components'
-    import { localize } from '@core/i18n'
     import { registeredProposalsForSelectedAccount } from '@contexts/governance/stores'
+    import { localize } from '@core/i18n'
+    import { ManageVotingPowerPane, ProposalList, ProposalListDetails } from '../components'
 </script>
 
 <governance-dashboard class="w-full h-full flex flex-nowrap p-8 relative flex-1 space-x-6">
@@ -18,9 +17,7 @@
             </Pill>
         </div>
         <ManageVotingPowerPane />
-        <Pane classes="p-6 h-fit">
-            <ProposalListDetails />
-        </Pane>
+        <ProposalListDetails />
     </div>
     <div class="w-2/3">
         {#if Object.keys($registeredProposalsForSelectedAccount).length}

diff --git a/packages/shared/src/locales/en.json b/packages/shared/src/locales/en.json
@@ -636,7 +636,6 @@
                 "manage": "Manage voting power"
             },
             "proposalsDetails": {
-                "title": "Details",
                 "totalProposals": "Total proposals",
                 "activeProposals": "Active proposals",
                 "votingProposals": "Proposals you are voting on",