Dialog for users to submit proposals (#4503)

open-chat-labs · Oct 6, 2023 · a54c02f · a54c02f
1 parent f4e5c02
commit a54c02f
Show file tree

Hide file tree

Showing 33 changed files with 972 additions and 59 deletions.
diff --git a/backend/canisters/local_user_index/CHANGELOG.md b/backend/canisters/local_user_index/CHANGELOG.md
@@ -7,6 +7,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## [[2.0.872](https://github.com/open-chat-labs/open-chat/releases/tag/v2.0.872-local_user_index)] - 2023-10-05
 
+### Added
+
+- Add a welcome message to help new users discover communities ([#4484](https://github.com/open-chat-labs/open-chat/pull/4484))
+
 ### Changed
 
 - Store `proposals_bot_canister_id` in user canisters ([#4485](https://github.com/open-chat-labs/open-chat/pull/4485))

diff --git a/frontend/app/src/components/TextArea.svelte b/frontend/app/src/components/TextArea.svelte
@@ -9,6 +9,10 @@
     export let minlength: number = 0;
     export let maxlength: number = Number.MAX_VALUE;
     export let rows: number = 4;
+    export let margin: boolean = true;
+    export let scroll: boolean = false;
+    export let outerHeight: number = 0;
+    export let innerHeight: number = 0;
 
     onMount(() => {
         if (autofocus) {
@@ -20,8 +24,8 @@
     $: warn = remaining <= 5;
 </script>
 
-<div class="outer-wrapper">
-    <div class="input-wrapper">
+<div class="outer-wrapper" class:margin bind:clientHeight={outerHeight}>
+    <div class="input-wrapper" bind:clientHeight={innerHeight}>
         <textarea
             bind:this={inp}
             {rows}
@@ -32,7 +36,8 @@
             {maxlength}
             {placeholder}
             bind:value
-            class={"textbox"} />
+            class="textbox"
+            class:scroll />
     </div>
     {#if !disabled && maxlength < Number.MAX_VALUE}
         <div class:warn class="countdown">{value.length}/{maxlength}</div>
@@ -42,7 +47,11 @@
 
 <style lang="scss">
     .outer-wrapper {
-        margin-bottom: $sp3;
+        margin: 0;
+
+        &.margin {
+            margin-bottom: $sp3;
+        }
     }
 
     .input-wrapper {
@@ -68,6 +77,11 @@
 
         @include input(normal);
 
+        &.scroll {
+            resize: none;
+            @include nice-scrollbar();
+        }
+
         &.invalid {
             border: 1px solid var(--error);
             box-shadow: 0 0 5px 1px var(--error);

diff --git a/frontend/app/src/components/home/AccountInfo.svelte b/frontend/app/src/components/home/AccountInfo.svelte
@@ -44,7 +44,9 @@
 
 <div class="account-info">
     <QRCode text={account} size={qrSize} logo={tokenDetails.logo} {border} />
-    <p class:centered>{$_("tokenTransfer.yourAccount", { values: { token: symbol } })}</p>
+    <p class="your-account" class:centered>
+        {$_("tokenTransfer.yourAccount", { values: { token: symbol } })}
+    </p>
     <div class="receiver" class:centered>
         <div class="account">
             {collapseAccount(account)}
@@ -85,4 +87,8 @@
             width: 30px;
         }
     }
+
+    .your-account {
+        margin-top: $sp4;
+    }
 </style>
diff --git a/frontend/app/src/components/home/CurrentChat.svelte b/frontend/app/src/components/home/CurrentChat.svelte
@@ -129,10 +129,6 @@
         closeNotificationsForChat(chat.id);
     }
 
-    function onMarkAllRead() {
-        client.markAllRead(chat);
-    }
-
     function createPoll() {
         if (!client.canCreatePolls(chat.id)) return;
 
@@ -288,10 +284,10 @@
     {:else if showChatHeader}
         <CurrentChatHeader
             on:clearSelection
-            on:markAllRead={onMarkAllRead}
             on:toggleMuteNotifications
             on:showInviteGroupUsers
             on:showProposalFilters
+            on:makeProposal
             on:showGroupMembers
             on:leaveGroup
             on:upgrade
@@ -301,7 +297,6 @@
             on:importToCommunity={importToCommunity}
             {blocked}
             {readonly}
-            {unreadMessages}
             selectedChatSummary={chat}
             hasPinned={$currentChatPinnedMessages.size > 0} />
     {/if}

diff --git a/frontend/app/src/components/home/CurrentChatHeader.svelte b/frontend/app/src/components/home/CurrentChatHeader.svelte
@@ -25,7 +25,6 @@
     export let selectedChatSummary: ChatSummary;
     export let blocked: boolean;
     export let readonly: boolean;
-    export let unreadMessages: number;
     export let hasPinned: boolean;
 
     let showSuspendUserModal = false;
@@ -164,7 +163,6 @@
         <CurrentChatMenu
             bind:showSuspendUserModal
             {hasPinned}
-            {unreadMessages}
             {selectedChatSummary}
             {blocked}
             on:convertGroupToCommunity
@@ -173,9 +171,9 @@
             on:showGroupDetails={showGroupDetails}
             on:searchChat
             on:showProposalFilters
+            on:makeProposal
             on:showGroupMembers
             on:createPoll
-            on:markAllRead
             on:upgrade
             on:showInviteGroupUsers
             on:leaveGroup />

diff --git a/frontend/app/src/components/home/CurrentChatMenu.svelte b/frontend/app/src/components/home/CurrentChatMenu.svelte
@@ -5,7 +5,6 @@
     import AccountMultiplePlus from "svelte-material-icons/AccountMultiplePlus.svelte";
     import Import from "svelte-material-icons/Import.svelte";
     import AccountMultiple from "svelte-material-icons/AccountMultiple.svelte";
-    import CheckboxMultipleMarked from "svelte-material-icons/CheckboxMultipleMarked.svelte";
     import LocationExit from "svelte-material-icons/LocationExit.svelte";
     import ConvertToCommunity from "../icons/ConvertToCommunity.svelte";
     import Tune from "svelte-material-icons/Tune.svelte";
@@ -15,6 +14,7 @@
     import Bell from "svelte-material-icons/Bell.svelte";
     import BellOff from "svelte-material-icons/BellOff.svelte";
     import FileDocument from "svelte-material-icons/FileDocument.svelte";
+    import ChatQuestionIcon from "svelte-material-icons/ChatQuestion.svelte";
     import MenuIcon from "../MenuIcon.svelte";
     import HoverIcon from "../HoverIcon.svelte";
     import Menu from "../Menu.svelte";
@@ -31,6 +31,7 @@
     import HeartMinus from "../icons/HeartMinus.svelte";
     import HeartPlus from "../icons/HeartPlus.svelte";
     import { interpolateLevel } from "../../utils/i18n";
+    import { OC_GOVERNANCE_CANISTER_ID } from "../../utils/sns";
 
     const client = getContext<OpenChat>("client");
     const dispatch = createEventDispatcher();
@@ -39,12 +40,15 @@
     export let blocked: boolean;
     export let showSuspendUserModal = false;
     export let hasPinned: boolean;
-    export let unreadMessages: number;
 
     $: isDiamond = client.isDiamond;
     $: favouritesStore = client.favouritesStore;
     $: messagesRead = client.messagesRead;
     $: isProposalGroup = client.isProposalGroup;
+    $: isChatProposalsGroup =
+        selectedChatSummary.kind !== "direct_chat" &&
+        selectedChatSummary.subtype?.kind === "governance_proposals" &&
+        selectedChatSummary.subtype.governanceCanisterId === OC_GOVERNANCE_CANISTER_ID;
     $: userId = selectedChatSummary.kind === "direct_chat" ? selectedChatSummary.them.userId : "";
     $: userStore = client.userStore;
     $: isBot = $userStore[userId]?.kind === "bot";
@@ -113,10 +117,6 @@
         dispatch("showGroupMembers", true);
     }
 
-    function markAllRead() {
-        dispatch("markAllRead");
-    }
-
     function blockUser() {
         if (selectedChatSummary.kind === "direct_chat") {
             client.blockUserFromDirectChat(selectedChatSummary.them.userId).then((success) => {
@@ -203,6 +203,10 @@
             }
         });
     }
+
+    function makeProposal() {
+        dispatch("makeProposal");
+    }
 </script>
 
 {#if desktop}
@@ -364,13 +368,16 @@
                             </MenuItem>
                         {/if}
                     {/if}
-                    <MenuItem disabled={unreadMessages === 0} on:click={markAllRead}>
-                        <CheckboxMultipleMarked
-                            size={$iconSize}
-                            color={"var(--icon-inverted-txt)"}
-                            slot="icon" />
-                        <div slot="text">{$_("markAllRead")}</div>
-                    </MenuItem>
+
+                    {#if isChatProposalsGroup}
+                        <MenuItem on:click={makeProposal}>
+                            <ChatQuestionIcon
+                                size={$iconSize}
+                                color={"var(--icon-inverted-txt)"}
+                                slot="icon" />
+                            <div slot="text">{$_("proposal.makeProposal")}</div>
+                        </MenuItem>
+                    {/if}
 
                     {#if client.user.isPlatformModerator}
                         {#if client.isFrozen(selectedChatSummary.id)}
@@ -439,14 +446,6 @@
                             </MenuItem>
                         {/if}
                     {/if}
-                    <MenuItem disabled={unreadMessages === 0} on:click={markAllRead}>
-                        <CheckboxMultipleMarked
-                            size={$iconSize}
-                            color={"var(--icon-inverted-txt)"}
-                            slot="icon" />
-                        <div slot="text">{$_("markAllRead")}</div>
-                    </MenuItem>
-
                     {#if blocked}
                         <MenuItem on:click={unblockUser}>
                             <CancelIcon

diff --git a/frontend/app/src/components/home/Home.svelte b/frontend/app/src/components/home/Home.svelte
@@ -78,6 +78,7 @@
     import GateCheckFailed from "./AccessGateCheckFailed.svelte";
     import HallOfFame from "./HallOfFame.svelte";
     import LeftNav from "./nav/LeftNav.svelte";
+    import MakeProposalModal from "./MakeProposalModal.svelte";
     import { createCandidateCommunity } from "../../stores/community";
     import { interpolateLevel } from "../../utils/i18n";
     import Convert from "./communities/Convert.svelte";
@@ -140,6 +141,7 @@
         GateCheckFailed,
         HallOfFame,
         EditCommunity,
+        MakeProposal,
     }
 
     let modal = ModalType.None;
@@ -163,6 +165,14 @@
     $: currentCommunityRules = client.currentCommunityRules;
     $: globalUnreadCount = client.globalUnreadCount;
     $: communities = client.communities;
+    $: selectedMultiUserChat =
+        $selectedChatStore?.kind === "group_chat" || $selectedChatStore?.kind === "channel"
+            ? $selectedChatStore
+            : undefined;
+    $: governanceCanisterId =
+        selectedMultiUserChat !== undefined
+            ? selectedMultiUserChat.subtype?.governanceCanisterId
+            : undefined;
 
     $: {
         document.title =
@@ -695,6 +705,10 @@
         }
     }
 
+    function showMakeProposalModal() {
+        modal = ModalType.MakeProposal;
+    }
+
     async function joinGroup(
         ev: CustomEvent<{ group: MultiUserChat; select: boolean }>
     ): Promise<void> {
@@ -993,6 +1007,7 @@
             on:replyPrivatelyTo={replyPrivatelyTo}
             on:showInviteGroupUsers={showInviteGroupUsers}
             on:showProposalFilters={showProposalFilters}
+            on:makeProposal={showMakeProposalModal}
             on:showGroupMembers={showGroupMembers}
             on:joinGroup={joinGroup}
             on:upgrade={upgrade}
@@ -1057,7 +1072,9 @@
 
 {#if modal !== ModalType.None}
     <Overlay
-        dismissible={modal !== ModalType.SelectChat && modal !== ModalType.Wallet}
+        dismissible={modal !== ModalType.SelectChat &&
+            modal !== ModalType.Wallet &&
+            modal !== ModalType.MakeProposal}
         alignLeft={modal === ModalType.SelectChat}
         on:close={closeModal}>
         {#if modal === ModalType.SelectChat}
@@ -1079,6 +1096,11 @@
             <AccountsModal on:close={closeModal} />
         {:else if modal === ModalType.HallOfFame}
             <HallOfFame on:close={closeModal} />
+        {:else if modal === ModalType.MakeProposal && selectedMultiUserChat !== undefined && governanceCanisterId !== undefined}
+            <MakeProposalModal
+                {selectedMultiUserChat}
+                {governanceCanisterId}
+                on:close={closeModal} />
         {/if}
     </Overlay>
 {/if}