Add collapsible section component.

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

src/components/common/CollapsibleSection.tsx

@@ -0,0 +1,52 @@
+import Details from "../ui/Details";
+import { State, store } from "../../redux";
+import { Action } from "../../redux/reducers";
+import { Children } from "../../types/Preact";
+import { ChevronDown } from "@styled-icons/boxicons-regular";
+
+interface Props {
+    id: string;
+    defaultValue: boolean;
+
+    sticky?: boolean;
+    large?: boolean;
+
+    summary: Children;
+    children: Children;
+}
+
+export default function CollapsibleSection({ id, defaultValue, summary, children, ...detailsProps }: Props) {
+    const state: State = store.getState();
+
+    function setState(state: boolean) {
+        if (state === defaultValue) {
+            store.dispatch({
+                type: 'SECTION_TOGGLE_UNSET',
+                id
+            } as Action);
+        } else {
+            store.dispatch({
+                type: 'SECTION_TOGGLE_SET',
+                id,
+                state
+            } as Action);
+        }
+    }
+
+    return (
+        <Details
+            open={state.sectionToggle[id] ?? defaultValue}
+            onToggle={e => setState(e.currentTarget.open)}
+            {...detailsProps}>
+            <summary>
+                <ChevronDown size={20} />
+                { summary }
+                {/*<Overline type="subtle" className="overline">*/}
+                    {/*<div className="title">*/}
+                    {/*</div>*/}
+                {/*</Overline>*/}
+            </summary>
+            { children }
+        </Details>
+    )
+}

src/components/navigation/left/HomeSidebar.tsx

@@ -1,4 +1,4 @@
-import { Localizer, Text } from "preact-i18n";
+import { Text } from "preact-i18n";
 import { useContext, useEffect } from "preact/hooks";
 import { Home, UserDetail, Wrench, Notepad } from "@styled-icons/boxicons-solid";
 
@@ -105,16 +105,9 @@ function HomeSidebar(props: Props) {
                         </ButtonItem>
                     </Link>
                 )}
-                <Localizer>
-                    <Category
-                        text={
-                            (
-                                <Text id="app.main.categories.conversations" />
-                            ) as any
-                        }
-                        action={() => openScreen({ id: "special_input", type: "create_group" })}
-                    />
-                </Localizer>
+                <Category
+                    text={<Text id="app.main.categories.conversations" />}
+                    action={() => openScreen({ id: "special_input", type: "create_group" })} />
                 {channelsArr.length === 0 && <img src={placeholderSVG} />}
                 {channelsArr.map(x => {
                     let user;

src/components/navigation/left/ServerSidebar.tsx

@@ -14,6 +14,7 @@ import ServerHeader from "../../common/ServerHeader";
 import { useEffect } from "preact/hooks";
 import Category from "../../ui/Category";
 import ConditionalLink from "../../../lib/ConditionalLink";
+import CollapsibleSection from "../../common/CollapsibleSection";
 
 interface Props {
     unreads: Unreads;
@@ -69,6 +70,7 @@ function ServerSidebar(props: Props & WithDispatcher) {
 
     let uncategorised = new Set(server.channels);
     let elements = [];
+    
     function addChannel(id: string) {
         const entry = channels.find(x => x._id === id);
         if (!entry) return;
@@ -76,9 +78,8 @@ function ServerSidebar(props: Props & WithDispatcher) {
         const active = channel?._id === entry._id;
 
         return (
-            <ConditionalLink active={active} to={`/server/${server!._id}/channel/${entry._id}`}>
+            <ConditionalLink key={entry._id} active={active} to={`/server/${server!._id}/channel/${entry._id}`}>
                 <ChannelButton
-                    key={entry._id}
                     channel={entry}
                     active={active}
                     alert={entry.unread}
@@ -90,16 +91,24 @@ function ServerSidebar(props: Props & WithDispatcher) {
 
     if (server.categories) {
         for (let category of server.categories) {
-            elements.push(<Category text={category.title} />);
-
+            let channels = [];
             for (let id of category.channels) {
                 uncategorised.delete(id);
-                elements.push(addChannel(id));
+                channels.push(addChannel(id));
             }
+
+            elements.push(
+                <CollapsibleSection
+                    id={`category_${category.id}`}
+                    defaultValue
+                    summary={<Category text={category.title} />}>
+                    { channels }
+                </CollapsibleSection>
+            );
         }
     }
 
-    for (let id of uncategorised) {
+    for (let id of Array.from(uncategorised).reverse()) {
         elements.unshift(addChannel(id));
     }
 

src/components/ui/Category.tsx

@@ -31,7 +31,7 @@ const CategoryBase = styled.div<Pick<Props, 'variant'>>`
     ` }
 `;
 
-type Props = Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'as'> & {
+type Props = Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'as' | 'action'> & {
     text: Children;
     action?: () => void;
     variant?: 'default' | 'uniform';

src/components/ui/Details.tsx

@@ -1,16 +1,29 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 
-export default styled.details`
+export default styled.details<{ sticky?: boolean, large?: boolean }>`
     summary {
+        ${ props => props.sticky && css`
+            top: -1px;
+            z-index: 10;
+            position: sticky;
+        ` }
+
+        ${ props => props.large && css`
+            padding: 5px 0;
+        ` }
+
         outline: none;
+        display: flex;
+        cursor: pointer;
         list-style: none;
+        align-items: center;
         transition: .2s opacity;
 
         &::marker, &::-webkit-details-marker {
             display: none;
         }
 
-        svg {
+        > svg {
             flex-shrink: 0;
             transition: .2s ease transform;
         }

src/components/ui/Overline.tsx

@@ -5,6 +5,7 @@ import { Text } from 'preact-i18n';
 type Props = Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'as'> & {
     error?: string;
     block?: boolean;
+    spaced?: boolean;
     children?: Children;
     type?: "default" | "subtle" | "error";
 }
@@ -12,7 +13,10 @@ type Props = Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'as'> & {
 const OverlineBase = styled.div<Omit<Props, "children" | "error">>`
     display: inline;
     margin: 0.4em 0;
-    margin-top: 0.8em;
+
+    ${ props => props.spaced && css`
+        margin-top: 0.8em;
+    ` }
 
     font-size: 14px;
     font-weight: 600;