From 72d0078d279ff8abdc98edafc7ab4a15a59af853 Mon Sep 17 00:00:00 2001
From: Matt Roberts <roberts.mattroberts@gmail.com>
Date: Thu, 19 Dec 2024 14:13:16 +0000
Subject: [PATCH 01/20] Changes to the post styling / layout

---
 public/assets/images/heroicons-thumbsup.svg   |  3 ++
 public/assets/styles/utility/display.scss     |  8 +++
 public/assets/styles/utility/text.scss        |  6 +++
 public/components/common/Moment.tsx           | 12 +++--
 public/pages/ShowPost/ShowPost.page.scss      |  6 +--
 public/pages/ShowPost/ShowPost.page.tsx       | 49 ++++++++++++++-----
 .../pages/ShowPost/components/VotesPanel.tsx  |  9 ++--
 7 files changed, 73 insertions(+), 20 deletions(-)
 create mode 100644 public/assets/images/heroicons-thumbsup.svg

diff --git a/public/assets/images/heroicons-thumbsup.svg b/public/assets/images/heroicons-thumbsup.svg
new file mode 100644
index 000000000..28a572046
--- /dev/null
+++ b/public/assets/images/heroicons-thumbsup.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M6.633 10.25c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 0 1 2.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 0 0 .322-1.672V2.75a.75.75 0 0 1 .75-.75 2.25 2.25 0 0 1 2.25 2.25c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282m0 0h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 0 1-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 0 0-1.423-.23H5.904m10.598-9.75H14.25M5.904 18.5c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 0 1-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 9.953 4.167 9.5 5 9.5h1.053c.472 0 .745.556.5.96a8.958 8.958 0 0 0-1.302 4.665c0 1.194.232 2.333.654 3.375Z" />
+</svg>
diff --git a/public/assets/styles/utility/display.scss b/public/assets/styles/utility/display.scss
index 51866812a..b424a7505 100644
--- a/public/assets/styles/utility/display.scss
+++ b/public/assets/styles/utility/display.scss
@@ -106,6 +106,10 @@
   align-items: baseline;
 }
 
+.flex-items-start {
+  align-items: start;
+}
+
 .justify-between {
   justify-content: space-between;
 }
@@ -217,3 +221,7 @@
     background-color: get("colors.gray.100");
   }
 }
+
+.purple-border {
+  border-top: 4px solid get("colors.primary.base");
+}
diff --git a/public/assets/styles/utility/text.scss b/public/assets/styles/utility/text.scss
index 9cc2fc946..bd92062a4 100644
--- a/public/assets/styles/utility/text.scss
+++ b/public/assets/styles/utility/text.scss
@@ -9,6 +9,12 @@ pre:last-child {
   margin-bottom: 0;
 }
 
+.text-large {
+  font-size: get("font.size.2xl");
+  font-weight: get("font.weight.bold");
+  letter-spacing: -1px;
+}
+
 .text-display2 {
   font-size: get("font.size.xl");
   font-weight: get("font.weight.medium");
diff --git a/public/components/common/Moment.tsx b/public/components/common/Moment.tsx
index 72c6089d7..d28122615 100644
--- a/public/components/common/Moment.tsx
+++ b/public/components/common/Moment.tsx
@@ -1,9 +1,10 @@
 import React from "react"
-import { formatDate, timeSince } from "@fider/services"
+import { classSet, formatDate, timeSince } from "@fider/services"
 
 interface MomentText {
   locale: string
   date: Date | string
+  className?: string
   format?: "relative" | "full" | "short" | "date"
 }
 
@@ -28,9 +29,14 @@ export const Moment = (props: MomentText) => {
 
   const tooltip = props.format === "short" ? formatDate(props.locale, props.date, "full") : undefined
 
+  const className = classSet({
+    ...(props.className ? { [props.className]: true } : {}),
+    date: true,
+  })
+
   return (
-    <span className="date" data-tooltip={tooltip}>
+    <span className={className} data-tooltip={tooltip}>
       {display}
     </span>
   )
-}
+}
\ No newline at end of file
diff --git a/public/pages/ShowPost/ShowPost.page.scss b/public/pages/ShowPost/ShowPost.page.scss
index a23a0f93c..2e5e037bc 100644
--- a/public/pages/ShowPost/ShowPost.page.scss
+++ b/public/pages/ShowPost/ShowPost.page.scss
@@ -26,11 +26,11 @@
     .p-show-post {
       display: grid;
       gap: spacing(4);
-      grid-template-columns: 1fr 3fr;
+      grid-template-columns: 3fr 1fr;
       grid-template-rows: auto;
       grid-template-areas:
-        "Action Main"
-        "Action Main";
+        "Main Action"
+        "Main Action";
 
       &__main-col {
         grid-area: Main;
diff --git a/public/pages/ShowPost/ShowPost.page.tsx b/public/pages/ShowPost/ShowPost.page.tsx
index a83fd6004..3ebc67ce6 100644
--- a/public/pages/ShowPost/ShowPost.page.tsx
+++ b/public/pages/ShowPost/ShowPost.page.tsx
@@ -6,7 +6,6 @@ import { Comment, Post, Tag, Vote, ImageUpload, CurrentUser } from "@fider/model
 import { actions, clearUrlHash, Failure, Fider, notify, timeAgo } from "@fider/services"
 
 import {
-  VoteCounter,
   ShowPostResponse,
   Button,
   UserName,
@@ -20,6 +19,7 @@ import {
   Icon,
   Header,
   PoweredByFider,
+  Avatar,
 } from "@fider/components"
 import { ResponseForm } from "./components/ResponseForm"
 import { TagsPanel } from "./components/TagsPanel"
@@ -30,7 +30,7 @@ import { VotesPanel } from "./components/VotesPanel"
 
 import IconX from "@fider/assets/images/heroicons-x.svg"
 import IconPencilAlt from "@fider/assets/images/heroicons-pencil-alt.svg"
-import IconCheck from "@fider/assets/images/heroicons-check.svg"
+import IconThumbsUp from "@fider/assets/images/heroicons-thumbsup.svg"
 import { HStack, VStack } from "@fider/components/layout"
 import { Trans } from "@lingui/macro"
 
@@ -148,9 +148,9 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
           <div className="p-show-post">
             <div className="p-show-post__main-col">
               <div className="p-show-post__header-col">
-                <VStack spacing={4}>
+                <VStack spacing={6}>
                   <HStack>
-                    <VoteCounter post={this.props.post} />
+                    {/* <VoteCounter post={this.props.post} /> */}
 
                     <div className="flex-grow">
                       {this.state.editMode ? (
@@ -158,20 +158,28 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
                           <Input field="title" maxLength={100} value={this.state.newTitle} onChange={this.setNewTitle} />
                         </Form>
                       ) : (
-                        <h1 className="text-display2">{this.props.post.title}</h1>
+                        <h1 className="text-large">{this.props.post.title}</h1>
                       )}
 
-                      <span className="text-muted">
+                      <HStack spacing={4} className="my-3 mt-4">
+                        <Avatar user={this.props.post.user} />
+                        <VStack spacing={1}>
+                          <UserName user={this.props.post.user} />
+                          <Moment className="text-muted" locale={Fider.currentLocale} date={this.props.post.createdAt} />
+                        </VStack>
+                      </HStack>
+
+                      {/* <span className="text-muted">
                         <Trans id="showpost.label.author">
                           Posted by <UserName user={this.props.post.user} /> &middot; <Moment locale={Fider.currentLocale} date={this.props.post.createdAt} />
                         </Trans>
-                      </span>
+                      </span> */}
                     </div>
                   </HStack>
-                  <VStack>
-                    <span className="text-category">
+                  <VStack className="flex-items-start">
+                    {/* <span className="text-category">
                       <Trans id="label.description">Description</Trans>
-                    </span>
+                    </span> */}
                     {this.state.editMode ? (
                       <Form error={this.state.error}>
                         <TextArea field="description" value={this.state.newDescription} onChange={this.setNewDescription} />
@@ -191,6 +199,25 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
                       </>
                     )}
                   </VStack>
+                  <div className="align-self-start">
+                    <Button variant="primary" onClick={this.saveChanges} disabled={Fider.isReadOnly}>
+                      <Icon sprite={IconThumbsUp} />{" "}
+                      <span>
+                        <Trans id="action.vote">Vote for this idea</Trans>
+                      </span>
+                    </Button>
+                  </div>
+
+                  <HStack>
+                    <span className="text-display">
+                      {this.props.post.votesCount} {this.props.post.votesCount === 1 ? "Vote" : "Votes"}
+                    </span>
+                    <div className="pl-4">
+                      <VotesPanel post={this.props.post} votes={this.props.votes} hideTitle={true} />
+                    </div>
+                  </HStack>
+
+                  <div className="purple-border" />
                   <ShowPostResponse status={this.props.post.status} response={this.props.post.response} />
                 </VStack>
               </div>
@@ -211,7 +238,7 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
                     {this.state.editMode ? (
                       <VStack>
                         <Button variant="primary" onClick={this.saveChanges} disabled={Fider.isReadOnly}>
-                          <Icon sprite={IconCheck} />{" "}
+                          <Icon sprite={IconThumbsUp} />{" "}
                           <span>
                             <Trans id="action.save">Save</Trans>
                           </span>
diff --git a/public/pages/ShowPost/components/VotesPanel.tsx b/public/pages/ShowPost/components/VotesPanel.tsx
index 5799de4d5..e27d367b8 100644
--- a/public/pages/ShowPost/components/VotesPanel.tsx
+++ b/public/pages/ShowPost/components/VotesPanel.tsx
@@ -9,6 +9,7 @@ import { Trans } from "@lingui/macro"
 
 interface VotesPanelProps {
   post: Post
+  hideTitle?: boolean
   votes: Vote[]
 }
 
@@ -30,9 +31,11 @@ export const VotesPanel = (props: VotesPanelProps) => {
   return (
     <VStack>
       <VotesModal post={props.post} isOpen={isVotesModalOpen} onClose={closeModal} />
-      <span className="text-category">
-        <Trans id="label.voters">Voters</Trans>
-      </span>
+      {!props.hideTitle && (
+        <span className="text-category">
+          <Trans id="label.voters">Voters</Trans>
+        </span>
+      )}
       <HStack>
         {props.votes.length > 0 && <AvatarStack users={props.votes.map((x) => x.user)} />}
         {extraVotesCount > 0 && (

From e52c7d0739970992b4f65bcbc48cb45e78d0a675 Mon Sep 17 00:00:00 2001
From: Matt Roberts <roberts.mattroberts@gmail.com>
Date: Thu, 19 Dec 2024 16:02:39 +0000
Subject: [PATCH 02/20] More layout for the show post page

---
 public/assets/images/heroicons-pluscircle.svg |  3 +
 public/pages/ShowPost/ShowPost.page.tsx       | 42 +++++----
 .../pages/ShowPost/components/TagsPanel.tsx   |  2 +-
 .../pages/ShowPost/components/TagsPanel2.tsx  | 91 +++++++++++++++++++
 4 files changed, 117 insertions(+), 21 deletions(-)
 create mode 100644 public/assets/images/heroicons-pluscircle.svg
 create mode 100644 public/pages/ShowPost/components/TagsPanel2.tsx

diff --git a/public/assets/images/heroicons-pluscircle.svg b/public/assets/images/heroicons-pluscircle.svg
new file mode 100644
index 000000000..72131e2bf
--- /dev/null
+++ b/public/assets/images/heroicons-pluscircle.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+</svg>
diff --git a/public/pages/ShowPost/ShowPost.page.tsx b/public/pages/ShowPost/ShowPost.page.tsx
index 3ebc67ce6..253720145 100644
--- a/public/pages/ShowPost/ShowPost.page.tsx
+++ b/public/pages/ShowPost/ShowPost.page.tsx
@@ -33,6 +33,7 @@ import IconPencilAlt from "@fider/assets/images/heroicons-pencil-alt.svg"
 import IconThumbsUp from "@fider/assets/images/heroicons-thumbsup.svg"
 import { HStack, VStack } from "@fider/components/layout"
 import { Trans } from "@lingui/macro"
+import { TagsPanel2 } from "./components/TagsPanel2"
 
 interface ShowPostPageProps {
   post: Post
@@ -149,33 +150,34 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
             <div className="p-show-post__main-col">
               <div className="p-show-post__header-col">
                 <VStack spacing={6}>
-                  <HStack>
-                    {/* <VoteCounter post={this.props.post} /> */}
+                  {/* <VoteCounter post={this.props.post} /> */}
 
-                    <div className="flex-grow">
-                      {this.state.editMode ? (
-                        <Form error={this.state.error}>
-                          <Input field="title" maxLength={100} value={this.state.newTitle} onChange={this.setNewTitle} />
-                        </Form>
-                      ) : (
-                        <h1 className="text-large">{this.props.post.title}</h1>
-                      )}
+                  <div className="flex-grow">
+                    {this.state.editMode ? (
+                      <Form error={this.state.error}>
+                        <Input field="title" maxLength={100} value={this.state.newTitle} onChange={this.setNewTitle} />
+                      </Form>
+                    ) : (
+                      <h1 className="text-large">{this.props.post.title}</h1>
+                    )}
+                    <div className="mt-2">
+                      <TagsPanel2 post={this.props.post} tags={this.props.tags} />
+                    </div>
+                  </div>
 
-                      <HStack spacing={4} className="my-3 mt-4">
-                        <Avatar user={this.props.post.user} />
-                        <VStack spacing={1}>
-                          <UserName user={this.props.post.user} />
-                          <Moment className="text-muted" locale={Fider.currentLocale} date={this.props.post.createdAt} />
-                        </VStack>
-                      </HStack>
+                  <HStack spacing={4}>
+                    <Avatar user={this.props.post.user} />
+                    <VStack spacing={1}>
+                      <UserName user={this.props.post.user} />
+                      <Moment className="text-muted" locale={Fider.currentLocale} date={this.props.post.createdAt} />
+                    </VStack>
+                  </HStack>
 
-                      {/* <span className="text-muted">
+                  {/* <span className="text-muted">
                         <Trans id="showpost.label.author">
                           Posted by <UserName user={this.props.post.user} /> &middot; <Moment locale={Fider.currentLocale} date={this.props.post.createdAt} />
                         </Trans>
                       </span> */}
-                    </div>
-                  </HStack>
                   <VStack className="flex-items-start">
                     {/* <span className="text-category">
                       <Trans id="label.description">Description</Trans>
diff --git a/public/pages/ShowPost/components/TagsPanel.tsx b/public/pages/ShowPost/components/TagsPanel.tsx
index 0a23df773..c58873541 100644
--- a/public/pages/ShowPost/components/TagsPanel.tsx
+++ b/public/pages/ShowPost/components/TagsPanel.tsx
@@ -10,7 +10,7 @@ import IconCheckCircle from "@fider/assets/images/heroicons-check-circle.svg"
 import { HStack, VStack } from "@fider/components/layout"
 import { Trans } from "@lingui/macro"
 
-interface TagsPanelProps {
+export interface TagsPanelProps {
   post: Post
   tags: Tag[]
 }
diff --git a/public/pages/ShowPost/components/TagsPanel2.tsx b/public/pages/ShowPost/components/TagsPanel2.tsx
new file mode 100644
index 000000000..0c12c1bbf
--- /dev/null
+++ b/public/pages/ShowPost/components/TagsPanel2.tsx
@@ -0,0 +1,91 @@
+import React, { useState } from "react"
+import { Tag } from "@fider/models"
+import { actions } from "@fider/services"
+import { ShowTag, Icon } from "@fider/components"
+import { TagListItem } from "./TagListItem"
+import { useFider } from "@fider/hooks"
+
+import IconCheckCircle from "@fider/assets/images/heroicons-check-circle.svg"
+import IconPlusCircle from "@fider/assets/images/heroicons-pluscircle.svg"
+import { HStack, VStack } from "@fider/components/layout"
+import { Trans } from "@lingui/macro"
+import { TagsPanelProps } from "./TagsPanel"
+
+export const TagsPanel2 = (props: TagsPanelProps) => {
+  const fider = useFider()
+  const canEdit = fider.session.isAuthenticated && fider.session.user.isCollaborator && props.tags.length > 0
+
+  const [isEditing, setIsEditing] = useState(false)
+  const [assignedTags, setAssignedTags] = useState(props.tags.filter((t) => props.post.tags.indexOf(t.slug) >= 0))
+
+  const assignOrUnassignTag = async (tag: Tag) => {
+    const idx = assignedTags.indexOf(tag)
+    let nextAssignedTags: Tag[] = []
+
+    if (idx >= 0) {
+      const response = await actions.unassignTag(tag.slug, props.post.number)
+      if (response.ok) {
+        nextAssignedTags = [...assignedTags]
+        nextAssignedTags.splice(idx, 1)
+      }
+    } else {
+      const response = await actions.assignTag(tag.slug, props.post.number)
+      if (response.ok) {
+        nextAssignedTags = [...assignedTags, tag]
+      }
+    }
+
+    setAssignedTags(nextAssignedTags)
+  }
+
+  const onSubtitleClick = () => {
+    if (canEdit) {
+      setIsEditing(!isEditing)
+    }
+  }
+
+  if (!canEdit && assignedTags.length === 0) {
+    return null
+  }
+
+  const tagsList = assignedTags.length > 0 && (
+    <VStack spacing={2} className="flex-items-baseline">
+      {assignedTags.map((tag) => (
+        <ShowTag key={tag.id} tag={tag} link />
+      ))}
+    </VStack>
+  )
+  const editTagsList = props.tags.length > 0 && (
+    <VStack>
+      {props.tags.map((tag) => (
+        <TagListItem key={tag.id} tag={tag} assigned={assignedTags.indexOf(tag) >= 0} onClick={assignOrUnassignTag} />
+      ))}
+    </VStack>
+  )
+
+  const icon = canEdit && (isEditing ? <Icon sprite={IconCheckCircle} className="h-4" /> : <Icon sprite={IconPlusCircle} className="h-5 text-primary" />)
+
+  if (fider.isReadOnly) {
+    return (
+      <VStack>
+        <HStack spacing={2} className="text-category">
+          <Trans id="label.tags">Tags</Trans>
+        </HStack>
+        {tagsList}
+      </VStack>
+    )
+  }
+
+  return (
+    <VStack>
+      <HStack spacing={2} center={true} className="text-primary-base text-xs">
+        {!isEditing && tagsList}
+        {isEditing && editTagsList}
+        <HStack spacing={1} className="clickable" onClick={onSubtitleClick}>
+          {icon}
+          <span>Edit Tags</span>
+        </HStack>
+      </HStack>
+    </VStack>
+  )
+}

From 2f602f34aaa90fb87638e1fe6ab41611fca56ab8 Mon Sep 17 00:00:00 2001
From: Matt Roberts <roberts.mattroberts@gmail.com>
Date: Sat, 21 Dec 2024 22:38:01 +0000
Subject: [PATCH 03/20] More functionality working

---
 public/components/VoteCounter.tsx             |  2 +-
 public/components/VoteCounter2.tsx            | 63 +++++++++++++++++
 public/components/common/Button.scss          | 12 ++++
 public/components/common/Button.tsx           |  2 +-
 public/pages/ShowPost/ShowPost.page.tsx       | 69 ++++++++++++------
 .../components/NotificationsPanel.tsx         |  2 +-
 .../components/NotificationsPanel2.tsx        | 45 ++++++++++++
 .../pages/ShowPost/components/TagsPanel2.tsx  | 28 ++++----
 .../pages/ShowPost/components/VoteSection.tsx | 70 +++++++++++++++++++
 9 files changed, 256 insertions(+), 37 deletions(-)
 create mode 100644 public/components/VoteCounter2.tsx
 create mode 100644 public/pages/ShowPost/components/NotificationsPanel2.tsx
 create mode 100644 public/pages/ShowPost/components/VoteSection.tsx

diff --git a/public/components/VoteCounter.tsx b/public/components/VoteCounter.tsx
index 22f17cf1e..88f658570 100644
--- a/public/components/VoteCounter.tsx
+++ b/public/components/VoteCounter.tsx
@@ -7,7 +7,7 @@ import { Icon, SignInModal } from "@fider/components"
 import { useFider } from "@fider/hooks"
 import FaCaretUp from "@fider/assets/images/fa-caretup.svg"
 
-interface VoteCounterProps {
+export interface VoteCounterProps {
   post: Post
 }
 
diff --git a/public/components/VoteCounter2.tsx b/public/components/VoteCounter2.tsx
new file mode 100644
index 000000000..48554254a
--- /dev/null
+++ b/public/components/VoteCounter2.tsx
@@ -0,0 +1,63 @@
+import "./VoteCounter.scss"
+
+import React, { useState } from "react"
+import { Post, PostStatus } from "@fider/models"
+import { actions, classSet } from "@fider/services"
+import { Icon, SignInModal } from "@fider/components"
+import { useFider } from "@fider/hooks"
+import FaCaretUp from "@fider/assets/images/fa-caretup.svg"
+import { VoteCounterProps } from "@fider/components"
+
+export const VoteCounter2 = (props: VoteCounterProps) => {
+  const fider = useFider()
+  const [hasVoted, setHasVoted] = useState(props.post.hasVoted)
+  const [votesCount, setVotesCount] = useState(props.post.votesCount)
+  const [isSignInModalOpen, setIsSignInModalOpen] = useState(false)
+
+  const voteOrUndo = async () => {
+    if (!fider.session.isAuthenticated) {
+      setIsSignInModalOpen(true)
+      return
+    }
+
+    const action = hasVoted ? actions.removeVote : actions.addVote
+
+    const response = await action(props.post.number)
+    if (response.ok) {
+      setVotesCount(votesCount + (hasVoted ? -1 : 1))
+      setHasVoted(!hasVoted)
+    }
+  }
+
+  const hideModal = () => setIsSignInModalOpen(false)
+
+  const status = PostStatus.Get(props.post.status)
+  const isDisabled = status.closed || fider.isReadOnly
+
+  const className = classSet({
+    "c-vote-counter__button": true,
+    "c-vote-counter__button--voted": !status.closed && hasVoted,
+    "c-vote-counter__button--disabled": isDisabled,
+  })
+
+  const vote = (
+    <button className={className} onClick={voteOrUndo}>
+      <Icon sprite={FaCaretUp} height="16" width="16" />
+      {votesCount}
+    </button>
+  )
+
+  const disabled = (
+    <button className={className}>
+      <Icon sprite={FaCaretUp} height="16" width="16" />
+      {votesCount}
+    </button>
+  )
+
+  return (
+    <>
+      <SignInModal isOpen={isSignInModalOpen} onClose={hideModal} />
+      <div className="c-vote-counter">{isDisabled ? disabled : vote}</div>
+    </>
+  )
+}
diff --git a/public/components/common/Button.scss b/public/components/common/Button.scss
index b9dcb3f37..f8d5ba528 100644
--- a/public/components/common/Button.scss
+++ b/public/components/common/Button.scss
@@ -30,6 +30,16 @@
     }
   }
 
+  &--quaternary {
+    color: get("colors.gray.900");
+    background-color: transparent;
+    border: 1px solid get("colors.primary.base");
+  
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
   &--secondary {
     color: get("colors.gray.900");
     background-color: get("colors.gray.50");
@@ -143,3 +153,5 @@
     transform: rotate(360deg);
   }
 }
+
+
diff --git a/public/components/common/Button.tsx b/public/components/common/Button.tsx
index 3bc6423b0..208aa5936 100644
--- a/public/components/common/Button.tsx
+++ b/public/components/common/Button.tsx
@@ -10,7 +10,7 @@ interface ButtonProps {
   rel?: "nofollow"
   target?: "_self" | "_blank" | "_parent" | "_top"
   type?: "button" | "submit"
-  variant?: "primary" | "danger" | "secondary" | "tertiary"
+  variant?: "primary" | "danger" | "secondary" | "tertiary" | "quaternary"
   size?: "small" | "default" | "large"
   onClick?: (event: ButtonClickEvent) => Promise<any> | void
 }
diff --git a/public/pages/ShowPost/ShowPost.page.tsx b/public/pages/ShowPost/ShowPost.page.tsx
index 253720145..5e6a1a5db 100644
--- a/public/pages/ShowPost/ShowPost.page.tsx
+++ b/public/pages/ShowPost/ShowPost.page.tsx
@@ -4,6 +4,7 @@ import React from "react"
 
 import { Comment, Post, Tag, Vote, ImageUpload, CurrentUser } from "@fider/models"
 import { actions, clearUrlHash, Failure, Fider, notify, timeAgo } from "@fider/services"
+import IconDotsHorizontal from "@fider/assets/images/heroicons-dots-horizontal.svg"
 
 import {
   ShowPostResponse,
@@ -20,6 +21,7 @@ import {
   Header,
   PoweredByFider,
   Avatar,
+  Dropdown,
 } from "@fider/components"
 import { ResponseForm } from "./components/ResponseForm"
 import { TagsPanel } from "./components/TagsPanel"
@@ -34,6 +36,8 @@ import IconThumbsUp from "@fider/assets/images/heroicons-thumbsup.svg"
 import { HStack, VStack } from "@fider/components/layout"
 import { Trans } from "@lingui/macro"
 import { TagsPanel2 } from "./components/TagsPanel2"
+import { NotificationsPanel2 } from "./components/NotificationsPanel2"
+import { VoteSection } from "./components/VoteSection"
 
 interface ShowPostPageProps {
   post: Post
@@ -141,6 +145,10 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
     this.setState({ highlightedComment })
   }
 
+  public onActionSelected = (action: string) => () => {
+    console.log(action)
+  }
+
   public render() {
     return (
       <>
@@ -152,25 +160,43 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
                 <VStack spacing={6}>
                   {/* <VoteCounter post={this.props.post} /> */}
 
-                  <div className="flex-grow">
-                    {this.state.editMode ? (
-                      <Form error={this.state.error}>
-                        <Input field="title" maxLength={100} value={this.state.newTitle} onChange={this.setNewTitle} />
-                      </Form>
-                    ) : (
-                      <h1 className="text-large">{this.props.post.title}</h1>
-                    )}
-                    <div className="mt-2">
-                      <TagsPanel2 post={this.props.post} tags={this.props.tags} />
+                  <HStack justify="between">
+                    <div className="flex-grow">
+                      {this.state.editMode ? (
+                        <Form error={this.state.error}>
+                          <Input field="title" maxLength={100} value={this.state.newTitle} onChange={this.setNewTitle} />
+                        </Form>
+                      ) : (
+                        <h1 className="text-large">{this.props.post.title}</h1>
+                      )}
+                      <div className="mt-2">
+                        <TagsPanel2 post={this.props.post} tags={this.props.tags} />
+                      </div>
                     </div>
-                  </div>
-
-                  <HStack spacing={4}>
-                    <Avatar user={this.props.post.user} />
-                    <VStack spacing={1}>
-                      <UserName user={this.props.post.user} />
-                      <Moment className="text-muted" locale={Fider.currentLocale} date={this.props.post.createdAt} />
-                    </VStack>
+                    <Dropdown position="left" renderHandle={<Icon sprite={IconDotsHorizontal} width="24" height="24" />}>
+                      <Dropdown.ListItem onClick={this.onActionSelected("copy")}>
+                        <Trans id="action.copylink">Copy link</Trans>
+                      </Dropdown.ListItem>
+                      <Dropdown.ListItem onClick={this.onActionSelected("edit")}>
+                        <Trans id="action.edit">Edit</Trans>
+                      </Dropdown.ListItem>
+                      <Dropdown.ListItem onClick={this.onActionSelected("status")}>
+                        <Trans id="action.respond">Respond</Trans>
+                      </Dropdown.ListItem>
+                      <Dropdown.ListItem onClick={this.onActionSelected("delete")} className="text-red-700">
+                        <Trans id="action.delete">Delete</Trans>
+                      </Dropdown.ListItem>
+                    </Dropdown>
+                  </HStack>
+                  <HStack spacing={4} justify="between">
+                    <HStack>
+                      <Avatar user={this.props.post.user} />
+                      <VStack spacing={1}>
+                        <UserName user={this.props.post.user} />
+                        <Moment className="text-muted" locale={Fider.currentLocale} date={this.props.post.createdAt} />
+                      </VStack>
+                    </HStack>
+                    <NotificationsPanel2 post={this.props.post} subscribed={this.props.subscribed} />
                   </HStack>
 
                   {/* <span className="text-muted">
@@ -201,7 +227,10 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
                       </>
                     )}
                   </VStack>
-                  <div className="align-self-start">
+
+                  <VoteSection post={this.props.post} votes={this.props.votes} />
+
+                  {/* <div className="align-self-start">
                     <Button variant="primary" onClick={this.saveChanges} disabled={Fider.isReadOnly}>
                       <Icon sprite={IconThumbsUp} />{" "}
                       <span>
@@ -217,7 +246,7 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
                     <div className="pl-4">
                       <VotesPanel post={this.props.post} votes={this.props.votes} hideTitle={true} />
                     </div>
-                  </HStack>
+                  </HStack> */}
 
                   <div className="purple-border" />
                   <ShowPostResponse status={this.props.post.status} response={this.props.post.response} />
diff --git a/public/pages/ShowPost/components/NotificationsPanel.tsx b/public/pages/ShowPost/components/NotificationsPanel.tsx
index c9ee001ac..0de322a1c 100644
--- a/public/pages/ShowPost/components/NotificationsPanel.tsx
+++ b/public/pages/ShowPost/components/NotificationsPanel.tsx
@@ -8,7 +8,7 @@ import IconVolumeOff from "@fider/assets/images/heroicons-volume-off.svg"
 import { VStack } from "@fider/components/layout"
 import { Trans } from "@lingui/macro"
 
-interface NotificationsPanelProps {
+export interface NotificationsPanelProps {
   post: Post
   subscribed: boolean
 }
diff --git a/public/pages/ShowPost/components/NotificationsPanel2.tsx b/public/pages/ShowPost/components/NotificationsPanel2.tsx
new file mode 100644
index 000000000..85776d06d
--- /dev/null
+++ b/public/pages/ShowPost/components/NotificationsPanel2.tsx
@@ -0,0 +1,45 @@
+import React, { useState } from "react"
+import { Button, Icon } from "@fider/components"
+import { actions } from "@fider/services"
+import { useFider } from "@fider/hooks"
+import IconVolumeOn from "@fider/assets/images/heroicons-volume-on.svg"
+import IconVolumeOff from "@fider/assets/images/heroicons-volume-off.svg"
+import { VStack } from "@fider/components/layout"
+import { Trans } from "@lingui/macro"
+import { NotificationsPanelProps } from "./NotificationsPanel"
+
+export const NotificationsPanel2 = (props: NotificationsPanelProps) => {
+  const fider = useFider()
+  const [subscribed, setSubscribed] = useState(props.subscribed)
+
+  const subscribeOrUnsubscribe = async () => {
+    const action = subscribed ? actions.unsubscribe : actions.subscribe
+
+    const response = await action(props.post.number)
+    if (response.ok) {
+      setSubscribed(!subscribed)
+    }
+  }
+
+  if (!fider.session.isAuthenticated) {
+    return null
+  }
+
+  const button = subscribed ? (
+    <Button variant="quaternary" className="w-full text-primary-base" onClick={subscribeOrUnsubscribe} disabled={fider.isReadOnly}>
+      <Icon sprite={IconVolumeOff} />{" "}
+      <span>
+        <Trans id="label.unfollow">Unfollow</Trans>
+      </span>
+    </Button>
+  ) : (
+    <Button variant="quaternary" className="w-full text-primary-base" onClick={subscribeOrUnsubscribe} disabled={fider.isReadOnly}>
+      <Icon sprite={IconVolumeOn} />
+      <span>
+        <Trans id="label.follow">Follow</Trans>
+      </span>
+    </Button>
+  )
+
+  return <VStack>{button}</VStack>
+}
diff --git a/public/pages/ShowPost/components/TagsPanel2.tsx b/public/pages/ShowPost/components/TagsPanel2.tsx
index 0c12c1bbf..cef41e972 100644
--- a/public/pages/ShowPost/components/TagsPanel2.tsx
+++ b/public/pages/ShowPost/components/TagsPanel2.tsx
@@ -1,11 +1,10 @@
 import React, { useState } from "react"
 import { Tag } from "@fider/models"
 import { actions } from "@fider/services"
-import { ShowTag, Icon } from "@fider/components"
+import { ShowTag, Icon, Button } from "@fider/components"
 import { TagListItem } from "./TagListItem"
 import { useFider } from "@fider/hooks"
 
-import IconCheckCircle from "@fider/assets/images/heroicons-check-circle.svg"
 import IconPlusCircle from "@fider/assets/images/heroicons-pluscircle.svg"
 import { HStack, VStack } from "@fider/components/layout"
 import { Trans } from "@lingui/macro"
@@ -48,22 +47,27 @@ export const TagsPanel2 = (props: TagsPanelProps) => {
     return null
   }
 
-  const tagsList = assignedTags.length > 0 && (
-    <VStack spacing={2} className="flex-items-baseline">
-      {assignedTags.map((tag) => (
-        <ShowTag key={tag.id} tag={tag} link />
-      ))}
-    </VStack>
+  const tagsList = (
+    <HStack spacing={2} center={true}>
+      {assignedTags.length > 0 && assignedTags.map((tag) => <ShowTag key={tag.id} tag={tag} link />)}
+      <HStack spacing={1} center={true} className="clickable" onClick={onSubtitleClick}>
+        <Icon sprite={IconPlusCircle} className="h-5 text-primary" />
+        <span>Edit Tags</span>
+      </HStack>
+    </HStack>
   )
+
   const editTagsList = props.tags.length > 0 && (
-    <VStack>
+    <VStack justify="between" className="flex-items-start">
       {props.tags.map((tag) => (
         <TagListItem key={tag.id} tag={tag} assigned={assignedTags.indexOf(tag) >= 0} onClick={assignOrUnassignTag} />
       ))}
+      <Button variant="secondary" size="small" onClick={onSubtitleClick}>
+        <Trans id="action.close">Close</Trans>
+      </Button>
     </VStack>
   )
 
-  const icon = canEdit && (isEditing ? <Icon sprite={IconCheckCircle} className="h-4" /> : <Icon sprite={IconPlusCircle} className="h-5 text-primary" />)
 
   if (fider.isReadOnly) {
     return (
@@ -81,10 +85,6 @@ export const TagsPanel2 = (props: TagsPanelProps) => {
       <HStack spacing={2} center={true} className="text-primary-base text-xs">
         {!isEditing && tagsList}
         {isEditing && editTagsList}
-        <HStack spacing={1} className="clickable" onClick={onSubtitleClick}>
-          {icon}
-          <span>Edit Tags</span>
-        </HStack>
       </HStack>
     </VStack>
   )
diff --git a/public/pages/ShowPost/components/VoteSection.tsx b/public/pages/ShowPost/components/VoteSection.tsx
new file mode 100644
index 000000000..f5f6754a2
--- /dev/null
+++ b/public/pages/ShowPost/components/VoteSection.tsx
@@ -0,0 +1,70 @@
+import React, { useState } from "react"
+import { Post, PostStatus, Vote } from "@fider/models"
+import { actions } from "@fider/services"
+import { Button, Icon, SignInModal } from "@fider/components"
+import { useFider } from "@fider/hooks"
+import IconThumbsUp from "@fider/assets/images/heroicons-thumbsup.svg"
+import IconCheck from "@fider/assets/images/heroicons-check.svg"
+import { Trans } from "@lingui/macro"
+import { HStack } from "@fider/components/layout"
+import { VotesPanel } from "./VotesPanel"
+
+interface VoteSectionProps {
+  post: Post
+  votes: Vote[]
+}
+
+export const VoteSection = (props: VoteSectionProps) => {
+  const fider = useFider()
+  const [hasVoted, setHasVoted] = useState(props.post.hasVoted)
+  const [votes, setVotes] = useState(props.votes)
+  const [post, setPost] = useState(props.post)
+  const [isSignInModalOpen, setIsSignInModalOpen] = useState(false)
+
+  const voteOrUndo = async () => {
+    if (!fider.session.isAuthenticated) {
+      setIsSignInModalOpen(true)
+      return
+    }
+
+    const action = hasVoted ? actions.removeVote : actions.addVote
+
+    const response = await action(props.post.number)
+    if (response.ok) {
+      const newVotes: Vote[] = hasVoted
+        ? votes.filter((vote) => vote.user.id !== fider.session.user.id)
+        : [...votes, { user: fider.session.user, createdAt: new Date() }]
+
+      setPost({ ...post, votesCount: newVotes.length })
+      setVotes(newVotes)
+      setHasVoted(!hasVoted)
+    }
+  }
+
+  const hideModal = () => setIsSignInModalOpen(false)
+
+  const status = PostStatus.Get(props.post.status)
+  const isDisabled = status.closed || fider.isReadOnly
+
+  const buttonText = hasVoted ? <Trans id="action.voted">Voted!</Trans> : <Trans id="action.vote">Vote for this idea</Trans>
+  const icon = hasVoted ? IconCheck : IconThumbsUp
+
+  return (
+    <>
+      <SignInModal isOpen={isSignInModalOpen} onClose={hideModal} />
+      <div className="align-self-start">
+        <Button variant="primary" onClick={voteOrUndo} disabled={isDisabled}>
+          <Icon sprite={icon} /> <span>{buttonText}</span>
+        </Button>
+      </div>
+      <HStack>
+        <span className="text-display">
+          {votes.length} {votes.length === 1 ? "Vote" : "Votes"}
+        </span>
+        <div className="pl-4">
+          <VotesPanel post={post} votes={votes} hideTitle={true} />
+        </div>
+      </HStack>
+    </>
+  )
+}

From f1972175a5b9f22ea6e3d96eafb3a44f1660f5fe Mon Sep 17 00:00:00 2001
From: Matt Roberts <roberts.mattroberts@gmail.com>
Date: Sun, 22 Dec 2024 22:20:26 +0000
Subject: [PATCH 04/20] More functionality

---
 public/components/VoteCounter2.tsx      |   2 +-
 public/pages/ShowPost/ShowPost.page.tsx | 140 ++++++++++++++----------
 2 files changed, 81 insertions(+), 61 deletions(-)

diff --git a/public/components/VoteCounter2.tsx b/public/components/VoteCounter2.tsx
index 48554254a..a12f428ea 100644
--- a/public/components/VoteCounter2.tsx
+++ b/public/components/VoteCounter2.tsx
@@ -1,7 +1,7 @@
 import "./VoteCounter.scss"
 
 import React, { useState } from "react"
-import { Post, PostStatus } from "@fider/models"
+import { PostStatus } from "@fider/models"
 import { actions, classSet } from "@fider/services"
 import { Icon, SignInModal } from "@fider/components"
 import { useFider } from "@fider/hooks"
diff --git a/public/pages/ShowPost/ShowPost.page.tsx b/public/pages/ShowPost/ShowPost.page.tsx
index 5e6a1a5db..3d893701f 100644
--- a/public/pages/ShowPost/ShowPost.page.tsx
+++ b/public/pages/ShowPost/ShowPost.page.tsx
@@ -2,7 +2,7 @@ import "./ShowPost.page.scss"
 
 import React from "react"
 
-import { Comment, Post, Tag, Vote, ImageUpload, CurrentUser } from "@fider/models"
+import { Comment, Post, Tag, Vote, ImageUpload, CurrentUser, PostStatus } from "@fider/models"
 import { actions, clearUrlHash, Failure, Fider, notify, timeAgo } from "@fider/services"
 import IconDotsHorizontal from "@fider/assets/images/heroicons-dots-horizontal.svg"
 
@@ -98,6 +98,14 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
     }
   }
 
+  private canDeletePost = () => {
+    const status = PostStatus.Get(this.props.post.status)
+    if (!Fider.session.isAuthenticated || !Fider.session.user.isAdministrator || status.closed) {
+      return false
+    }
+    return true
+  }
+
   private setNewTitle = (newTitle: string) => {
     this.setState({ newTitle })
   }
@@ -145,8 +153,17 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
     this.setState({ highlightedComment })
   }
 
-  public onActionSelected = (action: string) => () => {
-    console.log(action)
+  public onActionSelected = (action: "copy" | "delete" | "status" | "edit") => () => {
+    if (action === "copy") {
+      navigator.clipboard.writeText(window.location.href)
+      notify.success(<Trans id="showpost.copylink.success">Link copied to clipboard</Trans>)
+    } else if (action === "delete") {
+      // actions.deletePost(this.props.post.number)
+    } else if (action === "status") {
+      // actions.changeStatus(this.props.post.number, this.props.post.status)
+    } else if (action === "edit") {
+      this.startEdit()
+    }
   }
 
   public render() {
@@ -158,7 +175,6 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
             <div className="p-show-post__main-col">
               <div className="p-show-post__header-col">
                 <VStack spacing={6}>
-                  {/* <VoteCounter post={this.props.post} /> */}
 
                   <HStack justify="between">
                     <div className="flex-grow">
@@ -167,47 +183,52 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
                           <Input field="title" maxLength={100} value={this.state.newTitle} onChange={this.setNewTitle} />
                         </Form>
                       ) : (
-                        <h1 className="text-large">{this.props.post.title}</h1>
+                        <>
+                          <h1 className="text-large">{this.props.post.title}</h1>
+                          <div className="mt-2">
+                            <TagsPanel2 post={this.props.post} tags={this.props.tags} />
+                          </div>
+                        </>
                       )}
-                      <div className="mt-2">
-                        <TagsPanel2 post={this.props.post} tags={this.props.tags} />
-                      </div>
                     </div>
-                    <Dropdown position="left" renderHandle={<Icon sprite={IconDotsHorizontal} width="24" height="24" />}>
-                      <Dropdown.ListItem onClick={this.onActionSelected("copy")}>
-                        <Trans id="action.copylink">Copy link</Trans>
-                      </Dropdown.ListItem>
-                      <Dropdown.ListItem onClick={this.onActionSelected("edit")}>
-                        <Trans id="action.edit">Edit</Trans>
-                      </Dropdown.ListItem>
-                      <Dropdown.ListItem onClick={this.onActionSelected("status")}>
-                        <Trans id="action.respond">Respond</Trans>
-                      </Dropdown.ListItem>
-                      <Dropdown.ListItem onClick={this.onActionSelected("delete")} className="text-red-700">
-                        <Trans id="action.delete">Delete</Trans>
-                      </Dropdown.ListItem>
-                    </Dropdown>
+                    {!this.state.editMode && (
+                      <Dropdown position="left" renderHandle={<Icon sprite={IconDotsHorizontal} width="24" height="24" />}>
+                        <Dropdown.ListItem onClick={this.onActionSelected("copy")}>
+                          <Trans id="action.copylink">Copy link</Trans>
+                        </Dropdown.ListItem>
+                        {canEditPost(Fider.session.user, this.props.post) && (
+                          <>
+                            <Dropdown.ListItem onClick={this.onActionSelected("edit")}>
+                              <Trans id="action.edit">Edit</Trans>
+                            </Dropdown.ListItem>
+                            {Fider.session.user.isCollaborator && (
+                              <Dropdown.ListItem onClick={this.onActionSelected("status")}>
+                                <Trans id="action.respond">Respond</Trans>
+                              </Dropdown.ListItem>
+                            )}
+                          </>
+                        )}
+                        {this.canDeletePost() && (
+                          <Dropdown.ListItem onClick={this.onActionSelected("delete")} className="text-red-700">
+                            <Trans id="action.delete">Delete</Trans>
+                          </Dropdown.ListItem>
+                        )}
+                      </Dropdown>
+                    )}
                   </HStack>
-                  <HStack spacing={4} justify="between">
-                    <HStack>
-                      <Avatar user={this.props.post.user} />
-                      <VStack spacing={1}>
-                        <UserName user={this.props.post.user} />
-                        <Moment className="text-muted" locale={Fider.currentLocale} date={this.props.post.createdAt} />
-                      </VStack>
+                  {!this.state.editMode && (
+                    <HStack spacing={4} justify="between">
+                      <HStack>
+                        <Avatar user={this.props.post.user} />
+                        <VStack spacing={1}>
+                          <UserName user={this.props.post.user} />
+                          <Moment className="text-muted" locale={Fider.currentLocale} date={this.props.post.createdAt} />
+                        </VStack>
+                      </HStack>
+                      <NotificationsPanel2 post={this.props.post} subscribed={this.props.subscribed} />
                     </HStack>
-                    <NotificationsPanel2 post={this.props.post} subscribed={this.props.subscribed} />
-                  </HStack>
-
-                  {/* <span className="text-muted">
-                        <Trans id="showpost.label.author">
-                          Posted by <UserName user={this.props.post.user} /> &middot; <Moment locale={Fider.currentLocale} date={this.props.post.createdAt} />
-                        </Trans>
-                      </span> */}
-                  <VStack className="flex-items-start">
-                    {/* <span className="text-category">
-                      <Trans id="label.description">Description</Trans>
-                    </span> */}
+                  )}
+                  <VStack>
                     {this.state.editMode ? (
                       <Form error={this.state.error}>
                         <TextArea field="description" value={this.state.newDescription} onChange={this.setNewDescription} />
@@ -228,25 +249,24 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
                     )}
                   </VStack>
 
-                  <VoteSection post={this.props.post} votes={this.props.votes} />
-
-                  {/* <div className="align-self-start">
-                    <Button variant="primary" onClick={this.saveChanges} disabled={Fider.isReadOnly}>
-                      <Icon sprite={IconThumbsUp} />{" "}
-                      <span>
-                        <Trans id="action.vote">Vote for this idea</Trans>
-                      </span>
-                    </Button>
-                  </div>
-
-                  <HStack>
-                    <span className="text-display">
-                      {this.props.post.votesCount} {this.props.post.votesCount === 1 ? "Vote" : "Votes"}
-                    </span>
-                    <div className="pl-4">
-                      <VotesPanel post={this.props.post} votes={this.props.votes} hideTitle={true} />
-                    </div>
-                  </HStack> */}
+                  {!this.state.editMode ? (
+                    <VoteSection post={this.props.post} votes={this.props.votes} />
+                  ) : (
+                    <HStack>
+                      <Button variant="primary" onClick={this.saveChanges} disabled={Fider.isReadOnly}>
+                        <Icon sprite={IconThumbsUp} />{" "}
+                        <span>
+                          <Trans id="action.save">Save</Trans>
+                        </span>
+                      </Button>
+                      <Button onClick={this.cancelEdit} disabled={Fider.isReadOnly}>
+                        <Icon sprite={IconX} />
+                        <span>
+                          <Trans id="action.cancel">Cancel</Trans>
+                        </span>
+                      </Button>
+                    </HStack>
+                  )}
 
                   <div className="purple-border" />
                   <ShowPostResponse status={this.props.post.status} response={this.props.post.response} />

From b1e7f2cfc724d936a16ab736a8f6e99568656983 Mon Sep 17 00:00:00 2001
From: Matt Roberts <roberts.mattroberts@gmail.com>
Date: Fri, 27 Dec 2024 10:35:32 +0000
Subject: [PATCH 05/20] Delete post working

---
 public/pages/ShowPost/ShowPost.page.tsx       | 29 ++++++++++++-------
 .../ShowPost/components/ModerationPanel.tsx   | 25 ++++------------
 2 files changed, 24 insertions(+), 30 deletions(-)

diff --git a/public/pages/ShowPost/ShowPost.page.tsx b/public/pages/ShowPost/ShowPost.page.tsx
index 3d893701f..ccacf8636 100644
--- a/public/pages/ShowPost/ShowPost.page.tsx
+++ b/public/pages/ShowPost/ShowPost.page.tsx
@@ -23,21 +23,22 @@ import {
   Avatar,
   Dropdown,
 } from "@fider/components"
-import { ResponseForm } from "./components/ResponseForm"
-import { TagsPanel } from "./components/TagsPanel"
-import { NotificationsPanel } from "./components/NotificationsPanel"
-import { ModerationPanel } from "./components/ModerationPanel"
+// import { ResponseForm } from "./components/ResponseForm"
+// import { TagsPanel } from "./components/TagsPanel"
+// import { NotificationsPanel } from "./components/NotificationsPanel"
+// import { ModerationPanel } from "./components/ModerationPanel"
 import { DiscussionPanel } from "./components/DiscussionPanel"
-import { VotesPanel } from "./components/VotesPanel"
+// import { VotesPanel } from "./components/VotesPanel"
 
 import IconX from "@fider/assets/images/heroicons-x.svg"
-import IconPencilAlt from "@fider/assets/images/heroicons-pencil-alt.svg"
+// import IconPencilAlt from "@fider/assets/images/heroicons-pencil-alt.svg"
 import IconThumbsUp from "@fider/assets/images/heroicons-thumbsup.svg"
 import { HStack, VStack } from "@fider/components/layout"
 import { Trans } from "@lingui/macro"
 import { TagsPanel2 } from "./components/TagsPanel2"
 import { NotificationsPanel2 } from "./components/NotificationsPanel2"
 import { VoteSection } from "./components/VoteSection"
+import { ModerationPanel } from "./components/ModerationPanel"
 
 interface ShowPostPageProps {
   post: Post
@@ -51,6 +52,7 @@ interface ShowPostPageProps {
 interface ShowPostPageState {
   editMode: boolean
   newTitle: string
+  showDeleteModal: boolean
   attachments: ImageUpload[]
   newDescription: string
   highlightedComment?: number
@@ -72,6 +74,7 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
 
     this.state = {
       editMode: false,
+      showDeleteModal: false,
       newTitle: this.props.post.title,
       newDescription: this.props.post.description,
       attachments: [],
@@ -118,6 +121,10 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
     this.setState({ attachments })
   }
 
+  private setShowDeleteModal = (showDeleteModal: boolean) => {
+    this.setState({ showDeleteModal })
+  }
+
   private cancelEdit = async () => {
     this.setState({ error: undefined, editMode: false })
   }
@@ -158,7 +165,7 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
       navigator.clipboard.writeText(window.location.href)
       notify.success(<Trans id="showpost.copylink.success">Link copied to clipboard</Trans>)
     } else if (action === "delete") {
-      // actions.deletePost(this.props.post.number)
+      this.setShowDeleteModal(true)
     } else if (action === "status") {
       // actions.changeStatus(this.props.post.number, this.props.post.status)
     } else if (action === "edit") {
@@ -174,8 +181,7 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
           <div className="p-show-post">
             <div className="p-show-post__main-col">
               <div className="p-show-post__header-col">
-                <VStack spacing={6}>
-
+                <VStack spacing={8}>
                   <HStack justify="between">
                     <div className="flex-grow">
                       {this.state.editMode ? (
@@ -191,6 +197,7 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
                         </>
                       )}
                     </div>
+                    <ModerationPanel onModalClose={() => this.setShowDeleteModal(false)} showModal={this.state.showDeleteModal} post={this.props.post} />
                     {!this.state.editMode && (
                       <Dropdown position="left" renderHandle={<Icon sprite={IconDotsHorizontal} width="24" height="24" />}>
                         <Dropdown.ListItem onClick={this.onActionSelected("copy")}>
@@ -278,7 +285,7 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
               </div>
             </div>
             <div className="p-show-post__action-col">
-              <VStack spacing={4}>
+              {/* <VStack spacing={4}>
                 <VotesPanel post={this.props.post} votes={this.props.votes} />
 
                 {Fider.session.isAuthenticated && canEditPost(Fider.session.user, this.props.post) && (
@@ -318,7 +325,7 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
                 <TagsPanel post={this.props.post} tags={this.props.tags} />
                 <NotificationsPanel post={this.props.post} subscribed={this.props.subscribed} />
                 <ModerationPanel post={this.props.post} />
-              </VStack>
+              </VStack> */}
               <PoweredByFider slot="show-post" className="mt-3" />
             </div>
           </div>
diff --git a/public/pages/ShowPost/components/ModerationPanel.tsx b/public/pages/ShowPost/components/ModerationPanel.tsx
index e37b356a6..019234c8d 100644
--- a/public/pages/ShowPost/components/ModerationPanel.tsx
+++ b/public/pages/ShowPost/components/ModerationPanel.tsx
@@ -3,26 +3,23 @@ import { PostStatus, Post } from "@fider/models"
 import { actions, navigator, Failure } from "@fider/services"
 import { Form, Modal, Button, TextArea } from "@fider/components"
 import { useFider } from "@fider/hooks"
-import { VStack } from "@fider/components/layout"
 import { t, Trans } from "@lingui/macro"
 
 interface ModerationPanelProps {
   post: Post
+  showModal: boolean
+  onModalClose: () => void
 }
 
 export const ModerationPanel = (props: ModerationPanelProps) => {
   const fider = useFider()
-  const [showConfirmation, setShowConfirmation] = useState(false)
   const [text, setText] = useState("")
   const [error, setError] = useState<Failure>()
 
-  const hideModal = async () => setShowConfirmation(false)
-  const showModal = async () => setShowConfirmation(true)
-
   const handleDelete = async () => {
     const response = await actions.deletePost(props.post.number, text)
     if (response.ok) {
-      hideModal()
+      props.onModalClose()
       navigator.goHome()
     } else if (response.error) {
       setError(response.error)
@@ -35,7 +32,7 @@ export const ModerationPanel = (props: ModerationPanelProps) => {
   }
 
   const modal = (
-    <Modal.Window isOpen={showConfirmation} onClose={hideModal} center={false} size="large">
+    <Modal.Window isOpen={props.showModal} onClose={props.onModalClose} center={false} size="large">
       <Modal.Content>
         <Form error={error}>
           <TextArea
@@ -57,22 +54,12 @@ export const ModerationPanel = (props: ModerationPanelProps) => {
         <Button variant="danger" onClick={handleDelete}>
           <Trans id="action.delete">Delete</Trans>
         </Button>
-        <Button variant="tertiary" onClick={hideModal}>
+        <Button variant="tertiary" onClick={props.onModalClose}>
           <Trans id="action.cancel">Cancel</Trans>
         </Button>
       </Modal.Footer>
     </Modal.Window>
   )
 
-  return (
-    <VStack>
-      {modal}
-      <span className="text-category">
-        <Trans id="label.moderation">Moderation</Trans>
-      </span>
-      <Button disabled={fider.isReadOnly} variant="danger" size="small" className="w-full" onClick={showModal}>
-        <Trans id="action.delete">Delete</Trans>
-      </Button>
-    </VStack>
-  )
+  return modal
 }

From c9243d63ea5e74fdbf81d6c4e470b03e472d2727 Mon Sep 17 00:00:00 2001
From: Matt Roberts <roberts.mattroberts@gmail.com>
Date: Sun, 29 Dec 2024 11:05:14 +0000
Subject: [PATCH 06/20] More changes to the show post page.

---
 public/pages/ShowPost/ShowPost.page.scss      |  4 +-
 public/pages/ShowPost/ShowPost.page.tsx       | 57 +++++--------------
 .../pages/ShowPost/components/MostWanted.tsx  | 32 +++++++++++
 .../{ResponseForm.tsx => ResponseModal.tsx}   | 45 ++++-----------
 4 files changed, 59 insertions(+), 79 deletions(-)
 create mode 100644 public/pages/ShowPost/components/MostWanted.tsx
 rename public/pages/ShowPost/components/{ResponseForm.tsx => ResponseModal.tsx} (72%)

diff --git a/public/pages/ShowPost/ShowPost.page.scss b/public/pages/ShowPost/ShowPost.page.scss
index 2e5e037bc..83fd0391b 100644
--- a/public/pages/ShowPost/ShowPost.page.scss
+++ b/public/pages/ShowPost/ShowPost.page.scss
@@ -25,8 +25,8 @@
   @include media("lg") {
     .p-show-post {
       display: grid;
-      gap: spacing(4);
-      grid-template-columns: 3fr 1fr;
+      gap: spacing(6);
+      grid-template-columns: 5fr 2fr;
       grid-template-rows: auto;
       grid-template-areas:
         "Main Action"
diff --git a/public/pages/ShowPost/ShowPost.page.tsx b/public/pages/ShowPost/ShowPost.page.tsx
index ccacf8636..91b2984c2 100644
--- a/public/pages/ShowPost/ShowPost.page.tsx
+++ b/public/pages/ShowPost/ShowPost.page.tsx
@@ -39,6 +39,8 @@ import { TagsPanel2 } from "./components/TagsPanel2"
 import { NotificationsPanel2 } from "./components/NotificationsPanel2"
 import { VoteSection } from "./components/VoteSection"
 import { ModerationPanel } from "./components/ModerationPanel"
+import { ResponseModal } from "./components/ResponseModal"
+import { MostWanted } from "./components/MostWanted"
 
 interface ShowPostPageProps {
   post: Post
@@ -53,6 +55,7 @@ interface ShowPostPageState {
   editMode: boolean
   newTitle: string
   showDeleteModal: boolean
+  showResponseModal: boolean
   attachments: ImageUpload[]
   newDescription: string
   highlightedComment?: number
@@ -75,6 +78,7 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
     this.state = {
       editMode: false,
       showDeleteModal: false,
+      showResponseModal: false,
       newTitle: this.props.post.title,
       newDescription: this.props.post.description,
       attachments: [],
@@ -125,6 +129,10 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
     this.setState({ showDeleteModal })
   }
 
+  private setShowResponseModal = (showResponseModal: boolean) => {
+    this.setState({ showResponseModal })
+  }
+
   private cancelEdit = async () => {
     this.setState({ error: undefined, editMode: false })
   }
@@ -167,7 +175,7 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
     } else if (action === "delete") {
       this.setShowDeleteModal(true)
     } else if (action === "status") {
-      // actions.changeStatus(this.props.post.number, this.props.post.status)
+      this.setShowResponseModal(true)
     } else if (action === "edit") {
       this.startEdit()
     }
@@ -198,6 +206,9 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
                       )}
                     </div>
                     <ModerationPanel onModalClose={() => this.setShowDeleteModal(false)} showModal={this.state.showDeleteModal} post={this.props.post} />
+                    {Fider.session.user.isCollaborator && (
+                      <ResponseModal onCloseModal={() => this.setShowResponseModal(false)} showModal={this.state.showResponseModal} post={this.props.post} />
+                    )}
                     {!this.state.editMode && (
                       <Dropdown position="left" renderHandle={<Icon sprite={IconDotsHorizontal} width="24" height="24" />}>
                         <Dropdown.ListItem onClick={this.onActionSelected("copy")}>
@@ -235,6 +246,7 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
                       <NotificationsPanel2 post={this.props.post} subscribed={this.props.subscribed} />
                     </HStack>
                   )}
+                  <ShowPostResponse status={this.props.post.status} response={this.props.post.response} />
                   <VStack>
                     {this.state.editMode ? (
                       <Form error={this.state.error}>
@@ -276,7 +288,6 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
                   )}
 
                   <div className="purple-border" />
-                  <ShowPostResponse status={this.props.post.status} response={this.props.post.response} />
                 </VStack>
               </div>
 
@@ -285,47 +296,7 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
               </div>
             </div>
             <div className="p-show-post__action-col">
-              {/* <VStack spacing={4}>
-                <VotesPanel post={this.props.post} votes={this.props.votes} />
-
-                {Fider.session.isAuthenticated && canEditPost(Fider.session.user, this.props.post) && (
-                  <VStack>
-                    <span key={0} className="text-category">
-                      <Trans id="label.actions">Actions</Trans>
-                    </span>
-                    {this.state.editMode ? (
-                      <VStack>
-                        <Button variant="primary" onClick={this.saveChanges} disabled={Fider.isReadOnly}>
-                          <Icon sprite={IconThumbsUp} />{" "}
-                          <span>
-                            <Trans id="action.save">Save</Trans>
-                          </span>
-                        </Button>
-                        <Button onClick={this.cancelEdit} disabled={Fider.isReadOnly}>
-                          <Icon sprite={IconX} />
-                          <span>
-                            <Trans id="action.cancel">Cancel</Trans>
-                          </span>
-                        </Button>
-                      </VStack>
-                    ) : (
-                      <VStack>
-                        <Button onClick={this.startEdit} disabled={Fider.isReadOnly}>
-                          <Icon sprite={IconPencilAlt} />
-                          <span>
-                            <Trans id="action.edit">Edit</Trans>
-                          </span>
-                        </Button>
-                        {Fider.session.user.isCollaborator && <ResponseForm post={this.props.post} />}
-                      </VStack>
-                    )}
-                  </VStack>
-                )}
-
-                <TagsPanel post={this.props.post} tags={this.props.tags} />
-                <NotificationsPanel post={this.props.post} subscribed={this.props.subscribed} />
-                <ModerationPanel post={this.props.post} />
-              </VStack> */}
+              <MostWanted />
               <PoweredByFider slot="show-post" className="mt-3" />
             </div>
           </div>
diff --git a/public/pages/ShowPost/components/MostWanted.tsx b/public/pages/ShowPost/components/MostWanted.tsx
new file mode 100644
index 000000000..1a25df96e
--- /dev/null
+++ b/public/pages/ShowPost/components/MostWanted.tsx
@@ -0,0 +1,32 @@
+import React from "react"
+import { VStack } from "@fider/components/layout"
+import { actions } from "@fider/services"
+import { Post } from "@fider/models"
+
+export const MostWanted = () => {
+  const [posts, setPosts] = React.useState<Post[]>([])
+
+  React.useEffect(() => {
+    const fetchPosts = async () => {
+      const result = await actions.searchPosts({ view: "most-wanted", limit: 5 })
+      setPosts(result.data)
+    }
+    fetchPosts()
+  }, [])
+
+  return (
+    <VStack spacing={4}>
+      <h1 className="text-title">Most Wanted</h1>
+      {posts.length > 0 &&
+        posts.map((post) => (
+          <div key={post.id} className="pt-1">
+            <span className="text-medium">{post.title}</span>
+            <div className="pt-1 flex">
+              <span className="text-muted" style={{ width: "150px" }}>{post.commentsCount} comments</span>
+              <span className="text-muted">{post.votesCount} votes</span>
+            </div>
+          </div>
+        ))}
+    </VStack>
+  )
+}
diff --git a/public/pages/ShowPost/components/ResponseForm.tsx b/public/pages/ShowPost/components/ResponseModal.tsx
similarity index 72%
rename from public/pages/ShowPost/components/ResponseForm.tsx
rename to public/pages/ShowPost/components/ResponseModal.tsx
index 92f0f1d66..c94a79d83 100644
--- a/public/pages/ShowPost/components/ResponseForm.tsx
+++ b/public/pages/ShowPost/components/ResponseModal.tsx
@@ -1,31 +1,30 @@
 import React from "react"
 
-import { Modal, Button, DisplayError, Select, Form, TextArea, Field, SelectOption, Icon } from "@fider/components"
+import { Modal, Button, DisplayError, Select, Form, TextArea, Field, SelectOption } from "@fider/components"
 import { Post, PostStatus } from "@fider/models"
 
-import { actions, Failure, Fider } from "@fider/services"
+import { actions, Failure } from "@fider/services"
 import { PostSearch } from "./PostSearch"
-import IconSpeakerPhone from "@fider/assets/images/heroicons-speakerphone.svg"
 import { t, Trans } from "@lingui/macro"
 
-interface ResponseFormProps {
+interface ResponseModalProps {
   post: Post
+  showModal: boolean
+  onCloseModal: () => void
 }
 
-interface ResponseFormState {
-  showModal: boolean
+interface ResponseModalState {
   status: string
   text: string
   originalNumber: number
   error?: Failure
 }
 
-export class ResponseForm extends React.Component<ResponseFormProps, ResponseFormState> {
-  constructor(props: ResponseFormProps) {
+export class ResponseModal extends React.Component<ResponseModalProps, ResponseModalState> {
+  constructor(props: ResponseModalProps) {
     super(props)
 
     this.state = {
-      showModal: false,
       status: this.props.post.status,
       originalNumber: 0,
       text: this.props.post.response ? this.props.post.response.text : "",
@@ -43,14 +42,6 @@ export class ResponseForm extends React.Component<ResponseFormProps, ResponseFor
     }
   }
 
-  private showModal = async () => {
-    this.setState({ showModal: true })
-  }
-
-  private closeModal = async () => {
-    this.setState({ showModal: false })
-  }
-
   private setStatus = (opt?: SelectOption) => {
     if (opt) {
       this.setState({ status: opt.value })
@@ -66,15 +57,6 @@ export class ResponseForm extends React.Component<ResponseFormProps, ResponseFor
   }
 
   public render() {
-    const button = (
-      <Button className="w-full" onClick={this.showModal} disabled={Fider.isReadOnly}>
-        <Icon sprite={IconSpeakerPhone} />{" "}
-        <span>
-          <Trans id="action.respond">Respond</Trans>
-        </span>
-      </Button>
-    )
-
     const options = PostStatus.All.map((s) => {
       const id = `enum.poststatus.${s.value.toString()}`
       return {
@@ -84,7 +66,7 @@ export class ResponseForm extends React.Component<ResponseFormProps, ResponseFor
     })
 
     const modal = (
-      <Modal.Window isOpen={this.state.showModal} onClose={this.closeModal} center={false} size="large">
+      <Modal.Window isOpen={this.props.showModal} onClose={this.props.onCloseModal} center={false} size="large">
         <Modal.Content>
           <Form error={this.state.error} className="c-response-form">
             <Select field="status" label="Status" defaultValue={this.state.status} options={options} onChange={this.setStatus} />
@@ -117,18 +99,13 @@ export class ResponseForm extends React.Component<ResponseFormProps, ResponseFor
           <Button variant="primary" onClick={this.submit}>
             <Trans id="action.submit">Submit</Trans>
           </Button>
-          <Button variant="tertiary" onClick={this.closeModal}>
+          <Button variant="tertiary" onClick={this.props.onCloseModal}>
             <Trans id="action.cancel">Cancel</Trans>
           </Button>
         </Modal.Footer>
       </Modal.Window>
     )
 
-    return (
-      <>
-        {button}
-        {modal}
-      </>
-    )
+    return modal
   }
 }

From 3ec58d9ff76e29cf8291c121f2c7fa1e51d08821 Mon Sep 17 00:00:00 2001
From: Matt Roberts <roberts.mattroberts@gmail.com>
Date: Sun, 29 Dec 2024 11:12:12 +0000
Subject: [PATCH 07/20] Linting

---
 public/components/common/Moment.tsx             | 2 +-
 public/pages/ShowPost/components/MostWanted.tsx | 4 +++-
 public/pages/ShowPost/components/TagsPanel2.tsx | 1 -
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/public/components/common/Moment.tsx b/public/components/common/Moment.tsx
index d28122615..f49e7164f 100644
--- a/public/components/common/Moment.tsx
+++ b/public/components/common/Moment.tsx
@@ -39,4 +39,4 @@ export const Moment = (props: MomentText) => {
       {display}
     </span>
   )
-}
\ No newline at end of file
+}
diff --git a/public/pages/ShowPost/components/MostWanted.tsx b/public/pages/ShowPost/components/MostWanted.tsx
index 1a25df96e..0989c1831 100644
--- a/public/pages/ShowPost/components/MostWanted.tsx
+++ b/public/pages/ShowPost/components/MostWanted.tsx
@@ -22,7 +22,9 @@ export const MostWanted = () => {
           <div key={post.id} className="pt-1">
             <span className="text-medium">{post.title}</span>
             <div className="pt-1 flex">
-              <span className="text-muted" style={{ width: "150px" }}>{post.commentsCount} comments</span>
+              <span className="text-muted" style={{ width: "150px" }}>
+                {post.commentsCount} comments
+              </span>
               <span className="text-muted">{post.votesCount} votes</span>
             </div>
           </div>
diff --git a/public/pages/ShowPost/components/TagsPanel2.tsx b/public/pages/ShowPost/components/TagsPanel2.tsx
index cef41e972..e85f7e031 100644
--- a/public/pages/ShowPost/components/TagsPanel2.tsx
+++ b/public/pages/ShowPost/components/TagsPanel2.tsx
@@ -68,7 +68,6 @@ export const TagsPanel2 = (props: TagsPanelProps) => {
     </VStack>
   )
 
-
   if (fider.isReadOnly) {
     return (
       <VStack>

From 6c720f7882f0f5e3225a05accfc364a7820b1396 Mon Sep 17 00:00:00 2001
From: Matt Roberts <roberts.mattroberts@gmail.com>
Date: Sun, 29 Dec 2024 21:13:49 +0000
Subject: [PATCH 08/20] Fixed some adding post UI tests

---
 e2e/step_definitions/show_post.steps.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/e2e/step_definitions/show_post.steps.ts b/e2e/step_definitions/show_post.steps.ts
index 2d4c7cd52..7998b4b9a 100644
--- a/e2e/step_definitions/show_post.steps.ts
+++ b/e2e/step_definitions/show_post.steps.ts
@@ -1,6 +1,6 @@
 import { Then } from "@cucumber/cucumber"
 import { FiderWorld } from "../world"
-import expect from "expect"
+import { expect } from "@playwright/test"
 
 Then("I should be on the show post page", async function (this: FiderWorld) {
   const container = await this.page.$$("#p-show-post")
@@ -13,6 +13,5 @@ Then("I should see {string} as the post title", async function (this: FiderWorld
 })
 
 Then("I should see {int} vote\\(s)", async function (this: FiderWorld, voteCount: number) {
-  const postVoteCount = await this.page.innerText("#p-show-post .c-vote-counter__button")
-  expect(postVoteCount).toBe(voteCount.toString())
+  await expect(this.page.getByText(`${voteCount} votes`, { exact: true })).toBeVisible()
 })

From 1ba42cf20aa88e6135cf287301aa62870a5dee6e Mon Sep 17 00:00:00 2001
From: Matt Roberts <roberts.mattroberts@gmail.com>
Date: Sat, 4 Jan 2025 10:39:13 +0000
Subject: [PATCH 09/20] More show post UI changes

---
 locale/de/client.json                         |  5 +++
 locale/el/client.json                         |  5 +++
 locale/en/client.json                         |  5 +++
 locale/es-ES/client.json                      |  5 +++
 locale/fr/client.json                         |  5 +++
 locale/it/client.json                         |  5 +++
 locale/nl/client.json                         |  5 +++
 locale/pl/client.json                         |  5 +++
 locale/pt-BR/client.json                      |  5 +++
 locale/ru/client.json                         |  5 +++
 locale/sk/client.json                         |  5 +++
 locale/sv-SE/client.json                      |  5 +++
 locale/tr/client.json                         |  5 +++
 locale/zh-CN/client.json                      |  5 +++
 public/assets/images/heroicons-duplicate.svg  |  3 ++
 public/components/ShowPostResponse.tsx        | 20 ++++-----
 public/components/ShowPostStatus.scss         | 17 +++-----
 public/components/ShowTag.tsx                 | 11 +++++
 public/components/common/Button.scss          |  2 +-
 public/pages/ShowPost/ShowPost.page.tsx       | 43 ++++++++++---------
 .../pages/ShowPost/components/TagsPanel2.tsx  |  7 ++-
 21 files changed, 128 insertions(+), 45 deletions(-)
 create mode 100644 public/assets/images/heroicons-duplicate.svg

diff --git a/locale/de/client.json b/locale/de/client.json
index 224d2b270..5e53ace21 100644
--- a/locale/de/client.json
+++ b/locale/de/client.json
@@ -12,6 +12,8 @@
   "action.save": "Sichern",
   "action.signin": "Anmelden",
   "action.submit": "Absenden",
+  "action.vote": "",
+  "action.voted": "",
   "enum.poststatus.completed": "Erledigt",
   "enum.poststatus.declined": "Abgelehnt",
   "enum.poststatus.deleted": "Gelöscht",
@@ -53,6 +55,7 @@
   "label.description": "Beschreibung",
   "label.discussion": "Diskussion",
   "label.email": "E-Mail",
+  "label.follow": "",
   "label.gravatar": "Gravatar",
   "label.letter": "Buchstabe",
   "label.moderation": "Moderieren",
@@ -62,6 +65,7 @@
   "label.or": "ODER",
   "label.subscribe": "Abonnieren",
   "label.tags": "Tags",
+  "label.unfollow": "",
   "label.unread": "Ungelesen",
   "label.unsubscribe": "Abbestellen",
   "label.voters": "Wähler",
@@ -135,6 +139,7 @@
   "showpost.comment.copylink.success": "Comment link copied to clipboard",
   "showpost.comment.unknownhighlighted": "Invalid comment ID #{id}",
   "showpost.commentinput.placeholder": "Kommentar hinzufügen",
+  "showpost.copylink.success": "",
   "showpost.discussionpanel.emptymessage": "Niemand hat bisher kommentiert.",
   "showpost.label.author": "Gepostet von <0/> · <1/>",
   "showpost.message.nodescription": "Keine Beschreibung angegeben.",
diff --git a/locale/el/client.json b/locale/el/client.json
index 989f1908c..78aa771f5 100644
--- a/locale/el/client.json
+++ b/locale/el/client.json
@@ -12,6 +12,8 @@
   "action.save": "Αποθήκευση",
   "action.signin": "Είσοδος",
   "action.submit": "Υποβολή",
+  "action.vote": "",
+  "action.voted": "",
   "enum.poststatus.completed": "Ολοκληρωμένο",
   "enum.poststatus.declined": "Απορρίφθηκε",
   "enum.poststatus.deleted": "Διαγραμμένο",
@@ -53,6 +55,7 @@
   "label.description": "Περιγραφή",
   "label.discussion": "Συζήτηση",
   "label.email": "Email",
+  "label.follow": "",
   "label.gravatar": "Gravatar",
   "label.letter": "Γράμμα",
   "label.moderation": "Εποπτεία",
@@ -62,6 +65,7 @@
   "label.or": "Ή",
   "label.subscribe": "Εγγραφείτε",
   "label.tags": "Ετικέτες",
+  "label.unfollow": "",
   "label.unread": "Αδιάβαστο",
   "label.unsubscribe": "Απεγγραφή",
   "label.voters": "Ψηφοφόροι",
@@ -135,6 +139,7 @@
   "showpost.comment.copylink.success": "Comment link copied to clipboard",
   "showpost.comment.unknownhighlighted": "Invalid comment ID #{id}",
   "showpost.commentinput.placeholder": "Αφήστε ένα σχόλιο",
+  "showpost.copylink.success": "",
   "showpost.discussionpanel.emptymessage": "Κανείς δεν έχει σχολιάσει ακόμα.",
   "showpost.label.author": "Δημοσιεύτηκε από <0/> · <1/>",
   "showpost.message.nodescription": "Δεν υπάρχει περιγραφή.",
diff --git a/locale/en/client.json b/locale/en/client.json
index 4fd1b1ec6..84d0e73fb 100644
--- a/locale/en/client.json
+++ b/locale/en/client.json
@@ -12,6 +12,8 @@
   "action.save": "Save",
   "action.signin": "Sign in",
   "action.submit": "Submit",
+  "action.vote": "Vote for this idea",
+  "action.voted": "Voted!",
   "enum.poststatus.completed": "Completed",
   "enum.poststatus.declined": "Declined",
   "enum.poststatus.deleted": "Deleted",
@@ -53,6 +55,7 @@
   "label.description": "Description",
   "label.discussion": "Discussion",
   "label.email": "Email",
+  "label.follow": "Follow",
   "label.gravatar": "Gravatar",
   "label.letter": "Letter",
   "label.moderation": "Moderation",
@@ -62,6 +65,7 @@
   "label.or": "OR",
   "label.subscribe": "Subscribe",
   "label.tags": "Tags",
+  "label.unfollow": "Unfollow",
   "label.unread": "Unread",
   "label.unsubscribe": "Unsubscribe",
   "label.voters": "Voters",
@@ -135,6 +139,7 @@
   "showpost.comment.copylink.success": "Comment link copied to clipboard",
   "showpost.comment.unknownhighlighted": "Invalid comment ID #{id}",
   "showpost.commentinput.placeholder": "Leave a comment",
+  "showpost.copylink.success": "Link copied to clipboard",
   "showpost.discussionpanel.emptymessage": "No one has commented yet.",
   "showpost.label.author": "Posted by <0/> · <1/>",
   "showpost.message.nodescription": "No description provided.",
diff --git a/locale/es-ES/client.json b/locale/es-ES/client.json
index 913858665..d7ef35157 100644
--- a/locale/es-ES/client.json
+++ b/locale/es-ES/client.json
@@ -12,6 +12,8 @@
   "action.save": "Guardar",
   "action.signin": "Iniciar sesión",
   "action.submit": "Enviar",
+  "action.vote": "",
+  "action.voted": "",
   "enum.poststatus.completed": "Completado",
   "enum.poststatus.declined": "Rechazado",
   "enum.poststatus.deleted": "Eliminado",
@@ -53,6 +55,7 @@
   "label.description": "Descripción",
   "label.discussion": "Discusión",
   "label.email": "Correo electrónico",
+  "label.follow": "",
   "label.gravatar": "Gravatar",
   "label.letter": "Letras",
   "label.moderation": "Moderación",
@@ -62,6 +65,7 @@
   "label.or": "O",
   "label.subscribe": "Suscribete",
   "label.tags": "Etiquetas",
+  "label.unfollow": "",
   "label.unread": "Sin leer",
   "label.unsubscribe": "Cancelar la suscripción",
   "label.voters": "Votantes",
@@ -135,6 +139,7 @@
   "showpost.comment.copylink.success": "Comment link copied to clipboard",
   "showpost.comment.unknownhighlighted": "Invalid comment ID #{id}",
   "showpost.commentinput.placeholder": "Publica un comentario",
+  "showpost.copylink.success": "",
   "showpost.discussionpanel.emptymessage": "Nadie ha comentado todavía.",
   "showpost.label.author": "Publicado por <0/> · <1/>",
   "showpost.message.nodescription": "No se proporcionó ninguna descripción.",
diff --git a/locale/fr/client.json b/locale/fr/client.json
index 02a0042bf..2c697b28b 100644
--- a/locale/fr/client.json
+++ b/locale/fr/client.json
@@ -12,6 +12,8 @@
   "action.save": "Enregistrer",
   "action.signin": "Se connecter",
   "action.submit": "Valider",
+  "action.vote": "",
+  "action.voted": "",
   "enum.poststatus.completed": "Terminé",
   "enum.poststatus.declined": "Refusé",
   "enum.poststatus.deleted": "Supprimé",
@@ -53,6 +55,7 @@
   "label.description": "Description",
   "label.discussion": "Discussion",
   "label.email": "E-mail",
+  "label.follow": "",
   "label.gravatar": "Gravatar",
   "label.letter": "Lettre",
   "label.moderation": "Modération",
@@ -62,6 +65,7 @@
   "label.or": "OU",
   "label.subscribe": "S'abonner",
   "label.tags": "Tags",
+  "label.unfollow": "",
   "label.unread": "Non lu",
   "label.unsubscribe": "Se désabonner",
   "label.voters": "Votants",
@@ -135,6 +139,7 @@
   "showpost.comment.copylink.success": "Comment link copied to clipboard",
   "showpost.comment.unknownhighlighted": "Invalid comment ID #{id}",
   "showpost.commentinput.placeholder": "Rédiger un commentaire",
+  "showpost.copylink.success": "",
   "showpost.discussionpanel.emptymessage": "Personne n'a encore commenté.",
   "showpost.label.author": "Posté par <0/> · <1/>",
   "showpost.message.nodescription": "Aucune description fournie.",
diff --git a/locale/it/client.json b/locale/it/client.json
index 6cdc00e80..0714e6b60 100644
--- a/locale/it/client.json
+++ b/locale/it/client.json
@@ -12,6 +12,8 @@
   "action.save": "Salva",
   "action.signin": "Accedi",
   "action.submit": "Invia",
+  "action.vote": "",
+  "action.voted": "",
   "enum.poststatus.completed": "Completato",
   "enum.poststatus.declined": "Rifiutato",
   "enum.poststatus.deleted": "Eliminato",
@@ -53,6 +55,7 @@
   "label.description": "Descrizione",
   "label.discussion": "Discussione",
   "label.email": "Email",
+  "label.follow": "",
   "label.gravatar": "Gravatar",
   "label.letter": "Lettera",
   "label.moderation": "Moderazione",
@@ -62,6 +65,7 @@
   "label.or": "OPPURE",
   "label.subscribe": "Abbonati",
   "label.tags": "Tags",
+  "label.unfollow": "",
   "label.unread": "Non letto",
   "label.unsubscribe": "Disiscriversi",
   "label.voters": "Votanti",
@@ -135,6 +139,7 @@
   "showpost.comment.copylink.success": "Comment link copied to clipboard",
   "showpost.comment.unknownhighlighted": "Invalid comment ID #{id}",
   "showpost.commentinput.placeholder": "Lascia un commento",
+  "showpost.copylink.success": "",
   "showpost.discussionpanel.emptymessage": "Nessuno ha ancora commentato.",
   "showpost.label.author": "Scritto da <0/>·<1/>",
   "showpost.message.nodescription": "Nessuna descrizione fornita.",
diff --git a/locale/nl/client.json b/locale/nl/client.json
index 4bf20bb08..77827a9dc 100644
--- a/locale/nl/client.json
+++ b/locale/nl/client.json
@@ -12,6 +12,8 @@
   "action.save": "Opslaan",
   "action.signin": "Inloggen",
   "action.submit": "Verzenden",
+  "action.vote": "",
+  "action.voted": "",
   "enum.poststatus.completed": "Voltooid",
   "enum.poststatus.declined": "Afgewezen",
   "enum.poststatus.deleted": "Verwijderd",
@@ -53,6 +55,7 @@
   "label.description": "Omschrijving",
   "label.discussion": "Discussie",
   "label.email": "E-mailadres",
+  "label.follow": "",
   "label.gravatar": "Gravatar",
   "label.letter": "Initialen",
   "label.moderation": "Moderatie",
@@ -62,6 +65,7 @@
   "label.or": "OF",
   "label.subscribe": "Abonneren",
   "label.tags": "Labels",
+  "label.unfollow": "",
   "label.unread": "Ongelezen",
   "label.unsubscribe": "Uitschrijven",
   "label.voters": "Stemmers",
@@ -135,6 +139,7 @@
   "showpost.comment.copylink.success": "Comment link copied to clipboard",
   "showpost.comment.unknownhighlighted": "Invalid comment ID #{id}",
   "showpost.commentinput.placeholder": "Laat een reactie achter",
+  "showpost.copylink.success": "",
   "showpost.discussionpanel.emptymessage": "Nog niemand heeft gereageerd.",
   "showpost.label.author": "Geplaatst door <0/> · <1/>",
   "showpost.message.nodescription": "Geen omschrijving opgegeven.",
diff --git a/locale/pl/client.json b/locale/pl/client.json
index 95f4bc633..22a91174c 100644
--- a/locale/pl/client.json
+++ b/locale/pl/client.json
@@ -12,6 +12,8 @@
   "action.save": "Zapisz",
   "action.signin": "Zaloguj się",
   "action.submit": "Prześlij",
+  "action.vote": "",
+  "action.voted": "",
   "enum.poststatus.completed": "Ukończone",
   "enum.poststatus.declined": "Odrzucone",
   "enum.poststatus.deleted": "Usunięte",
@@ -53,6 +55,7 @@
   "label.description": "Opis",
   "label.discussion": "Dyskusja",
   "label.email": "Email",
+  "label.follow": "",
   "label.gravatar": "Gravatar",
   "label.letter": "Litera",
   "label.moderation": "Moderacja",
@@ -62,6 +65,7 @@
   "label.or": "LUB",
   "label.subscribe": "Subskrybuj",
   "label.tags": "Tagi",
+  "label.unfollow": "",
   "label.unread": "Nieprzeczytane",
   "label.unsubscribe": "Zrezygnuj z subskrypcji",
   "label.voters": "Głosujący",
@@ -135,6 +139,7 @@
   "showpost.comment.copylink.success": "Comment link copied to clipboard",
   "showpost.comment.unknownhighlighted": "Invalid comment ID #{id}",
   "showpost.commentinput.placeholder": "Skomentuj",
+  "showpost.copylink.success": "",
   "showpost.discussionpanel.emptymessage": "Wygląda na to, że nikt jeszcze nie skomentował.",
   "showpost.label.author": "Wysłane przez <0/> · <1/>",
   "showpost.message.nodescription": "Brak opisu.",
diff --git a/locale/pt-BR/client.json b/locale/pt-BR/client.json
index 440941a39..55ea8ce5f 100644
--- a/locale/pt-BR/client.json
+++ b/locale/pt-BR/client.json
@@ -12,6 +12,8 @@
   "action.save": "Salvar",
   "action.signin": "Iniciar sessão",
   "action.submit": "Enviar",
+  "action.vote": "",
+  "action.voted": "",
   "enum.poststatus.completed": "Completado",
   "enum.poststatus.declined": "Rejeitado",
   "enum.poststatus.deleted": "Removido",
@@ -53,6 +55,7 @@
   "label.description": "Descrição",
   "label.discussion": "Discussão",
   "label.email": "E-mail",
+  "label.follow": "",
   "label.gravatar": "Gravatar",
   "label.letter": "Letra",
   "label.moderation": "Moderação",
@@ -62,6 +65,7 @@
   "label.or": "OU",
   "label.subscribe": "Inscrever-se",
   "label.tags": "Tags",
+  "label.unfollow": "",
   "label.unread": "Não lidas",
   "label.unsubscribe": "Desinscrever-se",
   "label.voters": "Votantes",
@@ -135,6 +139,7 @@
   "showpost.comment.copylink.success": "Comment link copied to clipboard",
   "showpost.comment.unknownhighlighted": "Invalid comment ID #{id}",
   "showpost.commentinput.placeholder": "Deixe um comentário",
+  "showpost.copylink.success": "",
   "showpost.discussionpanel.emptymessage": "Ninguém comentou ainda.",
   "showpost.label.author": "Publicado por <0/> · <1/>",
   "showpost.message.nodescription": "Nenhuma descrição fornecida.",
diff --git a/locale/ru/client.json b/locale/ru/client.json
index b13fb1882..dd94ed2ed 100644
--- a/locale/ru/client.json
+++ b/locale/ru/client.json
@@ -12,6 +12,8 @@
   "action.save": "Сохранить",
   "action.signin": "Войти",
   "action.submit": "Продолжить",
+  "action.vote": "",
+  "action.voted": "",
   "enum.poststatus.completed": "Выполнено",
   "enum.poststatus.declined": "Отклонено",
   "enum.poststatus.deleted": "Удалено",
@@ -53,6 +55,7 @@
   "label.description": "Описание",
   "label.discussion": "Обсуждение",
   "label.email": "Адрес электронной почты",
+  "label.follow": "",
   "label.gravatar": "Gravatar",
   "label.letter": "Буквенный",
   "label.moderation": "Модерация",
@@ -62,6 +65,7 @@
   "label.or": "ИЛИ",
   "label.subscribe": "Подписаться",
   "label.tags": "Теги",
+  "label.unfollow": "",
   "label.unread": "Непрочитанные",
   "label.unsubscribe": "Отписаться",
   "label.voters": "Проголосовавшие",
@@ -135,6 +139,7 @@
   "showpost.comment.copylink.success": "Ссылка на комментарий скопирована в буфер",
   "showpost.comment.unknownhighlighted": "Некорректный ID комментария #{id}",
   "showpost.commentinput.placeholder": "Оставить комментарий",
+  "showpost.copylink.success": "",
   "showpost.discussionpanel.emptymessage": "Комментариев нет.",
   "showpost.label.author": "Создал <0/> · <1/>",
   "showpost.message.nodescription": "Описания нет.",
diff --git a/locale/sk/client.json b/locale/sk/client.json
index 5224b9fb8..b9d59d137 100644
--- a/locale/sk/client.json
+++ b/locale/sk/client.json
@@ -12,6 +12,8 @@
   "action.save": "Uložiť",
   "action.signin": "Prihlásiť sa",
   "action.submit": "Potvrdiť",
+  "action.vote": "",
+  "action.voted": "",
   "enum.poststatus.completed": "Dokončené",
   "enum.poststatus.declined": "Odmietnuté",
   "enum.poststatus.deleted": "Vymazané",
@@ -53,6 +55,7 @@
   "label.description": "Popis",
   "label.discussion": "Diskusia",
   "label.email": "Email",
+  "label.follow": "",
   "label.gravatar": "Gravatar",
   "label.letter": "Písmeno",
   "label.moderation": "Správca",
@@ -62,6 +65,7 @@
   "label.or": "ALEBO",
   "label.subscribe": "Prihlásiť sa k odberu",
   "label.tags": "Značky",
+  "label.unfollow": "",
   "label.unread": "Neprečítané",
   "label.unsubscribe": "Zrušiť odber",
   "label.voters": "Hlasujúci",
@@ -135,6 +139,7 @@
   "showpost.comment.copylink.success": "Comment link copied to clipboard",
   "showpost.comment.unknownhighlighted": "Invalid comment ID #{id}",
   "showpost.commentinput.placeholder": "Zanechať komentár",
+  "showpost.copylink.success": "",
   "showpost.discussionpanel.emptymessage": "Zatiaľ sa nikto nevyjadril.",
   "showpost.label.author": "Pridané <0/> · <1/>",
   "showpost.message.nodescription": "Nie je poskytnutý žiadny popis.",
diff --git a/locale/sv-SE/client.json b/locale/sv-SE/client.json
index a8ecfb7c9..fa2de6203 100644
--- a/locale/sv-SE/client.json
+++ b/locale/sv-SE/client.json
@@ -12,6 +12,8 @@
   "action.save": "Spara",
   "action.signin": "Logga in",
   "action.submit": "Skicka",
+  "action.vote": "",
+  "action.voted": "",
   "enum.poststatus.completed": "Avslutad",
   "enum.poststatus.declined": "Nekad",
   "enum.poststatus.deleted": "Borttagen",
@@ -53,6 +55,7 @@
   "label.description": "Beskrivning",
   "label.discussion": "Diskussion",
   "label.email": "E-post",
+  "label.follow": "",
   "label.gravatar": "Gravatar",
   "label.letter": "Bokstav",
   "label.moderation": "Moderering",
@@ -62,6 +65,7 @@
   "label.or": "ELLER",
   "label.subscribe": "Prenumerera",
   "label.tags": "Etiketter",
+  "label.unfollow": "",
   "label.unread": "Olästa",
   "label.unsubscribe": "Avsluta prenumeration",
   "label.voters": "Röstande",
@@ -135,6 +139,7 @@
   "showpost.comment.copylink.success": "Comment link copied to clipboard",
   "showpost.comment.unknownhighlighted": "Invalid comment ID #{id}",
   "showpost.commentinput.placeholder": "Skriv en kommentar",
+  "showpost.copylink.success": "",
   "showpost.discussionpanel.emptymessage": "Ingen har kommenterat ännu.",
   "showpost.label.author": "Skriven av <0/> · <1/>",
   "showpost.message.nodescription": "Ingen beskrivning angiven.",
diff --git a/locale/tr/client.json b/locale/tr/client.json
index bc7a3904f..6c1ff5507 100644
--- a/locale/tr/client.json
+++ b/locale/tr/client.json
@@ -12,6 +12,8 @@
   "action.save": "Kaydet",
   "action.signin": "Giriş Yap",
   "action.submit": "Gönder",
+  "action.vote": "",
+  "action.voted": "",
   "enum.poststatus.completed": "Tamamlandı",
   "enum.poststatus.declined": "Reddedildi",
   "enum.poststatus.deleted": "Silindi",
@@ -53,6 +55,7 @@
   "label.description": "Açıklama",
   "label.discussion": "Tartışma",
   "label.email": "E-Posta",
+  "label.follow": "",
   "label.gravatar": "Gravatar",
   "label.letter": "Harf",
   "label.moderation": "Moderasyon",
@@ -62,6 +65,7 @@
   "label.or": "VEYA",
   "label.subscribe": "Abone ol",
   "label.tags": "Etiketler",
+  "label.unfollow": "",
   "label.unread": "Okunmamış",
   "label.unsubscribe": "Abonelikten çık",
   "label.voters": "Oy verenler",
@@ -135,6 +139,7 @@
   "showpost.comment.copylink.success": "Comment link copied to clipboard",
   "showpost.comment.unknownhighlighted": "Invalid comment ID #{id}",
   "showpost.commentinput.placeholder": "Yorum yazın",
+  "showpost.copylink.success": "",
   "showpost.discussionpanel.emptymessage": "Henüz hiç kimse yorum yapmadı.",
   "showpost.label.author": "<0/> · <1/> tarafından gönderildi",
   "showpost.message.nodescription": "Herhangi bir açıklama belirtilmedi.",
diff --git a/locale/zh-CN/client.json b/locale/zh-CN/client.json
index 951d84ac9..5f1294875 100644
--- a/locale/zh-CN/client.json
+++ b/locale/zh-CN/client.json
@@ -12,6 +12,8 @@
   "action.save": "保存",
   "action.signin": "登录",
   "action.submit": "提交",
+  "action.vote": "",
+  "action.voted": "",
   "enum.poststatus.completed": "完成",
   "enum.poststatus.declined": "拒绝",
   "enum.poststatus.deleted": "删除",
@@ -53,6 +55,7 @@
   "label.description": "说明",
   "label.discussion": "讨论",
   "label.email": "邮箱",
+  "label.follow": "",
   "label.gravatar": "Gravatar",
   "label.letter": "稍后",
   "label.moderation": "管理",
@@ -62,6 +65,7 @@
   "label.or": "或者",
   "label.subscribe": "订阅",
   "label.tags": "标签",
+  "label.unfollow": "",
   "label.unread": "未读",
   "label.unsubscribe": "取消订阅",
   "label.voters": "投票者",
@@ -135,6 +139,7 @@
   "showpost.comment.copylink.success": "评论链接已复制到剪贴板",
   "showpost.comment.unknownhighlighted": "无效的评论ID #{id}",
   "showpost.commentinput.placeholder": "发表评论",
+  "showpost.copylink.success": "",
   "showpost.discussionpanel.emptymessage": "还没有人发表评论.",
   "showpost.label.author": "发表者 <0/> · <1/>",
   "showpost.message.nodescription": "未提供描述.",
diff --git a/public/assets/images/heroicons-duplicate.svg b/public/assets/images/heroicons-duplicate.svg
new file mode 100644
index 000000000..bf48f9fec
--- /dev/null
+++ b/public/assets/images/heroicons-duplicate.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75" />
+</svg>
diff --git a/public/components/ShowPostResponse.tsx b/public/components/ShowPostResponse.tsx
index 8769d04cc..50db95462 100644
--- a/public/components/ShowPostResponse.tsx
+++ b/public/components/ShowPostResponse.tsx
@@ -1,6 +1,7 @@
 import React from "react"
 import { PostResponse, PostStatus } from "@fider/models"
-import { Markdown, UserName, ShowPostStatus } from "@fider/components"
+import { Icon, Markdown } from "@fider/components"
+import HeroIconDuplicate from "@fider/assets/images/heroicons-duplicate.svg"
 import { HStack } from "./layout"
 
 const DuplicateDetails = (props: PostResponseProps): JSX.Element | null => {
@@ -14,12 +15,12 @@ const DuplicateDetails = (props: PostResponseProps): JSX.Element | null => {
   }
 
   return (
-    <div className="content">
-      <span>&#8618;</span>{" "}
+    <HStack>
+      <Icon sprite={HeroIconDuplicate} className="h-6 text-gray-500" />
       <a className="text-link" href={`/posts/${original.number}/${original.slug}`}>
         {original.title}
       </a>
-    </div>
+    </HStack>
   )
 }
 
@@ -45,14 +46,9 @@ export const ShowPostResponse = (props: PostResponseProps): JSX.Element | null =
 
   if (props.response && (status.show || props.response.text)) {
     return (
-      <div className="p-2 shadow rounded">
-        <HStack>
-          {status.show && <ShowPostStatus status={status} />}
-          <span className="text-xs">
-            &middot; <UserName user={props.response.user} />
-          </span>
-        </HStack>
-        {status === PostStatus.Duplicate ? DuplicateDetails(props) : StatusDetails(props)}
+      <div>
+        {status.show && <div className={`p-2 text-white text-center text-semibold c-status-bg--${status.value}`}>{status.title}</div>}
+        <div className="pt-2">{status === PostStatus.Duplicate ? DuplicateDetails(props) : StatusDetails(props)}</div>
       </div>
     )
   }
diff --git a/public/components/ShowPostStatus.scss b/public/components/ShowPostStatus.scss
index 8702d7022..7f82d9e3e 100644
--- a/public/components/ShowPostStatus.scss
+++ b/public/components/ShowPostStatus.scss
@@ -1,31 +1,28 @@
 @import "~@fider/assets/styles/variables.scss";
 
-.c-status-label {
-  text-transform: uppercase;
-  font-weight: 600;
-  font-size: 11px;
+.c-status-bg {
 
   &--open {
-    color: get("colors.gray.900");
+    background-color: get("colors.gray.900");
   }
 
   &--planned {
-    color: #6435c9;
+    background-color: #6435c9;
   }
 
   &--started {
-    color: #2185d0;
+    background-color: #2185d0;
   }
 
   &--completed {
-    color: #21ba45;
+    background-color: #21ba45;
   }
 
   &--declined {
-    color: #db2828;
+    background-color: #db2828;
   }
 
   &--duplicate {
-    color: #d6a100;
+    background-color: #d6a100;
   }
 }
diff --git a/public/components/ShowTag.tsx b/public/components/ShowTag.tsx
index aa0ea2f9b..b3b87114c 100644
--- a/public/components/ShowTag.tsx
+++ b/public/components/ShowTag.tsx
@@ -34,6 +34,16 @@ export const ShowTag = (props: TagProps) => {
     "c-tag--circular": props.circular === true,
   })
 
+  const darkenColor = (color: string) => {
+    const components = getRGB(color)
+    const darkerR = Math.floor(components.R * 0.8)
+    const darkerG = Math.floor(components.G * 0.8)
+    const darkerB = Math.floor(components.B * 0.8)
+    return `${darkerR.toString(16).padStart(2, "0")}${darkerG.toString(16).padStart(2, "0")}${darkerB.toString(16).padStart(2, "0")}`
+  }
+
+  const darkerColor = darkenColor(props.tag.color)
+
   return (
     <a
       href={props.link && props.tag.slug ? `/?tags=${props.tag.slug}` : undefined}
@@ -41,6 +51,7 @@ export const ShowTag = (props: TagProps) => {
       className={className}
       style={{
         backgroundColor: `#${props.tag.color}`,
+        border: `1px solid #${darkerColor}`,
         color: textColor(props.tag.color),
       }}
     >
diff --git a/public/components/common/Button.scss b/public/components/common/Button.scss
index f8d5ba528..58f8b99ee 100644
--- a/public/components/common/Button.scss
+++ b/public/components/common/Button.scss
@@ -31,7 +31,7 @@
   }
 
   &--quaternary {
-    color: get("colors.gray.900");
+    // color: get("colors.gray.900");
     background-color: transparent;
     border: 1px solid get("colors.primary.base");
   
diff --git a/public/pages/ShowPost/ShowPost.page.tsx b/public/pages/ShowPost/ShowPost.page.tsx
index 91b2984c2..350b1f216 100644
--- a/public/pages/ShowPost/ShowPost.page.tsx
+++ b/public/pages/ShowPost/ShowPost.page.tsx
@@ -246,7 +246,6 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
                       <NotificationsPanel2 post={this.props.post} subscribed={this.props.subscribed} />
                     </HStack>
                   )}
-                  <ShowPostResponse status={this.props.post.status} response={this.props.post.response} />
                   <VStack>
                     {this.state.editMode ? (
                       <Form error={this.state.error}>
@@ -267,27 +266,29 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
                       </>
                     )}
                   </VStack>
+                  <ShowPostResponse status={this.props.post.status} response={this.props.post.response} />
 
-                  {!this.state.editMode ? (
-                    <VoteSection post={this.props.post} votes={this.props.votes} />
-                  ) : (
-                    <HStack>
-                      <Button variant="primary" onClick={this.saveChanges} disabled={Fider.isReadOnly}>
-                        <Icon sprite={IconThumbsUp} />{" "}
-                        <span>
-                          <Trans id="action.save">Save</Trans>
-                        </span>
-                      </Button>
-                      <Button onClick={this.cancelEdit} disabled={Fider.isReadOnly}>
-                        <Icon sprite={IconX} />
-                        <span>
-                          <Trans id="action.cancel">Cancel</Trans>
-                        </span>
-                      </Button>
-                    </HStack>
-                  )}
-
-                  <div className="purple-border" />
+                  <VStack spacing={4}>
+                    {!this.state.editMode ? (
+                      <VoteSection post={this.props.post} votes={this.props.votes} />
+                    ) : (
+                      <HStack>
+                        <Button variant="primary" onClick={this.saveChanges} disabled={Fider.isReadOnly}>
+                          <Icon sprite={IconThumbsUp} />{" "}
+                          <span>
+                            <Trans id="action.save">Save</Trans>
+                          </span>
+                        </Button>
+                        <Button onClick={this.cancelEdit} disabled={Fider.isReadOnly}>
+                          <Icon sprite={IconX} />
+                          <span>
+                            <Trans id="action.cancel">Cancel</Trans>
+                          </span>
+                        </Button>
+                      </HStack>
+                    )}
+                    <div className="purple-border" />
+                  </VStack>
                 </VStack>
               </div>
 
diff --git a/public/pages/ShowPost/components/TagsPanel2.tsx b/public/pages/ShowPost/components/TagsPanel2.tsx
index e85f7e031..89266cb56 100644
--- a/public/pages/ShowPost/components/TagsPanel2.tsx
+++ b/public/pages/ShowPost/components/TagsPanel2.tsx
@@ -52,7 +52,12 @@ export const TagsPanel2 = (props: TagsPanelProps) => {
       {assignedTags.length > 0 && assignedTags.map((tag) => <ShowTag key={tag.id} tag={tag} link />)}
       <HStack spacing={1} center={true} className="clickable" onClick={onSubtitleClick}>
         <Icon sprite={IconPlusCircle} className="h-5 text-primary" />
-        <span>Edit Tags</span>
+
+        {assignedTags.length === 0 && (
+          <span>
+            <Trans id="label.tags">Tags</Trans>
+          </span>
+        )}
       </HStack>
     </HStack>
   )

From 0b1d334b7b1ee1d6cda82fbace81afa2d37e9ab0 Mon Sep 17 00:00:00 2001
From: Matt Roberts <roberts.mattroberts@gmail.com>
Date: Sat, 4 Jan 2025 10:39:26 +0000
Subject: [PATCH 10/20] Slightly experimental colour palette changes

---
 public/assets/styles/reset.scss             |  2 +-
 public/assets/styles/utility/text.scss      |  5 +++
 public/assets/styles/variables/_colors.scss | 45 +++++++++++----------
 3 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/public/assets/styles/reset.scss b/public/assets/styles/reset.scss
index 9d3b9cb2e..db635a59a 100644
--- a/public/assets/styles/reset.scss
+++ b/public/assets/styles/reset.scss
@@ -15,7 +15,7 @@ body {
   padding: 0px;
   overflow-x: hidden;
   min-width: 320px;
-  color: get("colors.gray.900");
+  color: get("colors.gray.700");
   background-color: get("colors.gray.100");
   font-size: get("font.size.base");
   font-family: $font-base;
diff --git a/public/assets/styles/utility/text.scss b/public/assets/styles/utility/text.scss
index bd92062a4..4d5527a70 100644
--- a/public/assets/styles/utility/text.scss
+++ b/public/assets/styles/utility/text.scss
@@ -11,6 +11,7 @@ pre:last-child {
 
 .text-large {
   font-size: get("font.size.2xl");
+  color: get("colors.gray.900");
   font-weight: get("font.weight.bold");
   letter-spacing: -1px;
 }
@@ -28,21 +29,25 @@ pre:last-child {
 
 .text-header {
   font-size: get("font.size.xl");
+  color: get("colors.gray.900");
   font-weight: get("font.weight.medium");
 }
 
 .text-title {
   font-size: get("font.size.lg");
+  color: get("colors.gray.900");
   font-weight: get("font.weight.medium");
 }
 
 .text-subtitle {
   font-size: get("font.size.base");
+  color: get("colors.gray.900");
   font-weight: get("font.weight.medium");
 }
 
 .text-body {
   font-size: get("font.size.base");
+  color: get("colors.gray.700");
 }
 
 .text-sm {
diff --git a/public/assets/styles/variables/_colors.scss b/public/assets/styles/variables/_colors.scss
index b4c62be86..3bb92364f 100644
--- a/public/assets/styles/variables/_colors.scss
+++ b/public/assets/styles/variables/_colors.scss
@@ -1,14 +1,14 @@
 $colors: (
   "gray": (
-    "900": #111827,
-    "800": #1f2937,
-    "700": #374151,
-    "600": #4b5563,
-    "500": #6b7280,
-    "400": #9ca3af,
-    "300": #d1d5db,
-    "200": #e5e7eb,
-    "100": #f3f4f6,
+    "100": #FCFAFA,
+    "200": #EEEBEB,
+    "300": #E0DCDD,
+    "400": #D2CDCF,
+    "500": #C4BEC0,
+    "600": #9D9598,
+    "700": #756E71,
+    "800": #4E474B,
+    "900": #262225,
     "50": #f9fafb,
   ),
   "green": (
@@ -20,6 +20,7 @@ $colors: (
     "400": #4ade80,
     "300": #86efac,
     "200": #bbf7d0,
+
     "100": #dcfce7,
     "50": #f0fdf4,
   ),
@@ -36,15 +37,15 @@ $colors: (
     "50": #fffbeb,
   ),
   "blue": (
-    "900": #0c4a6e,
-    "800": #075985,
-    "700": #0369a1,
-    "600": #0284c7,
-    "500": #0ea5e9,
-    "400": #38bdf8,
-    "300": #7dd3fc,
-    "200": #bae6fd,
-    "100": #e0f2fe,
+    "100": #F2F2FF,
+    "200": #C2C4FF,
+    "300": #909BFD,
+    "400": #5E76F7,
+    "500": #2D57ED,
+    "600": #0F3EBB,
+    "700": #03308A,
+    "800": #002358,
+    "900": #001126,
     "50": #f0f9ff,
   ),
   "red": (
@@ -60,9 +61,9 @@ $colors: (
     "50": #fef2f2,
   ),
   "primary": (
-    "light": var(--primary-color-light, #818cf8),
-    "base": var(--primary-color, #4f46e5),
-    "dark": var(--primary-color-dark, #3730a3),
+    "light": var(--primary-color-light, #C2C4FF),
+    "base": var(--primary-color, #2D57ED),
+    "dark": var(--primary-color-dark, #03308A),
   ),
   "white": #fff,
-);
+);
\ No newline at end of file

From 5bb0f8ebd6517bb8afe0425e8ba51735358fd8ee Mon Sep 17 00:00:00 2001
From: Matt Roberts <roberts.mattroberts@gmail.com>
Date: Mon, 13 Jan 2025 13:25:15 +0000
Subject: [PATCH 11/20] More UI work on the show post page.

---
 locale/de/client.json                         |   1 +
 locale/el/client.json                         |   1 +
 locale/en/client.json                         |   1 +
 locale/es-ES/client.json                      |   1 +
 locale/fr/client.json                         |   1 +
 locale/it/client.json                         |   1 +
 locale/nl/client.json                         |   1 +
 locale/pl/client.json                         |   1 +
 locale/pt-BR/client.json                      |   1 +
 locale/ru/client.json                         |   1 +
 locale/sk/client.json                         |   1 +
 locale/sv-SE/client.json                      |   1 +
 locale/tr/client.json                         |   1 +
 locale/zh-CN/client.json                      |   1 +
 public/assets/images/heroicons-inbox.svg      |   3 +
 public/assets/images/heroicons-smile.svg      |   3 +
 public/assets/images/heroicons-star.svg       |   3 +
 public/assets/images/heroicons-thumbsdown.svg |   3 +
 public/assets/styles/utility/display.scss     |  10 +-
 public/assets/styles/utility/text.scss        |   4 +
 public/assets/styles/variables/_colors.scss   |  41 +++----
 public/components/ShowPostResponse.tsx        | 106 ++++++++++++------
 public/components/ShowPostStatus.scss         |  14 +--
 public/pages/Home/components/ListPosts.tsx    |   4 +-
 public/pages/ShowPost/ShowPost.page.tsx       |  69 ++++++------
 .../pages/ShowPost/components/PostStatus.tsx  |   0
 .../pages/ShowPost/components/VoteSection.tsx |  12 +-
 public/services/utils.ts                      |   5 +-
 28 files changed, 184 insertions(+), 107 deletions(-)
 create mode 100644 public/assets/images/heroicons-inbox.svg
 create mode 100644 public/assets/images/heroicons-smile.svg
 create mode 100644 public/assets/images/heroicons-star.svg
 create mode 100644 public/assets/images/heroicons-thumbsdown.svg
 create mode 100644 public/pages/ShowPost/components/PostStatus.tsx

diff --git a/locale/de/client.json b/locale/de/client.json
index 5e53ace21..df8ef8689 100644
--- a/locale/de/client.json
+++ b/locale/de/client.json
@@ -149,6 +149,7 @@
   "showpost.notificationspanel.message.unsubscribed": "Sie erhalten keine Benachrichtigungen über diesen Beitrag.",
   "showpost.postsearch.numofvotes": "{0} Stimmen",
   "showpost.postsearch.query.placeholder": "Originalbeitrag suchen...",
+  "showpost.response.date": "",
   "showpost.responseform.message.mergedvotes": "Stimmen aus diesem Beitrag werden mit den Stimmen vom ursprünglichen Beitrag zusammengeführt.",
   "showpost.responseform.text.placeholder": "Was passiert in diesem Beitrag? Lassen Sie Ihre Benutzer wissen, was Ihre Pläne sind...",
   "showpost.votespanel.more": "+{extraVotesCount} mehr",
diff --git a/locale/el/client.json b/locale/el/client.json
index 78aa771f5..86e6dff4d 100644
--- a/locale/el/client.json
+++ b/locale/el/client.json
@@ -149,6 +149,7 @@
   "showpost.notificationspanel.message.unsubscribed": "Δεν θα λάβετε καμία ειδοποίηση σχετικά με αυτή τη δημοσίευση.",
   "showpost.postsearch.numofvotes": "{0} Ψήφοι",
   "showpost.postsearch.query.placeholder": "Αναζήτηση αρχικής ανάρτησης...",
+  "showpost.response.date": "",
   "showpost.responseform.message.mergedvotes": "Οι ψήφοι από αυτό το post θα συγχωνευτούν στο αρχικό post.",
   "showpost.responseform.text.placeholder": "Τι συμβαίνει με αυτή την ανάρτηση; Αφήστε τους χρήστες σας να γνωρίζουν ποια είναι τα σχέδιά σας...",
   "showpost.votespanel.more": "+{extraVotesCount} περισσότερα",
diff --git a/locale/en/client.json b/locale/en/client.json
index 84d0e73fb..14407e41e 100644
--- a/locale/en/client.json
+++ b/locale/en/client.json
@@ -149,6 +149,7 @@
   "showpost.notificationspanel.message.unsubscribed": "You'll not receive any notification about this post.",
   "showpost.postsearch.numofvotes": "{0} votes",
   "showpost.postsearch.query.placeholder": "Search original post...",
+  "showpost.response.date": "Status changed to {status} on {statusDate}",
   "showpost.responseform.message.mergedvotes": "Votes from this post will be merged into original post.",
   "showpost.responseform.text.placeholder": "What's going on with this post? Let your users know what are your plans...",
   "showpost.votespanel.more": "+{extraVotesCount} more",
diff --git a/locale/es-ES/client.json b/locale/es-ES/client.json
index d7ef35157..5c44f7980 100644
--- a/locale/es-ES/client.json
+++ b/locale/es-ES/client.json
@@ -149,6 +149,7 @@
   "showpost.notificationspanel.message.unsubscribed": "No recibirás ninguna notificación sobre este evento.",
   "showpost.postsearch.numofvotes": "{0} votos",
   "showpost.postsearch.query.placeholder": "Buscar publicación original...",
+  "showpost.response.date": "",
   "showpost.responseform.message.mergedvotes": "Los votos de esta publicación se fusionarán en la publicación original.",
   "showpost.responseform.text.placeholder": "¿Qué está pasando con esta publicación? Dile a tus usuarios cuáles son tus planes...",
   "showpost.votespanel.more": "+{extraVotesCount} más",
diff --git a/locale/fr/client.json b/locale/fr/client.json
index 2c697b28b..47865e649 100644
--- a/locale/fr/client.json
+++ b/locale/fr/client.json
@@ -149,6 +149,7 @@
   "showpost.notificationspanel.message.unsubscribed": "Vous ne recevrez aucune notification à propos de ce message.",
   "showpost.postsearch.numofvotes": "{0} votes",
   "showpost.postsearch.query.placeholder": "Rechercher le message original...",
+  "showpost.response.date": "",
   "showpost.responseform.message.mergedvotes": "Les votes de ce message seront fusionnés dans le message original.",
   "showpost.responseform.text.placeholder": "Que se passe-t-il avec ce message ? Faites savoir à vos utilisateurs quels sont vos plans...",
   "showpost.votespanel.more": "+{extraVotesCount} de plus",
diff --git a/locale/it/client.json b/locale/it/client.json
index 0714e6b60..3f1f87b31 100644
--- a/locale/it/client.json
+++ b/locale/it/client.json
@@ -149,6 +149,7 @@
   "showpost.notificationspanel.message.unsubscribed": "Non riceverai alcuna notifica su questo post.",
   "showpost.postsearch.numofvotes": "{0} votes",
   "showpost.postsearch.query.placeholder": "Cerca post originale...",
+  "showpost.response.date": "",
   "showpost.responseform.message.mergedvotes": "I voti di questo post saranno uniti al post originale.",
   "showpost.responseform.text.placeholder": "Cosa succede con questo post? Fate sapere ai vostri utenti quali sono i vostri piani...",
   "showpost.votespanel.more": "+{extraVotesCount} di più",
diff --git a/locale/nl/client.json b/locale/nl/client.json
index 77827a9dc..7bfeb774a 100644
--- a/locale/nl/client.json
+++ b/locale/nl/client.json
@@ -149,6 +149,7 @@
   "showpost.notificationspanel.message.unsubscribed": "Je ontvangt geen meldingen over dit bericht.",
   "showpost.postsearch.numofvotes": "{0} stemmen",
   "showpost.postsearch.query.placeholder": "Zoek origineel bericht...",
+  "showpost.response.date": "",
   "showpost.responseform.message.mergedvotes": "Stemmen van dit bericht zullen worden samengevoegd met het originele bericht.",
   "showpost.responseform.text.placeholder": "Wat gebeurt er met dit bericht? Laat je gebruikers weten wat je plannen zijn...",
   "showpost.votespanel.more": "+{extraVotesCount} meer",
diff --git a/locale/pl/client.json b/locale/pl/client.json
index 22a91174c..70ab186c2 100644
--- a/locale/pl/client.json
+++ b/locale/pl/client.json
@@ -149,6 +149,7 @@
   "showpost.notificationspanel.message.unsubscribed": "Nie będziesz otrzymywał żadnych powiadomień o o tym poście.",
   "showpost.postsearch.numofvotes": "{0} głosów",
   "showpost.postsearch.query.placeholder": "Szukaj oryginalnego posta...",
+  "showpost.response.date": "",
   "showpost.responseform.message.mergedvotes": "Głosy z tego posta zostaną scalone z oryginalnym postem.",
   "showpost.responseform.text.placeholder": "Co się dzieje w temacie tego posta? Daj swoim użytkownikom znać o swoich planach...",
   "showpost.votespanel.more": "+{extraVotesCount} więcej",
diff --git a/locale/pt-BR/client.json b/locale/pt-BR/client.json
index 55ea8ce5f..fe94e2e91 100644
--- a/locale/pt-BR/client.json
+++ b/locale/pt-BR/client.json
@@ -149,6 +149,7 @@
   "showpost.notificationspanel.message.unsubscribed": "Você não receberá nenhuma notificação sobre esta postagem.",
   "showpost.postsearch.numofvotes": "{0} votos",
   "showpost.postsearch.query.placeholder": "Procurar postagem original...",
+  "showpost.response.date": "",
   "showpost.responseform.message.mergedvotes": "Votos desta publicação serão mesclados na postagem original.",
   "showpost.responseform.text.placeholder": "O que está acontecendo com esta postagem? Informe seus usuários quais são os seus planos...",
   "showpost.votespanel.more": "+{extraVotesCount} mais",
diff --git a/locale/ru/client.json b/locale/ru/client.json
index dd94ed2ed..8024d048a 100644
--- a/locale/ru/client.json
+++ b/locale/ru/client.json
@@ -149,6 +149,7 @@
   "showpost.notificationspanel.message.unsubscribed": "Вы не подписаны на уведомления об активности в этом посте.",
   "showpost.postsearch.numofvotes": "{0} голосов",
   "showpost.postsearch.query.placeholder": "Выберите оригинальный пост...",
+  "showpost.response.date": "",
   "showpost.responseform.message.mergedvotes": "Голоса этого поста будут прибавлены к голосам оригинального поста.",
   "showpost.responseform.text.placeholder": "Что произойдёт с этим предложением? Дайте людям знать о ваших планах...",
   "showpost.votespanel.more": "и ещё {extraVotesCount}",
diff --git a/locale/sk/client.json b/locale/sk/client.json
index b9d59d137..9ffdb21e2 100644
--- a/locale/sk/client.json
+++ b/locale/sk/client.json
@@ -149,6 +149,7 @@
   "showpost.notificationspanel.message.unsubscribed": "Na tento príspevok nedostanete žiadne upozornenie.",
   "showpost.postsearch.numofvotes": "{0} hlasov",
   "showpost.postsearch.query.placeholder": "Hľadať pôvodný príspevok...",
+  "showpost.response.date": "",
   "showpost.responseform.message.mergedvotes": "Hlasy z tohto príspevku budú zlúčené do pôvodného príspevku.",
   "showpost.responseform.text.placeholder": "Čo sa deje s týmto príspevkom? Dajte svojim používateľom vedieť, aké máte plány...",
   "showpost.votespanel.more": "+{extraVotesCount} viac",
diff --git a/locale/sv-SE/client.json b/locale/sv-SE/client.json
index fa2de6203..6b1cd39de 100644
--- a/locale/sv-SE/client.json
+++ b/locale/sv-SE/client.json
@@ -149,6 +149,7 @@
   "showpost.notificationspanel.message.unsubscribed": "Du får inte aviseringar för det här inlägget.",
   "showpost.postsearch.numofvotes": "{0} röster",
   "showpost.postsearch.query.placeholder": "Sök i ursprungliga inlägget...",
+  "showpost.response.date": "",
   "showpost.responseform.message.mergedvotes": "Röster från det här inlägget kommer att flyttas till det ursprungliga inlägget.",
   "showpost.responseform.text.placeholder": "Vad händer med det här inlägget? Låt dina användare veta vad du planerar...",
   "showpost.votespanel.more": "+{extraVotesCount} ytterligare",
diff --git a/locale/tr/client.json b/locale/tr/client.json
index 6c1ff5507..4894a3605 100644
--- a/locale/tr/client.json
+++ b/locale/tr/client.json
@@ -149,6 +149,7 @@
   "showpost.notificationspanel.message.unsubscribed": "Bu öneri hakkında bildirim almayacaksınız.",
   "showpost.postsearch.numofvotes": "{0} oy",
   "showpost.postsearch.query.placeholder": "Orijinal öneri ara...",
+  "showpost.response.date": "",
   "showpost.responseform.message.mergedvotes": "Bu önerideki yorumlar orijinal öneriye dahil edilecek.",
   "showpost.responseform.text.placeholder": "Bu öneriye neler oluyor? Kullanıcılara planlarınız hakkında bilgi verin...",
   "showpost.votespanel.more": "+{extraVotesCount} daha",
diff --git a/locale/zh-CN/client.json b/locale/zh-CN/client.json
index 5f1294875..b7bec69e8 100644
--- a/locale/zh-CN/client.json
+++ b/locale/zh-CN/client.json
@@ -149,6 +149,7 @@
   "showpost.notificationspanel.message.unsubscribed": "您将不会收到有关此帖子的任何通知.",
   "showpost.postsearch.numofvotes": "{0} 投票",
   "showpost.postsearch.query.placeholder": "搜索原始帖子...",
+  "showpost.response.date": "",
   "showpost.responseform.message.mergedvotes": "此帖子的投票将合并到原始帖子中.",
   "showpost.responseform.text.placeholder": "这篇文章怎么了？让你的用户知道你的计划是什么...",
   "showpost.votespanel.more": "+{extraVotesCount} 更多",
diff --git a/public/assets/images/heroicons-inbox.svg b/public/assets/images/heroicons-inbox.svg
new file mode 100644
index 000000000..7174d15b1
--- /dev/null
+++ b/public/assets/images/heroicons-inbox.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M9 3.75H6.912a2.25 2.25 0 0 0-2.15 1.588L2.35 13.177a2.25 2.25 0 0 0-.1.661V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 0 0-2.15-1.588H15M2.25 13.5h3.86a2.25 2.25 0 0 1 2.012 1.244l.256.512a2.25 2.25 0 0 0 2.013 1.244h3.218a2.25 2.25 0 0 0 2.013-1.244l.256-.512a2.25 2.25 0 0 1 2.013-1.244h3.859M12 3v8.25m0 0-3-3m3 3 3-3" />
+</svg>
diff --git a/public/assets/images/heroicons-smile.svg b/public/assets/images/heroicons-smile.svg
new file mode 100644
index 000000000..4da5866a4
--- /dev/null
+++ b/public/assets/images/heroicons-smile.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M15.182 15.182a4.5 4.5 0 0 1-6.364 0M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z" />
+</svg>
diff --git a/public/assets/images/heroicons-star.svg b/public/assets/images/heroicons-star.svg
new file mode 100644
index 000000000..a3e370c51
--- /dev/null
+++ b/public/assets/images/heroicons-star.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
+</svg>
diff --git a/public/assets/images/heroicons-thumbsdown.svg b/public/assets/images/heroicons-thumbsdown.svg
new file mode 100644
index 000000000..38432cce6
--- /dev/null
+++ b/public/assets/images/heroicons-thumbsdown.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M7.498 15.25H4.372c-1.026 0-1.945-.694-2.054-1.715a12.137 12.137 0 0 1-.068-1.285c0-2.848.992-5.464 2.649-7.521C5.287 4.247 5.886 4 6.504 4h4.016a4.5 4.5 0 0 1 1.423.23l3.114 1.04a4.5 4.5 0 0 0 1.423.23h1.294M7.498 15.25c.618 0 .991.724.725 1.282A7.471 7.471 0 0 0 7.5 19.75 2.25 2.25 0 0 0 9.75 22a.75.75 0 0 0 .75-.75v-.633c0-.573.11-1.14.322-1.672.304-.76.93-1.33 1.653-1.715a9.04 9.04 0 0 0 2.86-2.4c.498-.634 1.226-1.08 2.032-1.08h.384m-10.253 1.5H9.7m8.075-9.75c.01.05.027.1.05.148.593 1.2.925 2.55.925 3.977 0 1.487-.36 2.89-.999 4.125m.023-8.25c-.076-.365.183-.75.575-.75h.908c.889 0 1.713.518 1.972 1.368.339 1.11.521 2.287.521 3.507 0 1.553-.295 3.036-.831 4.398-.306.774-1.086 1.227-1.918 1.227h-1.053c-.472 0-.745-.556-.5-.96a8.95 8.95 0 0 0 .303-.54" />
+</svg>
diff --git a/public/assets/styles/utility/display.scss b/public/assets/styles/utility/display.scss
index b424a7505..70738cc13 100644
--- a/public/assets/styles/utility/display.scss
+++ b/public/assets/styles/utility/display.scss
@@ -207,8 +207,11 @@
   border: 1px solid transparent;
 }
 
-.border-2 {
-  border: 2px solid transparent;
+
+@each $i in 2, 3, 4, 6 {
+  .border-#{$i} {
+    border: #{$i}px solid transparent;
+  }
 }
 
 .clickable {
@@ -222,6 +225,3 @@
   }
 }
 
-.purple-border {
-  border-top: 4px solid get("colors.primary.base");
-}
diff --git a/public/assets/styles/utility/text.scss b/public/assets/styles/utility/text.scss
index 4d5527a70..cf6acbc31 100644
--- a/public/assets/styles/utility/text.scss
+++ b/public/assets/styles/utility/text.scss
@@ -54,6 +54,10 @@ pre:last-child {
   font-size: get("font.size.sm");
 }
 
+.text-lg {
+  font-size: get("font.size.lg");
+}
+
 .text-category {
   font-size: get("font.size.xs");
   font-weight: get("font.weight.semibold");
diff --git a/public/assets/styles/variables/_colors.scss b/public/assets/styles/variables/_colors.scss
index 3bb92364f..6358a60cd 100644
--- a/public/assets/styles/variables/_colors.scss
+++ b/public/assets/styles/variables/_colors.scss
@@ -1,14 +1,14 @@
 $colors: (
   "gray": (
-    "100": #FCFAFA,
-    "200": #EEEBEB,
-    "300": #E0DCDD,
-    "400": #D2CDCF,
-    "500": #C4BEC0,
-    "600": #9D9598,
-    "700": #756E71,
-    "800": #4E474B,
-    "900": #262225,
+    "900": #111827,
+    "800": #1f2937,
+    "700": #374151,
+    "600": #4b5563,
+    "500": #6b7280,
+    "400": #9ca3af,
+    "300": #d1d5db,
+    "200": #e5e7eb,
+    "100": #f3f4f6,
     "50": #f9fafb,
   ),
   "green": (
@@ -37,13 +37,13 @@ $colors: (
     "50": #fffbeb,
   ),
   "blue": (
-    "100": #F2F2FF,
-    "200": #C2C4FF,
-    "300": #909BFD,
-    "400": #5E76F7,
-    "500": #2D57ED,
-    "600": #0F3EBB,
-    "700": #03308A,
+    "100": #f2f2ff,
+    "200": #c2c4ff,
+    "300": #909bfd,
+    "400": #5e76f7,
+    "500": #2d57ed,
+    "600": #0f3ebb,
+    "700": #03308a,
     "800": #002358,
     "900": #001126,
     "50": #f0f9ff,
@@ -61,9 +61,10 @@ $colors: (
     "50": #fef2f2,
   ),
   "primary": (
-    "light": var(--primary-color-light, #C2C4FF),
-    "base": var(--primary-color, #2D57ED),
-    "dark": var(--primary-color-dark, #03308A),
+    "light": var(--primary-color-light, #c2c4ff),
+    "base": var(--primary-color, #2d57ed),
+    "dark": var(--primary-color-dark, #03308a),
   ),
   "white": #fff,
-);
\ No newline at end of file
+);
+
diff --git a/public/components/ShowPostResponse.tsx b/public/components/ShowPostResponse.tsx
index 50db95462..065b0d093 100644
--- a/public/components/ShowPostResponse.tsx
+++ b/public/components/ShowPostResponse.tsx
@@ -2,56 +2,98 @@ import React from "react"
 import { PostResponse, PostStatus } from "@fider/models"
 import { Icon, Markdown } from "@fider/components"
 import HeroIconDuplicate from "@fider/assets/images/heroicons-duplicate.svg"
+import HeroIconSmile from "@fider/assets/images/heroicons-smile.svg"
+import HeroIconStar from "@fider/assets/images/heroicons-star.svg"
+import HeroIconThumbsUp from "@fider/assets/images/heroicons-thumbsup.svg"
+import HeroIconInbox from "@fider/assets/images/heroicons-inbox.svg"
+import { t } from "@lingui/macro"
+
 import { HStack } from "./layout"
+import { timeSince } from "@fider/services"
 
-const DuplicateDetails = (props: PostResponseProps): JSX.Element | null => {
-  if (!props.response) {
-    return null
-  }
+// const DuplicateDetails = (props: PostResponseProps): JSX.Element | null => {
+//   if (!props.response) {
+//     return null
+//   }
 
-  const original = props.response.original
-  if (!original) {
-    return null
-  }
+//   const original = props.response.original
+//   if (!original) {
+//     return null
+//   }
 
-  return (
-    <HStack>
-      <Icon sprite={HeroIconDuplicate} className="h-6 text-gray-500" />
-      <a className="text-link" href={`/posts/${original.number}/${original.slug}`}>
-        {original.title}
-      </a>
-    </HStack>
-  )
-}
+//   return (
+//     <HStack>
+//       <Icon sprite={HeroIconDuplicate} className="h-6 text-gray-500" />
+//       <a className="text-link" href={`/posts/${original.number}/${original.slug}`}>
+//         {original.title}
+//       </a>
+//     </HStack>
+//   )
+// }
 
 interface PostResponseProps {
   status: string
   response: PostResponse | null
 }
 
-const StatusDetails = (props: PostResponseProps): JSX.Element | null => {
-  if (!props.response || !props.response.text) {
+export const ResponseDetails = (props: PostResponseProps): JSX.Element | null => {
+  const status = PostStatus.Get(props.status)
+  const id = `enum.poststatus.${status.value}`
+  const statusLabel = t({ id, message: status.title })
+
+  if (!props.response || status === PostStatus.Open) {
     return null
   }
 
+  const title = t({
+    id: "showpost.response.date",
+    message: "Status changed to {status} on {statusDate}",
+    values: { status: statusLabel, statusDate: timeSince("en", new Date(), props.response.respondedAt, "date") },
+  })
+
   return (
-    <div className="content">
-      <Markdown text={props.response.text} style="full" />
+    <div className="bg-blue-50 p-2 border border-blue-200 rounded">
+      <div>{title}</div>
+      {props.response?.text && status !== PostStatus.Duplicate && (
+        <div className="content pt-1">
+          <Markdown text={props.response.text} style="full" />
+        </div>
+      )}
+
+      {status === PostStatus.Duplicate && props.response.original && (
+        <div className="content pt-1">
+          <a className="text-link" href={`/posts/${props.response.original.number}/${props.response.original.slug}`}>
+            {props.response.original.title}
+          </a>
+        </div>
+      )}
     </div>
   )
 }
 
-export const ShowPostResponse = (props: PostResponseProps): JSX.Element | null => {
-  const status = PostStatus.Get(props.status)
-
-  if (props.response && (status.show || props.response.text)) {
-    return (
-      <div>
-        {status.show && <div className={`p-2 text-white text-center text-semibold c-status-bg--${status.value}`}>{status.title}</div>}
-        <div className="pt-2">{status === PostStatus.Duplicate ? DuplicateDetails(props) : StatusDetails(props)}</div>
-      </div>
-    )
+const getStatusIcon = (status: PostStatus): SpriteSymbol => {
+  switch (status) {
+    case PostStatus.Duplicate:
+      return HeroIconDuplicate
+    case PostStatus.Completed:
+      return HeroIconStar
+    case PostStatus.Planned:
+      return HeroIconThumbsUp
+    case PostStatus.Started:
+      return HeroIconSmile
   }
+  return HeroIconInbox
+}
 
-  return null
+export const ResponseStatusLabel = (props: PostResponseProps): JSX.Element | null => {
+  const status = PostStatus.Get(props.status)
+
+  return (
+    <>
+      <HStack>
+        <Icon sprite={getStatusIcon(status)} className={`h-6 c-status-col--${status.value}`} />
+        <span className={`text-semibold text-lg c-status-col--${status.value}`}>{status.title}</span>
+      </HStack>
+    </>
+  )
 }
diff --git a/public/components/ShowPostStatus.scss b/public/components/ShowPostStatus.scss
index 7f82d9e3e..86dbdd1ba 100644
--- a/public/components/ShowPostStatus.scss
+++ b/public/components/ShowPostStatus.scss
@@ -1,28 +1,28 @@
 @import "~@fider/assets/styles/variables.scss";
 
-.c-status-bg {
+.c-status-col {
 
   &--open {
-    background-color: get("colors.gray.900");
+    color: get("colors.blue.600");
   }
 
   &--planned {
-    background-color: #6435c9;
+    color: #6435c9;
   }
 
   &--started {
-    background-color: #2185d0;
+    color: #2185d0;
   }
 
   &--completed {
-    background-color: #21ba45;
+    color: #21ba45;
   }
 
   &--declined {
-    background-color: #db2828;
+    color: #db2828;
   }
 
   &--duplicate {
-    background-color: #d6a100;
+    color: #d6a100;
   }
 }
diff --git a/public/pages/Home/components/ListPosts.tsx b/public/pages/Home/components/ListPosts.tsx
index e6d63a0b2..cc02b1faf 100644
--- a/public/pages/Home/components/ListPosts.tsx
+++ b/public/pages/Home/components/ListPosts.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import { Post, Tag, CurrentUser } from "@fider/models"
-import { ShowTag, ShowPostResponse, VoteCounter, Markdown, Icon } from "@fider/components"
+import { ShowTag, VoteCounter, Markdown, Icon, ResponseStatusLabel } from "@fider/components"
 import IconChatAlt2 from "@fider/assets/images/heroicons-chat-alt-2.svg"
 import { HStack, VStack } from "@fider/components/layout"
 
@@ -28,7 +28,7 @@ const ListPostItem = (props: { post: Post; user?: CurrentUser; tags: Tag[] }) =>
           )}
         </HStack>
         <Markdown className="text-gray-600" maxLength={300} text={props.post.description} style="plainText" />
-        <ShowPostResponse status={props.post.status} response={props.post.response} />
+        <ResponseStatusLabel status={props.post.status} response={props.post.response} />
         {props.tags.length >= 1 && (
           <HStack className="flex-wrap">
             {props.tags.map((tag) => (
diff --git a/public/pages/ShowPost/ShowPost.page.tsx b/public/pages/ShowPost/ShowPost.page.tsx
index 350b1f216..ea92ed3f8 100644
--- a/public/pages/ShowPost/ShowPost.page.tsx
+++ b/public/pages/ShowPost/ShowPost.page.tsx
@@ -7,7 +7,8 @@ import { actions, clearUrlHash, Failure, Fider, notify, timeAgo } from "@fider/s
 import IconDotsHorizontal from "@fider/assets/images/heroicons-dots-horizontal.svg"
 
 import {
-  ShowPostResponse,
+  ResponseStatusLabel,
+  ResponseDetails,
   Button,
   UserName,
   Moment,
@@ -35,7 +36,7 @@ import IconX from "@fider/assets/images/heroicons-x.svg"
 import IconThumbsUp from "@fider/assets/images/heroicons-thumbsup.svg"
 import { HStack, VStack } from "@fider/components/layout"
 import { Trans } from "@lingui/macro"
-import { TagsPanel2 } from "./components/TagsPanel2"
+// import { TagsPanel2 } from "./components/TagsPanel2"
 import { NotificationsPanel2 } from "./components/NotificationsPanel2"
 import { VoteSection } from "./components/VoteSection"
 import { ModerationPanel } from "./components/ModerationPanel"
@@ -191,24 +192,7 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
               <div className="p-show-post__header-col">
                 <VStack spacing={8}>
                   <HStack justify="between">
-                    <div className="flex-grow">
-                      {this.state.editMode ? (
-                        <Form error={this.state.error}>
-                          <Input field="title" maxLength={100} value={this.state.newTitle} onChange={this.setNewTitle} />
-                        </Form>
-                      ) : (
-                        <>
-                          <h1 className="text-large">{this.props.post.title}</h1>
-                          <div className="mt-2">
-                            <TagsPanel2 post={this.props.post} tags={this.props.tags} />
-                          </div>
-                        </>
-                      )}
-                    </div>
-                    <ModerationPanel onModalClose={() => this.setShowDeleteModal(false)} showModal={this.state.showDeleteModal} post={this.props.post} />
-                    {Fider.session.user.isCollaborator && (
-                      <ResponseModal onCloseModal={() => this.setShowResponseModal(false)} showModal={this.state.showResponseModal} post={this.props.post} />
-                    )}
+                    <ResponseStatusLabel status={this.props.post.status} response={this.props.post.response} />
                     {!this.state.editMode && (
                       <Dropdown position="left" renderHandle={<Icon sprite={IconDotsHorizontal} width="24" height="24" />}>
                         <Dropdown.ListItem onClick={this.onActionSelected("copy")}>
@@ -234,16 +218,35 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
                       </Dropdown>
                     )}
                   </HStack>
+                  <ResponseDetails status={this.props.post.status} response={this.props.post.response} />
+
+                  <HStack justify="between">
+                    <div className="flex-grow">
+                      {this.state.editMode ? (
+                        <Form error={this.state.error}>
+                          <Input field="title" maxLength={100} value={this.state.newTitle} onChange={this.setNewTitle} />
+                        </Form>
+                      ) : (
+                        <>
+                          <h1 className="text-large">{this.props.post.title}</h1>
+                          {/* <div className="mt-2"> */}
+                          {/*   <TagsPanel2 post={this.props.post} tags={this.props.tags} /> */}
+                          {/* </div> */}
+                        </>
+                      )}
+                    </div>
+                    <ModerationPanel onModalClose={() => this.setShowDeleteModal(false)} showModal={this.state.showDeleteModal} post={this.props.post} />
+                    {Fider.session.user.isCollaborator && (
+                      <ResponseModal onCloseModal={() => this.setShowResponseModal(false)} showModal={this.state.showResponseModal} post={this.props.post} />
+                    )}
+                  </HStack>
                   {!this.state.editMode && (
-                    <HStack spacing={4} justify="between">
-                      <HStack>
-                        <Avatar user={this.props.post.user} />
-                        <VStack spacing={1}>
-                          <UserName user={this.props.post.user} />
-                          <Moment className="text-muted" locale={Fider.currentLocale} date={this.props.post.createdAt} />
-                        </VStack>
-                      </HStack>
-                      <NotificationsPanel2 post={this.props.post} subscribed={this.props.subscribed} />
+                    <HStack>
+                      <Avatar user={this.props.post.user} />
+                      <VStack spacing={1}>
+                        <UserName user={this.props.post.user} />
+                        <Moment className="text-muted" locale={Fider.currentLocale} date={this.props.post.createdAt} />
+                      </VStack>
                     </HStack>
                   )}
                   <VStack>
@@ -266,11 +269,13 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
                       </>
                     )}
                   </VStack>
-                  <ShowPostResponse status={this.props.post.status} response={this.props.post.response} />
 
                   <VStack spacing={4}>
                     {!this.state.editMode ? (
-                      <VoteSection post={this.props.post} votes={this.props.votes} />
+                      <HStack justify="between" center={false}>
+                        <VoteSection post={this.props.post} votes={this.props.votes} />
+                        <NotificationsPanel2 post={this.props.post} subscribed={this.props.subscribed} />
+                      </HStack>
                     ) : (
                       <HStack>
                         <Button variant="primary" onClick={this.saveChanges} disabled={Fider.isReadOnly}>
@@ -287,7 +292,7 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
                         </Button>
                       </HStack>
                     )}
-                    <div className="purple-border" />
+                    <div className="border-4 border-blue-500" />
                   </VStack>
                 </VStack>
               </div>
diff --git a/public/pages/ShowPost/components/PostStatus.tsx b/public/pages/ShowPost/components/PostStatus.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/public/pages/ShowPost/components/VoteSection.tsx b/public/pages/ShowPost/components/VoteSection.tsx
index f5f6754a2..5c8c15b01 100644
--- a/public/pages/ShowPost/components/VoteSection.tsx
+++ b/public/pages/ShowPost/components/VoteSection.tsx
@@ -6,8 +6,8 @@ import { useFider } from "@fider/hooks"
 import IconThumbsUp from "@fider/assets/images/heroicons-thumbsup.svg"
 import IconCheck from "@fider/assets/images/heroicons-check.svg"
 import { Trans } from "@lingui/macro"
-import { HStack } from "@fider/components/layout"
-import { VotesPanel } from "./VotesPanel"
+import { HStack, VStack } from "@fider/components/layout"
+// import { VotesPanel } from "./VotesPanel"
 
 interface VoteSectionProps {
   post: Post
@@ -50,7 +50,7 @@ export const VoteSection = (props: VoteSectionProps) => {
   const icon = hasVoted ? IconCheck : IconThumbsUp
 
   return (
-    <>
+    <VStack spacing={4}>
       <SignInModal isOpen={isSignInModalOpen} onClose={hideModal} />
       <div className="align-self-start">
         <Button variant="primary" onClick={voteOrUndo} disabled={isDisabled}>
@@ -61,10 +61,10 @@ export const VoteSection = (props: VoteSectionProps) => {
         <span className="text-display">
           {votes.length} {votes.length === 1 ? "Vote" : "Votes"}
         </span>
-        <div className="pl-4">
+        {/* <div className="pl-4">
           <VotesPanel post={post} votes={votes} hideTitle={true} />
-        </div>
+        </div> */}
       </HStack>
-    </>
+    </VStack>
   )
 }
diff --git a/public/services/utils.ts b/public/services/utils.ts
index 969f9e9d2..fbb80db96 100644
--- a/public/services/utils.ts
+++ b/public/services/utils.ts
@@ -38,7 +38,7 @@ export const formatDate = (locale: string, input: Date | string, format: DateFor
   }
 }
 
-export const timeSince = (locale: string, now: Date, date: Date): string => {
+export const timeSince = (locale: string, now: Date, date: Date, dateFormat: DateFormat = "short"): string => {
   try {
     const seconds = Math.round((now.getTime() - date.getTime()) / 1000)
     const minutes = Math.round(seconds / 60)
@@ -57,10 +57,9 @@ export const timeSince = (locale: string, now: Date, date: Date): string => {
       rtf.format(-1 * years, "years")
     )
   } catch {
-    return formatDate(locale, date, "short")
+    return formatDate(locale, date, dateFormat)
   }
 }
-
 export const fileToBase64 = async (file: File): Promise<string> => {
   return new Promise<string>((resolve, reject) => {
     const reader = new FileReader()

From ff042fe3de407587158e5641bccc72309e1a731a Mon Sep 17 00:00:00 2001
From: Matt Roberts <roberts.mattroberts@gmail.com>
Date: Mon, 13 Jan 2025 13:38:29 +0000
Subject: [PATCH 12/20] Greys are back, no white on the main column...

---
 public/assets/styles/variables/_colors.scss    | 18 +++++++++---------
 public/pages/ShowPost/ShowPost.page.scss       |  2 +-
 .../pages/ShowPost/components/ShowComment.tsx  |  4 ++--
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/public/assets/styles/variables/_colors.scss b/public/assets/styles/variables/_colors.scss
index 6358a60cd..7274645af 100644
--- a/public/assets/styles/variables/_colors.scss
+++ b/public/assets/styles/variables/_colors.scss
@@ -1,14 +1,14 @@
 $colors: (
   "gray": (
-    "900": #111827,
-    "800": #1f2937,
-    "700": #374151,
-    "600": #4b5563,
-    "500": #6b7280,
-    "400": #9ca3af,
-    "300": #d1d5db,
-    "200": #e5e7eb,
-    "100": #f3f4f6,
+    "100": #FCFAFA,
+    "200": #EEEBEB,
+    "300": #E0DCDD,
+    "400": #D2CDCF,
+    "500": #C4BEC0,
+    "600": #9D9598,
+    "700": #756E71,
+    "800": #4E474B,
+    "900": #262225,
     "50": #f9fafb,
   ),
   "green": (
diff --git a/public/pages/ShowPost/ShowPost.page.scss b/public/pages/ShowPost/ShowPost.page.scss
index 83fd0391b..def883fb3 100644
--- a/public/pages/ShowPost/ShowPost.page.scss
+++ b/public/pages/ShowPost/ShowPost.page.scss
@@ -7,7 +7,7 @@
 
   .p-show-post {
     &__main-col {
-      background-color: get("colors.white");
+      // background-color: get("colors.white");
       padding: spacing(4);
       border-radius: get("border.radius.large");
       margin-bottom: spacing(4);
diff --git a/public/pages/ShowPost/components/ShowComment.tsx b/public/pages/ShowPost/components/ShowComment.tsx
index 73ef4ca1a..c49f281d5 100644
--- a/public/pages/ShowPost/components/ShowComment.tsx
+++ b/public/pages/ShowPost/components/ShowComment.tsx
@@ -167,8 +167,8 @@ export const ShowComment = (props: ShowCommentProps) => {
 
   const classList = classSet({
     "flex-grow rounded-md p-2": true,
-    "bg-gray-50": !props.highlighted,
-    "bg-gray-100": props.highlighted,
+    "bg-gray-100": !props.highlighted,
+    "bg-gray-200": props.highlighted,
   })
 
   return (

From 14940ff72522435972bddab83bc2ea3dd28aee82 Mon Sep 17 00:00:00 2001
From: Matt Roberts <roberts.mattroberts@gmail.com>
Date: Mon, 13 Jan 2025 16:01:42 +0000
Subject: [PATCH 13/20] Tags back, bigger font, darker colour.

---
 public/assets/styles/reset.scss           | 2 +-
 public/assets/styles/variables/_text.scss | 2 +-
 public/pages/ShowPost/ShowPost.page.tsx   | 8 ++++----
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/public/assets/styles/reset.scss b/public/assets/styles/reset.scss
index db635a59a..0edaefbe3 100644
--- a/public/assets/styles/reset.scss
+++ b/public/assets/styles/reset.scss
@@ -15,7 +15,7 @@ body {
   padding: 0px;
   overflow-x: hidden;
   min-width: 320px;
-  color: get("colors.gray.700");
+  color: get("colors.gray.800");
   background-color: get("colors.gray.100");
   font-size: get("font.size.base");
   font-family: $font-base;
diff --git a/public/assets/styles/variables/_text.scss b/public/assets/styles/variables/_text.scss
index 8d8ca00ef..e5f5941df 100644
--- a/public/assets/styles/variables/_text.scss
+++ b/public/assets/styles/variables/_text.scss
@@ -11,7 +11,7 @@ $font: (
     "2xs": 12px,
     xs: 13px,
     sm: 14px,
-    base: 15px,
+    base: 16px,
     lg: 18px,
     xl: 22px,
     "2xl": 26px,
diff --git a/public/pages/ShowPost/ShowPost.page.tsx b/public/pages/ShowPost/ShowPost.page.tsx
index ea92ed3f8..0814859bb 100644
--- a/public/pages/ShowPost/ShowPost.page.tsx
+++ b/public/pages/ShowPost/ShowPost.page.tsx
@@ -36,7 +36,7 @@ import IconX from "@fider/assets/images/heroicons-x.svg"
 import IconThumbsUp from "@fider/assets/images/heroicons-thumbsup.svg"
 import { HStack, VStack } from "@fider/components/layout"
 import { Trans } from "@lingui/macro"
-// import { TagsPanel2 } from "./components/TagsPanel2"
+import { TagsPanel2 } from "./components/TagsPanel2"
 import { NotificationsPanel2 } from "./components/NotificationsPanel2"
 import { VoteSection } from "./components/VoteSection"
 import { ModerationPanel } from "./components/ModerationPanel"
@@ -229,9 +229,9 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
                       ) : (
                         <>
                           <h1 className="text-large">{this.props.post.title}</h1>
-                          {/* <div className="mt-2"> */}
-                          {/*   <TagsPanel2 post={this.props.post} tags={this.props.tags} /> */}
-                          {/* </div> */}
+                          <div className="mt-2">
+                            <TagsPanel2 post={this.props.post} tags={this.props.tags} />
+                          </div>
                         </>
                       )}
                     </div>

From fa54b8e91eb50388434f053bd864c27604132e24 Mon Sep 17 00:00:00 2001
From: Matt Roberts <roberts.mattroberts@gmail.com>
Date: Tue, 14 Jan 2025 08:27:06 +0000
Subject: [PATCH 14/20] More changes for the show post page

---
 locale/de/client.json                         |  1 +
 locale/el/client.json                         |  1 +
 locale/en/client.json                         |  1 +
 locale/es-ES/client.json                      |  1 +
 locale/fr/client.json                         |  1 +
 locale/it/client.json                         |  1 +
 locale/nl/client.json                         |  1 +
 locale/pl/client.json                         |  1 +
 locale/pt-BR/client.json                      |  1 +
 locale/ru/client.json                         |  1 +
 locale/sk/client.json                         |  1 +
 locale/sv-SE/client.json                      |  1 +
 locale/tr/client.json                         |  1 +
 locale/zh-CN/client.json                      |  1 +
 public/components/ShowTag.scss                | 19 +++-
 public/components/ShowTag.tsx                 | 21 ++--
 public/pages/ShowPost/ShowPost.page.tsx       | 16 ++--
 ...oderationPanel.tsx => DeletePostModal.tsx} |  4 +-
 ...tificationsPanel2.tsx => FollowButton.tsx} |  9 +-
 .../components/NotificationsPanel.tsx         | 68 -------------
 .../pages/ShowPost/components/TagListItem.tsx |  3 +-
 .../pages/ShowPost/components/TagsPanel.tsx   | 46 ++++-----
 .../pages/ShowPost/components/TagsPanel2.tsx  | 95 -------------------
 23 files changed, 76 insertions(+), 219 deletions(-)
 rename public/pages/ShowPost/components/{ModerationPanel.tsx => DeletePostModal.tsx} (95%)
 rename public/pages/ShowPost/components/{NotificationsPanel2.tsx => FollowButton.tsx} (88%)
 delete mode 100644 public/pages/ShowPost/components/NotificationsPanel.tsx
 delete mode 100644 public/pages/ShowPost/components/TagsPanel2.tsx

diff --git a/locale/de/client.json b/locale/de/client.json
index df8ef8689..d45b670ef 100644
--- a/locale/de/client.json
+++ b/locale/de/client.json
@@ -54,6 +54,7 @@
   "label.custom": "Benutzerdefiniert",
   "label.description": "Beschreibung",
   "label.discussion": "Diskussion",
+  "label.edittags": "",
   "label.email": "E-Mail",
   "label.follow": "",
   "label.gravatar": "Gravatar",
diff --git a/locale/el/client.json b/locale/el/client.json
index 86e6dff4d..9d1c5edcb 100644
--- a/locale/el/client.json
+++ b/locale/el/client.json
@@ -54,6 +54,7 @@
   "label.custom": "Προσαρμοσμένη",
   "label.description": "Περιγραφή",
   "label.discussion": "Συζήτηση",
+  "label.edittags": "",
   "label.email": "Email",
   "label.follow": "",
   "label.gravatar": "Gravatar",
diff --git a/locale/en/client.json b/locale/en/client.json
index 14407e41e..5913f24c3 100644
--- a/locale/en/client.json
+++ b/locale/en/client.json
@@ -54,6 +54,7 @@
   "label.custom": "Custom",
   "label.description": "Description",
   "label.discussion": "Discussion",
+  "label.edittags": "Edit tags",
   "label.email": "Email",
   "label.follow": "Follow",
   "label.gravatar": "Gravatar",
diff --git a/locale/es-ES/client.json b/locale/es-ES/client.json
index 5c44f7980..b0dbbf0a6 100644
--- a/locale/es-ES/client.json
+++ b/locale/es-ES/client.json
@@ -54,6 +54,7 @@
   "label.custom": "Personalizado",
   "label.description": "Descripción",
   "label.discussion": "Discusión",
+  "label.edittags": "",
   "label.email": "Correo electrónico",
   "label.follow": "",
   "label.gravatar": "Gravatar",
diff --git a/locale/fr/client.json b/locale/fr/client.json
index 47865e649..fc88b7029 100644
--- a/locale/fr/client.json
+++ b/locale/fr/client.json
@@ -54,6 +54,7 @@
   "label.custom": "Personnalisé",
   "label.description": "Description",
   "label.discussion": "Discussion",
+  "label.edittags": "",
   "label.email": "E-mail",
   "label.follow": "",
   "label.gravatar": "Gravatar",
diff --git a/locale/it/client.json b/locale/it/client.json
index 3f1f87b31..3052baaf5 100644
--- a/locale/it/client.json
+++ b/locale/it/client.json
@@ -54,6 +54,7 @@
   "label.custom": "Personalizzato",
   "label.description": "Descrizione",
   "label.discussion": "Discussione",
+  "label.edittags": "",
   "label.email": "Email",
   "label.follow": "",
   "label.gravatar": "Gravatar",
diff --git a/locale/nl/client.json b/locale/nl/client.json
index 7bfeb774a..dfa1acf36 100644
--- a/locale/nl/client.json
+++ b/locale/nl/client.json
@@ -54,6 +54,7 @@
   "label.custom": "Aangepast",
   "label.description": "Omschrijving",
   "label.discussion": "Discussie",
+  "label.edittags": "",
   "label.email": "E-mailadres",
   "label.follow": "",
   "label.gravatar": "Gravatar",
diff --git a/locale/pl/client.json b/locale/pl/client.json
index 70ab186c2..150e1c3dc 100644
--- a/locale/pl/client.json
+++ b/locale/pl/client.json
@@ -54,6 +54,7 @@
   "label.custom": "Niestandardowy",
   "label.description": "Opis",
   "label.discussion": "Dyskusja",
+  "label.edittags": "",
   "label.email": "Email",
   "label.follow": "",
   "label.gravatar": "Gravatar",
diff --git a/locale/pt-BR/client.json b/locale/pt-BR/client.json
index fe94e2e91..c93beb5a0 100644
--- a/locale/pt-BR/client.json
+++ b/locale/pt-BR/client.json
@@ -54,6 +54,7 @@
   "label.custom": "Personalizado",
   "label.description": "Descrição",
   "label.discussion": "Discussão",
+  "label.edittags": "",
   "label.email": "E-mail",
   "label.follow": "",
   "label.gravatar": "Gravatar",
diff --git a/locale/ru/client.json b/locale/ru/client.json
index 8024d048a..a17e82a7d 100644
--- a/locale/ru/client.json
+++ b/locale/ru/client.json
@@ -54,6 +54,7 @@
   "label.custom": "Пользовательский",
   "label.description": "Описание",
   "label.discussion": "Обсуждение",
+  "label.edittags": "",
   "label.email": "Адрес электронной почты",
   "label.follow": "",
   "label.gravatar": "Gravatar",
diff --git a/locale/sk/client.json b/locale/sk/client.json
index 9ffdb21e2..80b40f14f 100644
--- a/locale/sk/client.json
+++ b/locale/sk/client.json
@@ -54,6 +54,7 @@
   "label.custom": "Vlastné",
   "label.description": "Popis",
   "label.discussion": "Diskusia",
+  "label.edittags": "",
   "label.email": "Email",
   "label.follow": "",
   "label.gravatar": "Gravatar",
diff --git a/locale/sv-SE/client.json b/locale/sv-SE/client.json
index 6b1cd39de..6b4fc5527 100644
--- a/locale/sv-SE/client.json
+++ b/locale/sv-SE/client.json
@@ -54,6 +54,7 @@
   "label.custom": "Anpassad",
   "label.description": "Beskrivning",
   "label.discussion": "Diskussion",
+  "label.edittags": "",
   "label.email": "E-post",
   "label.follow": "",
   "label.gravatar": "Gravatar",
diff --git a/locale/tr/client.json b/locale/tr/client.json
index 4894a3605..0a2d20763 100644
--- a/locale/tr/client.json
+++ b/locale/tr/client.json
@@ -54,6 +54,7 @@
   "label.custom": "Özel",
   "label.description": "Açıklama",
   "label.discussion": "Tartışma",
+  "label.edittags": "",
   "label.email": "E-Posta",
   "label.follow": "",
   "label.gravatar": "Gravatar",
diff --git a/locale/zh-CN/client.json b/locale/zh-CN/client.json
index b7bec69e8..a981ec7a6 100644
--- a/locale/zh-CN/client.json
+++ b/locale/zh-CN/client.json
@@ -54,6 +54,7 @@
   "label.custom": "自定义",
   "label.description": "说明",
   "label.discussion": "讨论",
+  "label.edittags": "",
   "label.email": "邮箱",
   "label.follow": "",
   "label.gravatar": "Gravatar",
diff --git a/public/components/ShowTag.scss b/public/components/ShowTag.scss
index 2cf3f0234..ef59e941c 100644
--- a/public/components/ShowTag.scss
+++ b/public/components/ShowTag.scss
@@ -4,12 +4,13 @@
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  font-size: 11px;
+  font-size: 13px;
   color: get("colors.gray.900");
-  font-weight: 500;
-  border-radius: 10px;
-  line-height: 18px;
-  padding: 0 8px;
+  background-color: get("colors.gray.200");
+  font-weight: 600;
+  border-radius: 5px;
+  // line-height: 18px;
+  padding: 6px 10px;
   border: 0;
 
   &[href] {
@@ -21,6 +22,14 @@
     }
   }
 
+  span {
+    margin-right: 7px;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    display: inline-block;
+  }
+
   svg {
     height: 8px;
     margin-right: 2px;
diff --git a/public/components/ShowTag.tsx b/public/components/ShowTag.tsx
index b3b87114c..427ca509d 100644
--- a/public/components/ShowTag.tsx
+++ b/public/components/ShowTag.tsx
@@ -22,11 +22,11 @@ const getRGB = (color: string) => {
   }
 }
 
-const textColor = (color: string) => {
-  const components = getRGB(color)
-  const bgDelta = components.R * 0.299 + components.G * 0.587 + components.B * 0.114
-  return bgDelta > 140 ? "#333" : "#fff"
-}
+// const textColor = (color: string) => {
+//   const components = getRGB(color)
+//   const bgDelta = components.R * 0.299 + components.G * 0.587 + components.B * 0.114
+//   return bgDelta > 140 ? "#333" : "#fff"
+// }
 
 export const ShowTag = (props: TagProps) => {
   const className = classSet({
@@ -49,12 +49,13 @@ export const ShowTag = (props: TagProps) => {
       href={props.link && props.tag.slug ? `/?tags=${props.tag.slug}` : undefined}
       title={`${props.tag.name}${props.tag.isPublic ? "" : " (Private)"}`}
       className={className}
-      style={{
-        backgroundColor: `#${props.tag.color}`,
-        border: `1px solid #${darkerColor}`,
-        color: textColor(props.tag.color),
-      }}
     >
+      <span
+        style={{
+          backgroundColor: `#${props.tag.color}`,
+          border: `1px solid #${darkerColor}`,
+        }}
+      ></span>
       {!props.tag.isPublic && !props.circular && (
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
           <path
diff --git a/public/pages/ShowPost/ShowPost.page.tsx b/public/pages/ShowPost/ShowPost.page.tsx
index 0814859bb..a345d7c12 100644
--- a/public/pages/ShowPost/ShowPost.page.tsx
+++ b/public/pages/ShowPost/ShowPost.page.tsx
@@ -36,10 +36,10 @@ import IconX from "@fider/assets/images/heroicons-x.svg"
 import IconThumbsUp from "@fider/assets/images/heroicons-thumbsup.svg"
 import { HStack, VStack } from "@fider/components/layout"
 import { Trans } from "@lingui/macro"
-import { TagsPanel2 } from "./components/TagsPanel2"
-import { NotificationsPanel2 } from "./components/NotificationsPanel2"
+import { TagsPanel } from "./components/TagsPanel"
+import { FollowButton } from "./components/FollowButton"
 import { VoteSection } from "./components/VoteSection"
-import { ModerationPanel } from "./components/ModerationPanel"
+import { DeletePostModal } from "./components/DeletePostModal"
 import { ResponseModal } from "./components/ResponseModal"
 import { MostWanted } from "./components/MostWanted"
 
@@ -229,13 +229,10 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
                       ) : (
                         <>
                           <h1 className="text-large">{this.props.post.title}</h1>
-                          <div className="mt-2">
-                            <TagsPanel2 post={this.props.post} tags={this.props.tags} />
-                          </div>
                         </>
                       )}
                     </div>
-                    <ModerationPanel onModalClose={() => this.setShowDeleteModal(false)} showModal={this.state.showDeleteModal} post={this.props.post} />
+                    <DeletePostModal onModalClose={() => this.setShowDeleteModal(false)} showModal={this.state.showDeleteModal} post={this.props.post} />
                     {Fider.session.user.isCollaborator && (
                       <ResponseModal onCloseModal={() => this.setShowResponseModal(false)} showModal={this.state.showResponseModal} post={this.props.post} />
                     )}
@@ -269,12 +266,15 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
                       </>
                     )}
                   </VStack>
+                  <div className="mt-2">
+                    <TagsPanel post={this.props.post} tags={this.props.tags} />
+                  </div>
 
                   <VStack spacing={4}>
                     {!this.state.editMode ? (
                       <HStack justify="between" center={false}>
                         <VoteSection post={this.props.post} votes={this.props.votes} />
-                        <NotificationsPanel2 post={this.props.post} subscribed={this.props.subscribed} />
+                        <FollowButton post={this.props.post} subscribed={this.props.subscribed} />
                       </HStack>
                     ) : (
                       <HStack>
diff --git a/public/pages/ShowPost/components/ModerationPanel.tsx b/public/pages/ShowPost/components/DeletePostModal.tsx
similarity index 95%
rename from public/pages/ShowPost/components/ModerationPanel.tsx
rename to public/pages/ShowPost/components/DeletePostModal.tsx
index 019234c8d..0aaa9d746 100644
--- a/public/pages/ShowPost/components/ModerationPanel.tsx
+++ b/public/pages/ShowPost/components/DeletePostModal.tsx
@@ -5,13 +5,13 @@ import { Form, Modal, Button, TextArea } from "@fider/components"
 import { useFider } from "@fider/hooks"
 import { t, Trans } from "@lingui/macro"
 
-interface ModerationPanelProps {
+interface DeletePostModalProps {
   post: Post
   showModal: boolean
   onModalClose: () => void
 }
 
-export const ModerationPanel = (props: ModerationPanelProps) => {
+export const DeletePostModal = (props: DeletePostModalProps) => {
   const fider = useFider()
   const [text, setText] = useState("")
   const [error, setError] = useState<Failure>()
diff --git a/public/pages/ShowPost/components/NotificationsPanel2.tsx b/public/pages/ShowPost/components/FollowButton.tsx
similarity index 88%
rename from public/pages/ShowPost/components/NotificationsPanel2.tsx
rename to public/pages/ShowPost/components/FollowButton.tsx
index 85776d06d..2cad5a67b 100644
--- a/public/pages/ShowPost/components/NotificationsPanel2.tsx
+++ b/public/pages/ShowPost/components/FollowButton.tsx
@@ -6,9 +6,14 @@ import IconVolumeOn from "@fider/assets/images/heroicons-volume-on.svg"
 import IconVolumeOff from "@fider/assets/images/heroicons-volume-off.svg"
 import { VStack } from "@fider/components/layout"
 import { Trans } from "@lingui/macro"
-import { NotificationsPanelProps } from "./NotificationsPanel"
+import { Post } from "@fider/models"
 
-export const NotificationsPanel2 = (props: NotificationsPanelProps) => {
+export interface NotificationsPanelProps {
+  post: Post
+  subscribed: boolean
+}
+
+export const FollowButton = (props: NotificationsPanelProps) => {
   const fider = useFider()
   const [subscribed, setSubscribed] = useState(props.subscribed)
 
diff --git a/public/pages/ShowPost/components/NotificationsPanel.tsx b/public/pages/ShowPost/components/NotificationsPanel.tsx
deleted file mode 100644
index 0de322a1c..000000000
--- a/public/pages/ShowPost/components/NotificationsPanel.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import React, { useState } from "react"
-import { Post } from "@fider/models"
-import { Button, Icon } from "@fider/components"
-import { actions } from "@fider/services"
-import { useFider } from "@fider/hooks"
-import IconVolumeOn from "@fider/assets/images/heroicons-volume-on.svg"
-import IconVolumeOff from "@fider/assets/images/heroicons-volume-off.svg"
-import { VStack } from "@fider/components/layout"
-import { Trans } from "@lingui/macro"
-
-export interface NotificationsPanelProps {
-  post: Post
-  subscribed: boolean
-}
-
-export const NotificationsPanel = (props: NotificationsPanelProps) => {
-  const fider = useFider()
-  const [subscribed, setSubscribed] = useState(props.subscribed)
-
-  const subscribeOrUnsubscribe = async () => {
-    const action = subscribed ? actions.unsubscribe : actions.subscribe
-
-    const response = await action(props.post.number)
-    if (response.ok) {
-      setSubscribed(!subscribed)
-    }
-  }
-
-  if (!fider.session.isAuthenticated) {
-    return null
-  }
-
-  const button = subscribed ? (
-    <Button className="w-full" onClick={subscribeOrUnsubscribe} disabled={fider.isReadOnly}>
-      <Icon sprite={IconVolumeOff} />{" "}
-      <span>
-        <Trans id="label.unsubscribe">Unsubscribe</Trans>
-      </span>
-    </Button>
-  ) : (
-    <Button className="w-full" onClick={subscribeOrUnsubscribe} disabled={fider.isReadOnly}>
-      <Icon sprite={IconVolumeOn} />
-      <span>
-        <Trans id="label.subscribe">Subscribe</Trans>
-      </span>
-    </Button>
-  )
-
-  const text = subscribed ? (
-    <span className="text-muted">
-      <Trans id="showpost.notificationspanel.message.subscribed">You’re receiving notifications about activity on this post.</Trans>
-    </span>
-  ) : (
-    <span className="text-muted">
-      <Trans id="showpost.notificationspanel.message.unsubscribed">You&apos;ll not receive any notification about this post.</Trans>
-    </span>
-  )
-
-  return (
-    <VStack>
-      <span className="text-category">
-        <Trans id="label.notifications">Notifications</Trans>
-      </span>
-      {button}
-      {text}
-    </VStack>
-  )
-}
diff --git a/public/pages/ShowPost/components/TagListItem.tsx b/public/pages/ShowPost/components/TagListItem.tsx
index c9b542184..b4accef09 100644
--- a/public/pages/ShowPost/components/TagListItem.tsx
+++ b/public/pages/ShowPost/components/TagListItem.tsx
@@ -18,8 +18,7 @@ export const TagListItem = (props: TagListItemProps) => {
   return (
     <HStack className="clickable hover:bg-gray-100 rounded py-1" onClick={onClick}>
       <Icon sprite={IconCheck} className={`h-4 text-green-600 ${!props.assigned && "invisible"}`} />
-      <ShowTag tag={props.tag} circular />
-      <span>{props.tag.name}</span>
+      <ShowTag tag={props.tag} />
     </HStack>
   )
 }
diff --git a/public/pages/ShowPost/components/TagsPanel.tsx b/public/pages/ShowPost/components/TagsPanel.tsx
index c58873541..cf6ef268e 100644
--- a/public/pages/ShowPost/components/TagsPanel.tsx
+++ b/public/pages/ShowPost/components/TagsPanel.tsx
@@ -1,12 +1,10 @@
 import React, { useState } from "react"
-import { Tag, Post } from "@fider/models"
+import { Post, Tag } from "@fider/models"
 import { actions } from "@fider/services"
-import { ShowTag, Icon } from "@fider/components"
+import { ShowTag, Button } from "@fider/components"
 import { TagListItem } from "./TagListItem"
 import { useFider } from "@fider/hooks"
 
-import IconPencilAlt from "@fider/assets/images/heroicons-pencil-alt.svg"
-import IconCheckCircle from "@fider/assets/images/heroicons-check-circle.svg"
 import { HStack, VStack } from "@fider/components/layout"
 import { Trans } from "@lingui/macro"
 
@@ -52,29 +50,28 @@ export const TagsPanel = (props: TagsPanelProps) => {
     return null
   }
 
-  const tagsList =
-    assignedTags.length > 0 ? (
-      <VStack spacing={2} className="flex-items-baseline">
-        {assignedTags.map((tag) => (
-          <ShowTag key={tag.id} tag={tag} link />
-        ))}
-      </VStack>
-    ) : (
-      <span className="text-muted">
-        <Trans id="label.none">None</Trans>
-      </span>
-    )
+  const tagsList = (
+    <HStack spacing={2} center={true}>
+      {assignedTags.length > 0 && assignedTags.map((tag) => <ShowTag key={tag.id} tag={tag} link />)}
+      <HStack spacing={1} center={true} className="clickable" onClick={onSubtitleClick}>
+        <span>
+          <Trans id="label.edittags">Edit tags</Trans>
+        </span>
+      </HStack>
+    </HStack>
+  )
 
   const editTagsList = props.tags.length > 0 && (
-    <VStack>
+    <VStack justify="between" className="flex-items-start">
       {props.tags.map((tag) => (
         <TagListItem key={tag.id} tag={tag} assigned={assignedTags.indexOf(tag) >= 0} onClick={assignOrUnassignTag} />
       ))}
+      <Button variant="secondary" size="small" onClick={onSubtitleClick}>
+        <Trans id="action.close">Close</Trans>
+      </Button>
     </VStack>
   )
 
-  const icon = canEdit && (isEditing ? <Icon sprite={IconCheckCircle} className="h-4" /> : <Icon sprite={IconPencilAlt} className="h-4" />)
-
   if (fider.isReadOnly) {
     return (
       <VStack>
@@ -88,15 +85,10 @@ export const TagsPanel = (props: TagsPanelProps) => {
 
   return (
     <VStack>
-      <HStack spacing={2} className="text-category clickable" onClick={onSubtitleClick}>
-        <span>
-          <Trans id="label.tags">Tags</Trans>
-        </span>
-        {icon}
+      <HStack spacing={2} center={true} className="text-primary-base text-xs">
+        {!isEditing && tagsList}
+        {isEditing && editTagsList}
       </HStack>
-
-      {!isEditing && tagsList}
-      {isEditing && editTagsList}
     </VStack>
   )
 }
diff --git a/public/pages/ShowPost/components/TagsPanel2.tsx b/public/pages/ShowPost/components/TagsPanel2.tsx
deleted file mode 100644
index 89266cb56..000000000
--- a/public/pages/ShowPost/components/TagsPanel2.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import React, { useState } from "react"
-import { Tag } from "@fider/models"
-import { actions } from "@fider/services"
-import { ShowTag, Icon, Button } from "@fider/components"
-import { TagListItem } from "./TagListItem"
-import { useFider } from "@fider/hooks"
-
-import IconPlusCircle from "@fider/assets/images/heroicons-pluscircle.svg"
-import { HStack, VStack } from "@fider/components/layout"
-import { Trans } from "@lingui/macro"
-import { TagsPanelProps } from "./TagsPanel"
-
-export const TagsPanel2 = (props: TagsPanelProps) => {
-  const fider = useFider()
-  const canEdit = fider.session.isAuthenticated && fider.session.user.isCollaborator && props.tags.length > 0
-
-  const [isEditing, setIsEditing] = useState(false)
-  const [assignedTags, setAssignedTags] = useState(props.tags.filter((t) => props.post.tags.indexOf(t.slug) >= 0))
-
-  const assignOrUnassignTag = async (tag: Tag) => {
-    const idx = assignedTags.indexOf(tag)
-    let nextAssignedTags: Tag[] = []
-
-    if (idx >= 0) {
-      const response = await actions.unassignTag(tag.slug, props.post.number)
-      if (response.ok) {
-        nextAssignedTags = [...assignedTags]
-        nextAssignedTags.splice(idx, 1)
-      }
-    } else {
-      const response = await actions.assignTag(tag.slug, props.post.number)
-      if (response.ok) {
-        nextAssignedTags = [...assignedTags, tag]
-      }
-    }
-
-    setAssignedTags(nextAssignedTags)
-  }
-
-  const onSubtitleClick = () => {
-    if (canEdit) {
-      setIsEditing(!isEditing)
-    }
-  }
-
-  if (!canEdit && assignedTags.length === 0) {
-    return null
-  }
-
-  const tagsList = (
-    <HStack spacing={2} center={true}>
-      {assignedTags.length > 0 && assignedTags.map((tag) => <ShowTag key={tag.id} tag={tag} link />)}
-      <HStack spacing={1} center={true} className="clickable" onClick={onSubtitleClick}>
-        <Icon sprite={IconPlusCircle} className="h-5 text-primary" />
-
-        {assignedTags.length === 0 && (
-          <span>
-            <Trans id="label.tags">Tags</Trans>
-          </span>
-        )}
-      </HStack>
-    </HStack>
-  )
-
-  const editTagsList = props.tags.length > 0 && (
-    <VStack justify="between" className="flex-items-start">
-      {props.tags.map((tag) => (
-        <TagListItem key={tag.id} tag={tag} assigned={assignedTags.indexOf(tag) >= 0} onClick={assignOrUnassignTag} />
-      ))}
-      <Button variant="secondary" size="small" onClick={onSubtitleClick}>
-        <Trans id="action.close">Close</Trans>
-      </Button>
-    </VStack>
-  )
-
-  if (fider.isReadOnly) {
-    return (
-      <VStack>
-        <HStack spacing={2} className="text-category">
-          <Trans id="label.tags">Tags</Trans>
-        </HStack>
-        {tagsList}
-      </VStack>
-    )
-  }
-
-  return (
-    <VStack>
-      <HStack spacing={2} center={true} className="text-primary-base text-xs">
-        {!isEditing && tagsList}
-        {isEditing && editTagsList}
-      </HStack>
-    </VStack>
-  )
-}

From 3dc728d14edc9eb5d3444c55da132e37c4cbd0fa Mon Sep 17 00:00:00 2001
From: Matt Roberts <roberts.mattroberts@gmail.com>
Date: Wed, 15 Jan 2025 08:58:18 +0000
Subject: [PATCH 15/20] Follow button changes

---
 public/assets/images/heroicons-plus.svg            |  4 ++++
 public/assets/styles/utility/outline.scss          |  6 ++++--
 public/components/common/Button.scss               | 10 ----------
 public/components/common/Button.tsx                |  4 ++--
 .../pages/ShowPost/components/DiscussionPanel.tsx  | 10 ----------
 public/pages/ShowPost/components/FollowButton.tsx  | 14 +++++++-------
 6 files changed, 17 insertions(+), 31 deletions(-)
 create mode 100644 public/assets/images/heroicons-plus.svg

diff --git a/public/assets/images/heroicons-plus.svg b/public/assets/images/heroicons-plus.svg
new file mode 100644
index 000000000..351702a14
--- /dev/null
+++ b/public/assets/images/heroicons-plus.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+</svg>
+
diff --git a/public/assets/styles/utility/outline.scss b/public/assets/styles/utility/outline.scss
index 07541e806..6ffb6693d 100644
--- a/public/assets/styles/utility/outline.scss
+++ b/public/assets/styles/utility/outline.scss
@@ -1,6 +1,8 @@
 *:focus {
   outline: 0;
-  box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, get("colors.primary.light") 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px !important;
-  border-color: get("colors.primary.light") !important;
+  &:not(.no-focus) {
+    border-color: get("colors.primary.light") !important;
+    box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, get("colors.primary.light") 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px !important;
+  }
   transition: all 0.3s ease;
 }
diff --git a/public/components/common/Button.scss b/public/components/common/Button.scss
index 58f8b99ee..b11214249 100644
--- a/public/components/common/Button.scss
+++ b/public/components/common/Button.scss
@@ -30,16 +30,6 @@
     }
   }
 
-  &--quaternary {
-    // color: get("colors.gray.900");
-    background-color: transparent;
-    border: 1px solid get("colors.primary.base");
-  
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-
   &--secondary {
     color: get("colors.gray.900");
     background-color: get("colors.gray.50");
diff --git a/public/components/common/Button.tsx b/public/components/common/Button.tsx
index 208aa5936..ca6623502 100644
--- a/public/components/common/Button.tsx
+++ b/public/components/common/Button.tsx
@@ -10,7 +10,7 @@ interface ButtonProps {
   rel?: "nofollow"
   target?: "_self" | "_blank" | "_parent" | "_top"
   type?: "button" | "submit"
-  variant?: "primary" | "danger" | "secondary" | "tertiary" | "quaternary"
+  variant?: "primary" | "danger" | "secondary" | "tertiary"
   size?: "small" | "default" | "large"
   onClick?: (event: ButtonClickEvent) => Promise<any> | void
 }
@@ -42,7 +42,7 @@ export const Button: React.FC<ButtonProps> = (props) => {
     "c-button--loading": clicked,
     "c-button--disabled": clicked || props.disabled,
     [props.className || ""]: props.className,
-    "shadow-sm": props.variant !== "tertiary",
+    "shadow-sm": props.variant == "primary" || props.variant == "secondary",
   })
 
   let buttonContent: JSX.Element
diff --git a/public/pages/ShowPost/components/DiscussionPanel.tsx b/public/pages/ShowPost/components/DiscussionPanel.tsx
index c4ac3ddd9..279881746 100644
--- a/public/pages/ShowPost/components/DiscussionPanel.tsx
+++ b/public/pages/ShowPost/components/DiscussionPanel.tsx
@@ -2,8 +2,6 @@ import React from "react"
 import { CurrentUser, Comment, Post } from "@fider/models"
 import { ShowComment } from "./ShowComment"
 import { CommentInput } from "./CommentInput"
-import PostIllustration from "@fider/assets/images/undraw-post.svg"
-import { Icon } from "@fider/components"
 import { VStack } from "@fider/components/layout"
 import { Trans } from "@lingui/macro"
 
@@ -27,14 +25,6 @@ export const DiscussionPanel = (props: DiscussionPanelProps) => {
           ))}
           <CommentInput post={props.post} />
         </VStack>
-        {props.comments.length === 0 && (
-          <div className="text-center mt-4">
-            <Icon sprite={PostIllustration} height="120" />
-            <p className="text-xs">
-              <Trans id="showpost.discussionpanel.emptymessage">No one has commented yet.</Trans>
-            </p>
-          </div>
-        )}
       </VStack>
     </>
   )
diff --git a/public/pages/ShowPost/components/FollowButton.tsx b/public/pages/ShowPost/components/FollowButton.tsx
index 2cad5a67b..ecb6c6ebf 100644
--- a/public/pages/ShowPost/components/FollowButton.tsx
+++ b/public/pages/ShowPost/components/FollowButton.tsx
@@ -2,8 +2,8 @@ import React, { useState } from "react"
 import { Button, Icon } from "@fider/components"
 import { actions } from "@fider/services"
 import { useFider } from "@fider/hooks"
-import IconVolumeOn from "@fider/assets/images/heroicons-volume-on.svg"
-import IconVolumeOff from "@fider/assets/images/heroicons-volume-off.svg"
+import IconPlus from "@fider/assets/images/heroicons-plus.svg"
+import IconCheck from "@fider/assets/images/heroicons-check.svg"
 import { VStack } from "@fider/components/layout"
 import { Trans } from "@lingui/macro"
 import { Post } from "@fider/models"
@@ -31,15 +31,15 @@ export const FollowButton = (props: NotificationsPanelProps) => {
   }
 
   const button = subscribed ? (
-    <Button variant="quaternary" className="w-full text-primary-base" onClick={subscribeOrUnsubscribe} disabled={fider.isReadOnly}>
-      <Icon sprite={IconVolumeOff} />{" "}
+    <Button className="w-full text-gray-800 bg-white border border-gray-800 no-focus" onClick={subscribeOrUnsubscribe} disabled={fider.isReadOnly}>
+      <Icon sprite={IconCheck} />{" "}
       <span>
-        <Trans id="label.unfollow">Unfollow</Trans>
+        <Trans id="label.following">Following</Trans>
       </span>
     </Button>
   ) : (
-    <Button variant="quaternary" className="w-full text-primary-base" onClick={subscribeOrUnsubscribe} disabled={fider.isReadOnly}>
-      <Icon sprite={IconVolumeOn} />
+    <Button className="w-full text-blue-500 bg-white border border-blue-500 no-focus" onClick={subscribeOrUnsubscribe} disabled={fider.isReadOnly}>
+      <Icon sprite={IconPlus} />
       <span>
         <Trans id="label.follow">Follow</Trans>
       </span>

From 06c303a1848151cea8238e4759eab51efc0e1b09 Mon Sep 17 00:00:00 2001
From: Matt Roberts <roberts.mattroberts@gmail.com>
Date: Wed, 15 Jan 2025 09:09:36 +0000
Subject: [PATCH 16/20] Vote button set to constant width

---
 public/components/common/Button.tsx              | 8 ++++----
 public/pages/ShowPost/components/VoteSection.tsx | 6 ++++--
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/public/components/common/Button.tsx b/public/components/common/Button.tsx
index ca6623502..6d271849c 100644
--- a/public/components/common/Button.tsx
+++ b/public/components/common/Button.tsx
@@ -12,9 +12,9 @@ interface ButtonProps {
   type?: "button" | "submit"
   variant?: "primary" | "danger" | "secondary" | "tertiary"
   size?: "small" | "default" | "large"
+  style?: React.CSSProperties
   onClick?: (event: ButtonClickEvent) => Promise<any> | void
 }
-
 export class ButtonClickEvent {
   private shouldEnable = true
   public preventEnable(): void {
@@ -50,7 +50,7 @@ export const Button: React.FC<ButtonProps> = (props) => {
 
   if (props.href) {
     buttonContent = (
-      <a href={props.href} rel={props.rel} target={props.target} className={className}>
+      <a href={props.href} rel={props.rel} target={props.target} className={className} style={props.style}>
         {props.children}
       </a>
     )
@@ -76,13 +76,13 @@ export const Button: React.FC<ButtonProps> = (props) => {
     }
 
     buttonContent = (
-      <button type={props.type} className={className} onClick={onClick}>
+      <button type={props.type} className={className} onClick={onClick} style={props.style}>
         {props.children}
       </button>
     )
   } else {
     buttonContent = (
-      <button type={props.type} className={className}>
+      <button type={props.type} className={className} style={props.style}>
         {props.children}
       </button>
     )
diff --git a/public/pages/ShowPost/components/VoteSection.tsx b/public/pages/ShowPost/components/VoteSection.tsx
index 5c8c15b01..dff750d5b 100644
--- a/public/pages/ShowPost/components/VoteSection.tsx
+++ b/public/pages/ShowPost/components/VoteSection.tsx
@@ -53,8 +53,10 @@ export const VoteSection = (props: VoteSectionProps) => {
     <VStack spacing={4}>
       <SignInModal isOpen={isSignInModalOpen} onClose={hideModal} />
       <div className="align-self-start">
-        <Button variant="primary" onClick={voteOrUndo} disabled={isDisabled}>
-          <Icon sprite={icon} /> <span>{buttonText}</span>
+        <Button variant="primary" onClick={voteOrUndo} disabled={isDisabled} style={{ minWidth: "180px" }}>
+          <HStack spacing={2} justify="center" className="w-full">
+            <Icon sprite={icon} /> <span>{buttonText}</span>
+          </HStack>
         </Button>
       </div>
       <HStack>

From 0f0d33d3317c44f4d5d1c03c33d8769b6ef9dff4 Mon Sep 17 00:00:00 2001
From: Matt Roberts <roberts.mattroberts@gmail.com>
Date: Wed, 15 Jan 2025 14:44:46 +0000
Subject: [PATCH 17/20] Post status lozenge

---
 .../images/heroicons-sparkles-outline.svg     |  3 ++
 public/assets/styles/utility/display.scss     |  4 ++
 public/components/Reactions.tsx               |  2 +-
 public/components/ShowPostResponse.tsx        | 23 ++++++-----
 public/components/common/form/Input.tsx       |  2 +-
 public/components/layout/Stack.tsx            |  6 ++-
 public/pages/Home/components/ListPosts.tsx    |  8 ++--
 public/pages/ShowPost/ShowPost.page.tsx       | 40 +++++++++----------
 .../ShowPost/components/CommentInput.tsx      |  2 +-
 .../pages/ShowPost/components/ShowComment.tsx |  2 +-
 .../pages/ShowPost/components/TagsPanel.tsx   |  6 +--
 11 files changed, 55 insertions(+), 43 deletions(-)
 create mode 100644 public/assets/images/heroicons-sparkles-outline.svg

diff --git a/public/assets/images/heroicons-sparkles-outline.svg b/public/assets/images/heroicons-sparkles-outline.svg
new file mode 100644
index 000000000..a9d0a4d22
--- /dev/null
+++ b/public/assets/images/heroicons-sparkles-outline.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z" />
+</svg>
diff --git a/public/assets/styles/utility/display.scss b/public/assets/styles/utility/display.scss
index 70738cc13..527acd1ed 100644
--- a/public/assets/styles/utility/display.scss
+++ b/public/assets/styles/utility/display.scss
@@ -110,6 +110,10 @@
   align-items: start;
 }
 
+.flex-items-end {
+  align-items: end;
+}
+
 .justify-between {
   justify-content: space-between;
 }
diff --git a/public/components/Reactions.tsx b/public/components/Reactions.tsx
index 613030a75..2bcf0ee06 100644
--- a/public/components/Reactions.tsx
+++ b/public/components/Reactions.tsx
@@ -34,7 +34,7 @@ export const Reactions: React.FC<ReactionsProps> = ({ emojiSelectorRef, toggleRe
 
   return (
     <div ref={emojiSelectorRef}>
-      <HStack spacing={2} center={true} className="mt-2 c-reactions relative">
+      <HStack spacing={2} align="center" className="mt-2 c-reactions relative">
         {fider.session.isAuthenticated && (
           <>
             <span
diff --git a/public/components/ShowPostResponse.tsx b/public/components/ShowPostResponse.tsx
index 065b0d093..e5c6a0129 100644
--- a/public/components/ShowPostResponse.tsx
+++ b/public/components/ShowPostResponse.tsx
@@ -2,10 +2,9 @@ import React from "react"
 import { PostResponse, PostStatus } from "@fider/models"
 import { Icon, Markdown } from "@fider/components"
 import HeroIconDuplicate from "@fider/assets/images/heroicons-duplicate.svg"
-import HeroIconSmile from "@fider/assets/images/heroicons-smile.svg"
-import HeroIconStar from "@fider/assets/images/heroicons-star.svg"
+import HeroIconCheck from "@fider/assets/images/heroicons-check-circle.svg"
+import HeroIconSparkles from "@fider/assets/images/heroicons-sparkles-outline.svg"
 import HeroIconThumbsUp from "@fider/assets/images/heroicons-thumbsup.svg"
-import HeroIconInbox from "@fider/assets/images/heroicons-inbox.svg"
 import { t } from "@lingui/macro"
 
 import { HStack } from "./layout"
@@ -76,23 +75,27 @@ const getStatusIcon = (status: PostStatus): SpriteSymbol => {
     case PostStatus.Duplicate:
       return HeroIconDuplicate
     case PostStatus.Completed:
-      return HeroIconStar
+      return HeroIconCheck
     case PostStatus.Planned:
       return HeroIconThumbsUp
     case PostStatus.Started:
-      return HeroIconSmile
+      return HeroIconSparkles
   }
-  return HeroIconInbox
+  return HeroIconThumbsUp
 }
 
-export const ResponseStatusLabel = (props: PostResponseProps): JSX.Element | null => {
+export const ResponseLozenge = (props: PostResponseProps): JSX.Element | null => {
   const status = PostStatus.Get(props.status)
 
+  if (status === PostStatus.Open) {
+    return <div />
+  }
+
   return (
     <>
-      <HStack>
-        <Icon sprite={getStatusIcon(status)} className={`h-6 c-status-col--${status.value}`} />
-        <span className={`text-semibold text-lg c-status-col--${status.value}`}>{status.title}</span>
+      <HStack align="start" className="align-self-start bg-blue-100 border border-blue-300 rounded-full p-1 px-3 mb-4">
+        <Icon sprite={getStatusIcon(status)} className={`h-5 c-status-col--${status.value}`} />
+        <span className={`text-semibold c-status-col--${status.value}`}>{status.title}</span>
       </HStack>
     </>
   )
diff --git a/public/components/common/form/Input.tsx b/public/components/common/form/Input.tsx
index 81e0fdd93..917b5ff0f 100644
--- a/public/components/common/form/Input.tsx
+++ b/public/components/common/form/Input.tsx
@@ -53,7 +53,7 @@ export const Input: React.FunctionComponent<InputProps> = (props) => {
               {props.afterLabel}
             </label>
           )}
-          <HStack spacing={0} center={!!props.icon} className="relative">
+          <HStack spacing={0} align={props.icon ? "center" : "start"} className="relative">
             <input
               className={classSet({
                 "c-input": true,
diff --git a/public/components/layout/Stack.tsx b/public/components/layout/Stack.tsx
index be356c4ca..562a3feb9 100644
--- a/public/components/layout/Stack.tsx
+++ b/public/components/layout/Stack.tsx
@@ -5,9 +5,9 @@ interface StackProps {
   className?: string
   children: React.ReactNode
   onClick?: () => void
-  center?: boolean
   divide?: boolean
   justify?: "between" | "evenly" | "full" | "center"
+  align?: "start" | "center" | "end"
   spacing?: 0 | 1 | 2 | 4 | 6 | 8
 }
 
@@ -20,11 +20,13 @@ const Stack = (props: StackProps, dir: "x" | "y") => {
     "flex-y": dir === "y",
     [`flex--spacing-${spacing}`]: spacing > 0 && !props.divide,
     [`flex--divide-${spacing}`]: spacing > 0 && !!props.divide,
-    "flex-items-center": dir === "x" && props.center !== false,
     "justify-between": props.justify === "between",
     "justify-evenly": props.justify === "evenly",
     "justify-full": props.justify === "full",
     "justify-center": props.justify === "center",
+    "flex-items-start": props.align === "start",
+    "flex-items-center": props.align === "center" && dir === "x",
+    "items-end": props.align === "end",
   })
 
   return (
diff --git a/public/pages/Home/components/ListPosts.tsx b/public/pages/Home/components/ListPosts.tsx
index cc02b1faf..3c0758428 100644
--- a/public/pages/Home/components/ListPosts.tsx
+++ b/public/pages/Home/components/ListPosts.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import { Post, Tag, CurrentUser } from "@fider/models"
-import { ShowTag, VoteCounter, Markdown, Icon, ResponseStatusLabel } from "@fider/components"
+import { ShowTag, VoteCounter, Markdown, Icon, ResponseLozenge } from "@fider/components"
 import IconChatAlt2 from "@fider/assets/images/heroicons-chat-alt-2.svg"
 import { HStack, VStack } from "@fider/components/layout"
 
@@ -12,7 +12,7 @@ interface ListPostsProps {
 
 const ListPostItem = (props: { post: Post; user?: CurrentUser; tags: Tag[] }) => {
   return (
-    <HStack center={true}>
+    <HStack align="center">
       <div className="align-self-start">
         <VoteCounter post={props.post} />
       </div>
@@ -28,7 +28,7 @@ const ListPostItem = (props: { post: Post; user?: CurrentUser; tags: Tag[] }) =>
           )}
         </HStack>
         <Markdown className="text-gray-600" maxLength={300} text={props.post.description} style="plainText" />
-        <ResponseStatusLabel status={props.post.status} response={props.post.response} />
+        <ResponseLozenge status={props.post.status} response={props.post.response} />
         {props.tags.length >= 1 && (
           <HStack className="flex-wrap">
             {props.tags.map((tag) => (
@@ -51,7 +51,7 @@ export const ListPosts = (props: ListPostsProps) => {
   }
 
   return (
-    <VStack spacing={4} divide={true} center={true}>
+    <VStack spacing={4} divide={true} align="center">
       {props.posts.map((post) => (
         <ListPostItem key={post.id} post={post} tags={props.tags.filter((tag) => post.tags.indexOf(tag.slug) >= 0)} />
       ))}
diff --git a/public/pages/ShowPost/ShowPost.page.tsx b/public/pages/ShowPost/ShowPost.page.tsx
index a345d7c12..6407ab931 100644
--- a/public/pages/ShowPost/ShowPost.page.tsx
+++ b/public/pages/ShowPost/ShowPost.page.tsx
@@ -7,7 +7,7 @@ import { actions, clearUrlHash, Failure, Fider, notify, timeAgo } from "@fider/s
 import IconDotsHorizontal from "@fider/assets/images/heroicons-dots-horizontal.svg"
 
 import {
-  ResponseStatusLabel,
+  ResponseLozenge,
   ResponseDetails,
   Button,
   UserName,
@@ -192,7 +192,20 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
               <div className="p-show-post__header-col">
                 <VStack spacing={8}>
                   <HStack justify="between">
-                    <ResponseStatusLabel status={this.props.post.status} response={this.props.post.response} />
+                    <VStack align="start">
+                      <ResponseLozenge status={this.props.post.status} response={this.props.post.response} />
+                      <div className="flex-grow">
+                        {this.state.editMode ? (
+                          <Form error={this.state.error}>
+                            <Input field="title" maxLength={100} value={this.state.newTitle} onChange={this.setNewTitle} />
+                          </Form>
+                        ) : (
+                          <>
+                            <h1 className="text-large">{this.props.post.title}</h1>
+                          </>
+                        )}
+                      </div>
+                    </VStack>
                     {!this.state.editMode && (
                       <Dropdown position="left" renderHandle={<Icon sprite={IconDotsHorizontal} width="24" height="24" />}>
                         <Dropdown.ListItem onClick={this.onActionSelected("copy")}>
@@ -220,23 +233,10 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
                   </HStack>
                   <ResponseDetails status={this.props.post.status} response={this.props.post.response} />
 
-                  <HStack justify="between">
-                    <div className="flex-grow">
-                      {this.state.editMode ? (
-                        <Form error={this.state.error}>
-                          <Input field="title" maxLength={100} value={this.state.newTitle} onChange={this.setNewTitle} />
-                        </Form>
-                      ) : (
-                        <>
-                          <h1 className="text-large">{this.props.post.title}</h1>
-                        </>
-                      )}
-                    </div>
-                    <DeletePostModal onModalClose={() => this.setShowDeleteModal(false)} showModal={this.state.showDeleteModal} post={this.props.post} />
-                    {Fider.session.user.isCollaborator && (
-                      <ResponseModal onCloseModal={() => this.setShowResponseModal(false)} showModal={this.state.showResponseModal} post={this.props.post} />
-                    )}
-                  </HStack>
+                  <DeletePostModal onModalClose={() => this.setShowDeleteModal(false)} showModal={this.state.showDeleteModal} post={this.props.post} />
+                  {Fider.session.user.isCollaborator && (
+                    <ResponseModal onCloseModal={() => this.setShowResponseModal(false)} showModal={this.state.showResponseModal} post={this.props.post} />
+                  )}
                   {!this.state.editMode && (
                     <HStack>
                       <Avatar user={this.props.post.user} />
@@ -272,7 +272,7 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
 
                   <VStack spacing={4}>
                     {!this.state.editMode ? (
-                      <HStack justify="between" center={false}>
+                      <HStack justify="between">
                         <VoteSection post={this.props.post} votes={this.props.votes} />
                         <FollowButton post={this.props.post} subscribed={this.props.subscribed} />
                       </HStack>
diff --git a/public/pages/ShowPost/components/CommentInput.tsx b/public/pages/ShowPost/components/CommentInput.tsx
index e3ffb3e19..d5e17f523 100644
--- a/public/pages/ShowPost/components/CommentInput.tsx
+++ b/public/pages/ShowPost/components/CommentInput.tsx
@@ -55,7 +55,7 @@ export const CommentInput = (props: CommentInputProps) => {
   return (
     <>
       <SignInModal isOpen={isSignInModalOpen} onClose={hideModal} />
-      <HStack spacing={2} center={false} className="c-comment-input">
+      <HStack spacing={2} className="c-comment-input">
         {Fider.session.isAuthenticated && <Avatar user={Fider.session.user} />}
         <div className="flex-grow bg-gray-50 rounded-md p-2">
           <Form error={error}>
diff --git a/public/pages/ShowPost/components/ShowComment.tsx b/public/pages/ShowPost/components/ShowComment.tsx
index c49f281d5..193d24458 100644
--- a/public/pages/ShowPost/components/ShowComment.tsx
+++ b/public/pages/ShowPost/components/ShowComment.tsx
@@ -173,7 +173,7 @@ export const ShowComment = (props: ShowCommentProps) => {
 
   return (
     <div id={`comment-${comment.id}`}>
-      <HStack spacing={2} center={false} className="c-comment flex-items-baseline">
+      <HStack spacing={2} className="c-comment flex-items-baseline">
         {modal()}
         <div className="pt-4">
           <Avatar user={comment.user} />
diff --git a/public/pages/ShowPost/components/TagsPanel.tsx b/public/pages/ShowPost/components/TagsPanel.tsx
index cf6ef268e..8fbb3e098 100644
--- a/public/pages/ShowPost/components/TagsPanel.tsx
+++ b/public/pages/ShowPost/components/TagsPanel.tsx
@@ -51,9 +51,9 @@ export const TagsPanel = (props: TagsPanelProps) => {
   }
 
   const tagsList = (
-    <HStack spacing={2} center={true}>
+    <HStack spacing={2} align="center">
       {assignedTags.length > 0 && assignedTags.map((tag) => <ShowTag key={tag.id} tag={tag} link />)}
-      <HStack spacing={1} center={true} className="clickable" onClick={onSubtitleClick}>
+      <HStack spacing={1} align="center" className="clickable" onClick={onSubtitleClick}>
         <span>
           <Trans id="label.edittags">Edit tags</Trans>
         </span>
@@ -85,7 +85,7 @@ export const TagsPanel = (props: TagsPanelProps) => {
 
   return (
     <VStack>
-      <HStack spacing={2} center={true} className="text-primary-base text-xs">
+      <HStack spacing={2} align="center" className="text-primary-base text-xs">
         {!isEditing && tagsList}
         {isEditing && editTagsList}
       </HStack>

From bf428e90814bb89058da0bc487eac720e0007708 Mon Sep 17 00:00:00 2001
From: Matt Roberts <roberts.mattroberts@gmail.com>
Date: Wed, 15 Jan 2025 21:23:31 +0000
Subject: [PATCH 18/20] Some semblence of a working post listing

---
 public/assets/styles/utility/display.scss  | 12 +++++--
 public/components/ShowPostResponse.tsx     | 41 +++++++---------------
 public/components/ShowPostStatus.scss      | 28 ---------------
 public/components/ShowPostStatus.tsx       |  2 +-
 public/components/VoteCounter.tsx          |  1 +
 public/pages/Home/components/ListPosts.tsx | 14 +++++---
 6 files changed, 33 insertions(+), 65 deletions(-)
 delete mode 100644 public/components/ShowPostStatus.scss

diff --git a/public/assets/styles/utility/display.scss b/public/assets/styles/utility/display.scss
index 527acd1ed..0b58e6d89 100644
--- a/public/assets/styles/utility/display.scss
+++ b/public/assets/styles/utility/display.scss
@@ -98,6 +98,10 @@
   align-self: start;
 }
 
+.align-self-center {
+  align-self: center;
+}
+
 .flex-items-center {
   align-items: center;
 }
@@ -146,7 +150,7 @@
   .flex-x.flex--divide-#{$i} > * + * {
     padding-right: spacing($i);
     padding-left: spacing($i);
-    border: 0 solid get("colors.gray.100");
+    border: 0 solid get("colors.gray.200");
     border-left-width: 1px;
   }
   .flex-x.flex--divide-#{$i} > *:last-child {
@@ -158,7 +162,7 @@
   .flex-y.flex--divide-#{$i} > * + * {
     padding-top: spacing($i);
     padding-bottom: spacing($i);
-    border: 0 solid get("colors.gray.100");
+    border: 0 solid get("colors.gray.200");
     border-top-width: 1px;
   }
   .flex-y.flex--divide-#{$i} > *:last-child {
@@ -199,6 +203,10 @@
   border-top: 1px solid;
 }
 
+.bl {
+  border-left: 1px solid;
+}
+
 .overflow-scroll {
   overflow: scroll;
 }
diff --git a/public/components/ShowPostResponse.tsx b/public/components/ShowPostResponse.tsx
index e5c6a0129..72eb7256f 100644
--- a/public/components/ShowPostResponse.tsx
+++ b/public/components/ShowPostResponse.tsx
@@ -5,31 +5,12 @@ import HeroIconDuplicate from "@fider/assets/images/heroicons-duplicate.svg"
 import HeroIconCheck from "@fider/assets/images/heroicons-check-circle.svg"
 import HeroIconSparkles from "@fider/assets/images/heroicons-sparkles-outline.svg"
 import HeroIconThumbsUp from "@fider/assets/images/heroicons-thumbsup.svg"
+import HeroIconThumbsDown from "@fider/assets/images/heroicons-thumbsdown.svg"
 import { t } from "@lingui/macro"
 
 import { HStack } from "./layout"
 import { timeSince } from "@fider/services"
 
-// const DuplicateDetails = (props: PostResponseProps): JSX.Element | null => {
-//   if (!props.response) {
-//     return null
-//   }
-
-//   const original = props.response.original
-//   if (!original) {
-//     return null
-//   }
-
-//   return (
-//     <HStack>
-//       <Icon sprite={HeroIconDuplicate} className="h-6 text-gray-500" />
-//       <a className="text-link" href={`/posts/${original.number}/${original.slug}`}>
-//         {original.title}
-//       </a>
-//     </HStack>
-//   )
-// }
-
 interface PostResponseProps {
   status: string
   response: PostResponse | null
@@ -70,22 +51,24 @@ export const ResponseDetails = (props: PostResponseProps): JSX.Element | null =>
   )
 }
 
-const getStatusIcon = (status: PostStatus): SpriteSymbol => {
+const getLozengeProps = (status: PostStatus): { icon: SpriteSymbol; bg: string; color: string; border: string } => {
   switch (status) {
+    case PostStatus.Declined:
+      return { icon: HeroIconThumbsDown, bg: "bg-red-100", color: "text-red-800", border: "border-red-300" }
     case PostStatus.Duplicate:
-      return HeroIconDuplicate
+      return { icon: HeroIconDuplicate, bg: "bg-yellow-100", color: "text-yellow-800", border: "border-yellow-400" }
     case PostStatus.Completed:
-      return HeroIconCheck
+      return { icon: HeroIconCheck, bg: "bg-green-300", color: "text-green-800", border: "border-green-500" }
     case PostStatus.Planned:
-      return HeroIconThumbsUp
-    case PostStatus.Started:
-      return HeroIconSparkles
+      return { icon: HeroIconThumbsUp, bg: "bg-blue-100", color: "text-blue-700", border: "border-blue-400" }
+    default:
+      return { icon: HeroIconSparkles, bg: "bg-green-100", color: "text-green-700", border: "border-green-400" }
   }
-  return HeroIconThumbsUp
 }
 
 export const ResponseLozenge = (props: PostResponseProps): JSX.Element | null => {
   const status = PostStatus.Get(props.status)
+  const { icon, bg, color, border } = getLozengeProps(status)
 
   if (status === PostStatus.Open) {
     return <div />
@@ -93,8 +76,8 @@ export const ResponseLozenge = (props: PostResponseProps): JSX.Element | null =>
 
   return (
     <>
-      <HStack align="start" className="align-self-start bg-blue-100 border border-blue-300 rounded-full p-1 px-3 mb-4">
-        <Icon sprite={getStatusIcon(status)} className={`h-5 c-status-col--${status.value}`} />
+      <HStack align="start" className={`align-self-start ${color} ${bg} border ${border} rounded-full p-1 px-3`}>
+        <Icon sprite={icon} className={`h-5 c-status-col--${status.value}`} />
         <span className={`text-semibold c-status-col--${status.value}`}>{status.title}</span>
       </HStack>
     </>
diff --git a/public/components/ShowPostStatus.scss b/public/components/ShowPostStatus.scss
deleted file mode 100644
index 86dbdd1ba..000000000
--- a/public/components/ShowPostStatus.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-@import "~@fider/assets/styles/variables.scss";
-
-.c-status-col {
-
-  &--open {
-    color: get("colors.blue.600");
-  }
-
-  &--planned {
-    color: #6435c9;
-  }
-
-  &--started {
-    color: #2185d0;
-  }
-
-  &--completed {
-    color: #21ba45;
-  }
-
-  &--declined {
-    color: #db2828;
-  }
-
-  &--duplicate {
-    color: #d6a100;
-  }
-}
diff --git a/public/components/ShowPostStatus.tsx b/public/components/ShowPostStatus.tsx
index b41765fc0..aa3190c7e 100644
--- a/public/components/ShowPostStatus.tsx
+++ b/public/components/ShowPostStatus.tsx
@@ -1,4 +1,4 @@
-import "./ShowPostStatus.scss"
+// import "./ShowPostStatus.scss"
 
 import React from "react"
 import { PostStatus } from "@fider/models"
diff --git a/public/components/VoteCounter.tsx b/public/components/VoteCounter.tsx
index 88f658570..bab60a2ee 100644
--- a/public/components/VoteCounter.tsx
+++ b/public/components/VoteCounter.tsx
@@ -38,6 +38,7 @@ export const VoteCounter = (props: VoteCounterProps) => {
   const isDisabled = status.closed || fider.isReadOnly
 
   const className = classSet({
+    "border-gray-200 border rounded-md bg-gray-100": true,
     "c-vote-counter__button": true,
     "c-vote-counter__button--voted": !status.closed && hasVoted,
     "c-vote-counter__button--disabled": isDisabled,
diff --git a/public/pages/Home/components/ListPosts.tsx b/public/pages/Home/components/ListPosts.tsx
index 3c0758428..01c50c35d 100644
--- a/public/pages/Home/components/ListPosts.tsx
+++ b/public/pages/Home/components/ListPosts.tsx
@@ -12,11 +12,16 @@ interface ListPostsProps {
 
 const ListPostItem = (props: { post: Post; user?: CurrentUser; tags: Tag[] }) => {
   return (
-    <HStack align="center">
-      <div className="align-self-start">
+    <HStack spacing={4}>
+      <div>
         <VoteCounter post={props.post} />
       </div>
       <VStack className="w-full" spacing={2}>
+        {props.post.status !== "open" && (
+          <div className="mb-2 align-self-start">
+            <ResponseLozenge status={props.post.status} response={props.post.response} />
+          </div>
+        )}
         <HStack justify="between">
           <a className="text-title hover:text-primary-base" href={`/posts/${props.post.number}/${props.post.slug}`}>
             {props.post.title}
@@ -27,8 +32,7 @@ const ListPostItem = (props: { post: Post; user?: CurrentUser; tags: Tag[] }) =>
             </HStack>
           )}
         </HStack>
-        <Markdown className="text-gray-600" maxLength={300} text={props.post.description} style="plainText" />
-        <ResponseLozenge status={props.post.status} response={props.post.response} />
+        <Markdown className="text-gray-700" maxLength={300} text={props.post.description} style="plainText" />
         {props.tags.length >= 1 && (
           <HStack className="flex-wrap">
             {props.tags.map((tag) => (
@@ -51,7 +55,7 @@ export const ListPosts = (props: ListPostsProps) => {
   }
 
   return (
-    <VStack spacing={4} divide={true} align="center">
+    <VStack spacing={4} align="center" divide>
       {props.posts.map((post) => (
         <ListPostItem key={post.id} post={post} tags={props.tags.filter((tag) => post.tags.indexOf(tag.slug) >= 0)} />
       ))}

From 05de130fce78607495c2c1c83ac20e82d6f1ee85 Mon Sep 17 00:00:00 2001
From: Matt Roberts <roberts.mattroberts@gmail.com>
Date: Thu, 16 Jan 2025 08:25:45 +0000
Subject: [PATCH 19/20] Testing out a vote button with border.

---
 locale/de/client.json                   | 1 +
 locale/el/client.json                   | 1 +
 locale/en/client.json                   | 1 +
 locale/es-ES/client.json                | 1 +
 locale/fr/client.json                   | 1 +
 locale/it/client.json                   | 1 +
 locale/nl/client.json                   | 1 +
 locale/pl/client.json                   | 1 +
 locale/pt-BR/client.json                | 1 +
 locale/ru/client.json                   | 1 +
 locale/sk/client.json                   | 1 +
 locale/sv-SE/client.json                | 1 +
 locale/tr/client.json                   | 1 +
 locale/zh-CN/client.json                | 1 +
 public/components/VoteCounter.scss      | 4 ++--
 public/pages/ShowPost/ShowPost.page.tsx | 6 +++++-
 16 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/locale/de/client.json b/locale/de/client.json
index d45b670ef..4cca59f92 100644
--- a/locale/de/client.json
+++ b/locale/de/client.json
@@ -57,6 +57,7 @@
   "label.edittags": "",
   "label.email": "E-Mail",
   "label.follow": "",
+  "label.following": "",
   "label.gravatar": "Gravatar",
   "label.letter": "Buchstabe",
   "label.moderation": "Moderieren",
diff --git a/locale/el/client.json b/locale/el/client.json
index 9d1c5edcb..9cd6f7331 100644
--- a/locale/el/client.json
+++ b/locale/el/client.json
@@ -57,6 +57,7 @@
   "label.edittags": "",
   "label.email": "Email",
   "label.follow": "",
+  "label.following": "",
   "label.gravatar": "Gravatar",
   "label.letter": "Γράμμα",
   "label.moderation": "Εποπτεία",
diff --git a/locale/en/client.json b/locale/en/client.json
index 5913f24c3..539f96172 100644
--- a/locale/en/client.json
+++ b/locale/en/client.json
@@ -57,6 +57,7 @@
   "label.edittags": "Edit tags",
   "label.email": "Email",
   "label.follow": "Follow",
+  "label.following": "Following",
   "label.gravatar": "Gravatar",
   "label.letter": "Letter",
   "label.moderation": "Moderation",
diff --git a/locale/es-ES/client.json b/locale/es-ES/client.json
index b0dbbf0a6..d7ecf2227 100644
--- a/locale/es-ES/client.json
+++ b/locale/es-ES/client.json
@@ -57,6 +57,7 @@
   "label.edittags": "",
   "label.email": "Correo electrónico",
   "label.follow": "",
+  "label.following": "",
   "label.gravatar": "Gravatar",
   "label.letter": "Letras",
   "label.moderation": "Moderación",
diff --git a/locale/fr/client.json b/locale/fr/client.json
index fc88b7029..195274842 100644
--- a/locale/fr/client.json
+++ b/locale/fr/client.json
@@ -57,6 +57,7 @@
   "label.edittags": "",
   "label.email": "E-mail",
   "label.follow": "",
+  "label.following": "",
   "label.gravatar": "Gravatar",
   "label.letter": "Lettre",
   "label.moderation": "Modération",
diff --git a/locale/it/client.json b/locale/it/client.json
index 3052baaf5..e86e1dea6 100644
--- a/locale/it/client.json
+++ b/locale/it/client.json
@@ -57,6 +57,7 @@
   "label.edittags": "",
   "label.email": "Email",
   "label.follow": "",
+  "label.following": "",
   "label.gravatar": "Gravatar",
   "label.letter": "Lettera",
   "label.moderation": "Moderazione",
diff --git a/locale/nl/client.json b/locale/nl/client.json
index dfa1acf36..e3c0b89f1 100644
--- a/locale/nl/client.json
+++ b/locale/nl/client.json
@@ -57,6 +57,7 @@
   "label.edittags": "",
   "label.email": "E-mailadres",
   "label.follow": "",
+  "label.following": "",
   "label.gravatar": "Gravatar",
   "label.letter": "Initialen",
   "label.moderation": "Moderatie",
diff --git a/locale/pl/client.json b/locale/pl/client.json
index 150e1c3dc..3f19d7977 100644
--- a/locale/pl/client.json
+++ b/locale/pl/client.json
@@ -57,6 +57,7 @@
   "label.edittags": "",
   "label.email": "Email",
   "label.follow": "",
+  "label.following": "",
   "label.gravatar": "Gravatar",
   "label.letter": "Litera",
   "label.moderation": "Moderacja",
diff --git a/locale/pt-BR/client.json b/locale/pt-BR/client.json
index c93beb5a0..e531e29e5 100644
--- a/locale/pt-BR/client.json
+++ b/locale/pt-BR/client.json
@@ -57,6 +57,7 @@
   "label.edittags": "",
   "label.email": "E-mail",
   "label.follow": "",
+  "label.following": "",
   "label.gravatar": "Gravatar",
   "label.letter": "Letra",
   "label.moderation": "Moderação",
diff --git a/locale/ru/client.json b/locale/ru/client.json
index a17e82a7d..57ddebc4a 100644
--- a/locale/ru/client.json
+++ b/locale/ru/client.json
@@ -57,6 +57,7 @@
   "label.edittags": "",
   "label.email": "Адрес электронной почты",
   "label.follow": "",
+  "label.following": "",
   "label.gravatar": "Gravatar",
   "label.letter": "Буквенный",
   "label.moderation": "Модерация",
diff --git a/locale/sk/client.json b/locale/sk/client.json
index 80b40f14f..1b9312e7b 100644
--- a/locale/sk/client.json
+++ b/locale/sk/client.json
@@ -57,6 +57,7 @@
   "label.edittags": "",
   "label.email": "Email",
   "label.follow": "",
+  "label.following": "",
   "label.gravatar": "Gravatar",
   "label.letter": "Písmeno",
   "label.moderation": "Správca",
diff --git a/locale/sv-SE/client.json b/locale/sv-SE/client.json
index 6b4fc5527..08295b39b 100644
--- a/locale/sv-SE/client.json
+++ b/locale/sv-SE/client.json
@@ -57,6 +57,7 @@
   "label.edittags": "",
   "label.email": "E-post",
   "label.follow": "",
+  "label.following": "",
   "label.gravatar": "Gravatar",
   "label.letter": "Bokstav",
   "label.moderation": "Moderering",
diff --git a/locale/tr/client.json b/locale/tr/client.json
index 0a2d20763..9af0c41c1 100644
--- a/locale/tr/client.json
+++ b/locale/tr/client.json
@@ -57,6 +57,7 @@
   "label.edittags": "",
   "label.email": "E-Posta",
   "label.follow": "",
+  "label.following": "",
   "label.gravatar": "Gravatar",
   "label.letter": "Harf",
   "label.moderation": "Moderasyon",
diff --git a/locale/zh-CN/client.json b/locale/zh-CN/client.json
index a981ec7a6..5c92eac5e 100644
--- a/locale/zh-CN/client.json
+++ b/locale/zh-CN/client.json
@@ -57,6 +57,7 @@
   "label.edittags": "",
   "label.email": "邮箱",
   "label.follow": "",
+  "label.following": "",
   "label.gravatar": "Gravatar",
   "label.letter": "稍后",
   "label.moderation": "管理",
diff --git a/public/components/VoteCounter.scss b/public/components/VoteCounter.scss
index a21e7fe1d..9eddddece 100644
--- a/public/components/VoteCounter.scss
+++ b/public/components/VoteCounter.scss
@@ -3,11 +3,11 @@
 .c-vote-counter {
   &__button {
     font-size: get("font.size.lg");
-    border: none;
+    // border: none;
     width: sizing(11);
     font-weight: get("font.weight.bold");
     cursor: pointer;
-    background-color: transparent;
+    // background-color: transparent;
     text-align: center;
     margin: 0 auto;
     padding: 0 0;
diff --git a/public/pages/ShowPost/ShowPost.page.tsx b/public/pages/ShowPost/ShowPost.page.tsx
index 6407ab931..481e175d7 100644
--- a/public/pages/ShowPost/ShowPost.page.tsx
+++ b/public/pages/ShowPost/ShowPost.page.tsx
@@ -193,7 +193,11 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
                 <VStack spacing={8}>
                   <HStack justify="between">
                     <VStack align="start">
-                      <ResponseLozenge status={this.props.post.status} response={this.props.post.response} />
+                      {this.props.post.status !== "open" && (
+                        <div className="mb-4">
+                          <ResponseLozenge status={this.props.post.status} response={this.props.post.response} />
+                        </div>
+                      )}
                       <div className="flex-grow">
                         {this.state.editMode ? (
                           <Form error={this.state.error}>

From 0d3d996821511a77246456c75ea1cf7828eff2f6 Mon Sep 17 00:00:00 2001
From: Matt Roberts <roberts.mattroberts@gmail.com>
Date: Thu, 16 Jan 2025 12:01:38 +0000
Subject: [PATCH 20/20] Smaller base font size. More post listing changes

---
 public/assets/styles/utility/text.scss     | 4 ++++
 public/assets/styles/variables/_text.scss  | 2 +-
 public/components/layout/Stack.tsx         | 4 ++--
 public/pages/Home/components/ListPosts.tsx | 4 ++--
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/public/assets/styles/utility/text.scss b/public/assets/styles/utility/text.scss
index cf6acbc31..273d82252 100644
--- a/public/assets/styles/utility/text.scss
+++ b/public/assets/styles/utility/text.scss
@@ -97,6 +97,10 @@ pre:last-child {
   font-size: get("font.size.2xs");
 }
 
+.text-xl {
+  font-size: get("font.size.xl");
+}
+
 .hover\:underline:hover {
   text-decoration: underline;
 }
diff --git a/public/assets/styles/variables/_text.scss b/public/assets/styles/variables/_text.scss
index e5f5941df..8d8ca00ef 100644
--- a/public/assets/styles/variables/_text.scss
+++ b/public/assets/styles/variables/_text.scss
@@ -11,7 +11,7 @@ $font: (
     "2xs": 12px,
     xs: 13px,
     sm: 14px,
-    base: 16px,
+    base: 15px,
     lg: 18px,
     xl: 22px,
     "2xl": 26px,
diff --git a/public/components/layout/Stack.tsx b/public/components/layout/Stack.tsx
index 562a3feb9..07ab0658e 100644
--- a/public/components/layout/Stack.tsx
+++ b/public/components/layout/Stack.tsx
@@ -25,8 +25,8 @@ const Stack = (props: StackProps, dir: "x" | "y") => {
     "justify-full": props.justify === "full",
     "justify-center": props.justify === "center",
     "flex-items-start": props.align === "start",
-    "flex-items-center": props.align === "center" && dir === "x",
-    "items-end": props.align === "end",
+    "flex-items-center": props.align === "center" || (dir === "x" && props.align === undefined),
+    "flex-items-end": props.align === "end",
   })
 
   return (
diff --git a/public/pages/Home/components/ListPosts.tsx b/public/pages/Home/components/ListPosts.tsx
index 01c50c35d..21895c920 100644
--- a/public/pages/Home/components/ListPosts.tsx
+++ b/public/pages/Home/components/ListPosts.tsx
@@ -12,7 +12,7 @@ interface ListPostsProps {
 
 const ListPostItem = (props: { post: Post; user?: CurrentUser; tags: Tag[] }) => {
   return (
-    <HStack spacing={4}>
+    <HStack spacing={4} align="start">
       <div>
         <VoteCounter post={props.post} />
       </div>
@@ -55,7 +55,7 @@ export const ListPosts = (props: ListPostsProps) => {
   }
 
   return (
-    <VStack spacing={4} align="center" divide>
+    <VStack spacing={4} divide>
       {props.posts.map((post) => (
         <ListPostItem key={post.id} post={post} tags={props.tags.filter((tag) => post.tags.indexOf(tag.slug) >= 0)} />
       ))}