Add collapsible section component.

Can now collapse server categories.
Client remembers collapse state, incl. advanced appearance settings.

src/pages/friends/Friend.module.scss

@@ -14,30 +14,6 @@
     padding: 0 10px 10px 10px;
     user-select: none;
     overflow-y: scroll;
-    
-    summary {
-        position: sticky;
-        z-index: 10;
-        top: -1px;
-    }
-
-    .overline {
-        display: flex;
-        align-items: center;
-        background: var(--primary-background);
-        padding: 5px 0;
-        cursor: pointer;
-
-        .title {
-            text-overflow: ellipsis;
-            overflow: hidden;
-            white-space: nowrap;
-        }
-        
-        svg {
-            margin-inline-end: 4px;
-        }
-    }
 
     &[data-empty="true"] {
         img {

src/pages/friends/Friends.tsx

@@ -15,6 +15,7 @@ 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";
+import CollapsibleSection from "../../components/common/CollapsibleSection";
 
 export default function Friends() {
     const { openScreen } = useIntermediate();
@@ -30,17 +31,17 @@ export default function Friends() {
         ) ],
         [ 'app.special.friends.sent', users.filter(x =>
             x.relationship === Users.Relationship.Outgoing
-        ) ],
+        ), 'outgoing' ],
         [ 'app.status.online', friends.filter(x =>
             x.online && x.status?.presence !== Users.Presence.Invisible
-        ) ],
+        ), 'online' ],
         [ 'app.status.offline', friends.filter(x =>
             !x.online || x.status?.presence === Users.Presence.Invisible
-        ) ],
-        [ 'app.special.friends.blocked', friends.filter(x =>
+        ), 'offline' ],
+        [ 'app.special.friends.blocked', users.filter(x =>
             x.relationship === Users.Relationship.Blocked
-        ) ]
-    ] as [ string, User[] ][];
+        ), 'blocked' ]
+    ] as [ string, User[], string ][];
 
     const incoming = lists[0][1];
     const userlist: Children[] = incoming.map(x => <b>{ x.username }</b>);
@@ -108,22 +109,18 @@ export default function Friends() {
                 </div> }
 
                 {
-                    lists.map(([i18n, list], index) => {
+                    lists.map(([i18n, list, section_id], index) => {
                         if (index === 0) return;
                         if (list.length === 0) return;
 
                         return (
-                            <Details open>
-                                <summary>
-                                    <Overline className={styles.overline} type="subtle">
-                                        <ChevronDown size={20} />
-                                        <div className={styles.title}>
-                                            <Text id={i18n} /> — { list.length }
-                                        </div>
-                                    </Overline>
-                                </summary>
+                            <CollapsibleSection
+                                id={`friends_${section_id}`}
+                                defaultValue={true}
+                                sticky large
+                                summary={<Overline type="subtle" className="overline"><Text id={i18n} /> — { list.length }</Overline>}>
                                 { list.map(x => <Friend key={x._id} user={x} />) }
-                            </Details>
+                            </CollapsibleSection>
                         )
                     })
                 }

src/pages/settings/panes/Appearance.tsx

@@ -22,6 +22,7 @@ import mutantSVG from '../assets/mutant_emoji.svg';
 import notoSVG from '../assets/noto_emoji.svg';
 import openmojiSVG from '../assets/openmoji_emoji.svg';
 import twemojiSVG from '../assets/twemoji_emoji.svg';
+import CollapsibleSection from "../../../components/common/CollapsibleSection";
 
 interface Props {
     settings: Settings;
@@ -171,11 +172,7 @@ export function Component(props: Props & WithDispatcher) {
                 </div>
             </div>
 
-            <details>
-                <summary>
-                    <Text id="app.settings.pages.appearance.advanced" />
-                    <div className={styles.divider}></div>
-                </summary>
+            <CollapsibleSection id="settings_advanced_appearance" defaultValue={false} summary={<Text id="app.settings.pages.appearance.advanced" />}>
                 <h3>
                     <Text id="app.settings.pages.appearance.overrides" />
                 </h3>
@@ -272,7 +269,7 @@ export function Component(props: Props & WithDispatcher) {
                     code
                     value={css}
                     onChange={ev => setCSS(ev.currentTarget.value)} />
-            </details>
+            </CollapsibleSection>
         </div>
     );
 }