added shortcut to reply

This commit is contained in:
thislight 2024-09-28 15:29:21 +08:00
parent dd6051aea7
commit cefa4a1b83
No known key found for this signature in database
GPG key ID: A50F9451AC56A63E
4 changed files with 43 additions and 13 deletions

View file

@ -58,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>();
@ -153,7 +154,7 @@ const TimelinePanel: Component<{
isTyping={typing()} isTyping={typing()}
onTypingChange={setTyping} onTypingChange={setTyping}
client={props.client} client={props.client}
onSent={() => refetchTimeline({direction: "new"})} onSent={() => refetchTimeline({ direction: "new" })}
/> />
</Show> </Show>
<For each={timeline}> <For each={timeline}>
@ -165,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) => {
@ -327,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();
@ -338,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

@ -39,7 +39,10 @@ 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 time = createTimeSource();
@ -84,7 +87,13 @@ const TootBottomSheet: Component = (props) => {
return tootId; return tootId;
}); });
const [tootContext, {refetch: refetchContext}] = 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();
@ -172,16 +181,16 @@ const TootBottomSheet: Component = (props) => {
}; };
const defaultMentions = () => { const defaultMentions = () => {
const tootAcct = remoteToot()?.reblog?.account ?? remoteToot()?.account const tootAcct = remoteToot()?.reblog?.account ?? remoteToot()?.account;
if (!tootAcct) { if (!tootAcct) {
return return;
} }
const others = ancestors().map(x => x.account) const others = ancestors().map((x) => x.account);
const values = [tootAcct, ...others].map(x => `@${x.acct}`) const values = [tootAcct, ...others].map((x) => `@${x.acct}`);
return Array.from(new Set(values).keys()) return Array.from(new Set(values).keys());
} };
css` css`
.name :global(img) { .name :global(img) {
@ -286,7 +295,7 @@ const TootBottomSheet: Component = (props) => {
)} )}
</For> </For>
</TimeSourceProvider> </TimeSourceProvider>
<div style={{height: "var(--safe-area-inset-bottom, 0)"}}></div> <div style={{ height: "var(--safe-area-inset-bottom, 0)" }}></div>
</Scaffold> </Scaffold>
); );
}; };

View file

@ -198,7 +198,6 @@ const TootComposer: Component<{
client?: mastodon.rest.Client; client?: mastodon.rest.Client;
inReplyToId?: string; inReplyToId?: string;
onSent?: (status: mastodon.v1.Status) => void; onSent?: (status: mastodon.v1.Status) => void;
inputProps?: JSX.TextareaHTMLAttributes<HTMLTextAreaElement>;
}> = (props) => { }> = (props) => {
let inputRef: HTMLTextAreaElement; let inputRef: HTMLTextAreaElement;
let sendKey: string | undefined; let sendKey: string | undefined;
@ -217,6 +216,12 @@ const TootComposer: Component<{
setLanguage(lang); setLanguage(lang);
}); });
createEffect(() => {
if (typing()) {
setTimeout(() => inputRef.focus(), 0);
}
});
onMount(() => { onMount(() => {
makeEventListener(inputRef, "focus", () => setTyping(true)); makeEventListener(inputRef, "focus", () => setTyping(true));
}); });
@ -312,7 +317,6 @@ const TootComposer: Component<{
} }
style={{ width: "100%", border: "none" }} style={{ width: "100%", border: "none" }}
disabled={sending()} disabled={sending()}
{...props.inputProps}
></textarea> ></textarea>
<Show when={props.client}> <Show when={props.client}>
<Show <Show

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>
); );