feat: better reply sep (#368)

Stuyk · web-flow · commit 1b435e36c4a9 · 2025-10-02T08:40:58.000-06:00
diff --git a/packages/frontend-main/index.html b/packages/frontend-main/index.html
@@ -17,6 +17,7 @@
         <meta property="twitter:title" content="dither.chat - The public protocol for thought" />
         <meta property="twitter:description" content="Dither is a public messaging protocol that anyone can build on. All data is public and immutable on the AtomOne blockchain." />
         <meta property="twitter:image" content="/meta.png" />
+        <script defer src="https://cloud.umami.is/script.js" data-website-id="59dbe1e2-7888-41d0-845c-d9d17a14956a"></script>
     </head>
     <body>
         <div id="app"></div>
diff --git a/packages/frontend-main/src/localization/index.ts b/packages/frontend-main/src/localization/index.ts
@@ -44,6 +44,8 @@ export const messages = {
                 unfollow: 'Unfollow',
                 newPost: 'New post',
                 reply: 'Reply',
+                closeReply: 'Close Reply',
+                createReply: 'Create Reply',
                 mintscan: 'See on Mintscan',
                 pingpub: 'See on Ping.pub',
                 showImage: 'Show image',
diff --git a/packages/frontend-main/src/views/PostView.vue b/packages/frontend-main/src/views/PostView.vue
@@ -43,6 +43,7 @@ const repliesQuery = useReplies({ hash });
 const POST_HASH_LEN = 64;
 const MAX_CHARS = 512 - ('dither.Reply("", "")'.length + POST_HASH_LEN);
 const reply = ref('');
+const showReply = ref(false);
 const isBalanceInputValid = ref(false);
 const inputPhotonModel = ref(Decimal.fromAtomics('1', fractionalDigits).toFloatApproximation());
 const configStore = useConfigStore();
@@ -100,30 +101,37 @@ async function handleReply() {
 
         <!-- Transaction Form -->
         <div v-if="wallet.loggedIn.value" class="flex flex-col gap-4 mt-4">
-          <div  v-if="isDefaultAmountInvalid" class="flex flex-col items-right gap-4">
-            <span class="text-sm whitespace-pre-line">{{ $t('components.PostView.invalidDefaultAmount') }}</span>
-            <Button size="sm" @click="router.push({ name: routesNames.settingsDefaultAmount });" class="ml-auto">
-              {{ $t('components.Button.adjustDefaultAmount') }}
-            </Button>
-          </div>
-
-          <template v-else>
-            <div class="flex flex-row item-center">
-              <UserAvatar :userAddress="wallet.address.value" disabled/>
-              <Textarea :placeholder="$t('placeholders.reply')" v-model="reply" :maxlength="MAX_CHARS" class="ml-1 mt-1" />
-            </div>
-
-            <div  class="flex flex-row gap-4">
-              <InputPhoton v-if="!configStore.config.defaultAmountEnabled" v-model="inputPhotonModel" @on-validity-change="handleInputValidity" />
-              <Button size="sm" :disabled="!canReply" @click="handleReply" class="ml-auto">
-                {{ $t('components.Button.reply') }}
+          <template v-if="showReply">
+            <div  v-if="isDefaultAmountInvalid" class="flex flex-col items-right gap-4">
+              <span class="text-sm whitespace-pre-line">{{ $t('components.PostView.invalidDefaultAmount') }}</span>
+              <Button size="sm" @click="router.push({ name: routesNames.settingsDefaultAmount });" class="ml-auto">
+                {{ $t('components.Button.adjustDefaultAmount') }}
               </Button>
             </div>
+
+            <template v-else>
+              <div class="flex flex-row item-center">
+                <UserAvatar :userAddress="wallet.address.value" disabled/>
+                <Textarea :placeholder="$t('placeholders.reply')" v-model="reply" :maxlength="MAX_CHARS" class="ml-1 mt-1" />
+              </div>
+
+              <div  class="flex flex-row gap-4">
+                <InputPhoton v-if="!configStore.config.defaultAmountEnabled" v-model="inputPhotonModel" @on-validity-change="handleInputValidity" />
+                <Button size="sm" :disabled="!canReply" @click="handleReply" class="ml-auto">
+                  {{ $t('components.Button.reply') }}
+                </Button>
+              </div>
+            </template>
           </template>
         </div>
       </div>
     </div>
-
+    <div class="flex flex-row p-3 border-t border-gray-200 items-center justify-between">
+      <div class="text-lg font-semibold">Replies</div>
+      <Button size="sm" @click="showReply = !showReply" v-if="wallet.loggedIn.value" class="ml-auto">
+        {{ showReply ? $t('components.Button.closeReply') : $t('components.Button.createReply') }}
+      </Button>
+    </div>
     <!-- Replies posts list -->
     <PostsList :query="repliesQuery" hideEmptyText/>
   </MainLayout>
