From baf0ed1447a12b3e11350e9a9c616971d788b531 Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Sat, 28 Sep 2024 12:43:12 +0800
Subject: [PATCH] ReplyEditor: only show toolbar when active

---
 src/timelines/ReplyEditor.tsx     | 73 +++++++++++++++++--------------
 src/timelines/TootBottomSheet.tsx |  1 +
 2 files changed, 40 insertions(+), 34 deletions(-)

diff --git a/src/timelines/ReplyEditor.tsx b/src/timelines/ReplyEditor.tsx
index 9b9ab74..0f4bcff 100644
--- a/src/timelines/ReplyEditor.tsx
+++ b/src/timelines/ReplyEditor.tsx
@@ -229,51 +229,56 @@ const ReplyEditor: Component<{
       onClick={(e) => inputRef.focus()}
     >
       <div class={tootComposers.replyInput}>
-        <Avatar src={props.profile.inf?.avatar} sx={{marginLeft: '-0.25em'}} />
+        <Avatar
+          src={props.profile.inf?.avatar}
+          sx={{ marginLeft: "-0.25em" }}
+        />
         <textarea
           ref={inputRef!}
           placeholder={`Reply to ${props.replyToDisplayName}...`}
           style={{ width: "100%", border: "none" }}
         ></textarea>
-        <IconButton sx={{marginRight: '-0.5em'}}>
+        <IconButton sx={{ marginRight: "-0.5em" }}>
           <Send />
         </IconButton>
       </div>
 
-      <div
-        style={{
-          display: "flex",
-          "justify-content": "flex-end",
-          "margin-top": "8px",
-          gap: "16px",
-          "flex-flow": "row wrap",
-        }}
-      >
-        <Button onClick={[setLangPickerOpen, true]}>
-          <Translate sx={{ marginTop: "-0.25em", marginRight: "0.25em" }} />
-          {iso639_1.getNativeName(language())}
-          <ArrowDropDown sx={{ marginTop: "-0.25em" }} />
-        </Button>
-        <Button onClick={[setPermPicker, true]}>
-          <Visibility sx={{ marginTop: "-0.15em", marginRight: "0.25em" }} />
-          {visibilityText()}
-          <ArrowDropDown sx={{ marginTop: "-0.25em" }} />
-        </Button>
-      </div>
+      <Show when={typing()}>
+        <div
+          style={{
+            display: "flex",
+            "justify-content": "flex-end",
+            "margin-top": "8px",
+            gap: "16px",
+            "flex-flow": "row wrap",
+          }}
+        >
+          <Button onClick={[setLangPickerOpen, true]}>
+            <Translate sx={{ marginTop: "-0.25em", marginRight: "0.25em" }} />
+            {iso639_1.getNativeName(language())}
+            <ArrowDropDown sx={{ marginTop: "-0.25em" }} />
+          </Button>
+          <Button onClick={[setPermPicker, true]}>
+            <Visibility sx={{ marginTop: "-0.15em", marginRight: "0.25em" }} />
+            {visibilityText()}
+            <ArrowDropDown sx={{ marginTop: "-0.25em" }} />
+          </Button>
+        </div>
 
-      <TootVisibilityPickerDialog
-        open={permPicker()}
-        onClose={() => setPermPicker(false)}
-        visibility={visibility()}
-        onVisibilityChange={setVisibility}
-      />
+        <TootVisibilityPickerDialog
+          open={permPicker()}
+          onClose={() => setPermPicker(false)}
+          visibility={visibility()}
+          onVisibilityChange={setVisibility}
+        />
 
-      <TootLanguagePickerDialog
-        open={langPickerOpen()}
-        onClose={() => setLangPickerOpen(false)}
-        code={language()}
-        onCodeChange={setLanguage}
-      />
+        <TootLanguagePickerDialog
+          open={langPickerOpen()}
+          onClose={() => setLangPickerOpen(false)}
+          code={language()}
+          onCodeChange={setLanguage}
+        />
+      </Show>
     </div>
   );
 };
diff --git a/src/timelines/TootBottomSheet.tsx b/src/timelines/TootBottomSheet.tsx
index 4e86928..87d1bd1 100644
--- a/src/timelines/TootBottomSheet.tsx
+++ b/src/timelines/TootBottomSheet.tsx
@@ -270,6 +270,7 @@ const TootBottomSheet: Component = (props) => {
           )}
         </For>
       </TimeSourceProvider>
+      <div style={{height: "var(--safe-area-inset-bottom, 0)"}}></div>
     </Scaffold>
   );
 };