composing toots #21

Merged
Rubicon merged 11 commits from feat-toot-composer into master 2024-09-28 07:30:40 +00:00
13 changed files with 708 additions and 87 deletions

View file

@ -1,5 +1,7 @@
.bottomSheet { .bottomSheet {
composes: surface from "material.module.css"; composes: surface from "./material.module.css";
composes: cardGutSkip from "./cards.module.css";
composes: cardNoPad from "./cards.module.css";
border: none; border: none;
position: absolute; position: absolute;
left: 50%; left: 50%;
@ -42,9 +44,21 @@
&.animated { &.animated {
position: absolute; position: absolute;
transform: none; transform: none;
overflow: hidden;
will-change: width, height, top, left;
&::backdrop { &::backdrop {
opacity: 0; opacity: 0;
} }
& * {
overflow: hidden;
}
}
&.bottom {
top: unset;
transform: translateX(-50%);
bottom: 0;
} }
} }

View file

@ -13,9 +13,12 @@ import {
} from "solid-js"; } from "solid-js";
import styles from "./BottomSheet.module.css"; import styles from "./BottomSheet.module.css";
import { useHeroSignal } from "../platform/anim"; import { useHeroSignal } from "../platform/anim";
import { makeEventListener } from "@solid-primitives/event-listener";
export type BottomSheetProps = { export type BottomSheetProps = {
open?: boolean; open?: boolean;
bottomUp?: boolean;
onClose?(reason: "backdrop"): void;
}; };
export const HERO = Symbol("BottomSheet Hero Symbol"); export const HERO = Symbol("BottomSheet Hero Symbol");
@ -52,7 +55,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
createEffect(() => { createEffect(() => {
if (props.open) { if (props.open) {
if (!element.open && !pending()) { if (!element.open && !pending()) {
animatedOpen(); requestAnimationFrame(animatedOpen);
setCache(ochildren()); setCache(ochildren());
} }
} else { } else {
@ -63,15 +66,16 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
} }
}); });
const onClose = () => {
element.close();
setHero();
};
const animatedClose = () => { const animatedClose = () => {
const endRect = hero(); const endRect = hero();
if (endRect) { if (endRect) {
const startRect = element.getBoundingClientRect(); const startRect = element.getBoundingClientRect();
const animation = animateHero(startRect, endRect, element, true); const animation = animateHero(startRect, endRect, element, true);
const onClose = () => {
element.close();
setHero();
};
animation.addEventListener("finish", onClose); animation.addEventListener("finish", onClose);
animation.addEventListener("cancel", onClose); animation.addEventListener("cancel", onClose);
} else { } else {
@ -123,8 +127,29 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
} }
}); });
const onDialogClick = (
event: MouseEvent & { currentTarget: HTMLDialogElement },
) => {
const rect = event.currentTarget.getBoundingClientRect();
const isInDialog =
rect.top <= event.clientY &&
event.clientY <= rect.top + rect.height &&
rect.left <= event.clientX &&
event.clientX <= rect.left + rect.width;
if (!isInDialog) {
props.onClose?.("backdrop");
}
};
return ( return (
<dialog class={styles.bottomSheet} ref={element!}> <dialog
classList={{
[styles.bottomSheet]: true,
[styles.bottom]: props.bottomUp,
}}
onClick={onDialogClick}
ref={element!}
>
{ochildren() ?? cache()} {ochildren() ?? cache()}
</dialog> </dialog>
); );

View file

@ -12,6 +12,7 @@ import { css } from "solid-styled";
interface ScaffoldProps { interface ScaffoldProps {
topbar?: JSX.Element; topbar?: JSX.Element;
fab?: JSX.Element; fab?: JSX.Element;
bottom?: JSX.Element;
} }
const Scaffold: ParentComponent<ScaffoldProps> = (props) => { const Scaffold: ParentComponent<ScaffoldProps> = (props) => {
@ -36,6 +37,16 @@ const Scaffold: ParentComponent<ScaffoldProps> = (props) => {
right: 40px; right: 40px;
z-index: var(--tutu-zidx-nav, auto); z-index: var(--tutu-zidx-nav, auto);
} }
.bottom-dock {
position: sticky;
bottom: 0;
left: 0;
right: 0;
z-index: var(--tutu-zidx-nav, auto);
padding-bottom: var(--safe-area-inset-bottom, 0);
}
`; `;
return ( return (
<> <>
@ -48,6 +59,9 @@ const Scaffold: ParentComponent<ScaffoldProps> = (props) => {
<div class="fab-dock">{props.fab}</div> <div class="fab-dock">{props.fab}</div>
</Show> </Show>
<div class="scaffold-content">{props.children}</div> <div class="scaffold-content">{props.children}</div>
<Show when={props.bottom}>
<div class="bottom-dock">{props.bottom}</div>
</Show>
</> </>
); );
}; };

View file

@ -2,7 +2,21 @@
//! It recommended to include the module by <script> tag. //! It recommended to include the module by <script> tag.
if (!document.body.animate) { if (!document.body.animate) {
// @ts-ignore: this file is polyfill, no exposed decls // @ts-ignore: this file is polyfill, no exposed decls
import("web-animations-js").then(() => { import("web-animations-js").then(() => { // all target platforms supported, prepared to remove
console.warn("web animation polyfill is included"); console.warn("web animation polyfill is included");
}); });
} }
if (!window.crypto.randomUUID) { // Chrome/Edge 92+
// https://stackoverflow.com/a/2117523/2800218
// LICENSE: https://creativecommons.org/licenses/by-sa/4.0/legalcode
window.crypto.randomUUID =
function randomUUID(): `${string}-${string}-${string}-${string}-${string}` {
return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, (c) =>
(
+c ^
(crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))
).toString(16),
) as `${string}-${string}-${string}-${string}-${string}`;
};
}

View file

@ -0,0 +1,86 @@
import {
For,
onMount,
type Component,
type JSX,
} from "solid-js";
import Scaffold from "../material/Scaffold";
import {
AppBar,
IconButton,
List,
ListItemButton,
ListItemSecondaryAction,
ListItemText,
Radio,
Toolbar,
} from "@suid/material";
import { Close as CloseIcon } from "@suid/icons-material";
import iso639_1 from "iso-639-1";
import { createTranslator } from "../platform/i18n";
import { Title } from "../material/typography";
type ChooseTootLangProps = {
code: string;
onCodeChange: (ncode: string) => void;
onClose?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;
};
const ChooseTootLang: Component<ChooseTootLangProps> = (props) => {
let listRef: HTMLUListElement;
const [t] = createTranslator(
(code) =>
import(`./i18n/${code}.json`) as Promise<{
default: Record<string, string | undefined>;
}>,
);
onMount(() => {
const code = props.code;
const el = listRef.querySelector(`[data-langcode="${code}"]`);
if (el) {
el.scrollIntoView({ behavior: "auto" });
}
});
return (
<Scaffold
topbar={
<AppBar position="static">
<Toolbar
variant="dense"
sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
>
<IconButton color="inherit" onClick={props.onClose} disableRipple>
<CloseIcon />
</IconButton>
<Title>{t("Choose Language")}</Title>
</Toolbar>
</AppBar>
}
>
<List
ref={listRef!}
sx={{
paddingBottom: "var(--safe-area-inset-bottom, 0)",
}}
>
<For each={iso639_1.getAllCodes()}>
{(code) => (
<ListItemButton
data-langcode={code}
onClick={() => props.onCodeChange(code)}
>
<ListItemText>{iso639_1.getNativeName(code)}</ListItemText>
<ListItemSecondaryAction>
<Radio checked={props.code == code}></Radio>
</ListItemSecondaryAction>
</ListItemButton>
)}
</For>
</List>
</Scaffold>
);
};
export default ChooseTootLang;

View file

@ -47,6 +47,7 @@ import { HeroSourceProvider, type HeroSource } from "../platform/anim";
import { useNavigate } from "@solidjs/router"; import { useNavigate } from "@solidjs/router";
import { useSignedInProfiles } from "../masto/acct"; import { useSignedInProfiles } from "../masto/acct";
import { setCache as setTootBottomSheetCache } from "./TootBottomSheet"; import { setCache as setTootBottomSheetCache } from "./TootBottomSheet";
import TootComposer from "./TootComposer";
const TimelinePanel: Component<{ const TimelinePanel: Component<{
client: mastodon.rest.Client; client: mastodon.rest.Client;
@ -57,6 +58,7 @@ const TimelinePanel: Component<{
openFullScreenToot: ( openFullScreenToot: (
toot: mastodon.v1.Status, toot: mastodon.v1.Status,
srcElement?: HTMLElement, srcElement?: HTMLElement,
reply?: boolean,
) => void; ) => void;
}> = (props) => { }> = (props) => {
const [scrollLinked, setScrollLinked] = createSignal<HTMLElement>(); const [scrollLinked, setScrollLinked] = createSignal<HTMLElement>();
@ -72,6 +74,7 @@ const TimelinePanel: Component<{
{ fullRefresh: props.fullRefetch }, { fullRefresh: props.fullRefetch },
); );
const [expandedThreadId, setExpandedThreadId] = createSignal<string>(); const [expandedThreadId, setExpandedThreadId] = createSignal<string>();
const [typing, setTyping] = createSignal(false);
const tlEndObserver = new IntersectionObserver(() => { const tlEndObserver = new IntersectionObserver(() => {
if (untrack(() => props.prefetch) && !snapshot.loading) if (untrack(() => props.prefetch) && !snapshot.loading)
@ -143,6 +146,17 @@ const TimelinePanel: Component<{
}, 0) }, 0)
} }
> >
<Show when={props.name === "home"}>
<TootComposer
style={{
"--scaffold-topbar-height": "0px",
}}
isTyping={typing()}
onTypingChange={setTyping}
client={props.client}
onSent={() => refetchTimeline({ direction: "new" })}
/>
</Show>
<For each={timeline}> <For each={timeline}>
{(item, index) => { {(item, index) => {
let element: HTMLElement | undefined; let element: HTMLElement | undefined;
@ -152,6 +166,9 @@ const TimelinePanel: Component<{
status={item} status={item}
onBoost={(...args) => onBoost(index(), ...args)} onBoost={(...args) => onBoost(index(), ...args)}
onBookmark={(...args) => onBookmark(index(), ...args)} onBookmark={(...args) => onBookmark(index(), ...args)}
onReply={(client, status) =>
props.openFullScreenToot(status, element, true)
}
client={props.client} client={props.client}
expanded={item.id === expandedThreadId() ? 1 : 0} expanded={item.id === expandedThreadId() ? 1 : 0}
onExpandChange={(x) => { onExpandChange={(x) => {
@ -314,6 +331,7 @@ const Home: ParentComponent = (props) => {
const openFullScreenToot = ( const openFullScreenToot = (
toot: mastodon.v1.Status, toot: mastodon.v1.Status,
srcElement?: HTMLElement, srcElement?: HTMLElement,
reply?: boolean,
) => { ) => {
const p = profiles()[0]; const p = profiles()[0];
const inf = p.account.inf ?? profile(); const inf = p.account.inf ?? profile();
@ -325,7 +343,13 @@ const Home: ParentComponent = (props) => {
setHeroSrc((x) => Object.assign({}, x, { [BOTTOM_SHEET_HERO]: rect })); setHeroSrc((x) => Object.assign({}, x, { [BOTTOM_SHEET_HERO]: rect }));
const acct = `${inf.username}@${p.account.site}`; const acct = `${inf.username}@${p.account.site}`;
setTootBottomSheetCache(acct, toot); setTootBottomSheetCache(acct, toot);
navigate(`/${encodeURIComponent(acct)}/${toot.id}`); navigate(`/${encodeURIComponent(acct)}/${toot.id}`, {
state: reply
? {
tootReply: true,
}
: undefined,
});
}; };
css` css`

View file

@ -64,7 +64,7 @@ const MediaAttachmentGrid: Component<{
> >
<For each={props.attachments}> <For each={props.attachments}>
{(item, index) => { {(item, index) => {
const [loaded, setLoaded] = createSignal(false) const [loaded, setLoaded] = createSignal(false);
const width = item.meta?.small?.width; const width = item.meta?.small?.width;
const height = item.meta?.small?.height; const height = item.meta?.small?.height;
const aspectRatio = item.meta?.small?.aspect; const aspectRatio = item.meta?.small?.aspect;
@ -74,10 +74,13 @@ const MediaAttachmentGrid: Component<{
width && height && height > maxHeight width && height && height > maxHeight
? maxHeight / (aspectRatio ?? 1) ? maxHeight / (aspectRatio ?? 1)
: width; : width;
const style = () => loaded() ? undefined : { const style = () =>
width: realWidth ? `${realWidth}px` : undefined, loaded()
height: realHeight ? `${realHeight}px` : undefined, ? undefined
}; : {
width: realWidth ? `${realWidth}px` : undefined,
height: realHeight ? `${realHeight}px` : undefined,
};
switch (item.type) { switch (item.type) {
case "image": case "image":
return ( return (
@ -100,7 +103,17 @@ const MediaAttachmentGrid: Component<{
controls controls
/> />
); );
case "gifv": case "gifv": // Later we can handle the preview
return (
<video
src={item.url || undefined}
style={style()}
onLoadedMetadata={[setLoaded, true]}
autoplay={true}
controls
/>
);
case "audio": case "audio":
case "unknown": case "unknown":
return <div></div>; return <div></div>;

View file

@ -3,17 +3,17 @@ import {
createEffect, createEffect,
createRenderEffect, createRenderEffect,
createResource, createResource,
createSignal,
For, For,
Show, Show,
type Component, type Component,
} from "solid-js"; } from "solid-js";
import Scaffold from "../material/Scaffold"; import Scaffold from "../material/Scaffold";
import { AppBar, Avatar, CircularProgress, IconButton, Toolbar } from "@suid/material"; import { AppBar, CircularProgress, IconButton, Toolbar } from "@suid/material";
import { Title } from "../material/typography"; import { Title } from "../material/typography";
import { import {
ArrowBack as BackIcon, ArrowBack as BackIcon,
Close as CloseIcon, Close as CloseIcon,
Send,
} from "@suid/icons-material"; } from "@suid/icons-material";
import { createUnauthorizedClient, useSessions } from "../masto/clients"; import { createUnauthorizedClient, useSessions } from "../masto/clients";
import { resolveCustomEmoji } from "../masto/toot"; import { resolveCustomEmoji } from "../masto/toot";
@ -22,6 +22,8 @@ import type { mastodon } from "masto";
import cards from "../material/cards.module.css"; import cards from "../material/cards.module.css";
import { css } from "solid-styled"; import { css } from "solid-styled";
import { vibrate } from "../platform/hardware"; import { vibrate } from "../platform/hardware";
import { createTimeSource, TimeSourceProvider } from "../platform/timesrc";
import TootComposer from "./TootComposer";
let cachedEntry: [string, mastodon.v1.Status] | undefined; let cachedEntry: [string, mastodon.v1.Status] | undefined;
@ -37,9 +39,14 @@ function getCache(acct: string, id: string) {
const TootBottomSheet: Component = (props) => { const TootBottomSheet: Component = (props) => {
const params = useParams<{ acct: string; id: string }>(); const params = useParams<{ acct: string; id: string }>();
const location = useLocation<{ tootBottomSheetPushedCount?: number }>(); const location = useLocation<{
tootBottomSheetPushedCount?: number;
tootReply?: boolean;
}>();
const navigate = useNavigate(); const navigate = useNavigate();
const allSession = useSessions(); const allSession = useSessions();
const time = createTimeSource();
const [isInTyping, setInTyping] = createSignal(false);
const acctText = () => decodeURIComponent(params.acct); const acctText = () => decodeURIComponent(params.acct);
const session = () => { const session = () => {
const [inputUsername, inputSite] = acctText().split("@", 2); const [inputUsername, inputSite] = acctText().split("@", 2);
@ -80,7 +87,13 @@ const TootBottomSheet: Component = (props) => {
return tootId; return tootId;
}); });
const [tootContext] = createResource( createEffect(() => {
if (location.state?.tootReply) {
setInTyping(true);
}
});
const [tootContext, { refetch: refetchContext }] = createResource(
() => [session().client, params.id] as const, () => [session().client, params.id] as const,
async ([client, id]) => { async ([client, id]) => {
return await client.v1.statuses.$select(id).context.fetch(); return await client.v1.statuses.$select(id).context.fetch();
@ -155,6 +168,10 @@ const TootBottomSheet: Component = (props) => {
}; };
const switchContext = (status: mastodon.v1.Status) => { const switchContext = (status: mastodon.v1.Status) => {
if (isInTyping()) {
setInTyping(false);
return;
}
setCache(params.acct, status); setCache(params.acct, status);
navigate(`/${params.acct}/${status.id}`, { navigate(`/${params.acct}/${status.id}`, {
state: { state: {
@ -163,13 +180,19 @@ const TootBottomSheet: Component = (props) => {
}); });
}; };
css` const defaultMentions = () => {
.bottom-dock { const tootAcct = remoteToot()?.reblog?.account ?? remoteToot()?.account;
position: sticky; if (!tootAcct) {
bottom: 0; return;
z-index: var(--tutu-zidx-nav);
} }
const others = ancestors().map((x) => x.account);
const values = [tootAcct, ...others].map((x) => `@${x.acct}`);
return Array.from(new Set(values).keys());
};
css`
.name :global(img) { .name :global(img) {
max-height: 1em; max-height: 1em;
} }
@ -203,74 +226,76 @@ const TootBottomSheet: Component = (props) => {
</AppBar> </AppBar>
} }
> >
<For each={ancestors()}> <TimeSourceProvider value={time}>
{(item) => ( <For each={ancestors()}>
<RegularToot {(item) => (
id={`toot-${item.id}`} <RegularToot
class={cards.card} id={`toot-${item.id}`}
status={item} class={cards.card}
actionable={false} status={item}
onClick={[switchContext, item]} actionable={false}
></RegularToot> onClick={[switchContext, item]}
)} ></RegularToot>
</For> )}
</For>
<article> <article>
<Show when={toot()}> <Show when={toot()}>
<RegularToot <RegularToot
id={`toot-${toot()!.id}`} id={`toot-${toot()!.id}`}
class={cards.card} class={cards.card}
style={{ style={{
"scroll-margin-top": "calc(var(--scaffold-topbar-height) + 20px)", "scroll-margin-top":
}} "calc(var(--scaffold-topbar-height) + 20px)",
status={toot()!} }}
actionable={!!actSession()} status={toot()!}
evaluated={true} actionable={!!actSession()}
onBookmark={onBookmark} evaluated={true}
onRetoot={onBoost} onBookmark={onBookmark}
onFavourite={onFav} onRetoot={onBoost}
></RegularToot> onFavourite={onFav}
></RegularToot>
</Show>
</article>
<Show when={session()!.account}>
<TootComposer
isTyping={isInTyping()}
onTypingChange={setInTyping}
mentions={defaultMentions()}
profile={session().account!}
replyToDisplayName={toot()?.account?.displayName || ""}
client={session().client}
onSent={() => refetchContext()}
inReplyToId={remoteToot()?.reblog?.id ?? remoteToot()?.id}
/>
</Show> </Show>
</article>
<Show when={tootContext.loading}> <Show when={tootContext.loading}>
<div <div
style={{ style={{
display: "flex", display: "flex",
"justify-content": "center", "justify-content": "center",
"margin-block": "12px", "margin-block": "12px",
}} }}
> >
<CircularProgress style="width: 1.5em; height: 1.5em;" /> <CircularProgress style="width: 1.5em; height: 1.5em;" />
</div>
</Show>
<For each={descendants()}>
{(item) => (
<RegularToot
id={`toot-${item.id}`}
class={cards.card}
status={item}
actionable={false}
onClick={[switchContext, item]}
></RegularToot>
)}
</For>
<div class="bottom-dock">
<Show when={profile()}>
<div style="display: flex; gap: 8px; background: var(--tutu-color-surface); padding: 8px 8px calc(var(--safe-area-inset-bottom, 0px) + 8px);">
<Avatar src={profile()!.inf?.avatar} />
<textarea
placeholder={`Reply to ${toot()?.account?.displayName ?? ""}...`}
style={{ width: "100%", border: "none" }}
></textarea>
<IconButton>
<Send />
</IconButton>
</div> </div>
</Show> </Show>
</div>
<For each={descendants()}>
{(item) => (
<RegularToot
id={`toot-${item.id}`}
class={cards.card}
status={item}
actionable={false}
onClick={[switchContext, item]}
></RegularToot>
)}
</For>
</TimeSourceProvider>
<div style={{ height: "var(--safe-area-inset-bottom, 0)" }}></div>
</Scaffold> </Scaffold>
); );
}; };

View file

@ -0,0 +1,11 @@
.composer {
composes: card from "../material/cards.module.css";
--card-gut: 8px;
}
.replyInput {
display: flex;
align-items: flex-start;
gap: 8px;
}

View file

@ -0,0 +1,383 @@
import {
createEffect,
createSignal,
createUniqueId,
onMount,
Show,
type Component,
type JSX,
type Ref,
} from "solid-js";
import Scaffold from "../material/Scaffold";
import {
Avatar,
Button,
IconButton,
List,
ListItemButton,
ListItemIcon,
ListItemSecondaryAction,
ListItemText,
Radio,
Switch,
Divider,
CircularProgress,
} from "@suid/material";
import {
ArrowDropDown,
Public as PublicIcon,
Send,
People as PeopleIcon,
ThreeP as ThreePIcon,
ListAlt as ListAltIcon,
Visibility,
Translate,
} from "@suid/icons-material";
import type { Account } from "../accounts/stores";
import tootComposers from "./TootComposer.module.css";
import { makeEventListener } from "@solid-primitives/event-listener";
import BottomSheet from "../material/BottomSheet";
import { useLanguage } from "../platform/i18n";
import iso639_1 from "iso-639-1";
import ChooseTootLang from "./ChooseTootLang";
import type { mastodon } from "masto";
type TootVisibility = "public" | "unlisted" | "private" | "direct";
const TootVisibilityPickerDialog: Component<{
open?: boolean;
onClose: () => void;
visibility: TootVisibility;
onVisibilityChange: (value: TootVisibility) => void;
}> = (props) => {
type Kind = "public" | "private" | "direct";
const kind = () =>
props.visibility === "public" || props.visibility === "unlisted"
? "public"
: props.visibility;
const setKind = (nv: Kind) => {
if (nv == "public") {
props.onVisibilityChange(discoverable() ? "public" : "unlisted");
} else {
props.onVisibilityChange(nv);
}
};
const discoverable = () => {
return props.visibility === "public";
};
const setDiscoverable = (setter: (v: boolean) => boolean) => {
const nval = setter(discoverable());
props.onVisibilityChange(nval ? "public" : "unlisted"); // trigger change
};
return (
<BottomSheet open={props.open} onClose={props.onClose} bottomUp>
<Scaffold
bottom={
<div
style={{
"border-top": "1px solid #ddd",
background: "var(--tutu-color-surface)",
padding: "8px 16px",
width: "100%",
"text-align": "end",
}}
>
<Button onClick={props.onClose}>Confirm</Button>
</div>
}
>
<List dense>
<ListItemButton onClick={[setKind, "public"]}>
<ListItemIcon>
<PublicIcon />
</ListItemIcon>
<ListItemText
primary="Public"
secondary="Everyone can see this toot"
></ListItemText>
<ListItemSecondaryAction>
<Radio checked={kind() == "public"}></Radio>
</ListItemSecondaryAction>
</ListItemButton>
<ListItemButton
sx={{ paddingLeft: "40px" }}
disabled={kind() !== "public"}
onClick={() => setDiscoverable((x) => !x)}
>
<ListItemIcon>
<ListAltIcon />
</ListItemIcon>
<ListItemText
primary="Discoverable"
secondary="The others can discover it on the exploration."
></ListItemText>
<ListItemSecondaryAction>
<Switch
checked={discoverable()}
disabled={kind() !== "public"}
></Switch>
</ListItemSecondaryAction>
</ListItemButton>
<Divider />
<ListItemButton onClick={[setKind, "private"]}>
<ListItemIcon>
<PeopleIcon />
</ListItemIcon>
<ListItemText
primary="Only Followers"
secondary="Visibile for followers only"
></ListItemText>
<ListItemSecondaryAction>
<Radio checked={kind() == "private"}></Radio>
</ListItemSecondaryAction>
</ListItemButton>
<Divider />
<ListItemButton onClick={[setKind, "direct"]}>
<ListItemIcon>
<ThreePIcon />
</ListItemIcon>
<ListItemText
primary="Only Mentions"
secondary="Visible for mentioned users only"
></ListItemText>
<ListItemSecondaryAction>
<Radio checked={kind() == "direct"}></Radio>
</ListItemSecondaryAction>
</ListItemButton>
</List>
</Scaffold>
</BottomSheet>
);
};
const TootLanguagePickerDialog: Component<{
open?: boolean;
onClose: () => void;
code: string;
onCodeChange: (nval: string) => void;
}> = (props) => {
return (
<BottomSheet open={props.open} onClose={props.onClose}>
<Show when={props.open}>
<ChooseTootLang
code={props.code}
onCodeChange={props.onCodeChange}
onClose={props.onClose}
/>
</Show>
</BottomSheet>
);
};
function randomChoose<T extends any[]>(
rn: number,
K: T,
): T extends Array<infer E> ? E : never {
const idx = Math.round(rn * K.length);
return K[idx];
}
const TootComposer: Component<{
ref?: Ref<HTMLDivElement>;
style?: JSX.CSSProperties;
profile?: Account;
replyToDisplayName?: string;
mentions?: readonly string[];
isTyping?: boolean;
onTypingChange: (value: boolean) => void;
client?: mastodon.rest.Client;
inReplyToId?: string;
onSent?: (status: mastodon.v1.Status) => void;
}> = (props) => {
let inputRef: HTMLTextAreaElement;
let sendKey: string | undefined;
const typing = () => props.isTyping;
const setTyping = (v: boolean) => props.onTypingChange(v);
const [sending, setSending] = createSignal(false);
const [visibility, setVisibility] = createSignal<TootVisibility>("public");
const [permPicker, setPermPicker] = createSignal(false);
const [language, setLanguage] = createSignal("en");
const [langPickerOpen, setLangPickerOpen] = createSignal(false);
const appLanguage = useLanguage();
createEffect(() => {
const lang = appLanguage().split("-")[0];
setLanguage(lang);
});
createEffect(() => {
if (typing()) {
setTimeout(() => inputRef.focus(), 0);
}
});
onMount(() => {
makeEventListener(inputRef, "focus", () => setTyping(true));
});
createEffect(() => {
if (inputRef.value !== "") return;
if (props.mentions) {
const prepText = props.mentions.join(" ") + " ";
inputRef.value = prepText;
}
});
const containerStyle = () =>
typing() || permPicker()
? {
position: "sticky" as const,
top: "var(--scaffold-topbar-height, 0)",
bottom: "var(--safe-area-inset-bottom, 0)",
"z-index": 2,
...props.style,
}
: undefined;
const visibilityText = () => {
switch (visibility()) {
case "public":
return "Discoverable";
case "unlisted":
return "Public";
case "private":
return "Only Followers";
case "direct":
return "Only Mentions";
}
};
const getOrGenSendKey = () => {
if (sendKey === undefined) {
sendKey = window.crypto.randomUUID();
}
return sendKey;
};
const send = async () => {
setSending(true);
try {
const status = await props.client!.v1.statuses.create(
{
status: inputRef.value,
language: language(),
visibility: visibility(),
inReplyToId: props.inReplyToId,
},
{
requestInit: {
headers: {
["Idempotency-Key"]: getOrGenSendKey(),
},
},
},
);
props.onSent?.(status);
inputRef.value = "";
} finally {
setSending(false);
}
};
return (
<div
ref={props.ref}
class={tootComposers.composer}
style={containerStyle()}
onClick={(e) => inputRef.focus()}
>
<div class={tootComposers.replyInput}>
<Show when={props.profile}>
<Avatar
src={props.profile!.inf?.avatar}
sx={{ marginLeft: "-0.25em" }}
/>
</Show>
<textarea
ref={inputRef!}
placeholder={
props.replyToDisplayName
? `Reply to ${props.replyToDisplayName}...`
: randomChoose(Math.random(), [
"What's happening?",
"What do your think?",
])
}
style={{ width: "100%", border: "none" }}
disabled={sending()}
></textarea>
<Show when={props.client}>
<Show
when={!sending()}
fallback={
<div style={{ padding: "8px" }}>
<CircularProgress
sx={{
marginRight: "-0.5em",
width: "1.5rem",
height: "1.5rem",
}}
/>
</div>
}
>
<IconButton sx={{ marginRight: "-0.5em" }} onClick={send}>
<Send />
</IconButton>
</Show>
</Show>
</div>
<Show when={typing()}>
<div
style={{
display: "flex",
"justify-content": "flex-end",
"margin-top": "8px",
gap: "16px",
"flex-flow": "row wrap",
}}
>
<Button onClick={[setLangPickerOpen, true]} disabled={sending()}>
<Translate sx={{ marginTop: "-0.25em", marginRight: "0.25em" }} />
{iso639_1.getNativeName(language())}
<ArrowDropDown sx={{ marginTop: "-0.25em" }} />
</Button>
<Button onClick={[setPermPicker, true]} disabled={sending()}>
<Visibility sx={{ marginTop: "-0.15em", marginRight: "0.25em" }} />
{visibilityText()}
<ArrowDropDown sx={{ marginTop: "-0.25em" }} />
</Button>
</div>
<TootVisibilityPickerDialog
open={permPicker()}
onClose={() => setPermPicker(false)}
visibility={visibility()}
onVisibilityChange={setVisibility}
/>
<TootLanguagePickerDialog
open={langPickerOpen()}
onClose={() => setLangPickerOpen(false)}
code={language()}
onCodeChange={setLanguage}
/>
</Show>
</div>
);
};
export default TootComposer;

View file

@ -14,6 +14,7 @@ type TootThreadProps = {
onBoost?(client: mastodon.rest.Client, status: mastodon.v1.Status): void; onBoost?(client: mastodon.rest.Client, status: mastodon.v1.Status): void;
onBookmark?(client: mastodon.rest.Client, status: mastodon.v1.Status): void; onBookmark?(client: mastodon.rest.Client, status: mastodon.v1.Status): void;
onReply?(client: mastodon.rest.Client, status: mastodon.v1.Status): void
onExpandChange?(level: 0 | 1 | 2): void; onExpandChange?(level: 0 | 1 | 2): void;
}; };
@ -38,6 +39,10 @@ const TootThread: Component<TootThreadProps> = (props) => {
props.onBookmark?.(props.client, status); props.onBookmark?.(props.client, status);
}; };
const reply = (status: mastodon.v1.Status) => {
props.onReply?.(props.client, status)
}
css` css`
article { article {
transition: transition:
@ -88,6 +93,7 @@ const TootThread: Component<TootThreadProps> = (props) => {
actionable={expanded() > 0} actionable={expanded() > 0}
onBookmark={(s) => bookmark(s)} onBookmark={(s) => bookmark(s)}
onRetoot={(s) => boost(s)} onRetoot={(s) => boost(s)}
onReply={s => reply(s)}
/> />
</article> </article>
); );

View file

@ -0,0 +1,3 @@
{
"Choose Language": "Choose Language"
}

View file

@ -0,0 +1,3 @@
{
"Choose Language": "选择语言"
}