From 45e633de923f63ba146396f710450aa030c4bcea Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Fri, 24 Mar 2023 01:26:49 +0800
Subject: [PATCH] UI adjustments to composer

---
 src/app.css                |  4 ++++
 src/components/compose.css | 22 +++++++++++++++++++---
 src/components/compose.jsx | 24 +++++++++++++++++-------
 3 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/src/app.css b/src/app.css
index 36341f8a..bd087ac7 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1268,6 +1268,10 @@ meter.donut:is(.warning, .danger, .explode):after {
 meter.donut:is(.danger, .explode):after {
   color: var(--red-color);
 }
+meter.donut[hidden] {
+  display: inline-block;
+  visibility: hidden;
+}
 
 /* SHINY PILL */
 
diff --git a/src/components/compose.css b/src/components/compose.css
index be7e038d..7e09c82e 100644
--- a/src/components/compose.css
+++ b/src/components/compose.css
@@ -30,8 +30,8 @@
 #compose-container textarea {
   width: 100%;
   max-width: 100%;
-  height: 4em;
-  min-height: 4em;
+  height: 5em;
+  min-height: 5em;
   max-height: 50vh;
   resize: vertical;
   line-height: 1.4;
@@ -135,6 +135,9 @@
   padding: 8px 0;
   gap: 8px;
 }
+#compose-container .toolbar.wrap {
+  flex-wrap: wrap;
+}
 #compose-container .toolbar.stretch {
   justify-content: stretch;
 }
@@ -145,7 +148,7 @@
 #compose-container .toolbar-button {
   display: inline-block;
   color: var(--link-color);
-  background-color: var(--bg-blur-color);
+  background-color: transparent;
   padding: 0 8px;
   border-radius: 8px;
   min-height: 2.4em;
@@ -271,6 +274,19 @@
   background-color: var(--bg-color);
 }
 
+#compose-container .form-visibility-direct {
+  --yellow-stripes: repeating-linear-gradient(
+    -45deg,
+    var(--reply-to-faded-color),
+    var(--reply-to-faded-color) 10px,
+    var(--reply-to-faded-color) 10px,
+    transparent 10px,
+    transparent 20px
+  );
+  /* diagonal stripes of yellow */
+  background-image: var(--yellow-stripes);
+}
+
 #compose-container .media-attachments {
   background-color: var(--bg-faded-color);
   padding: 8px;
diff --git a/src/components/compose.jsx b/src/components/compose.jsx
index 8b45360b..d03e0681 100644
--- a/src/components/compose.jsx
+++ b/src/components/compose.jsx
@@ -651,6 +651,7 @@ function Compose({
         )}
         <form
           ref={formRef}
+          class={`form-visibility-${visibility}`}
           style={{
             pointerEvents: uiState === 'loading' ? 'none' : 'auto',
             opacity: uiState === 'loading' ? 0.5 : 1,
@@ -975,7 +976,12 @@ function Compose({
               }}
             />
           )}
-          <div class="toolbar">
+          <div
+            class="toolbar wrap"
+            style={{
+              justifyContent: 'flex-end',
+            }}
+          >
             <label class="toolbar-button">
               <input
                 type="file"
@@ -1036,9 +1042,13 @@ function Compose({
               <Icon icon="poll" alt="Add poll" />
             </button>{' '}
             <div class="spacer" />
-            {uiState === 'loading' && <Loader abrupt />}{' '}
-            {uiState !== 'loading' && (
-              <CharCountMeter maxCharacters={maxCharacters} />
+            {uiState === 'loading' ? (
+              <Loader abrupt />
+            ) : (
+              <CharCountMeter
+                maxCharacters={maxCharacters}
+                hidden={uiState === 'loading'}
+              />
             )}
             <label
               class={`toolbar-button ${
@@ -1292,12 +1302,12 @@ const Textarea = forwardRef((props, ref) => {
   );
 });
 
-function CharCountMeter({ maxCharacters = 500 }) {
+function CharCountMeter({ maxCharacters = 500, hidden }) {
   const snapStates = useSnapshot(states);
   const charCount = snapStates.composerCharacterCount;
   const leftChars = maxCharacters - charCount;
-  if (charCount <= maxCharacters / 2) {
-    return null;
+  if (charCount <= maxCharacters / 2 || hidden) {
+    return <meter class="donut" hidden />;
   }
   return (
     <meter