From 1a08f50997c3900dc1c6a821242bb04e85b00729 Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Sun, 4 Jul 2021 09:52:34 +0100
Subject: [PATCH] Move details styling into its own component.

---
 src/components/ui/Details.tsx        | 28 ++++++++++++++++++++++++++++
 src/lib/TextAreaAutoSize.tsx         |  1 +
 src/pages/friends/Friend.module.scss | 27 ---------------------------
 src/pages/friends/Friends.tsx        |  5 +++--
 4 files changed, 32 insertions(+), 29 deletions(-)
 create mode 100644 src/components/ui/Details.tsx

diff --git a/src/components/ui/Details.tsx b/src/components/ui/Details.tsx
new file mode 100644
index 00000000..8bf47059
--- /dev/null
+++ b/src/components/ui/Details.tsx
@@ -0,0 +1,28 @@
+import styled from "styled-components";
+
+export default styled.details`
+    summary {
+        outline: none;
+        list-style: none;
+        transition: .2s opacity;
+
+        &::marker, &::-webkit-details-marker {
+            display: none;
+        }
+
+        svg {
+            flex-shrink: 0;
+            transition: .2s ease transform;
+        }
+    }
+
+    &:not([open]) {
+        summary {
+            opacity: .7;
+        }
+        
+        summary svg {
+            transform: rotateZ(-90deg);
+        }
+    }
+`;
diff --git a/src/lib/TextAreaAutoSize.tsx b/src/lib/TextAreaAutoSize.tsx
index bfc515b0..c6026554 100644
--- a/src/lib/TextAreaAutoSize.tsx
+++ b/src/lib/TextAreaAutoSize.tsx
@@ -23,6 +23,7 @@ export default function TextAreaAutoSize(props: TextAreaAutoSizeProps) {
     const ref = useRef<HTMLTextAreaElement>();
 
     useEffect(() => {
+        if (isTouchscreenDevice) return;
         autoFocus && ref.current.focus();
     }, [value]);
     
diff --git a/src/pages/friends/Friend.module.scss b/src/pages/friends/Friend.module.scss
index af867b28..fe103bf7 100644
--- a/src/pages/friends/Friend.module.scss
+++ b/src/pages/friends/Friend.module.scss
@@ -39,33 +39,6 @@
         }
     }
 
-    details {
-        summary {
-            outline: none;
-            list-style: none;
-            transition: .2s opacity;
-
-            &::marker, &::-webkit-details-marker {
-                display: none;
-            }
-
-            svg {
-                flex-shrink: 0;
-                transition: .2s ease transform;
-            }
-        }
-
-        &:not([open]) {
-            summary {
-                opacity: .7;
-            }
-            
-            summary svg {
-                transform: rotateZ(-90deg);
-            }
-        }
-    }
-
     &[data-empty="true"] {
         img {
             height: 120px;
diff --git a/src/pages/friends/Friends.tsx b/src/pages/friends/Friends.tsx
index 7ccf4761..607f6d8f 100644
--- a/src/pages/friends/Friends.tsx
+++ b/src/pages/friends/Friends.tsx
@@ -14,6 +14,7 @@ import { ChevronDown, ChevronRight, ListPlus } from "@styled-icons/boxicons-regu
 import { UserDetail, MessageAdd, UserPlus } from "@styled-icons/boxicons-solid";
 import { TextReact } from "../../lib/i18n";
 import { Children } from "../../types/Preact";
+import Details from "../../components/ui/Details";
 
 export default function Friends() {
     const { openScreen } = useIntermediate();
@@ -112,7 +113,7 @@ export default function Friends() {
                         if (list.length === 0) return;
 
                         return (
-                            <details open>
+                            <Details open>
                                 <summary>
                                     <Overline className={styles.overline} type="subtle">
                                         <ChevronDown size={20} />
@@ -122,7 +123,7 @@ export default function Friends() {
                                     </Overline>
                                 </summary>
                                 { list.map(x => <Friend key={x._id} user={x} />) }
-                            </details>
+                            </Details>
                         )
                     })
                 }