composing toots #21

Merged
Rubicon merged 11 commits from feat-toot-composer into master 2024-09-28 07:30:40 +00:00
4 changed files with 43 additions and 13 deletions
Showing only changes of commit cefa4a1b83 - Show all commits

View file

@ -58,6 +58,7 @@ const TimelinePanel: Component<{
openFullScreenToot: (
toot: mastodon.v1.Status,
srcElement?: HTMLElement,
reply?: boolean,
) => void;
}> = (props) => {
const [scrollLinked, setScrollLinked] = createSignal<HTMLElement>();
@ -165,6 +166,9 @@ const TimelinePanel: Component<{
status={item}
onBoost={(...args) => onBoost(index(), ...args)}
onBookmark={(...args) => onBookmark(index(), ...args)}
onReply={(client, status) =>
props.openFullScreenToot(status, element, true)
}
client={props.client}
expanded={item.id === expandedThreadId() ? 1 : 0}
onExpandChange={(x) => {
@ -327,6 +331,7 @@ const Home: ParentComponent = (props) => {
const openFullScreenToot = (
toot: mastodon.v1.Status,
srcElement?: HTMLElement,
reply?: boolean,
) => {
const p = profiles()[0];
const inf = p.account.inf ?? profile();
@ -338,7 +343,13 @@ const Home: ParentComponent = (props) => {
setHeroSrc((x) => Object.assign({}, x, { [BOTTOM_SHEET_HERO]: rect }));
const acct = `${inf.username}@${p.account.site}`;
setTootBottomSheetCache(acct, toot);
navigate(`/${encodeURIComponent(acct)}/${toot.id}`);
navigate(`/${encodeURIComponent(acct)}/${toot.id}`, {
state: reply
? {
tootReply: true,
}
: undefined,
});
};
css`

View file

@ -39,7 +39,10 @@ function getCache(acct: string, id: string) {
const TootBottomSheet: Component = (props) => {
const params = useParams<{ acct: string; id: string }>();
const location = useLocation<{ tootBottomSheetPushedCount?: number }>();
const location = useLocation<{
tootBottomSheetPushedCount?: number;
tootReply?: boolean;
}>();
const navigate = useNavigate();
const allSession = useSessions();
const time = createTimeSource();
@ -84,6 +87,12 @@ const TootBottomSheet: Component = (props) => {
return tootId;
});
createEffect(() => {
if (location.state?.tootReply) {
setInTyping(true);
}
});
const [tootContext, { refetch: refetchContext }] = createResource(
() => [session().client, params.id] as const,
async ([client, id]) => {
@ -172,16 +181,16 @@ const TootBottomSheet: Component = (props) => {
};
const defaultMentions = () => {
const tootAcct = remoteToot()?.reblog?.account ?? remoteToot()?.account
const tootAcct = remoteToot()?.reblog?.account ?? remoteToot()?.account;
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}`)
return Array.from(new Set(values).keys())
}
const values = [tootAcct, ...others].map((x) => `@${x.acct}`);
return Array.from(new Set(values).keys());
};
css`
.name :global(img) {

View file

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

View file

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