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
Showing
with 505 additions and 290 deletions
import { Channel } from "revolt.js"; import { reaction } from "mobx";
import { Channel } from "revolt.js/dist/maps/Channels";
import { useLayoutEffect } from "preact/hooks"; import { useLayoutEffect } from "preact/hooks";
import { dispatch } from "../../../redux"; import { dispatch } from "../../../redux";
import { Unreads } from "../../../redux/reducers/unreads"; import { Unreads } from "../../../redux/reducers/unreads";
import { HookContext, useForceUpdate } from "../../../context/revoltjs/hooks";
type UnreadProps = { type UnreadProps = {
channel: Channel; channel: Channel;
unreads: Unreads; unreads: Unreads;
}; };
export function useUnreads( export function useUnreads({ channel, unreads }: UnreadProps) {
{ channel, unreads }: UnreadProps,
context?: HookContext,
) {
const ctx = useForceUpdate(context);
useLayoutEffect(() => { useLayoutEffect(() => {
function checkUnread(target?: Channel) { function checkUnread(target: Channel) {
if (!target) return; if (!target) return;
if (target._id !== channel._id) return; if (target._id !== channel._id) return;
if ( if (
...@@ -41,19 +35,16 @@ export function useUnreads( ...@@ -41,19 +35,16 @@ export function useUnreads(
message, message,
}); });
ctx.client.req( channel.ack(message);
"PUT",
`/channels/${channel._id}/ack/${message}` as "/channels/id/ack/id",
);
} }
} }
} }
checkUnread(channel); checkUnread(channel);
return reaction(
ctx.client.channels.addListener("mutation", checkUnread); () => channel.last_message,
return () => () => checkUnread(channel),
ctx.client.channels.removeListener("mutation", checkUnread); );
}, [channel, unreads]); }, [channel, unreads]);
} }
...@@ -63,12 +54,12 @@ export function mapChannelWithUnread(channel: Channel, unreads: Unreads) { ...@@ -63,12 +54,12 @@ export function mapChannelWithUnread(channel: Channel, unreads: Unreads) {
channel.channel_type === "DirectMessage" || channel.channel_type === "DirectMessage" ||
channel.channel_type === "Group" channel.channel_type === "Group"
) { ) {
last_message_id = channel.last_message?._id; last_message_id = (channel.last_message as { _id: string })?._id;
} else if (channel.channel_type === "TextChannel") { } else if (channel.channel_type === "TextChannel") {
last_message_id = channel.last_message; last_message_id = channel.last_message as string;
} else { } else {
return { return {
...channel, channel,
unread: undefined, unread: undefined,
alertCount: undefined, alertCount: undefined,
timestamp: channel._id, timestamp: channel._id,
...@@ -85,7 +76,7 @@ export function mapChannelWithUnread(channel: Channel, unreads: Unreads) { ...@@ -85,7 +76,7 @@ export function mapChannelWithUnread(channel: Channel, unreads: Unreads) {
unread = "mention"; unread = "mention";
} else if ( } else if (
u.last_id && u.last_id &&
last_message_id.localeCompare(u.last_id) > 0 (last_message_id as string).localeCompare(u.last_id) > 0
) { ) {
unread = "unread"; unread = "unread";
} }
...@@ -95,7 +86,7 @@ export function mapChannelWithUnread(channel: Channel, unreads: Unreads) { ...@@ -95,7 +86,7 @@ export function mapChannelWithUnread(channel: Channel, unreads: Unreads) {
} }
return { return {
...channel, channel,
timestamp: last_message_id ?? channel._id, timestamp: last_message_id ?? channel._id,
unread, unread,
alertCount, alertCount,
......
/* eslint-disable react-hooks/rules-of-hooks */
import { useRenderState } from "../../../lib/renderer/Singleton"; import { useRenderState } from "../../../lib/renderer/Singleton";
interface Props { interface Props {
...@@ -6,7 +7,7 @@ interface Props { ...@@ -6,7 +7,7 @@ interface Props {
export function ChannelDebugInfo({ id }: Props) { export function ChannelDebugInfo({ id }: Props) {
if (process.env.NODE_ENV !== "development") return null; if (process.env.NODE_ENV !== "development") return null;
let view = useRenderState(id); const view = useRenderState(id);
if (!view) return null; if (!view) return null;
return ( return (
......
import { useParams } from "react-router"; /* eslint-disable react-hooks/rules-of-hooks */
import { User } from "revolt.js"; import { observer } from "mobx-react-lite";
import { Channels, Servers, Users } from "revolt.js/dist/api/objects"; import { Link, useParams } from "react-router-dom";
import { ClientboundNotification } from "revolt.js/dist/websocket/notifications"; 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 { Text } from "preact-i18n";
import { useContext, useEffect, useState } from "preact/hooks"; import { useContext, useEffect, useState } from "preact/hooks";
import { getState } from "../../../redux";
import { useIntermediate } from "../../../context/intermediate/Intermediate"; import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { import {
AppContext,
ClientStatus, ClientStatus,
StatusContext, StatusContext,
useClient,
} from "../../../context/revoltjs/RevoltClient"; } from "../../../context/revoltjs/RevoltClient";
import {
HookContext,
useChannel,
useForceUpdate,
useUsers,
} from "../../../context/revoltjs/hooks";
import CollapsibleSection from "../../common/CollapsibleSection";
import Button from "../../ui/Button";
import Category from "../../ui/Category"; import Category from "../../ui/Category";
import InputBox from "../../ui/InputBox";
import Preloader from "../../ui/Preloader"; import Preloader from "../../ui/Preloader";
import placeholderSVG from "../items/placeholder.svg"; import placeholderSVG from "../items/placeholder.svg";
...@@ -27,36 +28,30 @@ import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase"; ...@@ -27,36 +28,30 @@ import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
import { UserButton } from "../items/ButtonItem"; import { UserButton } from "../items/ButtonItem";
import { ChannelDebugInfo } from "./ChannelDebugInfo"; import { ChannelDebugInfo } from "./ChannelDebugInfo";
interface Props { export default function MemberSidebar({ channel: obj }: { channel?: Channel }) {
ctx: HookContext; const { channel: channel_id } = useParams<{ channel: string }>();
} const client = useClient();
const channel = obj ?? client.channels.get(channel_id);
export default function MemberSidebar(props: { channel?: Channels.Channel }) {
const ctx = useForceUpdate();
const { channel: cid } = useParams<{ channel: string }>();
const channel = props.channel ?? useChannel(cid, ctx);
switch (channel?.channel_type) { switch (channel?.channel_type) {
case "Group": case "Group":
return <GroupMemberSidebar channel={channel} ctx={ctx} />; return <GroupMemberSidebar channel={channel} />;
case "TextChannel": case "TextChannel":
return <ServerMemberSidebar channel={channel} ctx={ctx} />; return <ServerMemberSidebar channel={channel} />;
default: default:
return null; return null;
} }
} }
export function GroupMemberSidebar({ export const GroupMemberSidebar = observer(
channel, ({ channel }: { channel: Channel }) => {
ctx, const { openScreen } = useIntermediate();
}: Props & { channel: Channels.GroupChannel }) {
const { openScreen } = useIntermediate(); const members = channel.recipients?.filter(
const users = useUsers(undefined, ctx); (x) => typeof x !== "undefined",
let members = channel.recipients );
.map((x) => users.find((y) => y?._id === x))
.filter((x) => typeof x !== "undefined") as User[]; /*const voice = useContext(VoiceContext);
/*const voice = useContext(VoiceContext);
const voiceActive = voice.roomId === channel._id; const voiceActive = voice.roomId === channel._id;
let voiceParticipants: User[] = []; let voiceParticipants: User[] = [];
...@@ -71,32 +66,34 @@ export function GroupMemberSidebar({ ...@@ -71,32 +66,34 @@ export function GroupMemberSidebar({
voiceParticipants.sort((a, b) => a.username.localeCompare(b.username)); voiceParticipants.sort((a, b) => a.username.localeCompare(b.username));
}*/ }*/
members.sort((a, b) => { members?.sort((a, b) => {
// ! FIXME: should probably rewrite all this code // ! FIXME: should probably rewrite all this code
let l = const l =
+( +(
(a.online && a.status?.presence !== Users.Presence.Invisible) ?? (a!.online && a!.status?.presence !== Presence.Invisible) ??
false false
) | 0; ) | 0;
let r = const r =
+( +(
(b.online && b.status?.presence !== Users.Presence.Invisible) ?? (b!.online && b!.status?.presence !== Presence.Invisible) ??
false false
) | 0; ) | 0;
let n = r - l;
if (n !== 0) {
return n;
}
return a.username.localeCompare(b.username);
});
return ( const n = r - l;
<GenericSidebarBase> if (n !== 0) {
<GenericSidebarList> return n;
<ChannelDebugInfo id={channel._id} /> }
{/*voiceActive && voiceParticipants.length !== 0 && (
return a!.username.localeCompare(b!.username);
});
return (
<GenericSidebarBase>
<GenericSidebarList>
<ChannelDebugInfo id={channel._id} />
<Search channel={channel} />
{/*voiceActive && voiceParticipants.length !== 0 && (
<Fragment> <Fragment>
<Category <Category
type="members" type="members"
...@@ -121,148 +118,203 @@ export function GroupMemberSidebar({ ...@@ -121,148 +118,203 @@ export function GroupMemberSidebar({
)} )}
</Fragment> </Fragment>
)*/} )*/}
{!((members.length === 0) /*&& voiceActive*/) && ( <CollapsibleSection
<Category sticky
variant="uniform" id="members"
text={ defaultValue
<span> summary={
<Text id="app.main.categories.members" />{" "} <Category
{channel.recipients.length} variant="uniform"
</span> text={
} <span>
/> <Text id="app.main.categories.members" />{" "}
)} {channel.recipients?.length ?? 0}
{members.length === 0 && ( </span>
/*!voiceActive &&*/ <img src={placeholderSVG} />
)}
{members.map(
(user) =>
user && (
<UserButton
key={user._id}
user={user}
context={channel}
onClick={() =>
openScreen({
id: "profile",
user_id: user._id,
})
} }
/> />
), }>
)} {members?.length === 0 && (
</GenericSidebarList> <img src={placeholderSVG} loading="eager" />
</GenericSidebarBase> )}
); {members?.map(
} (user) =>
user && (
<UserButton
key={user._id}
user={user}
context={channel!}
onClick={() =>
openScreen({
id: "profile",
user_id: user._id,
})
}
/>
),
)}
</CollapsibleSection>
</GenericSidebarList>
</GenericSidebarBase>
);
},
);
export function ServerMemberSidebar({ export const ServerMemberSidebar = observer(
channel, ({ channel }: { channel: Channel }) => {
ctx, const client = useClient();
}: Props & { channel: Channels.TextChannel }) { const { openScreen } = useIntermediate();
const [members, setMembers] = useState<Servers.Member[] | undefined>( const status = useContext(StatusContext);
undefined,
); useEffect(() => {
const users = useUsers(members?.map((x) => x._id.user) ?? []).filter( if (status === ClientStatus.ONLINE) {
(x) => typeof x !== "undefined", channel.server!.fetchMembers();
ctx,
) as Users.User[];
const { openScreen } = useIntermediate();
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
),
),
);
} }
} }, [status, channel.server]);
client.addListener("packet", onPacket); const users = [...client.members.keys()]
return () => client.removeListener("packet", onPacket); .map((x) => JSON.parse(x))
}, [members]); .filter((x) => x.server === channel.server_id)
.map((y) => client.users.get(y.user)!)
// copy paste from above .filter((z) => typeof z !== "undefined");
users.sort((a, b) => {
// ! FIXME: should probably rewrite all this code // copy paste from above
let l = users.sort((a, b) => {
+( // ! FIXME: should probably rewrite all this code
(a.online && a.status?.presence !== Users.Presence.Invisible) ?? const l =
false +(
) | 0; (a.online && a.status?.presence !== Presence.Invisible) ??
let r = false
+( ) | 0;
(b.online && b.status?.presence !== Users.Presence.Invisible) ?? const r =
false +(
) | 0; (b.online && b.status?.presence !== Presence.Invisible) ??
false
let n = r - l; ) | 0;
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} />
<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 ( return (
<GenericSidebarBase> <CollapsibleSection
<GenericSidebarList> sticky
<ChannelDebugInfo id={channel._id} /> id="search"
<div> defaultValue={false}
{!members && <Preloader type="ring" />} summary={
</div> <>
{ members && <Category <Text id="app.main.channel.search.title" /> (BETA)
variant="uniform" </>
text={ }>
<span> <div style={{ display: "flex" }}>
<Text id="app.main.categories.members" />{" "} {["Relevance", "Latest", "Oldest"].map((key) => (
{users.length} <Button
</span> 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}`;
} }
/> }
{members && users.length === 0 && <img src={placeholderSVG} />} href += `/channel/${message.channel_id}/${message._id}`;
{users.map(
(user) => return (
user && ( <Link to={href} key={message._id}>
<UserButton <div
key={user._id} style={{
user={user} margin: "2px",
context={channel} padding: "6px",
onClick={() => background: "var(--primary-background)",
openScreen({ }}>
id: "profile", <b>@{message.author?.username}</b>
user_id: user._id, <br />
}) {message.content}
} </div>
/> </Link>
), );
)} })}
</GenericSidebarList> </div>
</GenericSidebarBase> </CollapsibleSection>
); );
} }
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
interface Props { interface Props {
readonly compact?: boolean;
readonly accent?: boolean;
readonly contrast?: boolean; readonly contrast?: boolean;
readonly plain?: boolean;
readonly error?: boolean; readonly error?: boolean;
readonly gold?: boolean;
readonly iconbutton?: boolean;
} }
export type ButtonProps = Props &
Omit<JSX.HTMLAttributes<HTMLButtonElement>, "as">;
export default styled.button<Props>` export default styled.button<Props>`
z-index: 1; z-index: 1;
padding: 8px; display: flex;
font-size: 16px; height: 38px;
text-align: center; min-width: 96px;
align-items: center;
justify-content: center;
padding: 2px 16px;
font-size: 0.875rem;
font-family: inherit; font-family: inherit;
font-weight: 500;
transition: 0.2s ease opacity; transition: 0.2s ease opacity;
transition: 0.2s ease background-color; transition: 0.2s ease background-color;
...@@ -18,7 +31,7 @@ export default styled.button<Props>` ...@@ -18,7 +31,7 @@ export default styled.button<Props>`
background: var(--primary-background); background: var(--primary-background);
color: var(--foreground); color: var(--foreground);
border-radius: 6px; border-radius: var(--border-radius);
cursor: pointer; cursor: pointer;
border: none; border: none;
...@@ -27,6 +40,7 @@ export default styled.button<Props>` ...@@ -27,6 +40,7 @@ export default styled.button<Props>`
} }
&:disabled { &:disabled {
cursor: not-allowed;
background: var(--primary-background); background: var(--primary-background);
} }
...@@ -34,6 +48,47 @@ export default styled.button<Props>` ...@@ -34,6 +48,47 @@ export default styled.button<Props>`
background: var(--secondary-background); 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) =>
props.contrast && props.contrast &&
css` css`
...@@ -45,6 +100,7 @@ export default styled.button<Props>` ...@@ -45,6 +100,7 @@ export default styled.button<Props>`
} }
&:disabled { &:disabled {
cursor: not-allowed;
background: var(--secondary-header); background: var(--secondary-header);
} }
...@@ -57,6 +113,7 @@ export default styled.button<Props>` ...@@ -57,6 +113,7 @@ export default styled.button<Props>`
props.error && props.error &&
css` css`
color: white; color: white;
font-weight: 600;
background: var(--error); background: var(--error);
&:hover { &:hover {
...@@ -65,7 +122,26 @@ export default styled.button<Props>` ...@@ -65,7 +122,26 @@ export default styled.button<Props>`
} }
&:disabled { &:disabled {
cursor: not-allowed;
background: var(--error); 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;
}
`}
`; `;
...@@ -44,7 +44,7 @@ type Props = Omit< ...@@ -44,7 +44,7 @@ type Props = Omit<
}; };
export default function Category(props: Props) { export default function Category(props: Props) {
let { text, action, ...otherProps } = props; const { text, action, ...otherProps } = props;
return ( return (
<CategoryBase {...otherProps}> <CategoryBase {...otherProps}>
......
...@@ -4,12 +4,12 @@ import styled, { css } from "styled-components"; ...@@ -4,12 +4,12 @@ import styled, { css } from "styled-components";
import { Children } from "../../types/Preact"; import { Children } from "../../types/Preact";
const CheckboxBase = styled.label` const CheckboxBase = styled.label`
margin-top: 20px;
gap: 4px; gap: 4px;
z-index: 1; z-index: 1;
display: flex; display: flex;
border-radius: 4px; margin-top: 20px;
align-items: center; align-items: center;
border-radius: var(--border-radius);
cursor: pointer; cursor: pointer;
font-size: 18px; font-size: 18px;
...@@ -57,9 +57,9 @@ const Checkmark = styled.div<{ checked: boolean }>` ...@@ -57,9 +57,9 @@ const Checkmark = styled.div<{ checked: boolean }>`
height: 24px; height: 24px;
display: grid; display: grid;
flex-shrink: 0; flex-shrink: 0;
border-radius: 4px;
place-items: center; place-items: center;
transition: 0.2s ease all; transition: 0.2s ease all;
border-radius: var(--border-radius);
background: var(--secondary-background); background: var(--secondary-background);
svg { svg {
......
...@@ -2,6 +2,7 @@ import { Check } from "@styled-icons/boxicons-regular"; ...@@ -2,6 +2,7 @@ import { Check } from "@styled-icons/boxicons-regular";
import { Palette } from "@styled-icons/boxicons-solid"; import { Palette } from "@styled-icons/boxicons-solid";
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
import { RefObject } from "preact";
import { useRef } from "preact/hooks"; import { useRef } from "preact/hooks";
interface Props { interface Props {
...@@ -33,21 +34,40 @@ const presets = [ ...@@ -33,21 +34,40 @@ const presets = [
]; ];
const SwatchesBase = styled.div` const SwatchesBase = styled.div`
gap: 8px; /*gap: 8px;*/
display: flex; display: flex;
input { input {
width: 0;
height: 0;
top: 72px;
opacity: 0; opacity: 0;
margin-top: 44px; padding: 0;
position: absolute; border: 0;
position: relative;
pointer-events: none; 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 }>` const Swatch = styled.div<{ type: "small" | "large"; colour: string }>`
flex-shrink: 0; flex-shrink: 0;
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: var(--border-radius);
background-color: ${(props) => props.colour}; background-color: ${(props) => props.colour};
display: grid; display: grid;
...@@ -82,31 +102,39 @@ const Rows = styled.div` ...@@ -82,31 +102,39 @@ const Rows = styled.div`
gap: 8px; gap: 8px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: auto;
padding-bottom: 4px;
> div { > div {
gap: 8px; gap: 8px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding-inline-start: 8px;
} }
`; `;
export default function ColourSwatches({ value, onChange }: Props) { export default function ColourSwatches({ value, onChange }: Props) {
const ref = useRef<HTMLInputElement>(); const ref = useRef<HTMLInputElement>() as RefObject<HTMLInputElement>;
return ( return (
<SwatchesBase> <SwatchesBase>
<Swatch
colour={value}
type="large"
onClick={() => ref.current.click()}>
<Palette size={32} />
</Swatch>
<input <input
type="color" type="color"
value={value} value={value}
ref={ref} ref={ref}
onChange={(ev) => onChange(ev.currentTarget.value)} 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> <Rows>
{presets.map((row, i) => ( {presets.map((row, i) => (
<div key={i}> <div key={i}>
...@@ -116,7 +144,7 @@ export default function ColourSwatches({ value, onChange }: Props) { ...@@ -116,7 +144,7 @@ export default function ColourSwatches({ value, onChange }: Props) {
type="small" type="small"
key={i} key={i}
onClick={() => onChange(swatch)}> onClick={() => onChange(swatch)}>
{swatch === value && <Check size={18} />} {swatch === value && <Check size={22} />}
</Swatch> </Swatch>
))} ))}
</div> </div>
......
import styled from "styled-components"; import styled from "styled-components";
export default styled.select` export default styled.select`
padding: 8px; width: 100%;
border-radius: 6px; padding: 10px;
cursor: pointer;
border-radius: var(--border-radius);
font-family: inherit; font-family: inherit;
font-size: var(--text-size);
color: var(--secondary-foreground); color: var(--secondary-foreground);
background: var(--secondary-background); background: var(--secondary-background);
font-size: 0.875rem;
border: none; border: none;
outline: 2px solid transparent; outline: 2px solid transparent;
transition: box-shadow 0.2s ease-in-out;
transition: outline-color 0.2s ease-in-out; transition: outline-color 0.2s ease-in-out;
transition: box-shadow 0.3s;
cursor: pointer;
width: 100%;
&:focus { &:focus {
box-shadow: 0 0 0 2pt var(--accent); box-shadow: 0 0 0 1.5pt var(--accent);
} }
`; `;
import dayjs from "dayjs";
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
import { dayjs } from "../../context/Locale";
const Base = styled.div<{ unread?: boolean }>` const Base = styled.div<{ unread?: boolean }>`
height: 0; height: 0;
display: flex; display: flex;
...@@ -13,7 +14,8 @@ const Base = styled.div<{ unread?: boolean }>` ...@@ -13,7 +14,8 @@ const Base = styled.div<{ unread?: boolean }>`
margin-top: -2px; margin-top: -2px;
font-size: 0.6875rem; font-size: 0.6875rem;
line-height: 0.6875rem; line-height: 0.6875rem;
padding: 2px 5px 2px 0; padding: 2px 0 2px 0;
padding-inline-end: 5px;
color: var(--tertiary-foreground); color: var(--tertiary-foreground);
background: var(--primary-background); background: var(--primary-background);
} }
......
...@@ -30,6 +30,7 @@ export default styled.details<{ sticky?: boolean; large?: boolean }>` ...@@ -30,6 +30,7 @@ export default styled.details<{ sticky?: boolean; large?: boolean }>`
outline: none; outline: none;
cursor: pointer; cursor: pointer;
list-style: none; list-style: none;
user-select: none;
align-items: center; align-items: center;
transition: 0.2s opacity; transition: 0.2s opacity;
......
...@@ -25,6 +25,11 @@ export default styled.div<Props>` ...@@ -25,6 +25,11 @@ export default styled.div<Props>`
flex-shrink: 0; flex-shrink: 0;
} }
.menu {
margin-inline-end: 8px;
color: var(--secondary-foreground);
}
/*@media only screen and (max-width: 768px) { /*@media only screen and (max-width: 768px) {
padding: 0 12px; padding: 0 12px;
}*/ }*/
......
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
interface Props { interface Props {
rotate?: string;
type?: "default" | "circle"; type?: "default" | "circle";
} }
...@@ -22,6 +23,10 @@ export default styled.div<Props>` ...@@ -22,6 +23,10 @@ export default styled.div<Props>`
color: ${normal}; color: ${normal};
} }
svg {
transition: 0.2s ease transform;
}
&:hover { &:hover {
fill: ${hover}; fill: ${hover};
color: ${hover}; color: ${hover};
...@@ -43,4 +48,12 @@ export default styled.div<Props>` ...@@ -43,4 +48,12 @@ export default styled.div<Props>`
background-color: var(--primary-header); background-color: var(--primary-header);
} }
`} `}
${(props) =>
props.rotate &&
css`
svg {
transform: rotateZ(${props.rotate});
}
`}
`; `;
...@@ -6,8 +6,9 @@ interface Props { ...@@ -6,8 +6,9 @@ interface Props {
export default styled.input<Props>` export default styled.input<Props>`
z-index: 1; z-index: 1;
font-size: 1rem;
padding: 8px 16px; padding: 8px 16px;
border-radius: 6px; border-radius: var(--border-radius);
font-family: inherit; font-family: inherit;
color: var(--foreground); color: var(--foreground);
...@@ -17,13 +18,14 @@ export default styled.input<Props>` ...@@ -17,13 +18,14 @@ export default styled.input<Props>`
border: none; border: none;
outline: 2px solid transparent; outline: 2px solid transparent;
transition: outline-color 0.2s ease-in-out; transition: outline-color 0.2s ease-in-out;
transition: box-shadow 0.2s ease-in-out;
&:hover { &:hover {
background: var(--secondary-background); background: var(--secondary-background);
} }
&:focus { &:focus {
outline: 2px solid var(--accent); box-shadow: 0 0 0 1.5pt var(--accent);
} }
${(props) => ${(props) =>
......
...@@ -12,6 +12,10 @@ export default function Masks() { ...@@ -12,6 +12,10 @@ export default function Masks() {
<rect x="0" y="0" width="32" height="32" fill="white" /> <rect x="0" y="0" width="32" height="32" fill="white" />
<circle cx="27" cy="27" r="7" fill={"black"} /> <circle cx="27" cy="27" r="7" fill={"black"} />
</mask> </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"> <mask id="overlap">
<rect x="0" y="0" width="32" height="32" fill="white" /> <rect x="0" y="0" width="32" height="32" fill="white" />
<circle cx="32" cy="16" r="18" fill={"black"} /> <circle cx="32" cy="16" r="18" fill={"black"} />
......
/* eslint-disable react-hooks/rules-of-hooks */
import styled, { css, keyframes } from "styled-components"; import styled, { css, keyframes } from "styled-components";
import classNames from "classnames"; import { createPortal, useCallback, useEffect, useState } from "preact/compat";
import { createPortal, useEffect } from "preact/compat";
import { internalSubscribe } from "../../lib/eventEmitter";
import { Children } from "../../types/Preact"; import { Children } from "../../types/Preact";
import Button from "./Button"; import Button, { ButtonProps } from "./Button";
const open = keyframes` const open = keyframes`
0% {opacity: 0;} 0% {opacity: 0;}
...@@ -12,12 +14,23 @@ const open = keyframes` ...@@ -12,12 +14,23 @@ const open = keyframes`
100% {opacity: 1;} 100% {opacity: 1;}
`; `;
const close = keyframes`
0% {opacity: 1;}
70% {opacity: 0;}
100% {opacity: 0;}
`;
const zoomIn = keyframes` const zoomIn = keyframes`
0% {transform: scale(0.5);} 0% {transform: scale(0.5);}
98% {transform: scale(1.01);} 98% {transform: scale(1.01);}
100% {transform: scale(1);} 100% {transform: scale(1);}
`; `;
const zoomOut = keyframes`
0% {transform: scale(1);}
100% {transform: scale(0.5);}
`;
const ModalBase = styled.div` const ModalBase = styled.div`
top: 0; top: 0;
left: 0; left: 0;
...@@ -37,12 +50,20 @@ const ModalBase = styled.div` ...@@ -37,12 +50,20 @@ const ModalBase = styled.div`
color: var(--foreground); color: var(--foreground);
background: rgba(0, 0, 0, 0.8); background: rgba(0, 0, 0, 0.8);
&.closing {
animation-name: ${close};
}
&.closing > div {
animation-name: ${zoomOut};
}
`; `;
const ModalContainer = styled.div` const ModalContainer = styled.div`
overflow: hidden; overflow: hidden;
border-radius: 8px;
max-width: calc(100vw - 20px); max-width: calc(100vw - 20px);
border-radius: var(--border-radius);
animation-name: ${zoomIn}; animation-name: ${zoomIn};
animation-duration: 0.25s; animation-duration: 0.25s;
...@@ -52,8 +73,8 @@ const ModalContainer = styled.div` ...@@ -52,8 +73,8 @@ const ModalContainer = styled.div`
const ModalContent = styled.div< const ModalContent = styled.div<
{ [key in "attachment" | "noBackground" | "border" | "padding"]?: boolean } { [key in "attachment" | "noBackground" | "border" | "padding"]?: boolean }
>` >`
border-radius: 8px;
text-overflow: ellipsis; text-overflow: ellipsis;
border-radius: var(--border-radius);
h3 { h3 {
margin-top: 0; margin-top: 0;
...@@ -79,13 +100,13 @@ const ModalContent = styled.div< ...@@ -79,13 +100,13 @@ const ModalContent = styled.div<
${(props) => ${(props) =>
props.attachment && props.attachment &&
css` css`
border-radius: 8px 8px 0 0; border-radius: var(--border-radius) var(--border-radius) 0 0;
`} `}
${(props) => ${(props) =>
props.border && props.border &&
css` css`
border-radius: 10px; border-radius: var(--border-radius);
border: 2px solid var(--secondary-background); border: 2px solid var(--secondary-background);
`} `}
`; `;
...@@ -100,13 +121,10 @@ const ModalActions = styled.div` ...@@ -100,13 +121,10 @@ const ModalActions = styled.div`
background: var(--secondary-background); background: var(--secondary-background);
`; `;
export interface Action { export type Action = Omit<ButtonProps, "onClick"> & {
text: Children;
onClick: () => void;
confirmation?: boolean; confirmation?: boolean;
contrast?: boolean; onClick: () => void;
error?: boolean; };
}
interface Props { interface Props {
children?: Children; children?: Children;
...@@ -117,17 +135,19 @@ interface Props { ...@@ -117,17 +135,19 @@ interface Props {
dontModal?: boolean; dontModal?: boolean;
padding?: boolean; padding?: boolean;
onClose: () => void; onClose?: () => void;
actions?: Action[]; actions?: Action[];
disabled?: boolean; disabled?: boolean;
border?: boolean; border?: boolean;
visible: boolean; visible: boolean;
} }
export let isModalClosing = false;
export default function Modal(props: Props) { export default function Modal(props: Props) {
if (!props.visible) return null; if (!props.visible) return null;
let content = ( const content = (
<ModalContent <ModalContent
attachment={!!props.actions} attachment={!!props.actions}
noBackground={props.noBackground} noBackground={props.noBackground}
...@@ -142,26 +162,36 @@ export default function Modal(props: Props) { ...@@ -142,26 +162,36 @@ export default function Modal(props: Props) {
return content; return content;
} }
const [animateClose, setAnimateClose] = useState(false);
isModalClosing = animateClose;
const onClose = useCallback(() => {
setAnimateClose(true);
setTimeout(() => props.onClose?.(), 2e2);
}, [setAnimateClose, props]);
useEffect(() => internalSubscribe("Modal", "close", onClose), [onClose]);
useEffect(() => { useEffect(() => {
if (props.disallowClosing) return; if (props.disallowClosing) return;
function keyDown(e: KeyboardEvent) { function keyDown(e: KeyboardEvent) {
if (e.key === "Escape") { if (e.key === "Escape") {
props.onClose(); onClose();
} }
} }
document.body.addEventListener("keydown", keyDown); document.body.addEventListener("keydown", keyDown);
return () => document.body.removeEventListener("keydown", keyDown); return () => document.body.removeEventListener("keydown", keyDown);
}, [props.disallowClosing, props.onClose]); }, [props.disallowClosing, onClose]);
let confirmationAction = props.actions?.find( const confirmationAction = props.actions?.find(
(action) => action.confirmation, (action) => action.confirmation,
); );
useEffect(() => { useEffect(() => {
if (!confirmationAction) return; if (!confirmationAction) return;
// ! FIXME: this may be done better if we // ! TODO: this may be done better if we
// ! can focus the button although that // ! can focus the button although that
// ! doesn't seem to work... // ! doesn't seem to work...
function keyDown(e: KeyboardEvent) { function keyDown(e: KeyboardEvent) {
...@@ -176,19 +206,18 @@ export default function Modal(props: Props) { ...@@ -176,19 +206,18 @@ export default function Modal(props: Props) {
return createPortal( return createPortal(
<ModalBase <ModalBase
className={animateClose ? "closing" : undefined}
onClick={(!props.disallowClosing && props.onClose) || undefined}> onClick={(!props.disallowClosing && props.onClose) || undefined}>
<ModalContainer onClick={(e) => (e.cancelBubble = true)}> <ModalContainer onClick={(e) => (e.cancelBubble = true)}>
{content} {content}
{props.actions && ( {props.actions && (
<ModalActions> <ModalActions>
{props.actions.map((x) => ( {props.actions.map((x, index) => (
<Button <Button
contrast={x.contrast ?? true} key={index}
error={x.error ?? false} {...x}
onClick={x.onClick} disabled={props.disabled}
disabled={props.disabled}> />
{x.text}
</Button>
))} ))}
</ModalActions> </ModalActions>
)} )}
......
...@@ -8,13 +8,19 @@ type Props = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "as"> & { ...@@ -8,13 +8,19 @@ type Props = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "as"> & {
error?: string; error?: string;
block?: boolean; block?: boolean;
spaced?: boolean; spaced?: boolean;
noMargin?: boolean;
children?: Children; children?: Children;
type?: "default" | "subtle" | "error"; type?: "default" | "subtle" | "error";
}; };
const OverlineBase = styled.div<Omit<Props, "children" | "error">>` const OverlineBase = styled.div<Omit<Props, "children" | "error">>`
display: inline; display: inline;
margin: 0.4em 0;
${(props) =>
!props.noMargin &&
css`
margin: 0.4em 0;
`}
${(props) => ${(props) =>
props.spaced && props.spaced &&
......
...@@ -27,8 +27,8 @@ const RadioBase = styled.label<BaseProps>` ...@@ -27,8 +27,8 @@ const RadioBase = styled.label<BaseProps>`
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
user-select: none; user-select: none;
border-radius: 4px;
transition: 0.2s ease all; transition: 0.2s ease all;
border-radius: var(--border-radius);
&:hover { &:hover {
background: var(--hover); background: var(--hover);
......
.container { .container {
font-size: 0.875rem; font-size: .875rem;
line-height: 20px; line-height: 20px;
position: relative; position: relative;
} }
......
...@@ -2,8 +2,8 @@ import styled, { css } from "styled-components"; ...@@ -2,8 +2,8 @@ import styled, { css } from "styled-components";
export interface TextAreaProps { export interface TextAreaProps {
code?: boolean; code?: boolean;
padding?: number; padding?: string;
lineHeight?: number; lineHeight?: string;
hideBorder?: boolean; hideBorder?: boolean;
} }
...@@ -17,8 +17,9 @@ export default styled.textarea<TextAreaProps>` ...@@ -17,8 +17,9 @@ export default styled.textarea<TextAreaProps>`
display: block; display: block;
color: var(--foreground); color: var(--foreground);
background: var(--secondary-background); background: var(--secondary-background);
padding: ${(props) => props.padding ?? DEFAULT_TEXT_AREA_PADDING}px; padding: ${(props) => props.padding ?? "var(--textarea-padding)"};
line-height: ${(props) => props.lineHeight ?? DEFAULT_LINE_HEIGHT}px; line-height: ${(props) =>
props.lineHeight ?? "var(--textarea-line-height)"};
${(props) => ${(props) =>
props.hideBorder && props.hideBorder &&
...@@ -29,9 +30,9 @@ export default styled.textarea<TextAreaProps>` ...@@ -29,9 +30,9 @@ export default styled.textarea<TextAreaProps>`
${(props) => ${(props) =>
!props.hideBorder && !props.hideBorder &&
css` css`
border-radius: 4px; border-radius: var(--border-radius);
transition: border-color 0.2s ease-in-out; transition: border-color 0.2s ease-in-out;
border: ${TEXT_AREA_BORDER_WIDTH}px solid transparent; border: var(--input-border-width) solid transparent;
`} `}
&:focus { &:focus {
...@@ -40,14 +41,14 @@ export default styled.textarea<TextAreaProps>` ...@@ -40,14 +41,14 @@ export default styled.textarea<TextAreaProps>`
${(props) => ${(props) =>
!props.hideBorder && !props.hideBorder &&
css` css`
border: ${TEXT_AREA_BORDER_WIDTH}px solid var(--accent); border: var(--input-border-width) solid var(--accent);
`} `}
} }
${(props) => ${(props) =>
props.code props.code
? css` ? css`
font-family: var(--monoscape-font-font), monospace; font-family: var(--monospace-font), monospace;
` `
: css` : css`
font-family: inherit; font-family: inherit;
......
...@@ -22,8 +22,8 @@ export const TipBase = styled.div<Props>` ...@@ -22,8 +22,8 @@ export const TipBase = styled.div<Props>`
align-items: center; align-items: center;
font-size: 14px; font-size: 14px;
border-radius: 7px;
background: var(--primary-header); background: var(--primary-header);
border-radius: var(--border-radius);
border: 2px solid var(--secondary-header); border: 2px solid var(--secondary-header);
a { a {
...@@ -55,14 +55,16 @@ export const TipBase = styled.div<Props>` ...@@ -55,14 +55,16 @@ export const TipBase = styled.div<Props>`
`} `}
`; `;
export default function Tip(props: Props & { children: Children }) { export default function Tip(
const { children, ...tipProps } = props; props: Props & { children: Children; hideSeparator?: boolean },
) {
const { children, hideSeparator, ...tipProps } = props;
return ( return (
<> <>
<Separator /> {!hideSeparator && <Separator />}
<TipBase {...tipProps}> <TipBase {...tipProps}>
<InfoCircle size={20} /> <InfoCircle size={20} />
<span>{props.children}</span> <span>{children}</span>
</TipBase> </TipBase>
</> </>
); );
......