add reactions support to thread

sass/style.scss

@@ -166,18 +166,22 @@ body {
 .post-content-container {
   display: grid;
   grid-template-columns: 1fr;
-  grid-template-rows: 70px 2.5fr;
+  grid-template-rows: min-content 1fr min-content;
   gap: 0px 0px;
   grid-auto-flow: row;
   grid-template-areas:
     "post-info"
-    "post-content";
+    "post-content"
+    "post-reactions";
   grid-area: post-content-container;
+
+  min-height: 100%;
 }
 
 .post-info {
   grid-area: post-info;
   display: flex;
+  min-height: 70px;
   justify-content: space-between;
   padding: 5px 20px;
   align-items: center;
@@ -187,19 +191,39 @@ body {
 
 .post-content {
   grid-area: post-content;
-  padding: 20px;
-  margin-right: 25%;
+  padding: 20px 20px 0 20px;
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  background-color: $accent_color;
+
+  // min-height: 0;
 }
 
-.post-content.wider {
-  margin-right: 12.5%;
+.post-reactions {
+  grid-area: post-reactions;
+  min-height: 50px;
+  display: flex;
+  padding: 5px 20px;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 5px;
+  background-color: $main_bg;
+  border-top: 2px dotted gray;
 }
 
 .post-inner {
   height: 100%;
+  padding-right: 25%;
+
+  &.wider {
+    padding-right: 12.5%;
+  }
+}
+
+.signature-container {
+  border-top: 2px dotted gray;
+  padding: 10px 0;
 }
 
 pre code {
@@ -788,3 +812,25 @@ ul, ol {
 footer {
   border-top: 1px solid black;
 }
+
+.reaction-button.active {
+  @include button($button_color2);
+}
+
+.reaction-popover {
+  position: relative;
+  margin: 0;
+  border: none;
+  border-radius: 4px;
+  background-color: #000000b0;
+  padding: 5px 10px;
+  width: 250px;
+}
+
+.reaction-popover-inner {
+  display: flex;
+  flex-wrap: wrap;
+  overflow: scroll;
+  margin: auto;
+  justify-content: center;
+}