Implement new auto-size text area.

Add bars + header + sidebar to channels.
2026-03-07 09:25:27 +00:00 · 2021-06-21 21:11:53 +01:00
parent d965b20ee2
commit 602cca1047
27 changed files with 1140 additions and 242 deletions
--- a/src/pages/channels/ChannelHeader.tsx
+++ b/src/pages/channels/ChannelHeader.tsx
@@ -0,0 +1,136 @@
+import styled from "styled-components";
+import { Channel, User } from "revolt.js";
+import { useContext } from "preact/hooks";
+import { useHistory } from "react-router-dom";
+import Header from "../../components/ui/Header";
+import IconButton from "../../components/ui/IconButton";
+import Markdown from "../../components/markdown/Markdown";
+import { getChannelName } from "../../context/revoltjs/util";
+import UserStatus from "../../components/common/user/UserStatus";
+import { AppContext } from "../../context/revoltjs/RevoltClient";
+import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
+import { useStatusColour } from "../../components/common/user/UserIcon";
+import { useIntermediate } from "../../context/intermediate/Intermediate";
+import { Save, AtSign, Users, Hash, UserPlus, Settings, Sidebar as SidebarIcon } from "@styled-icons/feather";
+
+interface Props {
+    channel: Channel,
+    toggleSidebar?: () => void
+}
+
+const Info = styled.div`
+    flex-grow: 1;
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+
+    * {
+        display: inline-block;
+    }
+
+    .divider {
+        height: 14px;
+        margin: 0 5px;
+        padding-left: 1px;
+        background-color: var(--tertiary-background);
+    }
+
+    .status {
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        display: inline-block;
+        margin-inline-end: 6px;
+    }
+
+    .desc {
+        cursor: pointer;
+        font-size: 0.8em;
+        font-weight: 400;
+        color: var(--secondary-foreground);
+    }
+`;
+
+export default function ChannelHeader({ channel, toggleSidebar }: Props) {
+    const { openScreen } = useIntermediate();
+    const client = useContext(AppContext);
+    const history = useHistory();
+
+    const name = getChannelName(client, channel);
+    let icon, recipient;
+    switch (channel.channel_type) {
+        case "SavedMessages":
+            icon = <Save size={20} strokeWidth={1.5} />;
+            break;
+        case "DirectMessage":
+            icon = <AtSign size={20} strokeWidth={1.5} />;
+            const uid = client.channels.getRecipient(channel._id);
+            recipient = client.users.get(uid);
+            break;
+        case "Group":
+            icon = <Users size={20} strokeWidth={1.5} />;
+            break;
+        case "TextChannel":
+            icon = <Hash size={20} strokeWidth={1.5} />;
+            break;
+    }
+
+    return (
+        <Header placement="primary">
+            { icon }
+            <Info>
+                <span className="name">{ name }</span>
+                {channel.channel_type === "DirectMessage" && (
+                    <>
+                        <div className="divider" />
+                        <span className="desc">
+                            <div className="status" style={{ backgroundColor: useStatusColour(recipient as User) }} />
+                            <UserStatus user={recipient as User} />
+                        </span>
+                    </>
+                )}
+                {(channel.channel_type === "Group" || channel.channel_type === "TextChannel") && channel.description && (
+                    <>
+                        <div className="divider" />
+                        <span
+                            className="desc"
+                            onClick={() =>
+                                openScreen({
+                                    id: "channel_info",
+                                    channel_id: channel._id
+                                })
+                            }>
+                            <Markdown content={channel.description.split("\n")[0] ?? ""} disallowBigEmoji />
+                        </span>
+                    </>
+                )}
+            </Info>
+            <>
+                { channel.channel_type === "Group" && (
+                    <>
+                        <IconButton onClick={() =>
+                            openScreen({
+                                id: "user_picker",
+                                omit: channel.recipients,
+                                callback: async users => {
+                                    for (const user of users) {
+                                        await client.channels.addMember(channel._id, user);
+                                    }
+                                }
+                            })}>
+                            <UserPlus size={22} />
+                        </IconButton>
+                        <IconButton onClick={() => history.push(`/channel/${channel._id}/settings`)}>
+                            <Settings size={22} />
+                        </IconButton>
+                    </>
+                ) }
+                { channel.channel_type === "Group" && !isTouchscreenDevice && (
+                    <IconButton onClick={toggleSidebar}>
+                        <SidebarIcon size={22} />
+                    </IconButton>
+                ) }
+            </>
+        </Header>
+    )
+}