HTML auto direction for specific textual content (#286)

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}
+    </>
   );
 };
 

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}</>;
   }

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)}

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>
       )
     );
   }

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>
   );
 }

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>

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")}>

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>

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>

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;
 }