Select universe card all actionable mode

frontend/src/lib/components/universe/SelectUniverseCard.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Card, Tooltip } from "@dfinity/gix-components";
+  import { Card, IconVote, Tooltip } from "@dfinity/gix-components";
   import UniverseLogo from "$lib/components/universe/UniverseLogo.svelte";
   import UniverseAccountsBalance from "$lib/components/universe/UniverseAccountsBalance.svelte";
   import { pageStore } from "$lib/derived/page.derived";
@@ -11,17 +11,21 @@
     actionableProposalCountStore,
     actionableProposalIndicationEnabledStore,
     actionableProposalSupportedStore,
+    actionableProposalTotalCountStore,
   } from "$lib/derived/actionable-proposals.derived";
   import ActionableProposalCountBadge from "$lib/components/proposals/ActionableProposalCountBadge.svelte";
   import { nonNullish } from "@dfinity/utils";
   import { i18n } from "$lib/stores/i18n";
   import TestIdWrapper from "$lib/components/common/TestIdWrapper.svelte";
   import { onMount } from "svelte";
+  import ActionableProposalTotalCountBadge from "$lib/components/proposals/ActionableProposalTotalCountBadge.svelte";
+  import { scale } from "svelte/transition";
+  import { cubicOut } from "svelte/easing";
 
   export let selected: boolean;
   // "link" for desktop, "button" for mobile, "dropdown" to open the modal
   export let role: "link" | "button" | "dropdown" = "link";
-  export let universe: Universe;
+  export let universe: Universe | "all-actionable";
 
   let icon: "expand" | "check" | undefined = undefined;
   $: icon = role === "dropdown" ? "expand" : undefined;
@@ -36,11 +40,15 @@
 
   let actionableProposalCount: number | undefined = undefined;
   $: actionableProposalCount =
-    $actionableProposalCountStore[universe.canisterId];
+    universe === "all-actionable"
+      ? undefined
+      : $actionableProposalCountStore[universe.canisterId];
 
   let actionableProposalSupported: boolean | undefined = undefined;
   $: actionableProposalSupported =
-    $actionableProposalSupportedStore[universe.canisterId];
+    universe === "all-actionable"
+      ? undefined
+      : $actionableProposalSupportedStore[universe.canisterId];
 
   // Always rerender to trigger animation start
   let mounted = false;
@@ -58,34 +66,57 @@
   noMargin
 >
   <div class="container" class:selected>
-    <UniverseLogo size="big" {universe} framed={true} />
+    {#if universe !== "all-actionable"}
+      <UniverseLogo size="big" {universe} framed={true} />
+    {:else}
+      <div data-tid="vote-icon" class="icon">
+        <IconVote size="24px" />
+      </div>
+    {/if}
 
     <div
       class={`content ${role}`}
-      class:balance={displayProjectAccountsBalance}
+      class:balance={displayProjectAccountsBalance &&
+        universe !== "all-actionable"}
     >
       <span class="name">
-        {universe.title}
-        {#if $actionableProposalIndicationEnabledStore}
-          {#if nonNullish(actionableProposalCount) && actionableProposalCount > 0 && mounted}
-            <ActionableProposalCountBadge
-              count={actionableProposalCount}
-              {universe}
-            />
-          {:else if actionableProposalSupported === false}
-            <TestIdWrapper testId="not-supported-badge">
-              <Tooltip
-                id="actionable-not-supported-tooltip"
-                text={$i18n.actionable_proposals_not_supported.dot_tooltip}
-                top={true}
+        {#if universe === "all-actionable"}
+          {$i18n.voting.actionable_proposals}
+          {#if $actionableProposalIndicationEnabledStore}
+            {#if $actionableProposalTotalCountStore > 0 && mounted}
+              <div
+                in:scale={{
+                  duration: 250,
+                  easing: cubicOut,
+                }}
               >
-                <div class="not-supported-badge" />
-              </Tooltip>
-            </TestIdWrapper>
+                <ActionableProposalTotalCountBadge />
+              </div>
+            {/if}
+          {/if}
+        {:else}
+          {universe.title}
+          {#if $actionableProposalIndicationEnabledStore}
+            {#if nonNullish(actionableProposalCount) && actionableProposalCount > 0 && mounted}
+              <ActionableProposalCountBadge
+                count={actionableProposalCount}
+                {universe}
+              />
+            {:else if actionableProposalSupported === false}
+              <TestIdWrapper testId="not-supported-badge">
+                <Tooltip
+                  id="actionable-not-supported-tooltip"
+                  text={$i18n.actionable_proposals_not_supported.dot_tooltip}
+                  top={true}
+                >
+                  <div class="not-supported-badge" />
+                </Tooltip>
+              </TestIdWrapper>
+            {/if}
           {/if}
         {/if}
       </span>
-      {#if displayProjectAccountsBalance}
+      {#if displayProjectAccountsBalance && universe !== "all-actionable"}
         <UniverseAccountsBalance {universe} />
       {/if}
     </div>

frontend/src/tests/lib/components/universe/SelectUniverseCard.spec.ts

@@ -14,8 +14,9 @@ import {
   mockMainAccount,
   mockSubAccount,
 } from "$tests/mocks/icp-accounts.store.mock";
+import { mockProposalInfo } from "$tests/mocks/proposal.mock";
 import { mockProposals } from "$tests/mocks/proposals.store.mock";
-import { mockSummary } from "$tests/mocks/sns-projects.mock";
+import { mockSummary, principal } from "$tests/mocks/sns-projects.mock";
 import { mockSnsProposal } from "$tests/mocks/sns-proposals.mock";
 import { nnsUniverseMock } from "$tests/mocks/universe.mock";
 import { SelectUniverseCardPo } from "$tests/page-objects/SelectUniverseCard.page-object";
@@ -25,6 +26,7 @@ import {
   setAccountsForTesting,
 } from "$tests/utils/accounts.test-utils";
 import { runResolvedPromises } from "$tests/utils/timers.test-utils";
+import type { ProposalInfo } from "@dfinity/nns";
 import { Principal } from "@dfinity/principal";
 import { render } from "@testing-library/svelte";
 import { describe } from "vitest";
@@ -42,6 +44,8 @@ describe("SelectUniverseCard", () => {
   beforeEach(() => {
     vi.restoreAllMocks();
     overrideFeatureFlagsStore.reset();
+    actionableNnsProposalsStore.reset();
+    actionableSnsProposalsStore.resetForTesting();
     resetAccountsForTesting();
     resetIdentity();
   });
@@ -366,4 +370,71 @@ describe("SelectUniverseCard", () => {
       });
     });
   });
+
+  describe("all-actionable proposals mode", () => {
+    it("should display custom icon and text", async () => {
+      page.mock({
+        data: { universe: OWN_CANISTER_ID_TEXT },
+        routeId: AppPath.Proposals,
+      });
+
+      const po = await renderComponent({
+        props: { universe: "all-actionable", selected: false },
+      });
+
+      expect(await po.hasVoteIcon()).toBe(true);
+      expect(await po.getName()).toBe("Actionable Proposals");
+    });
+
+    it('should not display custom icon and text when not "all-actionable"', async () => {
+      page.mock({
+        data: { universe: OWN_CANISTER_ID_TEXT },
+        routeId: AppPath.Proposals,
+      });
+
+      const po = await renderComponent({
+        props: { universe: nnsUniverseMock, selected: false },
+      });
+      expect(await po.getName()).toBe("Internet Computer");
+      expect(await po.hasVoteIcon()).toBe(false);
+    });
+
+    it("should display total actionable count", async () => {
+      page.mock({
+        data: { universe: OWN_CANISTER_ID_TEXT },
+        routeId: AppPath.Proposals,
+      });
+      const nnsProposals: ProposalInfo[] = [
+        {
+          ...mockProposalInfo,
+          id: 0n,
+        },
+        {
+          ...mockProposalInfo,
+          id: 1n,
+        },
+      ];
+      const snsProposals = [mockSnsProposal];
+      const principal0 = principal(0);
+      const principal1 = principal(1);
+      actionableNnsProposalsStore.setProposals(nnsProposals);
+      actionableSnsProposalsStore.set({
+        rootCanisterId: principal0,
+        proposals: snsProposals,
+        includeBallotsByCaller: true,
+      });
+      actionableSnsProposalsStore.set({
+        rootCanisterId: principal1,
+        proposals: snsProposals,
+        includeBallotsByCaller: true,
+      });
+
+      await runResolvedPromises();
+
+      const po = await renderComponent({
+        props: { universe: "all-actionable", selected: false },
+      });
+      expect((await po.getActionableProposalCount()).trim()).toBe("4");
+    });
+  });
 });

frontend/src/tests/page-objects/SelectUniverseCard.page-object.ts

@@ -78,4 +78,8 @@ export class SelectUniverseCardPo extends CardPo {
   getActionableProposalCount(): Promise<string> {
     return this.getActionableProposalCountBadgePo().getText();
   }
+
+  hasVoteIcon(): Promise<boolean> {
+    return this.root.querySelector('[data-tid="vote-icon"]').isPresent();
+  }
 }