refactor: rebrand ProposalStatusTimelineTooltip

packages/desktop/components/index.ts

@@ -21,7 +21,6 @@ export { default as ProposalAnswer } from './ProposalAnswer.svelte'
 export { default as ProposalCard } from './ProposalCard.svelte'
 export { default as ProposalsDetails } from './ProposalsDetails.svelte'
 export { default as ProposalQuestion } from './ProposalQuestion.svelte'
-export { default as ProposalStatusTimelineTooltip } from './ProposalStatusTimelineTooltip.svelte'
 export { default as SidebarTab } from './SidebarTab.svelte'
 export { default as StatusTile, type StatusTileProps } from './StatusTile.svelte'
 export { default as TitleBar } from './TitleBar.svelte'

packages/desktop/features/governance.features.ts

@@ -1,7 +1,7 @@
 import { IGovernanceFeatures } from '@lib/features/interfaces'
 
 const governanceFeatures: IGovernanceFeatures = {
-    enabled: false,
+    enabled: true,
     removeProposals: {
         enabled: true,
     },

packages/desktop/views/governance/components/ProposalStatusInfo.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-    import { ProposalStatusPill } from '@views/governance'
-    import { ProposalStatusTimelineTooltip } from '@components'
+    import { ProposalStatusPill, ProposalStatusTimelineTooltip } from '@views/governance'
     import { InformationTooltip } from '@ui'
 
     import { IProposal } from '@contexts/governance/interfaces'
@@ -58,7 +57,7 @@
             bind:anchor
             milestones={proposal.milestones}
             status={proposal?.status}
-            position={placement}
+            {placement}
         />
     {/if}
 {/if}

packages/desktop/views/governance/components/ProposalStatusTimelineTooltip.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+    import { EventStatus } from '@iota/sdk/out/types'
+    import { Text, Popover } from '@bloomwalletio/ui'
+
+    import { formatDate, localize } from '@core/i18n'
+    import { networkStatus } from '@core/network'
+    import { DATE_FORMAT, milestoneToDate } from '@core/utils'
+
+    export let milestones: Record<EventStatus, number>
+    export let status: EventStatus
+    export let anchor: HTMLElement
+    export let placement: 'top' | 'bottom' | 'left' | 'right' = 'right'
+
+    let eventProgress: number
+    switch (status) {
+        case EventStatus.Upcoming:
+            eventProgress = 0
+            break
+        case EventStatus.Commencing:
+            eventProgress = 1
+            break
+        case EventStatus.Holding:
+            eventProgress = 2
+            break
+        case EventStatus.Ended:
+            eventProgress = 3
+            break
+        default:
+            break
+    }
+
+    function getLocaleTenseKey(index: number): 'past' | 'present' | 'future' {
+        if (index < eventProgress) {
+            return 'past'
+        }
+
+        if (index === eventProgress) {
+            return 'present'
+        }
+
+        if (index > eventProgress) {
+            return 'future'
+        }
+    }
+</script>
+
+<Popover {anchor} {placement} showArrow event="hover" class="p-4 rounded-xl shadow-elevation-4">
+    <ul class="space-y-3 text-left">
+        {#each Object.keys(EventStatus) as status, index}
+            {@const hasProgressed = eventProgress >= index}
+            {@const currentProgress = eventProgress === index}
+            <li
+                class="grid grid-rows-2 relative
+                before:justify-self-center before:mr-4 before:row-span-2 before:self-center
+                {hasProgressed
+                    ? currentProgress
+                        ? 'before:text-2xl before:text-brand before:dark:text-brand-dark'
+                        : 'before:text-xl before:text-brand before:dark:text-brand-dark before:ml-[1px]'
+                    : 'before:text-xl before:text-secondary before:ml-[1px]'}
+                {currentProgress
+                    ? 'text-primary dark:text-primary-dark'
+                    : hasProgressed
+                      ? 'text-secondary/75'
+                      : 'text-secondary'}
+                "
+                class:has-progressed={hasProgressed}
+            >
+                <Text textColor="current" fontWeight="semibold">
+                    {localize(`views.governance.statusTimeline.${EventStatus[status]}.${getLocaleTenseKey(index)}`)}
+                </Text>
+                <Text textColor="current" fontWeight="medium">
+                    {formatDate(milestoneToDate($networkStatus.currentMilestone, milestones[EventStatus[status]]), {
+                        ...DATE_FORMAT,
+                        timeZoneName: undefined,
+                    })}
+                </Text>
+            </li>
+        {/each}
+    </ul>
+</Popover>
+
+<style lang="scss">
+    li {
+        grid-template-columns: min-content 1fr;
+
+        &::before {
+            content: '●';
+        }
+
+        &.has-progressed:not(:first-child)::after {
+            @apply border-text-brand dark:border-text-brand-dark;
+        }
+
+        &:not(:first-child)::after {
+            @apply absolute block border-r border-text-secondary dark:border-text-secondary-dark border-solid bottom-4;
+            content: '';
+            height: 130%;
+            left: 0.415em;
+            z-index: -1;
+        }
+    }
+</style>

packages/desktop/views/governance/components/index.ts

@@ -1,2 +1,3 @@
-export { default as ProposalStatusPill } from './ProposalStatusPill.svelte'
 export { default as ProposalStatusInfo } from './ProposalStatusInfo.svelte'
+export { default as ProposalStatusPill } from './ProposalStatusPill.svelte'
+export { default as ProposalStatusTimelineTooltip } from './ProposalStatusTimelineTooltip.svelte'

packages/shared/src/locales/en.json

@@ -651,10 +651,26 @@
                 "emptyDescription": "You can subscribe to a proposal on a node with its URL and an optional event ID."
             },
             "statusTimeline": {
-                "upcoming": "Announcement",
-                "commencing": "Voting open",
-                "holding": "Counting starts",
-                "ended": "Counting stops"
+                "upcoming": {
+                    "past": "Announced",
+                    "present": "Announcement",
+                    "future": "Announcement"
+                },
+                "commencing": {
+                    "past": "Voting opened",
+                    "present": "Voting open",
+                    "future": "Voting opens"
+                },
+                "holding": {
+                    "past": "Counting started",
+                    "present": "Counting started",
+                    "future": "Counting starts"
+                },
+                "ended": {
+                    "past": "Counting stopped",
+                    "present": "Counting stopped",
+                    "future": "Counting stops"
+                }
             },
             "details": {
                 "yourVote": {