From 81b92c4acb4c3e37150b1254ed6e7a2956c5ac7f Mon Sep 17 00:00:00 2001
From: Alejandro <alejandro@strike.me>
Date: Mon, 13 Feb 2023 11:47:52 +0100
Subject: [PATCH] HTML auto direction for specific textual content (#286)

---
 src/Element/Collapsed.tsx         | 26 ++++++++++----------------
 src/Element/Text.tsx              |  2 +-
 src/Element/Textarea.tsx          |  1 +
 src/Pages/ProfilePage.tsx         |  8 ++++----
 src/Pages/new/DiscoverFollows.tsx |  4 ++--
 src/Pages/new/GetVerified.tsx     |  2 +-
 src/Pages/new/ImportFollows.tsx   | 24 +++++++++++++-----------
 src/Pages/new/NewUserFlow.tsx     |  2 +-
 src/Pages/new/NewUsername.tsx     |  2 +-
 src/index.css                     |  8 ++++----
 10 files changed, 38 insertions(+), 41 deletions(-)

diff --git a/src/Element/Collapsed.tsx b/src/Element/Collapsed.tsx
index c96202d..0459376 100644
--- a/src/Element/Collapsed.tsx
+++ b/src/Element/Collapsed.tsx
@@ -22,19 +22,11 @@ const Collapsed = ({ text, children, collapsed, setCollapsed }: CollapsedProps)
 
 interface CollapsedIconProps {
   icon: ReactNode;
-  children: ReactNode;
   collapsed: boolean;
 }
 
-export const CollapsedIcon = ({ icon, children, collapsed }: CollapsedIconProps) => {
-  return collapsed ? (
-    <div className="collapsed">{icon}</div>
-  ) : (
-    <div className="uncollapsed">
-      {icon}
-      {children}
-    </div>
-  );
+export const CollapsedIcon = ({ icon, collapsed }: CollapsedIconProps) => {
+  return collapsed ? <div className="collapsed">{icon}</div> : <div className="uncollapsed">{icon}</div>;
 };
 
 interface CollapsedSectionProps {
@@ -50,12 +42,14 @@ export const CollapsedSection = ({ title, children }: CollapsedSectionProps) =>
     </div>
   );
   return (
-    <div className="collapsable-section">
-      <h3 onClick={() => setCollapsed(!collapsed)}>{title}</h3>
-      <CollapsedIcon icon={icon} collapsed={collapsed}>
-        {children}
-      </CollapsedIcon>
-    </div>
+    <>
+      <div className="collapsable-section">
+        <h3 onClick={() => setCollapsed(!collapsed)}>{title}</h3>
+        <CollapsedIcon icon={icon} collapsed={collapsed} />
+      </div>
+
+      {collapsed ? null : children}
+    </>
   );
 };
 
diff --git a/src/Element/Text.tsx b/src/Element/Text.tsx
index a7ab2c4..a460b67 100644
--- a/src/Element/Text.tsx
+++ b/src/Element/Text.tsx
@@ -128,7 +128,7 @@ export default function Text({ content, tags, creator, users }: TextProps) {
   function transformParagraph(frag: TextFragment) {
     const fragments = transformText(frag);
     if (fragments.every(f => typeof f === "string")) {
-      return <p>{fragments}</p>;
+      return <p dir="auto">{fragments}</p>;
     }
     return <>{fragments}</>;
   }
diff --git a/src/Element/Textarea.tsx b/src/Element/Textarea.tsx
index 7d5923e..0c01275 100644
--- a/src/Element/Textarea.tsx
+++ b/src/Element/Textarea.tsx
@@ -72,6 +72,7 @@ const Textarea = (props: TextareaProps) => {
   return (
     // @ts-expect-error If anybody can figure out how to type this, please do
     <ReactTextareaAutocomplete
+      dir="auto"
       {...props}
       loadingComponent={() => <span>Loading...</span>}
       placeholder={formatMessage(messages.NotePlaceholder)}
diff --git a/src/Pages/ProfilePage.tsx b/src/Pages/ProfilePage.tsx
index 26bce38..8feab8c 100644
--- a/src/Pages/ProfilePage.tsx
+++ b/src/Pages/ProfilePage.tsx
@@ -150,10 +150,10 @@ export default function ProfilePage() {
 
   function bio() {
     return (
-      aboutText.length > 0 && (
-        <>
-          <div className="details">{about}</div>
-        </>
+      aboutText.length && (
+        <div dir="auto" className="details">
+          {about}
+        </div>
       )
     );
   }
diff --git a/src/Pages/new/DiscoverFollows.tsx b/src/Pages/new/DiscoverFollows.tsx
index 9bd8993..32c3d72 100644
--- a/src/Pages/new/DiscoverFollows.tsx
+++ b/src/Pages/new/DiscoverFollows.tsx
@@ -13,7 +13,7 @@ export default function DiscoverFollows() {
   }, []);
 
   return (
-    <div className="main-content new-user">
+    <div className="main-content new-user" dir="auto">
       <div className="progress-bar">
         <div className="progress"></div>
       </div>
@@ -26,7 +26,7 @@ export default function DiscoverFollows() {
       <h3>
         <FormattedMessage {...messages.PopularAccounts} />
       </h3>
-      {sortedReccomends.length > 0 && <FollowListBase pubkeys={sortedReccomends} />}
+      <div dir="ltr">{sortedReccomends.length > 0 && <FollowListBase pubkeys={sortedReccomends} />}</div>
     </div>
   );
 }
diff --git a/src/Pages/new/GetVerified.tsx b/src/Pages/new/GetVerified.tsx
index 166be02..1b68db1 100644
--- a/src/Pages/new/GetVerified.tsx
+++ b/src/Pages/new/GetVerified.tsx
@@ -24,7 +24,7 @@ export default function GetVerified() {
   };
 
   return (
-    <div className="main-content new-user">
+    <div className="main-content new-user" dir="auto">
       <div className="progress-bar">
         <div className="progress progress-third"></div>
       </div>
diff --git a/src/Pages/new/ImportFollows.tsx b/src/Pages/new/ImportFollows.tsx
index 94922ce..45d57bd 100644
--- a/src/Pages/new/ImportFollows.tsx
+++ b/src/Pages/new/ImportFollows.tsx
@@ -49,7 +49,7 @@ export default function ImportFollows() {
   }
 
   return (
-    <div className="main-content new-user">
+    <div className="main-content new-user" dir="auto">
       <div className="progress-bar">
         <div className="progress progress-last"></div>
       </div>
@@ -84,16 +84,18 @@ export default function ImportFollows() {
         </AsyncButton>
       </div>
       {error.length > 0 && <b className="error">{error}</b>}
-      {sortedTwitterFollows.length > 0 && (
-        <FollowListBase
-          title={
-            <h2>
-              <FormattedMessage {...messages.FollowsOnNostr} values={{ username: twitterUsername }} />
-            </h2>
-          }
-          pubkeys={sortedTwitterFollows}
-        />
-      )}
+      <div dir="ltr">
+        {sortedTwitterFollows.length > 0 && (
+          <FollowListBase
+            title={
+              <h2>
+                <FormattedMessage {...messages.FollowsOnNostr} values={{ username: twitterUsername }} />
+              </h2>
+            }
+            pubkeys={sortedTwitterFollows}
+          />
+        )}
+      </div>
 
       <div className="next-actions">
         <button className="secondary" type="button" onClick={() => navigate("/new/discover")}>
diff --git a/src/Pages/new/NewUserFlow.tsx b/src/Pages/new/NewUserFlow.tsx
index 37d67c0..b8ae70b 100644
--- a/src/Pages/new/NewUserFlow.tsx
+++ b/src/Pages/new/NewUserFlow.tsx
@@ -71,7 +71,7 @@ export default function NewUserFlow() {
   const navigate = useNavigate();
 
   return (
-    <div className="main-content new-user">
+    <div className="main-content new-user" dir="auto">
       <div className="progress-bar">
         <div className="progress progress-first"></div>
       </div>
diff --git a/src/Pages/new/NewUsername.tsx b/src/Pages/new/NewUsername.tsx
index 0b512b8..7601f38 100644
--- a/src/Pages/new/NewUsername.tsx
+++ b/src/Pages/new/NewUsername.tsx
@@ -22,7 +22,7 @@ export default function NewUserName() {
   };
 
   return (
-    <div className="main-content new-user">
+    <div className="main-content new-user" dir="auto">
       <div className="progress-bar">
         <div className="progress progress-second"></div>
       </div>
diff --git a/src/index.css b/src/index.css
index d7a9ccf..9efe3be 100644
--- a/src/index.css
+++ b/src/index.css
@@ -551,7 +551,10 @@ button.tall {
 }
 
 .collapsable-section {
-  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .collapsable-section h3,
@@ -560,9 +563,6 @@ button.tall {
 }
 
 .collapsable-section .collapse-icon {
-  position: absolute;
-  top: 0;
-  right: 0;
   transition: transform 300ms ease-in-out;
 }