From 3d68dab0b48566fdf4d9522f9370ae13c59c8ed0 Mon Sep 17 00:00:00 2001
From: trashtemp <96388163+trashtemp@users.noreply.github.com>
Date: Tue, 11 Jan 2022 23:15:18 +0100
Subject: [PATCH] feat(search): started work on new search

---
 src/pages/channels/actions/HeaderActions.tsx | 128 ++++++++++++++-----
 1 file changed, 93 insertions(+), 35 deletions(-)

diff --git a/src/pages/channels/actions/HeaderActions.tsx b/src/pages/channels/actions/HeaderActions.tsx
index 2127b4bb..0d3be882 100644
--- a/src/pages/channels/actions/HeaderActions.tsx
+++ b/src/pages/channels/actions/HeaderActions.tsx
@@ -9,6 +9,7 @@ import {
 } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 import { useHistory } from "react-router-dom";
+import styled, { css } from "styled-components";
 
 import { chainedDefer, defer } from "../../../lib/defer";
 import { internalEmit } from "../../../lib/eventEmitter";
@@ -25,6 +26,51 @@ import IconButton from "../../../components/ui/IconButton";
 
 import { ChannelHeaderProps } from "../ChannelHeader";
 
+const Testing = styled.div`
+    display: flex;
+    gap: 16px;
+`;
+
+const SearchBar = styled.div`
+    display: flex;
+    align-items: center;
+    background: var(--primary-background);
+    border-radius: 4px;
+    position: relative;
+    width: 120px;
+    transition: width .25s ease;
+
+    :focus-within {
+        width: 200px;
+        box-shadow: 0 0 0 1pt var(--accent);
+    }
+
+    input {
+        all: unset;
+        font-size: 13px;
+        padding: 0 8px;
+        font-weight: 400;
+        height: 100%;
+        width: 100%;
+        }
+    }
+
+    .actions {
+        display: flex;
+        align-items: center;
+        position: absolute;
+        right: 0;
+        padding: 0 8px;
+        pointer-events: none;
+        background: inherit;
+
+        svg {
+            opacity: 0.4;
+            color: var(--foreground);
+        }
+    }
+`;
+
 export default function HeaderActions({ channel }: ChannelHeaderProps) {
     const layout = useApplicationState().layout;
     const { openScreen } = useIntermediate();
@@ -62,43 +108,55 @@ export default function HeaderActions({ channel }: ChannelHeaderProps) {
 
     return (
         <>
-            <UpdateIndicator style="channel" />
-            {channel.channel_type === "Group" && (
-                <>
-                    <IconButton
-                        onClick={() =>
-                            openScreen({
-                                id: "user_picker",
-                                omit: channel.recipient_ids!,
-                                callback: async (users) => {
-                                    for (const user of users) {
-                                        await channel.addMember(user);
-                                    }
-                                },
-                            })
-                        }>
-                        <UserPlus size={27} />
+            <Testing>
+                <UpdateIndicator style="channel" />
+                {channel.channel_type === "Group" && (
+                    <>
+                        <IconButton
+                            onClick={() =>
+                                openScreen({
+                                    id: "user_picker",
+                                    omit: channel.recipient_ids!,
+                                    callback: async (users) => {
+                                        for (const user of users) {
+                                            await channel.addMember(user);
+                                        }
+                                    },
+                                })
+                            }>
+                            <UserPlus size={27} />
+                        </IconButton>
+                        <IconButton
+                            onClick={() =>
+                                history.push(`/channel/${channel._id}/settings`)
+                            }>
+                            <Cog size={24} />
+                        </IconButton>
+                    </>
+                )}
+                <VoiceActions channel={channel} />
+                {(channel.channel_type === "Group" ||
+                    channel.channel_type === "TextChannel") && (
+                    <IconButton onClick={openMembers}>
+                        <Group size={25} />
                     </IconButton>
-                    <IconButton
-                        onClick={() =>
-                            history.push(`/channel/${channel._id}/settings`)
-                        }>
-                        <Cog size={24} />
+                )}
+                {channel.channel_type !== "VoiceChannel" && (
+                    /*<SearchBar>
+                        <input
+                            type="text"
+                            placeholder="Search..."
+                            onClick={openSearch}
+                        />
+                        <div className="actions">
+                            <Search size={18} />
+                        </div>
+                    </SearchBar>*/
+                    <IconButton onClick={openSearch}>
+                        <Search size={25} />
                     </IconButton>
-                </>
-            )}
-            <VoiceActions channel={channel} />
-            {channel.channel_type !== "VoiceChannel" && (
-                <IconButton onClick={openSearch}>
-                    <Search size={25} />
-                </IconButton>
-            )}
-            {(channel.channel_type === "Group" ||
-                channel.channel_type === "TextChannel") && (
-                <IconButton onClick={openMembers}>
-                    <Group size={25} />
-                </IconButton>
-            )}
+                )}
+            </Testing>
         </>
     );
 }