Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
No results found
Show changes
Hide whitespace changes
Inline Side-by-side
Showing
with 1157 additions and 680 deletions
src/components/navigation/items/ButtonItem.tsx
View file @ 1ac5de17
import classNames from 'classnames';
import { X, Crown } from "@styled-icons/boxicons-regular";
import { observer } from "mobx-react-lite";
import { Presence } from "revolt-api/types/Users";
import { Channel } from "revolt.js/dist/maps/Channels";
import { User } from "revolt.js/dist/maps/Users";
import styles from "./Item.module.scss";
import Tooltip from '../../common/Tooltip';
import IconButton from '../../ui/IconButton';
import classNames from "classnames";
import { attachContextMenu } from "preact-context-menu";
import { Localizer, Text } from "preact-i18n";
import { X, Crown } from "@styled-icons/boxicons-regular";
import { Children } from "../../../types/Preact";
import UserIcon from '../../common/user/UserIcon';
import ChannelIcon from '../../common/ChannelIcon';
import UserStatus from '../../common/user/UserStatus';
import { attachContextMenu } from 'preact-context-menu';
import { Channels, Users } from "revolt.js/dist/api/objects";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { useIntermediate } from '../../../context/intermediate/Intermediate';
import { stopPropagation } from '../../../lib/stopPropagation';
import { stopPropagation } from "../../../lib/stopPropagation";
type CommonProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'as'> & {
active?: boolean
alert?: 'unread' | 'mention'
alertCount?: number
}
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import ChannelIcon from "../../common/ChannelIcon";
import Tooltip from "../../common/Tooltip";
import UserIcon from "../../common/user/UserIcon";
import { Username } from "../../common/user/UserShort";
import UserStatus from "../../common/user/UserStatus";
import IconButton from "../../ui/IconButton";
import { Children } from "../../../types/Preact";
type CommonProps = Omit<
JSX.HTMLAttributes<HTMLDivElement>,
"children" | "as"
> & {
active?: boolean;
alert?: "unread" | "mention";
alertCount?: number;
};
type UserProps = CommonProps & {
user: Users.User,
context?: Channels.Channel,
channel?: Channels.DirectMessageChannel
}
user: User;
context?: Channel;
channel?: Channel;
};
export function UserButton(props: UserProps) {
const { active, alert, alertCount, user, context, channel, ...divProps } = props;
export const UserButton = observer((props: UserProps) => {
const { active, alert, alertCount, user, context, channel, ...divProps } =
props;
const { openScreen } = useIntermediate();
return (
<div {...divProps}
<div
{...divProps}
className={classNames(styles.item, styles.user)}
data-active={active}
data-alert={typeof alert === 'string'}
data-online={typeof channel !== 'undefined' || (user.online && user.status?.presence !== Users.Presence.Invisible)}
onContextMenu={attachContextMenu('Menu', {
data-alert={typeof alert === "string"}
data-online={
typeof channel !== "undefined" ||
(user.online && user.status?.presence !== Presence.Invisible)
}
onContextMenu={attachContextMenu("Menu", {
user: user._id,
channel: channel?._id,
unread: alert,
contextualChannel: context?._id
contextualChannel: context?._id,
})}>
<UserIcon className={styles.avatar} target={user} size={32} status />
<UserIcon
className={styles.avatar}
target={user}
size={32}
status
/>
<div className={styles.name}>
<div>{user.username}</div>
<div>
<Username user={user} />
</div>
{
<div className={styles.subText}>
{ channel?.last_message && alert ? (
channel.last_message.short
{channel?.last_message && alert ? (
(channel.last_message as { short: string }).short
) : (
<UserStatus user={user} />
) }
)}
</div>
}
</div>
<div className={styles.button}>
{ context?.channel_type === "Group" &&
context.owner === user._id && (
{context?.channel_type === "Group" &&
context.owner_id === user._id && (
<Localizer>
<Tooltip
content={
<Text id="app.main.groups.owner" />
}
>
content={<Text id="app.main.groups.owner" />}>
<Crown size={20} />
</Tooltip>
</Localizer>
)}
{alert && (
<div className={styles.alert} data-style={alert}>
{alertCount}
</div>
)}
{alert && <div className={styles.alert} data-style={alert}>{ alertCount }</div>}
{ !isTouchscreenDevice && channel &&
<IconButton className={styles.icon}
onClick={e => stopPropagation(e) && openScreen({ id: 'special_prompt', type: 'close_dm', target: channel })}>
{!isTouchscreenDevice && channel && (
<IconButton
className={styles.icon}
onClick={(e) =>
stopPropagation(e) &&
openScreen({
id: "special_prompt",
type: "close_dm",
target: channel,
})
}>
<X size={24} />
</IconButton>
}
)}
</div>
</div>
)
}
);
});
type ChannelProps = CommonProps & {
channel: Channels.Channel & { unread?: string },
user?: Users.User
compact?: boolean
}
channel: Channel & { unread?: string };
user?: User;
compact?: boolean;
};
export function ChannelButton(props: ChannelProps) {
const { active, alert, alertCount, channel, user, compact, ...divProps } = props;
export const ChannelButton = observer((props: ChannelProps) => {
const { active, alert, alertCount, channel, user, compact, ...divProps } =
props;
if (channel.channel_type === 'SavedMessages') throw "Invalid channel type.";
if (channel.channel_type === 'DirectMessage') {
if (typeof user === 'undefined') throw "No user provided.";
return <UserButton {...{ active, alert, channel, user }} />
if (channel.channel_type === "SavedMessages") throw "Invalid channel type.";
if (channel.channel_type === "DirectMessage") {
if (typeof user === "undefined") throw "No user provided.";
return <UserButton {...{ active, alert, channel, user }} />;
}
const { openScreen } = useIntermediate();
return (
<div {...divProps}
<div
{...divProps}
data-active={active}
data-alert={typeof alert === 'string'}
aria-label={{}} /*FIXME: ADD ARIA LABEL*/
data-alert={typeof alert === "string"}
aria-label={channel.name}
className={classNames(styles.item, { [styles.compact]: compact })}
onContextMenu={attachContextMenu('Menu', { channel: channel._id, unread: typeof channel.unread !== 'undefined' })}>
<ChannelIcon className={styles.avatar} target={channel} size={compact ? 24 : 32} />
onContextMenu={attachContextMenu("Menu", {
channel: channel._id,
unread: typeof channel.unread !== "undefined",
})}>
<ChannelIcon
className={styles.avatar}
target={channel}
size={compact ? 24 : 32}
/>
<div className={styles.name}>
<div>{channel.name}</div>
{ channel.channel_type === 'Group' &&
{channel.channel_type === "Group" && (
<div className={styles.subText}>
{(channel.last_message && alert) ? (
channel.last_message.short
{channel.last_message && alert ? (
(channel.last_message as { short: string }).short
) : (
<Text
id="quantities.members"
plural={channel.recipients.length}
fields={{ count: channel.recipients.length }}
plural={channel.recipients!.length}
fields={{ count: channel.recipients!.length }}
/>
)}
</div>
}
)}
</div>
<div className={styles.button}>
{alert && <div className={styles.alert} data-style={alert}>{ alertCount }</div>}
{alert && (
<div className={styles.alert} data-style={alert}>
{alertCount}
</div>
)}
{!isTouchscreenDevice && channel.channel_type === "Group" && (
<IconButton
className={styles.icon}
onClick={() => openScreen({ id: 'special_prompt', type: 'leave_group', target: channel })}>
onClick={() =>
openScreen({
id: "special_prompt",
type: "leave_group",
target: channel,
})
}>
<X size={24} />
</IconButton>
)}
</div>
</div>
)
}
);
});
type ButtonProps = CommonProps & {
onClick?: () => void
children?: Children
className?: string
compact?: boolean
}
onClick?: () => void;
children?: Children;
className?: string;
compact?: boolean;
};
export default function ButtonItem(props: ButtonProps) {
const { active, alert, alertCount, onClick, className, children, compact, ...divProps } = props;
const {
active,
alert,
alertCount,
onClick,
className,
children,
compact,
...divProps
} = props;
return (
<div {...divProps}
className={classNames(styles.item, { [styles.compact]: compact, [styles.normal]: !compact }, className)}
<div
{...divProps}
className={classNames(
styles.item,
{ [styles.compact]: compact, [styles.normal]: !compact },
className,
)}
onClick={onClick}
data-active={active}
data-alert={typeof alert === 'string'}>
<div className={styles.content}>{ children }</div>
{alert && <div className={styles.alert} data-style={alert}>{ alertCount }</div>}
data-alert={typeof alert === "string"}>
<div className={styles.content}>{children}</div>
{alert && (
<div className={styles.alert} data-style={alert}>
{alertCount}
</div>
)}
</div>
)
);
}
src/components/navigation/items/ConnectionStatus.tsx
View file @ 1ac5de17
import { Text } from "preact-i18n";
import Banner from "../../ui/Banner";
import { useContext } from "preact/hooks";
import { ClientStatus, StatusContext } from "../../../context/revoltjs/RevoltClient";
import {
ClientStatus,
StatusContext,
} from "../../../context/revoltjs/RevoltClient";
import Banner from "../../ui/Banner";
export default function ConnectionStatus() {
const status = useContext(StatusContext);
......
src/components/navigation/items/Item.module.scss
View file @ 1ac5de17
......@@ -3,8 +3,8 @@
display: flex;
padding: 0 8px;
user-select: none;
border-radius: 6px;
margin-bottom: 2px;
border-radius: var(--border-radius);
gap: 8px;
align-items: center;
......@@ -20,7 +20,7 @@
height: 42px;
}
&.compact {
&.compact { /* TOFIX: Introduce two separate compact items, one for settings, other for channels. */
height: 32px;
}
......@@ -46,7 +46,7 @@
transition: color .1s ease-in-out;
&.content {
gap: 8px;
gap: 10px;
flex-grow: 1;
min-width: 0;
display: flex;
......@@ -147,14 +147,18 @@
@media (pointer: coarse) {
.item {
height: 55px;
height: 40px;
&.compact {
height: 50px;
height: var(--bottom-navigation-height);
div > svg {
height: 22px;
width: 22px;
> div {
gap: 20px;
> svg {
height: 24px;
width: 24px;
}
}
}
}
......
src/components/navigation/left/HomeSidebar.tsx
View file @ 1ac5de17
import {
Home,
UserDetail,
Wrench,
Notepad,
} from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { Link, Redirect, useLocation, useParams } from "react-router-dom";
import { RelationshipStatus } from "revolt-api/types/Users";
import { Text } from "preact-i18n";
import { useContext, useEffect } from "preact/hooks";
import { Home, UserDetail, Wrench, Notepad } from "@styled-icons/boxicons-solid";
import Category from '../../ui/Category';
import ConditionalLink from "../../../lib/ConditionalLink";
import PaintCounter from "../../../lib/PaintCounter";
import UserHeader from "../../common/user/UserHeader";
import { Channels } from "revolt.js/dist/api/objects";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { dispatch } from "../../../redux";
import { connectState } from "../../../redux/connector";
import ConnectionStatus from '../items/ConnectionStatus';
import { WithDispatcher } from "../../../redux/reducers";
import { Unreads } from "../../../redux/reducers/unreads";
import ConditionalLink from "../../../lib/ConditionalLink";
import { mapChannelWithUnread, useUnreads } from "./common";
import { Users as UsersNS } from 'revolt.js/dist/api/objects';
import ButtonItem, { ChannelButton } from '../items/ButtonItem';
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
import { Link, Redirect, useLocation, useParams } from "react-router-dom";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { useDMs, useForceUpdate, useUsers } from "../../../context/revoltjs/hooks";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import Category from "../../ui/Category";
import placeholderSVG from "../items/placeholder.svg";
import { mapChannelWithUnread, useUnreads } from "./common";
type Props = WithDispatcher & {
import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
import ButtonItem, { ChannelButton } from "../items/ButtonItem";
import ConnectionStatus from "../items/ConnectionStatus";
type Props = {
unreads: Unreads;
}
};
function HomeSidebar(props: Props) {
const HomeSidebar = observer((props: Props) => {
const { pathname } = useLocation();
const client = useContext(AppContext);
const { channel } = useParams<{ channel: string }>();
const { openScreen } = useIntermediate();
const ctx = useForceUpdate();
const channels = useDMs(ctx);
const channels = [...client.channels.values()]
.filter(
(x) =>
x.channel_type === "DirectMessage" ||
x.channel_type === "Group",
)
.map((x) => mapChannelWithUnread(x, props.unreads));
const obj = channels.find(x => x?._id === channel);
const obj = client.channels.get(channel);
if (channel && !obj) return <Redirect to="/" />;
if (obj) useUnreads({ ...props, channel: obj });
useEffect(() => {
if (!channel) return;
props.dispatcher({
type: 'LAST_OPENED_SET',
parent: 'home',
child: channel
dispatch({
type: "LAST_OPENED_SET",
parent: "home",
child: channel,
});
}, [ channel ]);
const channelsArr = channels
.filter(x => x.channel_type !== 'SavedMessages')
.map(x => mapChannelWithUnread(x, props.unreads));
}, [channel]);
const users = useUsers(
(channelsArr as (Channels.DirectMessageChannel | Channels.GroupChannel)[])
.reduce((prev: any, cur) => [ ...prev, ...cur.recipients ], [])
, ctx);
channelsArr.sort((b, a) => a.timestamp.localeCompare(b.timestamp));
channels.sort((b, a) => a.timestamp.localeCompare(b.timestamp));
return (
<GenericSidebarBase padding>
<UserHeader user={client.user!} />
<ConnectionStatus />
<GenericSidebarList>
<ConditionalLink active={pathname === "/"} to="/">
<ButtonItem active={pathname === "/"}>
<Home size={20} />
<span>
<Text id="app.navigation.tabs.home" />
</span>
</ButtonItem>
</ConditionalLink>
{!isTouchscreenDevice && (
<>
<ConditionalLink active={pathname === "/"} to="/">
<ButtonItem active={pathname === "/"}>
<Home size={20} />
<span><Text id="app.navigation.tabs.home" /></span>
</ButtonItem>
</ConditionalLink>
<ConditionalLink active={pathname === "/friends"} to="/friends">
<ConditionalLink
active={pathname === "/friends"}
to="/friends">
<ButtonItem
active={pathname === "/friends"}
alert={
typeof users.find(
user =>
typeof [...client.users.values()].find(
(user) =>
user?.relationship ===
UsersNS.Relationship.Incoming
) !== "undefined" ? 'unread' : undefined
}
>
RelationshipStatus.Incoming,
) !== "undefined"
? "unread"
: undefined
}>
<UserDetail size={20} />
<span><Text id="app.navigation.tabs.friends" /></span>
<span>
<Text id="app.navigation.tabs.friends" />
</span>
</ButtonItem>
</ConditionalLink>
</>
)}
<ConditionalLink active={obj?.channel_type === "SavedMessages"} to="/open/saved">
<ConditionalLink
active={obj?.channel_type === "SavedMessages"}
to="/open/saved">
<ButtonItem active={obj?.channel_type === "SavedMessages"}>
<Notepad size={20} />
<span><Text id="app.navigation.tabs.saved" /></span>
<span>
<Text id="app.navigation.tabs.saved" />
</span>
</ButtonItem>
</ConditionalLink>
{import.meta.env.DEV && (
<Link to="/dev">
<ButtonItem active={pathname === "/dev"}>
<Wrench size={20} />
<span><Text id="app.navigation.tabs.dev" /></span>
<span>
<Text id="app.navigation.tabs.dev" />
</span>
</ButtonItem>
</Link>
)}
<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 => {
action={() =>
openScreen({
id: "special_input",
type: "create_group",
})
}
/>
{channels.length === 0 && (
<img src={placeholderSVG} loading="eager" />
)}
{channels.map((x) => {
let user;
if (x.channel_type === 'DirectMessage') {
if (!x.active) return null;
let recipient = client.channels.getRecipient(x._id);
user = users.find(x => x?._id === recipient);
if (x.channel.channel_type === "DirectMessage") {
if (!x.channel.active) return null;
user = x.channel.recipient;
if (!user) {
console.warn(`Skipped DM ${x._id} because user was missing.`);
console.warn(
`Skipped DM ${x.channel._id} because user was missing.`,
);
return null;
}
}
return (
<ConditionalLink active={x._id === channel} to={`/channel/${x._id}`}>
<ConditionalLink
key={x.channel._id}
active={x.channel._id === channel}
to={`/channel/${x.channel._id}`}>
<ChannelButton
user={user}
channel={x}
channel={x.channel}
alert={x.unread}
alertCount={x.alertCount}
active={x._id === channel}
active={x.channel._id === channel}
/>
</ConditionalLink>
);
......@@ -139,15 +165,14 @@ function HomeSidebar(props: Props) {
</GenericSidebarList>
</GenericSidebarBase>
);
};
});
export default connectState(
HomeSidebar,
state => {
(state) => {
return {
unreads: state.unreads
unreads: state.unreads,
};
},
true,
true
);
src/components/navigation/left/ServerListSidebar.tsx
View file @ 1ac5de17
import Tooltip from "../../common/Tooltip";
import IconButton from "../../ui/IconButton";
import LineDivider from "../../ui/LineDivider";
import { mapChannelWithUnread } from "./common";
import { Plus } from "@styled-icons/boxicons-regular";
import { observer } from "mobx-react-lite";
import { useHistory, useLocation, useParams } from "react-router-dom";
import { RelationshipStatus } from "revolt-api/types/Users";
import styled, { css } from "styled-components";
import ServerIcon from "../../common/ServerIcon";
import { Children } from "../../../types/Preact";
import UserIcon from "../../common/user/UserIcon";
import { attachContextMenu } from "preact-context-menu";
import ConditionalLink from "../../../lib/ConditionalLink";
import PaintCounter from "../../../lib/PaintCounter";
import { Plus } from "@styled-icons/boxicons-regular";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { connectState } from "../../../redux/connector";
import { useLocation, useParams } from "react-router-dom";
import { Unreads } from "../../../redux/reducers/unreads";
import ConditionalLink from "../../../lib/ConditionalLink";
import { Channel, Servers } from "revolt.js/dist/api/objects";
import { LastOpened } from "../../../redux/reducers/last_opened";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { attachContextMenu, openContextMenu } from 'preact-context-menu';
import { Unreads } from "../../../redux/reducers/unreads";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { useChannels, useForceUpdate, useSelf, useServers } from "../../../context/revoltjs/hooks";
import { useClient } from "../../../context/revoltjs/RevoltClient";
import ServerIcon from "../../common/ServerIcon";
import Tooltip from "../../common/Tooltip";
import UserHover from "../../common/user/UserHover";
import UserIcon from "../../common/user/UserIcon";
import IconButton from "../../ui/IconButton";
import LineDivider from "../../ui/LineDivider";
import { mapChannelWithUnread } from "./common";
import { Children } from "../../../types/Preact";
function Icon({ children, unread, size }: { children: Children, unread?: 'mention' | 'unread', size: number }) {
function Icon({
children,
unread,
size,
}: {
children: Children;
unread?: "mention" | "unread";
size: number;
}) {
return (
<svg
width={size}
height={size}
aria-hidden="true"
viewBox="0 0 32 32"
>
<svg width={size} height={size} aria-hidden="true" viewBox="0 0 32 32">
<use href="#serverIndicator" />
<foreignObject x="0" y="0" width="32" height="32" mask={ unread ? "url(#server)" : undefined }>
{ children }
<foreignObject
x="0"
y="0"
width="32"
height="32"
mask={unread ? "url(#server)" : undefined}>
{children}
</foreignObject>
{unread === 'unread' && (
<circle
cx="27"
cy="5"
r="5"
fill={"white"}
/>
{unread === "unread" && (
<circle cx="27" cy="5" r="5" fill={"white"} />
)}
{unread === 'mention' && (
<circle
cx="27"
cy="5"
r="5"
fill={"red"}
/>
{unread === "mention" && (
<circle cx="27" cy="5" r="5" fill={"var(--error)"} />
)}
</svg>
)
);
}
const ServersBase = styled.div`
width: 56px;
height: 100%;
padding-left: 2px;
display: flex;
flex-direction: column;
${ isTouchscreenDevice && css`
${isTouchscreenDevice &&
css`
padding-bottom: 50px;
` }
`}
`;
const ServerList = styled.div`
flex-grow: 1;
display: flex;
overflow-y: scroll;
padding-bottom: 48px;
padding-bottom: 20px;
/*width: 58px;*/
flex-direction: column;
// border-right: 2px solid var(--accent);
scrollbar-width: none;
......@@ -79,24 +87,29 @@ const ServerList = styled.div`
&::-webkit-scrollbar {
width: 0px;
}
/*${isTouchscreenDevice &&
css`
width: 58px;
`}*/
`;
const ServerEntry = styled.div<{ active: boolean, home?: boolean }>`
const ServerEntry = styled.div<{ active: boolean; home?: boolean }>`
height: 58px;
display: flex;
align-items: center;
justify-content: flex-end;
> * {
// outline: 1px solid red;
:focus {
outline: 3px solid blue;
}
> div {
width: 46px;
height: 46px;
height: 42px;
padding-inline-start: 6px;
display: grid;
place-items: center;
border-start-start-radius: 50%;
border-end-start-radius: 50%;
......@@ -104,154 +117,220 @@ const ServerEntry = styled.div<{ active: boolean, home?: boolean }>`
transform: translateY(1px);
}
${ props => props.active && css`
background: var(--sidebar-active);
&:active {
transform: none;
}
` }
${(props) =>
props.active &&
css`
&:active {
transform: none;
}
`}
}
span {
width: 6px;
height: 46px;
${ props => props.active && css`
background-color: var(--sidebar-active);
&::before, &::after {
// outline: 1px solid blue;
}
> span {
width: 0;
display: relative;
&::before, &::after {
content: "";
display: block;
position: relative;
width: 31px;
height: 72px;
margin-top: -72px;
margin-left: -25px;
z-index: -1;
background-color: var(--background);
border-bottom-right-radius: 32px;
box-shadow: 0 32px 0 0 var(--sidebar-active);
}
${(props) =>
!props.active &&
css`
display: none;
`}
&::after {
transform: scaleY(-1) translateY(-118px);
}
` }
svg {
margin-top: 5px;
pointer-events: none;
// outline: 1px solid red;
}
}
${ props => (!props.active || props.home) && css`
cursor: pointer;
` }
${(props) =>
(!props.active || props.home) &&
css`
cursor: pointer;
`}
`;
function Swoosh() {
return (
<span>
<svg
width="54"
height="106"
viewBox="0 0 54 106"
xmlns="http://www.w3.org/2000/svg">
<path
d="M54 53C54 67.9117 41.9117 80 27 80C12.0883 80 0 67.9117 0 53C0 38.0883 12.0883 26 27 26C41.9117 26 54 38.0883 54 53Z"
fill="var(--sidebar-active)"
/>
<path
d="M27 80C4.5 80 54 53 54 53L54.0001 106C54.0001 106 49.5 80 27 80Z"
fill="var(--sidebar-active)"
/>
<path
d="M27 26C4.5 26 54 53 54 53L53.9999 0C53.9999 0 49.5 26 27 26Z"
fill="var(--sidebar-active)"
/>
</svg>
</span>
);
}
interface Props {
unreads: Unreads;
lastOpened: LastOpened;
}
export function ServerListSidebar({ unreads, lastOpened }: Props) {
const ctx = useForceUpdate();
const self = useSelf(ctx);
const activeServers = useServers(undefined, ctx) as Servers.Server[];
const channels = (useChannels(undefined, ctx) as Channel[])
.map(x => mapChannelWithUnread(x, unreads));
const unreadChannels = channels.filter(x => x.unread)
.map(x => x._id);
const servers = activeServers.map(server => {
export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
const client = useClient();
const { server: server_id } = useParams<{ server?: string }>();
const server = server_id ? client.servers.get(server_id) : undefined;
const activeServers = [...client.servers.values()];
const channels = [...client.channels.values()].map((x) =>
mapChannelWithUnread(x, unreads),
);
const unreadChannels = channels
.filter((x) => x.unread)
.map((x) => x.channel?._id);
const servers = activeServers.map((server) => {
let alertCount = 0;
for (let id of server.channels) {
let channel = channels.find(x => x._id === id);
for (const id of server.channel_ids) {
const channel = channels.find((x) => x.channel?._id === id);
if (channel?.alertCount) {
alertCount += channel.alertCount;
}
}
return {
...server,
unread: (typeof server.channels.find(x => unreadChannels.includes(x)) !== 'undefined' ?
( alertCount > 0 ? 'mention' : 'unread' ) : undefined) as 'mention' | 'unread' | undefined,
alertCount
}
server,
unread: (typeof server.channel_ids.find((x) =>
unreadChannels.includes(x),
) !== "undefined"
? alertCount > 0
? "mention"
: "unread"
: undefined) as "mention" | "unread" | undefined,
alertCount,
};
});
const history = useHistory();
const path = useLocation().pathname;
const { server: server_id } = useParams<{ server?: string }>();
const server = servers.find(x => x!._id == server_id);
const { openScreen } = useIntermediate();
let homeUnread: 'mention' | 'unread' | undefined;
let homeUnread: "mention" | "unread" | undefined;
let alertCount = 0;
for (let x of channels) {
if (((x.channel_type === 'DirectMessage' && x.active) || x.channel_type === 'Group') && x.unread) {
homeUnread = 'unread';
for (const x of channels) {
if (
(x.channel?.channel_type === "DirectMessage"
? x.channel?.active
: x.channel?.channel_type === "Group") &&
x.unread
) {
homeUnread = "unread";
alertCount += x.alertCount ?? 0;
}
}
if (alertCount > 0) homeUnread = 'mention';
const homeActive = typeof server === 'undefined' && !path.startsWith('/invite');
if (
[...client.users.values()].find(
(x) => x.relationship === RelationshipStatus.Incoming,
)
) {
alertCount++;
}
if (alertCount > 0) homeUnread = "mention";
const homeActive =
typeof server === "undefined" && !path.startsWith("/invite");
return (
<ServersBase>
<ServerList>
<ConditionalLink active={homeActive} to={lastOpened.home ? `/channel/${lastOpened.home}` : '/'}>
<ConditionalLink
active={homeActive}
to={lastOpened.home ? `/channel/${lastOpened.home}` : "/"}>
<ServerEntry home active={homeActive}>
<div onContextMenu={attachContextMenu('Status')}
onClick={() => homeActive && openContextMenu("Status")}>
<Icon size={42} unread={homeUnread}>
<UserIcon target={self} size={32} status />
</Icon>
<Swoosh />
<div
onContextMenu={attachContextMenu("Status")}
onClick={() =>
homeActive && history.push("/settings")
}>
<UserHover user={client.user}>
<Icon size={42} unread={homeUnread}>
<UserIcon
target={client.user}
size={32}
status
hover
/>
</Icon>
</UserHover>
</div>
<span />
</ServerEntry>
</ConditionalLink>
<LineDivider />
{
servers.map(entry => {
const active = entry!._id === server?._id;
const id = lastOpened[entry!._id];
return (
<ConditionalLink active={active} to={`/server/${entry!._id}` + (id ? `/channel/${id}` : '')}>
<ServerEntry
active={active}
onContextMenu={attachContextMenu('Menu', { server: entry!._id })}>
<Tooltip content={entry.name} placement="right">
<Icon size={42} unread={entry.unread}>
<ServerIcon size={32} target={entry} />
</Icon>
</Tooltip>
<span />
</ServerEntry>
</ConditionalLink>
)
})
}
<IconButton onClick={() => openScreen({ id: 'special_input', type: 'create_server' })}>
{servers.map((entry) => {
const active = entry.server._id === server?._id;
const id = lastOpened[entry.server._id];
return (
<ConditionalLink
key={entry.server._id}
active={active}
to={`/server/${entry.server._id}${
id ? `/channel/${id}` : ""
}`}>
<ServerEntry
active={active}
onContextMenu={attachContextMenu("Menu", {
server: entry.server._id,
})}>
<Swoosh />
<Tooltip
content={entry.server.name}
placement="right">
<Icon size={42} unread={entry.unread}>
<ServerIcon
size={32}
target={entry.server}
/>
</Icon>
</Tooltip>
</ServerEntry>
</ConditionalLink>
);
})}
<IconButton
onClick={() =>
openScreen({
id: "special_input",
type: "create_server",
})
}>
<Plus size={36} />
</IconButton>
{/*<IconButton
onClick={() =>
openScreen({
id: "special_input",
type: "create_server",
})
}>
<Compass size={36} />
</IconButton>*/}
<PaintCounter small />
</ServerList>
</ServersBase>
)
}
);
});
export default connectState(
ServerListSidebar,
state => {
return {
unreads: state.unreads,
lastOpened: state.lastOpened
};
}
);
export default connectState(ServerListSidebar, (state) => {
return {
unreads: state.unreads,
lastOpened: state.lastOpened,
};
});
src/components/navigation/left/ServerSidebar.tsx
View file @ 1ac5de17
import { observer } from "mobx-react-lite";
import { Redirect, useParams } from "react-router";
import { ChannelButton } from "../items/ButtonItem";
import { Channels } from "revolt.js/dist/api/objects";
import { Unreads } from "../../../redux/reducers/unreads";
import { WithDispatcher } from "../../../redux/reducers";
import { useChannels, useForceUpdate, useServer } from "../../../context/revoltjs/hooks";
import { mapChannelWithUnread, useUnreads } from "./common";
import ConnectionStatus from '../items/ConnectionStatus';
import { connectState } from "../../../redux/connector";
import PaintCounter from "../../../lib/PaintCounter";
import styled from "styled-components";
import { attachContextMenu } from 'preact-context-menu';
import ServerHeader from "../../common/ServerHeader";
import styled, { css } from "styled-components";
import { attachContextMenu } from "preact-context-menu";
import { useEffect } from "preact/hooks";
import Category from "../../ui/Category";
import ConditionalLink from "../../../lib/ConditionalLink";
import PaintCounter from "../../../lib/PaintCounter";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { dispatch } from "../../../redux";
import { connectState } from "../../../redux/connector";
import { Unreads } from "../../../redux/reducers/unreads";
import { useClient } from "../../../context/revoltjs/RevoltClient";
import CollapsibleSection from "../../common/CollapsibleSection";
import ServerHeader from "../../common/ServerHeader";
import Category from "../../ui/Category";
import { mapChannelWithUnread, useUnreads } from "./common";
import { ChannelButton } from "../items/ButtonItem";
import ConnectionStatus from "../items/ConnectionStatus";
interface Props {
unreads: Unreads;
......@@ -27,10 +34,13 @@ const ServerBase = styled.div`
flex-shrink: 0;
flex-direction: column;
background: var(--secondary-background);
border-start-start-radius: 8px;
border-end-start-radius: 8px;
overflow: hidden;
${isTouchscreenDevice &&
css`
padding-bottom: 50px;
`}
`;
const ServerList = styled.div`
......@@ -43,46 +53,47 @@ const ServerList = styled.div`
}
`;
function ServerSidebar(props: Props & WithDispatcher) {
const { server: server_id, channel: channel_id } = useParams<{ server?: string, channel?: string }>();
const ctx = useForceUpdate();
const ServerSidebar = observer((props: Props) => {
const client = useClient();
const { server: server_id, channel: channel_id } =
useParams<{ server: string; channel?: string }>();
const server = useServer(server_id, ctx);
const server = client.servers.get(server_id);
if (!server) return <Redirect to="/" />;
const channels = (useChannels(server.channels, ctx)
.filter(entry => typeof entry !== 'undefined') as Readonly<Channels.TextChannel | Channels.VoiceChannel>[])
.map(x => mapChannelWithUnread(x, props.unreads));
const channel = channels.find(x => x?._id === channel_id);
const channel = channel_id ? client.channels.get(channel_id) : undefined;
if (channel_id && !channel) return <Redirect to={`/server/${server_id}`} />;
if (channel) useUnreads({ ...props, channel }, ctx);
if (channel) useUnreads({ ...props, channel });
useEffect(() => {
if (!channel_id) return;
props.dispatcher({
type: 'LAST_OPENED_SET',
dispatch({
type: "LAST_OPENED_SET",
parent: server_id!,
child: channel_id!
child: channel_id!,
});
}, [ channel_id ]);
}, [channel_id, server_id]);
const uncategorised = new Set(server.channel_ids);
const elements = [];
let uncategorised = new Set(server.channels);
let elements = [];
function addChannel(id: string) {
const entry = channels.find(x => x._id === id);
const entry = client.channels.get(id);
if (!entry) return;
const active = channel?._id === entry._id;
return (
<ConditionalLink key={entry._id} active={active} to={`/server/${server!._id}/channel/${entry._id}`}>
<ConditionalLink
key={entry._id}
active={active}
to={`/server/${server!._id}/channel/${entry._id}`}>
<ChannelButton
channel={entry}
active={active}
alert={entry.unread}
// ! FIXME: pull it out directly
alert={mapChannelWithUnread(entry, props.unreads).unread}
compact
/>
</ConditionalLink>
......@@ -90,9 +101,9 @@ function ServerSidebar(props: Props & WithDispatcher) {
}
if (server.categories) {
for (let category of server.categories) {
let channels = [];
for (let id of category.channels) {
for (const category of server.categories) {
const channels = [];
for (const id of category.channels) {
uncategorised.delete(id);
channels.push(addChannel(id));
}
......@@ -102,34 +113,33 @@ function ServerSidebar(props: Props & WithDispatcher) {
id={`category_${category.id}`}
defaultValue
summary={<Category text={category.title} />}>
{ channels }
</CollapsibleSection>
{channels}
</CollapsibleSection>,
);
}
}
for (let id of Array.from(uncategorised).reverse()) {
for (const id of Array.from(uncategorised).reverse()) {
elements.unshift(addChannel(id));
}
return (
<ServerBase>
<ServerHeader server={server} ctx={ctx} />
<ServerHeader server={server} />
<ConnectionStatus />
<ServerList onContextMenu={attachContextMenu('Menu', { server_list: server._id })}>
{ elements }
<ServerList
onContextMenu={attachContextMenu("Menu", {
server_list: server._id,
})}>
{elements}
</ServerList>
<PaintCounter small />
</ServerBase>
)
};
export default connectState(
ServerSidebar,
state => {
return {
unreads: state.unreads
};
},
true
);
);
});
export default connectState(ServerSidebar, (state) => {
return {
unreads: state.unreads,
};
});
src/components/navigation/left/common.ts
View file @ 1ac5de17
import { Channel } from "revolt.js";
import { reaction } from "mobx";
import { Channel } from "revolt.js/dist/maps/Channels";
import { useLayoutEffect } from "preact/hooks";
import { WithDispatcher } from "../../../redux/reducers";
import { dispatch } from "../../../redux";
import { Unreads } from "../../../redux/reducers/unreads";
import { HookContext, useForceUpdate } from "../../../context/revoltjs/hooks";
type UnreadProps = WithDispatcher & {
type UnreadProps = {
channel: Channel;
unreads: Unreads;
}
export function useUnreads({ channel, unreads, dispatcher }: UnreadProps, context?: HookContext) {
const ctx = useForceUpdate(context);
};
export function useUnreads({ channel, unreads }: UnreadProps) {
useLayoutEffect(() => {
function checkUnread(target?: Channel) {
function checkUnread(target: Channel) {
if (!target) return;
if (target._id !== channel._id) return;
if (target.channel_type === "SavedMessages" ||
target.channel_type === "VoiceChannel") return;
if (
target.channel_type === "SavedMessages" ||
target.channel_type === "VoiceChannel"
)
return;
const unread = unreads[channel._id]?.last_id;
if (target.last_message) {
const message = typeof target.last_message === 'string' ? target.last_message : target.last_message._id;
const message =
typeof target.last_message === "string"
? target.last_message
: target.last_message._id;
if (!unread || (unread && message.localeCompare(unread) > 0)) {
dispatcher({
dispatch({
type: "UNREADS_MARK_READ",
channel: channel._id,
message
message,
});
ctx.client.req('PUT', `/channels/${channel._id}/ack/${message}` as '/channels/id/ack/id');
channel.ack(message);
}
}
}
checkUnread(channel);
ctx.client.channels.addListener("mutation", checkUnread);
return () => ctx.client.channels.removeListener("mutation", checkUnread);
return reaction(
() => channel.last_message,
() => checkUnread(channel),
);
}, [channel, unreads]);
}
export function mapChannelWithUnread(channel: Channel, unreads: Unreads) {
let last_message_id;
if (channel.channel_type === 'DirectMessage' || channel.channel_type === 'Group') {
last_message_id = channel.last_message?._id;
} else if (channel.channel_type === 'TextChannel') {
last_message_id = channel.last_message;
if (
channel.channel_type === "DirectMessage" ||
channel.channel_type === "Group"
) {
last_message_id = (channel.last_message as { _id: string })?._id;
} else if (channel.channel_type === "TextChannel") {
last_message_id = channel.last_message as string;
} else {
return { ...channel, unread: undefined, alertCount: undefined, timestamp: channel._id };
return {
channel,
unread: undefined,
alertCount: undefined,
timestamp: channel._id,
};
}
let unread: 'mention' | 'unread' | undefined;
let unread: "mention" | "unread" | undefined;
let alertCount: undefined | number;
if (last_message_id && unreads) {
const u = unreads[channel._id];
if (u) {
if (u.mentions && u.mentions.length > 0) {
alertCount = u.mentions.length;
unread = 'mention';
} else if (u.last_id && last_message_id.localeCompare(u.last_id) > 0) {
unread = 'unread';
unread = "mention";
} else if (
u.last_id &&
(last_message_id as string).localeCompare(u.last_id) > 0
) {
unread = "unread";
}
} else {
unread = 'unread';
unread = "unread";
}
}
return {
...channel,
channel,
timestamp: last_message_id ?? channel._id,
unread,
alertCount
alertCount,
};
}
src/components/navigation/right/ChannelDebugInfo.tsx
View file @ 1ac5de17
/* eslint-disable react-hooks/rules-of-hooks */
import { useRenderState } from "../../../lib/renderer/Singleton";
interface Props {
......@@ -6,7 +7,7 @@ interface Props {
export function ChannelDebugInfo({ id }: Props) {
if (process.env.NODE_ENV !== "development") return null;
let view = useRenderState(id);
const view = useRenderState(id);
if (!view) return null;
return (
......@@ -16,21 +17,24 @@ export function ChannelDebugInfo({ id }: Props) {
display: "block",
fontSize: "12px",
textTransform: "uppercase",
fontWeight: "600"
}}
>
fontWeight: "600",
}}>
Channel Info
</span>
<p style={{ fontSize: "10px", userSelect: "text" }}>
State: <b>{ view.type }</b> <br />
{ view.type === 'RENDER' && view.messages.length > 0 &&
State: <b>{view.type}</b> <br />
{view.type === "RENDER" && view.messages.length > 0 && (
<>
Start: <b>{view.messages[0]._id}</b> <br />
End: <b>{view.messages[view.messages.length - 1]._id}</b> <br />
End:{" "}
<b>
{view.messages[view.messages.length - 1]._id}
</b>{" "}
<br />
At Top: <b>{view.atTop ? "Yes" : "No"}</b> <br />
At Bottom: <b>{view.atBottom ? "Yes" : "No"}</b>
</>
}
)}
</p>
</span>
);
......
src/components/navigation/right/MemberSidebar.tsx
View file @ 1ac5de17
/* eslint-disable react-hooks/rules-of-hooks */
import { observer } from "mobx-react-lite";
import { Link, useParams } from "react-router-dom";
import { Presence } from "revolt-api/types/Users";
import { Channel } from "revolt.js/dist/maps/Channels";
import { Message } from "revolt.js/dist/maps/Messages";
import { Text } from "preact-i18n";
import { useContext, useEffect, useState } from "preact/hooks";
import { User } from "revolt.js";
import Details from "../../../components/ui/Details";
import Category from "../../ui/Category";
import { useParams } from "react-router";
import { UserButton } from "../items/ButtonItem";
import { ChannelDebugInfo } from "./ChannelDebugInfo";
import { Channels, Servers, Users } from "revolt.js/dist/api/objects";
import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
import { getState } from "../../../redux";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { ClientboundNotification } from "revolt.js/dist/websocket/notifications";
import { AppContext, ClientStatus, StatusContext } from "../../../context/revoltjs/RevoltClient";
import { HookContext, useChannel, useForceUpdate, useUsers } from "../../../context/revoltjs/hooks";
import {
ClientStatus,
StatusContext,
useClient,
} from "../../../context/revoltjs/RevoltClient";
import CollapsibleSection from "../../common/CollapsibleSection";
import Button from "../../ui/Button";
import Category from "../../ui/Category";
import InputBox from "../../ui/InputBox";
import Preloader from "../../ui/Preloader";
import placeholderSVG from "../items/placeholder.svg";
interface Props {
ctx: HookContext
}
import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
import { UserButton } from "../items/ButtonItem";
import { ChannelDebugInfo } from "./ChannelDebugInfo";
export default function MemberSidebar(props: { channel?: Channels.Channel }) {
const ctx = useForceUpdate();
const { channel: cid } = useParams<{ channel: string }>();
const channel = props.channel ?? useChannel(cid, ctx);
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);
switch (channel?.channel_type) {
case 'Group': return <GroupMemberSidebar channel={channel} ctx={ctx} />;
case 'TextChannel': return <ServerMemberSidebar channel={channel} ctx={ctx} />;
default: return null;
case "Group":
return <GroupMemberSidebar channel={channel} />;
case "TextChannel":
return <ServerMemberSidebar channel={channel} />;
default:
return null;
}
}
export function GroupMemberSidebar({ channel, ctx }: Props & { channel: Channels.GroupChannel }) {
const { openScreen } = useIntermediate();
const users = useUsers(undefined, ctx);
let members = channel.recipients
.map(x => users.find(y => y?._id === x))
.filter(x => typeof x !== "undefined") as User[];
export const GroupMemberSidebar = observer(
({ channel }: { channel: Channel }) => {
const { openScreen } = useIntermediate();
/*const voice = useContext(VoiceContext);
const members = channel.recipients?.filter(
(x) => typeof x !== "undefined",
);
/*const voice = useContext(VoiceContext);
const voiceActive = voice.roomId === channel._id;
let voiceParticipants: User[] = [];
......@@ -54,28 +66,34 @@ export function GroupMemberSidebar({ channel, ctx }: Props & { channel: Channels
voiceParticipants.sort((a, b) => a.username.localeCompare(b.username));
}*/
members.sort((a, b) => {
// ! FIXME: should probably rewrite all this code
let l = ((a.online &&
a.status?.presence !== Users.Presence.Invisible) ??
false) as any | 0;
let r = ((b.online &&
b.status?.presence !== Users.Presence.Invisible) ??
false) as any | 0;
members?.sort((a, b) => {
// ! FIXME: should probably rewrite all this code
const l =
+(
(a!.online && a!.status?.presence !== Presence.Invisible) ??
false
) | 0;
const r =
+(
(b!.online && b!.status?.presence !== Presence.Invisible) ??
false
) | 0;
let n = r - l;
if (n !== 0) {
return n;
}
const n = r - l;
if (n !== 0) {
return n;
}
return a.username.localeCompare(b.username);
});
return a!.username.localeCompare(b!.username);
});
return (
<GenericSidebarBase>
<GenericSidebarList>
<ChannelDebugInfo id={channel._id} />
{/*voiceActive && voiceParticipants.length !== 0 && (
return (
<GenericSidebarBase>
<GenericSidebarList>
<ChannelDebugInfo id={channel._id} />
<Search channel={channel} />
{/*voiceActive && voiceParticipants.length !== 0 && (
<Fragment>
<Category
type="members"
......@@ -100,108 +118,203 @@ export function GroupMemberSidebar({ channel, ctx }: Props & { channel: Channels
)}
</Fragment>
)*/}
{!(members.length === 0 /*&& voiceActive*/) && (
<Category
variant="uniform"
text={
<span>
<Text id="app.main.categories.members" /> —{" "}
{channel.recipients.length}
</span>
}
/>
)}
{members.length === 0 && /*!voiceActive &&*/ <img src={placeholderSVG} />}
{members.map(
user =>
user && (
<UserButton
key={user._id}
user={user}
context={channel}
onClick={() => openScreen({ id: 'profile', user_id: user._id })} />
)
)}
</GenericSidebarList>
</GenericSidebarBase>
);
}
<CollapsibleSection
sticky
id="members"
defaultValue
summary={
<Category
variant="uniform"
text={
<span>
<Text id="app.main.categories.members" />{" "}
— {channel.recipients?.length ?? 0}
</span>
}
/>
}>
{members?.length === 0 && (
<img src={placeholderSVG} loading="eager" />
)}
{members?.map(
(user) =>
user && (
<UserButton
key={user._id}
user={user}
context={channel!}
onClick={() =>
openScreen({
id: "profile",
user_id: user._id,
})
}
/>
),
)}
</CollapsibleSection>
</GenericSidebarList>
</GenericSidebarBase>
);
},
);
export const ServerMemberSidebar = observer(
({ channel }: { channel: Channel }) => {
const client = useClient();
const { openScreen } = useIntermediate();
const status = useContext(StatusContext);
export function ServerMemberSidebar({ channel, ctx }: Props & { channel: Channels.TextChannel }) {
const [members, setMembers] = useState<Servers.Member[] | undefined>(undefined);
const users = useUsers(members?.map(x => x._id.user) ?? []).filter(x => typeof x !== 'undefined', ctx) as Users.User[];
const status = useContext(StatusContext);
const client = useContext(AppContext);
useEffect(() => {
if (status === ClientStatus.ONLINE && typeof members === 'undefined') {
client.servers.members.fetchMembers(channel.server)
.then(members => setMembers(members))
}
}, [ status ]);
// ! FIXME: temporary code
useEffect(() => {
function onPacket(packet: ClientboundNotification) {
if (!members) return;
if (packet.type === 'ServerMemberJoin') {
if (packet.id !== channel.server) return;
setMembers([ ...members, { _id: { server: packet.id, user: packet.user } } ]);
} else if (packet.type === 'ServerMemberLeave') {
if (packet.id !== channel.server) return;
setMembers(members.filter(x => !(x._id.user === packet.user && x._id.server === packet.id)));
useEffect(() => {
if (status === ClientStatus.ONLINE) {
channel.server!.fetchMembers();
}
}
client.addListener('packet', onPacket);
return () => client.removeListener('packet', onPacket);
}, [ members ]);
// copy paste from above
users.sort((a, b) => {
// ! FIXME: should probably rewrite all this code
let l = ((a.online &&
a.status?.presence !== Users.Presence.Invisible) ??
false) as any | 0;
let r = ((b.online &&
b.status?.presence !== Users.Presence.Invisible) ??
false) as any | 0;
let n = r - l;
if (n !== 0) {
return n;
}
return a.username.localeCompare(b.username);
});
}, [status, channel.server]);
const users = [...client.members.keys()]
.map((x) => JSON.parse(x))
.filter((x) => x.server === channel.server_id)
.map((y) => client.users.get(y.user)!)
.filter((z) => typeof z !== "undefined");
// copy paste from above
users.sort((a, b) => {
// ! FIXME: should probably rewrite all this code
const l =
+(
(a.online && a.status?.presence !== Presence.Invisible) ??
false
) | 0;
const r =
+(
(b.online && b.status?.presence !== Presence.Invisible) ??
false
) | 0;
const n = r - l;
if (n !== 0) {
return n;
}
return a.username.localeCompare(b.username);
});
return (
<GenericSidebarBase>
<GenericSidebarList>
<ChannelDebugInfo id={channel._id} />
<Search channel={channel} />
<div>{users.length === 0 && <Preloader type="ring" />}</div>
{users.length > 0 && (
<CollapsibleSection
//sticky //will re-add later, need to fix css
id="members"
defaultValue
summary={
<span>
<Text id="app.main.categories.members" /> —{" "}
{users?.length ?? 0}
</span>
}>
{users.map(
(user) =>
user && (
<UserButton
key={user._id}
user={user}
context={channel}
onClick={() =>
openScreen({
id: "profile",
user_id: user._id,
})
}
/>
),
)}
</CollapsibleSection>
)}
</GenericSidebarList>
</GenericSidebarBase>
);
},
);
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 (
<GenericSidebarBase>
<GenericSidebarList>
<ChannelDebugInfo id={channel._id} />
<Category
variant="uniform"
text={
<span>
<Text id="app.main.categories.members" /> —{" "}
{users.length}
</span>
<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}`;
}
/>
{users.length === 0 && <img src={placeholderSVG} />}
{users.map(
user =>
user && (
// <LinkProfile user_id={user._id}>
<UserButton
key={user._id}
user={user}
context={channel}
/>
// </LinkProfile>
)
)}
</GenericSidebarList>
</GenericSidebarBase>
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/ui/Button.tsx
View file @ 1ac5de17
import styled, { css } from "styled-components";
interface Props {
readonly compact?: boolean;
readonly accent?: boolean;
readonly contrast?: boolean;
readonly plain?: boolean;
readonly error?: boolean;
readonly gold?: boolean;
readonly iconbutton?: boolean;
}
export type ButtonProps = Props &
Omit<JSX.HTMLAttributes<HTMLButtonElement>, "as">;
export default styled.button<Props>`
z-index: 1;
padding: 8px;
font-size: 16px;
text-align: center;
display: flex;
height: 38px;
min-width: 96px;
align-items: center;
justify-content: center;
padding: 2px 16px;
font-size: 0.875rem;
font-family: inherit;
font-weight: 500;
transition: 0.2s ease opacity;
transition: 0.2s ease background-color;
......@@ -18,7 +31,7 @@ export default styled.button<Props>`
background: var(--primary-background);
color: var(--foreground);
border-radius: 6px;
border-radius: var(--border-radius);
cursor: pointer;
border: none;
......@@ -27,6 +40,7 @@ export default styled.button<Props>`
}
&:disabled {
cursor: not-allowed;
background: var(--primary-background);
}
......@@ -34,6 +48,47 @@ export default styled.button<Props>`
background: var(--secondary-background);
}
${(props) =>
props.compact &&
css`
height: 32px !important;
padding: 2px 12px !important;
font-size: 13px;
`}
${(props) =>
props.iconbutton &&
css`
height: 38px !important;
width: 38px !important;
min-width: unset !important;
`}
${(props) =>
props.accent &&
css`
background: var(--accent) !important;
`}
${(props) =>
props.plain &&
css`
background: transparent !important;
&:hover {
text-decoration: underline;
}
&:disabled {
cursor: not-allowed;
opacity: 0.5;
}
&:active {
background: var(--secondary-background);
}
`}
${(props) =>
props.contrast &&
css`
......@@ -45,6 +100,7 @@ export default styled.button<Props>`
}
&:disabled {
cursor: not-allowed;
background: var(--secondary-header);
}
......@@ -57,6 +113,7 @@ export default styled.button<Props>`
props.error &&
css`
color: white;
font-weight: 600;
background: var(--error);
&:hover {
......@@ -65,7 +122,26 @@ export default styled.button<Props>`
}
&:disabled {
cursor: not-allowed;
background: var(--error);
}
`}
${(props) =>
props.gold &&
css`
color: black;
font-weight: 600;
background: goldenrod;
&:hover {
filter: brightness(1.2);
background: goldenrod;
}
&:disabled {
cursor: not-allowed;
background: goldenrod;
}
`}
`;
src/components/ui/Category.tsx
View file @ 1ac5de17
import { Plus } from "@styled-icons/boxicons-regular";
import styled, { css } from "styled-components";
import { Children } from "../../types/Preact";
import { Plus } from "@styled-icons/boxicons-regular";
const CategoryBase = styled.div<Pick<Props, 'variant'>>`
const CategoryBase = styled.div<Pick<Props, "variant">>`
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
......@@ -11,7 +12,7 @@ const CategoryBase = styled.div<Pick<Props, 'variant'>>`
padding: 6px 0;
margin-bottom: 4px;
white-space: nowrap;
display: flex;
align-items: center;
flex-direction: row;
......@@ -26,26 +27,29 @@ const CategoryBase = styled.div<Pick<Props, 'variant'>>`
padding-top: 0;
}
${ props => props.variant === 'uniform' && css`
padding-top: 6px;
` }
${(props) =>
props.variant === "uniform" &&
css`
padding-top: 6px;
`}
`;
type Props = Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'as' | 'action'> & {
type Props = Omit<
JSX.HTMLAttributes<HTMLDivElement>,
"children" | "as" | "action"
> & {
text: Children;
action?: () => void;
variant?: 'default' | 'uniform';
}
variant?: "default" | "uniform";
};
export default function Category(props: Props) {
let { text, action, ...otherProps } = props;
const { text, action, ...otherProps } = props;
return (
<CategoryBase {...otherProps}>
{text}
{action && (
<Plus size={16} onClick={action} />
)}
{action && <Plus size={16} onClick={action} />}
</CategoryBase>
);
};
}
src/components/ui/Checkbox.tsx
View file @ 1ac5de17
import { Check } from "@styled-icons/boxicons-regular";
import { Children } from "../../types/Preact";
import styled, { css } from "styled-components";
import { Children } from "../../types/Preact";
const CheckboxBase = styled.label`
margin-top: 20px;
gap: 4px;
z-index: 1;
display: flex;
border-radius: 4px;
margin-top: 20px;
align-items: center;
border-radius: var(--border-radius);
cursor: pointer;
font-size: 18px;
......@@ -27,7 +28,7 @@ const CheckboxBase = styled.label`
}
&[disabled] {
opacity: .5;
opacity: 0.5;
cursor: not-allowed;
&:hover {
......@@ -45,7 +46,7 @@ const CheckboxContent = styled.span`
`;
const CheckboxDescription = styled.span`
font-size: .75rem;
font-size: 0.75rem;
font-weight: 400;
color: var(--secondary-foreground);
`;
......@@ -56,9 +57,9 @@ const Checkmark = styled.div<{ checked: boolean }>`
height: 24px;
display: grid;
flex-shrink: 0;
border-radius: 4px;
place-items: center;
transition: 0.2s ease all;
border-radius: var(--border-radius);
background: var(--secondary-background);
svg {
......
src/components/ui/ColourSwatches.tsx
View file @ 1ac5de17
import { useRef } from "preact/hooks";
import { Check } from "@styled-icons/boxicons-regular";
import { Palette } from "@styled-icons/boxicons-solid";
import styled, { css } from "styled-components";
import { RefObject } from "preact";
import { useRef } from "preact/hooks";
interface Props {
value: string;
onChange: (value: string) => void;
......@@ -32,21 +34,40 @@ const presets = [
];
const SwatchesBase = styled.div`
gap: 8px;
/*gap: 8px;*/
display: flex;
input {
width: 0;
height: 0;
top: 72px;
opacity: 0;
margin-top: 44px;
position: absolute;
padding: 0;
border: 0;
position: relative;
pointer-events: none;
}
.overlay {
position: relative;
width: 0;
div {
width: 8px;
height: 68px;
background: linear-gradient(
to right,
var(--primary-background),
transparent
);
}
}
`;
const Swatch = styled.div<{ type: "small" | "large"; colour: string }>`
flex-shrink: 0;
cursor: pointer;
border-radius: 4px;
border-radius: var(--border-radius);
background-color: ${(props) => props.colour};
display: grid;
......@@ -81,32 +102,39 @@ const Rows = styled.div`
gap: 8px;
display: flex;
flex-direction: column;
overflow: auto;
padding-bottom: 4px;
> div {
gap: 8px;
display: flex;
flex-direction: row;
padding-inline-start: 8px;
}
`;
export default function ColourSwatches({ value, onChange }: Props) {
const ref = useRef<HTMLInputElement>();
const ref = useRef<HTMLInputElement>() as RefObject<HTMLInputElement>;
return (
<SwatchesBase>
<Swatch
colour={value}
type="large"
onClick={() => ref.current.click()}
>
<Palette size={32} />
</Swatch>
<input
type="color"
value={value}
ref={ref}
onChange={(ev) => onChange(ev.currentTarget.value)}
/>
<Swatch
colour={value}
type="large"
onClick={() => ref.current?.click()}>
<Palette size={32} />
</Swatch>
<div class="overlay">
<div />
</div>
<Rows>
{presets.map((row, i) => (
<div key={i}>
......@@ -115,11 +143,8 @@ export default function ColourSwatches({ value, onChange }: Props) {
colour={swatch}
type="small"
key={i}
onClick={() => onChange(swatch)}
>
{swatch === value && (
<Check size={18} />
)}
onClick={() => onChange(swatch)}>
{swatch === value && <Check size={22} />}
</Swatch>
))}
</div>
......
src/components/ui/ComboBox.tsx
View file @ 1ac5de17
import styled from "styled-components";
export default styled.select`
padding: 8px;
border-radius: 6px;
width: 100%;
padding: 10px;
cursor: pointer;
border-radius: var(--border-radius);
font-family: inherit;
font-size: var(--text-size);
color: var(--secondary-foreground);
background: var(--secondary-background);
font-size: .875rem;
border: none;
outline: 2px solid transparent;
transition: box-shadow 0.2s ease-in-out;
transition: outline-color 0.2s ease-in-out;
transition: box-shadow .3s;
cursor: pointer;
width: 100%;
&:focus {
box-shadow: 0 0 0 2pt var(--accent);
box-shadow: 0 0 0 1.5pt var(--accent);
}
`;
src/components/ui/DateDivider.tsx
View file @ 1ac5de17
import dayjs from "dayjs";
import styled, { css } from "styled-components";
import { dayjs } from "../../context/Locale";
const Base = styled.div<{ unread?: boolean }>`
height: 0;
display: flex;
......@@ -11,16 +12,19 @@ const Base = styled.div<{ unread?: boolean }>`
time {
margin-top: -2px;
font-size: .6875rem;
line-height: .6875rem;
padding: 2px 5px 2px 0;
font-size: 0.6875rem;
line-height: 0.6875rem;
padding: 2px 0 2px 0;
padding-inline-end: 5px;
color: var(--tertiary-foreground);
background: var(--primary-background);
}
${ props => props.unread && css`
border-top: thin solid var(--accent);
` }
${(props) =>
props.unread &&
css`
border-top: thin solid var(--accent);
`}
`;
const Unread = styled.div`
......@@ -39,10 +43,8 @@ interface Props {
export default function DateDivider(props: Props) {
return (
<Base unread={props.unread}>
{ props.unread && <Unread>NEW</Unread> }
<time>
{ dayjs(props.date).format("LL") }
</time>
{props.unread && <Unread>NEW</Unread>}
<time>{dayjs(props.date).format("LL")}</time>
</Base>
);
}
src/components/ui/Details.tsx
View file @ 1ac5de17
import styled, { css } from "styled-components";
export default styled.details<{ sticky?: boolean, large?: boolean }>`
export default styled.details<{ sticky?: boolean; large?: boolean }>`
summary {
${ props => props.sticky && css`
top: -1px;
z-index: 10;
position: sticky;
` }
${(props) =>
props.sticky &&
css`
top: -1px;
z-index: 10;
position: sticky;
`}
${ props => props.large && css`
/*padding: 5px 0;*/
background: var(--primary-background);
color: var(--secondary-foreground);
${(props) =>
props.large &&
css`
/*padding: 5px 0;*/
background: var(--primary-background);
color: var(--secondary-foreground);
.padding { /*TOFIX: make this applicable only for the friends list menu, DO NOT REMOVE.*/
display: flex;
align-items: center;
padding: 5px 0;
margin: 0.8em 0px 0.4em;
cursor: pointer;
}
` }
.padding {
/*TOFIX: make this applicable only for the friends list menu, DO NOT REMOVE.*/
display: flex;
align-items: center;
padding: 5px 0;
margin: 0.8em 0px 0.4em;
cursor: pointer;
}
`}
outline: none;
cursor: pointer;
list-style: none;
user-select: none;
align-items: center;
transition: .2s opacity;
transition: 0.2s opacity;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
&::marker, &::-webkit-details-marker {
&::marker,
&::-webkit-details-marker {
display: none;
}
......@@ -44,23 +51,23 @@ export default styled.details<{ sticky?: boolean, large?: boolean }>`
white-space: nowrap;
}
.padding {
.padding {
display: flex;
align-items: center;
> svg {
flex-shrink: 0;
margin-inline-end: 4px;
transition: .2s ease transform;
transition: 0.2s ease transform;
}
}
}
&:not([open]) {
summary {
opacity: .7;
opacity: 0.7;
}
summary svg {
transform: rotateZ(-90deg);
}
......
src/components/ui/Header.tsx
View file @ 1ac5de17
......@@ -3,7 +3,7 @@ import styled, { css } from "styled-components";
interface Props {
borders?: boolean;
background?: boolean;
placement: 'primary' | 'secondary'
placement: "primary" | "secondary";
}
export default styled.div<Props>`
......@@ -25,6 +25,11 @@ export default styled.div<Props>`
flex-shrink: 0;
}
.menu {
margin-inline-end: 8px;
color: var(--secondary-foreground);
}
/*@media only screen and (max-width: 768px) {
padding: 0 12px;
}*/
......@@ -32,20 +37,26 @@ export default styled.div<Props>`
@media (pointer: coarse) {
height: 56px;
}
${ props => props.background && css`
height: 120px !important;
align-items: flex-end;
text-shadow: 0px 0px 1px black;
` }
${ props => props.placement === 'secondary' && css`
background-color: var(--secondary-header);
padding: 14px;
` }
${ props => props.borders && css`
border-start-start-radius: 8px;
` }
${(props) =>
props.background &&
css`
height: 120px !important;
align-items: flex-end;
text-shadow: 0px 0px 1px black;
`}
${(props) =>
props.placement === "secondary" &&
css`
background-color: var(--secondary-header);
padding: 14px;
`}
${(props) =>
props.borders &&
css`
border-start-start-radius: 8px;
`}
`;
src/components/ui/IconButton.tsx
View file @ 1ac5de17
import styled, { css } from "styled-components";
interface Props {
type?: 'default' | 'circle'
rotate?: string;
type?: "default" | "circle";
}
const normal = `var(--secondary-foreground)`;
......@@ -12,7 +13,7 @@ export default styled.div<Props>`
display: grid;
cursor: pointer;
place-items: center;
transition: .1s ease background-color;
transition: 0.1s ease background-color;
fill: ${normal};
color: ${normal};
......@@ -22,6 +23,10 @@ export default styled.div<Props>`
color: ${normal};
}
svg {
transition: 0.2s ease transform;
}
&:hover {
fill: ${hover};
color: ${hover};
......@@ -32,13 +37,23 @@ export default styled.div<Props>`
}
}
${ props => props.type === 'circle' && css`
padding: 4px;
border-radius: 50%;
background-color: var(--secondary-header);
&:hover {
background-color: var(--primary-header);
}
` }
${(props) =>
props.type === "circle" &&
css`
padding: 4px;
border-radius: 50%;
background-color: var(--secondary-header);
&:hover {
background-color: var(--primary-header);
}
`}
${(props) =>
props.rotate &&
css`
svg {
transform: rotateZ(${props.rotate});
}
`}
`;
src/components/ui/InputBox.tsx
View file @ 1ac5de17
......@@ -6,24 +6,26 @@ interface Props {
export default styled.input<Props>`
z-index: 1;
font-size: 1rem;
padding: 8px 16px;
border-radius: 6px;
border-radius: var(--border-radius);
font-family: inherit;
color: var(--foreground);
background: var(--primary-background);
transition: 0.2s ease background-color;
border: none;
outline: 2px solid transparent;
transition: outline-color 0.2s ease-in-out;
transition: box-shadow 0.2s ease-in-out;
&:hover {
background: var(--secondary-background);
}
&:focus {
outline: 2px solid var(--accent);
box-shadow: 0 0 0 1.5pt var(--accent);
}
${(props) =>
......
src/components/ui/Masks.tsx
View file @ 1ac5de17
......@@ -2,7 +2,7 @@
export default function Masks() {
return (
<svg width={0} height={0} style={{ position: 'fixed' }}>
<svg width={0} height={0} style={{ position: "fixed" }}>
<defs>
<mask id="server">
<rect x="0" y="0" width="32" height="32" fill="white" />
......@@ -12,11 +12,15 @@ export default function Masks() {
<rect x="0" y="0" width="32" height="32" fill="white" />
<circle cx="27" cy="27" r="7" fill={"black"} />
</mask>
<mask id="session">
<rect x="0" y="0" width="32" height="32" fill="white" />
<circle cx="26" cy="28" r="10" fill={"black"} />
</mask>
<mask id="overlap">
<rect x="0" y="0" width="32" height="32" fill="white" />
<circle cx="32" cy="16" r="18" fill={"black"} />
</mask>
</defs>
</svg>
)
}
\ No newline at end of file
);
}