Add search back.

src/components/navigation/right/MemberSidebar.tsx

@@ -16,10 +16,10 @@ import {
 import { GenericSidebarBase } from "../SidebarBase";
 import MemberList, { MemberListGroup } from "./MemberList";
 
-export default function MemberSidebar({ channel: obj }: { channel?: Channel }) {
-    const { channel: channel_id } = useParams<{ channel: string }>();
-    const client = useClient();
-    const channel = obj ?? client.channels.get(channel_id);
+export default function MemberSidebar() {
+    const channel = useClient().channels.get(
+        useParams<{ channel: string }>().channel,
+    );
 
     switch (channel?.channel_type) {
         case "Group":

src/components/navigation/right/Search.note

@@ -1,80 +0,0 @@
-// this is the search code
-
-function Search({ channel }: { channel: Channel }) {
-    if (!getState().experiments.enabled?.includes("search")) return null;
-
-    type Sort = "Relevance" | "Latest" | "Oldest";
-    const [sort, setSort] = useState<Sort>("Relevance");
-
-    const [query, setV] = useState("");
-    const [results, setResults] = useState<Message[]>([]);
-
-    async function search() {
-        const data = await channel.searchWithUsers({ query, sort });
-        setResults(data.messages);
-    }
-
-    return (
-        <CollapsibleSection
-            sticky
-            id="search"
-            defaultValue={false}
-            summary={
-                <>
-                    <Text id="app.main.channel.search.title" /> (BETA)
-                </>
-            }>
-            <div style={{ display: "flex" }}>
-                {["Relevance", "Latest", "Oldest"].map((key) => (
-                    <Button
-                        key={key}
-                        style={{ flex: 1, minWidth: 0 }}
-                        compact
-                        error={sort === key}
-                        onClick={() => setSort(key as Sort)}>
-                        <Text
-                            id={`app.main.channel.search.sort.${key.toLowerCase()}`}
-                        />
-                    </Button>
-                ))}
-            </div>
-            <InputBox
-                style={{ width: "100%" }}
-                onKeyDown={(e) => e.key === "Enter" && search()}
-                value={query}
-                onChange={(e) => setV(e.currentTarget.value)}
-            />
-            <div
-                style={{
-                    display: "flex",
-                    flexDirection: "column",
-                    gap: "4px",
-                    marginTop: "8px",
-                }}>
-                {results.map((message) => {
-                    let href = "";
-                    if (channel?.channel_type === "TextChannel") {
-                        href += `/server/${channel.server_id}`;
-                    }
-
-                    href += `/channel/${message.channel_id}/${message._id}`;
-
-                    return (
-                        <Link to={href} key={message._id}>
-                            <div
-                                style={{
-                                    margin: "2px",
-                                    padding: "6px",
-                                    background: "var(--primary-background)",
-                                }}>
-                                <b>@{message.author?.username}</b>
-                                <br />
-                                {message.content}
-                            </div>
-                        </Link>
-                    );
-                })}
-            </div>
-        </CollapsibleSection>
-    );
-}

src/components/navigation/right/Search.tsx

@@ -1,12 +1,154 @@
-/*export const SearchSidebar = observer(
-    ({ channel }: { channel: Channel }) => {
-        const keys = [...channel.recipient_ids!];
-        const entries = useEntries(channel, keys);
+import { Link, useParams } from "react-router-dom";
+import { Message as MessageI } from "revolt.js/dist/maps/Messages";
+import styled from "styled-components";
 
-        return (
-            <GenericSidebarBase>
-                <MemberList entries={entries} context={channel} />
-            </GenericSidebarBase>
-        );
-    },
-);*/
+import { Text } from "preact-i18n";
+import { useEffect, useState } from "preact/hooks";
+
+import { useClient } from "../../../context/revoltjs/RevoltClient";
+
+import Message from "../../common/messaging/Message";
+import Button from "../../ui/Button";
+import InputBox from "../../ui/InputBox";
+import Overline from "../../ui/Overline";
+import Preloader from "../../ui/Preloader";
+
+import { GenericSidebarBase } from "../SidebarBase";
+
+type SearchState =
+    | {
+          type: "waiting";
+      }
+    | {
+          type: "loading";
+      }
+    | {
+          type: "results";
+          results: MessageI[];
+      };
+
+const SearchBase = styled.div`
+    padding: 6px;
+
+    input {
+        width: 100%;
+    }
+
+    .list {
+        gap: 4px;
+        margin: 8px 0;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .message {
+        margin: 2px;
+        padding: 6px;
+        overflow: hidden;
+        border-radius: var(--border-radius);
+        background: var(--primary-background);
+
+        &:hover {
+            background: var(--hover);
+        }
+
+        > * {
+            pointer-events: none;
+        }
+    }
+
+    .sort {
+        gap: 4px;
+        margin: 6px 0;
+        display: flex;
+
+        > * {
+            flex: 1;
+            min-width: 0;
+        }
+    }
+`;
+
+interface Props {
+    close: () => void;
+}
+
+export function SearchSidebar({ close }: Props) {
+    const channel = useClient().channels.get(
+        useParams<{ channel: string }>().channel,
+    )!;
+
+    type Sort = "Relevance" | "Latest" | "Oldest";
+    const [sort, setSort] = useState<Sort>("Latest");
+    const [query, setQuery] = useState("");
+
+    const [state, setState] = useState<SearchState>({ type: "waiting" });
+
+    async function search() {
+        if (!query) return;
+        setState({ type: "loading" });
+        const data = await channel.searchWithUsers({ query, sort });
+        setState({ type: "results", results: data.messages });
+    }
+
+    useEffect(() => {
+        search();
+        // eslint-disable-next-line
+    }, [sort]);
+
+    return (
+        <GenericSidebarBase>
+            <SearchBase>
+                <Overline type="error" onClick={close} block>
+                    go back to members
+                </Overline>
+                <Overline type="subtle" block>
+                    <Text id="app.main.channel.search.title" />
+                </Overline>
+                <InputBox
+                    value={query}
+                    onKeyDown={(e) => e.key === "Enter" && search()}
+                    onChange={(e) => setQuery(e.currentTarget.value)}
+                />
+                <div class="sort">
+                    {["Latest", "Oldest", "Relevance"].map((key) => (
+                        <Button
+                            key={key}
+                            compact
+                            error={sort === key}
+                            onClick={() => setSort(key as Sort)}>
+                            <Text
+                                id={`app.main.channel.search.sort.${key.toLowerCase()}`}
+                            />
+                        </Button>
+                    ))}
+                </div>
+                {state.type === "loading" && <Preloader type="ring" />}
+                {state.type === "results" && (
+                    <div class="list">
+                        {state.results.map((message) => {
+                            let href = "";
+                            if (channel?.channel_type === "TextChannel") {
+                                href += `/server/${channel.server_id}`;
+                            }
+
+                            href += `/channel/${message.channel_id}/${message._id}`;
+
+                            return (
+                                <Link to={href} key={message._id}>
+                                    <div class="message">
+                                        <Message
+                                            message={message}
+                                            head
+                                            hideReply
+                                        />
+                                    </div>
+                                </Link>
+                            );
+                        })}
+                    </div>
+                )}
+            </SearchBase>
+        </GenericSidebarBase>
+    );
+}