From 3fa543fd3f748a8688e700e1bca6f14ec1ac6c2b Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Thu, 19 Jan 2023 17:38:51 +0100
Subject: [PATCH 1/2] note footer ordering

---
 src/element/Note.css       |  6 ++++++
 src/element/NoteFooter.tsx | 39 +++++++++++++++++++++-----------------
 src/element/Text.css       | 38 -------------------------------------
 3 files changed, 28 insertions(+), 55 deletions(-)

diff --git a/src/element/Note.css b/src/element/Note.css
index 5cd7b83e..035348f4 100644
--- a/src/element/Note.css
+++ b/src/element/Note.css
@@ -105,6 +105,12 @@
   padding: 0px 10px;
   user-select: none;
   color: var(--font-secondary-color);
+  font-feature-settings: "tnum";
+}
+
+.trash-icon {
+  color: var(--error);
+  margin-right: auto;
 }
 
 .reaction-pill .reaction-pill-number {
diff --git a/src/element/NoteFooter.tsx b/src/element/NoteFooter.tsx
index fef70fc5..b62f4bb2 100644
--- a/src/element/NoteFooter.tsx
+++ b/src/element/NoteFooter.tsx
@@ -98,31 +98,28 @@ export default function NoteFooter(props: NoteFooterProps) {
         return content;
     }
 
+    function repostIcon() {
+      return (
+          <div className={`reaction-pill ${hasReposted() ? 'reacted' : ''}`} onClick={() => repost()}>
+            <div className="reaction-pill-icon">
+              <FontAwesomeIcon icon={faRepeat} />
+            </div>
+            <div className="reaction-pill-number">
+              {formatShort(reposts.length)}
+            </div>
+          </div>
+      )
+    }
+
+
     return (
         <>
             <div className="footer">
-                {isMine && (
-                  <div className="reaction-pill">
-                    <div className="reaction-pill-icon">
-                      <FontAwesomeIcon icon={faTrash} onClick={(e) => deleteEvent()} />
-                    </div>
-                  </div>
-                )}
                 <div className={`reaction-pill ${reply ? 'reacted' : ''}`} onClick={(e) => setReply(s => !s)}>
                   <div className="reaction-pill-icon">
                     <FontAwesomeIcon icon={faReply} />
                   </div>
                 </div>
-                <div className={`reaction-pill ${hasReposted() ? 'reacted' : ''}`} onClick={() => repost()}>
-                  <div className="reaction-pill-icon">
-                    <FontAwesomeIcon icon={faRepeat} />
-                  </div>
-                  {reposts.length > 0 && (
-                    <div className="reaction-pill-number">
-                      {formatShort(reposts.length)}
-                    </div>
-                  )}
-                </div>
                 <div className={`reaction-pill ${hasReacted('+') ? 'reacted' : ''} `} onClick={(e) => react("+")}>
                   <div className="reaction-pill-icon">
                     <FontAwesomeIcon icon={faHeart} />
@@ -139,7 +136,15 @@ export default function NoteFooter(props: NoteFooterProps) {
                     {formatShort(groupReactions[Reaction.Negative])}
                   </div>
                 </div>
+                {repostIcon()}
                 {tipButton()}
+                {isMine && (
+                  <div className="reaction-pill trash-icon">
+                    <div className="reaction-pill-icon">
+                      <FontAwesomeIcon icon={faTrash} onClick={(e) => deleteEvent()} />
+                    </div>
+                  </div>
+                )}
             </div>
             <NoteCreator
                 autoFocus={true}
diff --git a/src/element/Text.css b/src/element/Text.css
index 4ec9e40c..4f50fcc1 100644
--- a/src/element/Text.css
+++ b/src/element/Text.css
@@ -30,10 +30,6 @@
     margin: 0;
 }
 
-.text ul, .text ol {
-    margin: 0;
-}
-
 .text li {
     margin-top: -1em;
 }
@@ -60,37 +56,3 @@
     width: -webkit-fill-available;
     aspect-ratio: 16 / 9;
 }
-
-.text .truncate {
-    display: inline-block;
-    margin: 0;
-    max-width: 260px;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    color: var(--highlight);
-    height: var(--font-size);
-}
-
-@media (min-width: 420px) {
-  .text .truncate {
-    max-width: 300px;
-  }
-}
-
-@media (min-width: 520px) {
-  .text .truncate {
-    max-width: 360px;
-  }
-}
-
-@media (min-width: 720px) {
-  .text .truncate {
-    max-width: 420px;
-  }
-}
-
-@media (min-width: 1024px) {
-  .text .truncate {
-    max-width: 600px;
-  }
-}
-- 
2.45.2


From 0bb9e7c5e1b703ccd7d28d6a403029ef094180bc Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Thu, 19 Jan 2023 17:58:09 +0100
Subject: [PATCH 2/2] dont show number if no reposts

---
 src/element/NoteFooter.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/element/NoteFooter.tsx b/src/element/NoteFooter.tsx
index b62f4bb2..6ce401a3 100644
--- a/src/element/NoteFooter.tsx
+++ b/src/element/NoteFooter.tsx
@@ -104,9 +104,11 @@ export default function NoteFooter(props: NoteFooterProps) {
             <div className="reaction-pill-icon">
               <FontAwesomeIcon icon={faRepeat} />
             </div>
-            <div className="reaction-pill-number">
-              {formatShort(reposts.length)}
-            </div>
+            {reposts.length > 0 && (
+              <div className="reaction-pill-number">
+                {formatShort(reposts.length)}
+              </div>
+            )}
           </div>
       )
     }
-- 
2.45.2