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 ( <> - - {channel.channel_type === "Group" && ( - <> - - openScreen({ - id: "user_picker", - omit: channel.recipient_ids!, - callback: async (users) => { - for (const user of users) { - await channel.addMember(user); - } - }, - }) - }> - + + + {channel.channel_type === "Group" && ( + <> + + openScreen({ + id: "user_picker", + omit: channel.recipient_ids!, + callback: async (users) => { + for (const user of users) { + await channel.addMember(user); + } + }, + }) + }> + + + + history.push(`/channel/${channel._id}/settings`) + }> + + + + )} + + {(channel.channel_type === "Group" || + channel.channel_type === "TextChannel") && ( + + - - history.push(`/channel/${channel._id}/settings`) - }> - + )} + {channel.channel_type !== "VoiceChannel" && ( + /* + +
+ +
+
*/ + + - - )} - - {channel.channel_type !== "VoiceChannel" && ( - - - - )} - {(channel.channel_type === "Group" || - channel.channel_type === "TextChannel") && ( - - - - )} + )} +
); }