Compare commits
No commits in common. "4c717a0cb7eb479dcd6d6c836d287bacb8d3354d" and "cbdf5e667d8e4e692d4cb0515efdb7f1e5ac88f3" have entirely different histories.
4c717a0cb7
...
cbdf5e667d
13 changed files with 522 additions and 454 deletions
23
src/App.tsx
23
src/App.tsx
|
|
@ -1,4 +1,4 @@
|
|||
import { Route } from "@solidjs/router";
|
||||
import { Route, Router } from "@solidjs/router";
|
||||
import { ThemeProvider } from "@suid/material";
|
||||
import {
|
||||
Component,
|
||||
|
|
@ -17,12 +17,7 @@ import {
|
|||
} from "./masto/clients.js";
|
||||
import { $accounts, updateAcctInf } from "./accounts/stores.js";
|
||||
import { useStore } from "@nanostores/solid";
|
||||
import {
|
||||
AppLocaleProvider,
|
||||
createCurrentLanguage,
|
||||
createCurrentRegion,
|
||||
createDateFnLocaleResource,
|
||||
} from "./platform/i18n.jsx";
|
||||
import { DateFnScope, useLanguage } from "./platform/i18n.jsx";
|
||||
import { useRegisterSW } from "virtual:pwa-register/solid";
|
||||
import {
|
||||
isJSONRPCResult,
|
||||
|
|
@ -72,9 +67,7 @@ const Routing: Component = () => {
|
|||
const App: Component = () => {
|
||||
const theme = useRootTheme();
|
||||
const accts = useStore($accounts);
|
||||
const lang = createCurrentLanguage();
|
||||
const region = createCurrentRegion();
|
||||
const dateFnLocale = createDateFnLocaleResource(region);
|
||||
const lang = useLanguage();
|
||||
const [serviceWorker, setServiceWorker] = createSignal<
|
||||
ServiceWorker | undefined
|
||||
>(undefined, { name: "serviceWorker" });
|
||||
|
|
@ -157,13 +150,7 @@ const App: Component = () => {
|
|||
}}
|
||||
>
|
||||
<ThemeProvider theme={theme}>
|
||||
<AppLocaleProvider
|
||||
value={{
|
||||
language: lang,
|
||||
region: region,
|
||||
dateFn: dateFnLocale,
|
||||
}}
|
||||
>
|
||||
<DateFnScope>
|
||||
<ClientProvider value={clients}>
|
||||
<ServiceWorkerProvider
|
||||
value={{
|
||||
|
|
@ -175,7 +162,7 @@ const App: Component = () => {
|
|||
<Routing />
|
||||
</ServiceWorkerProvider>
|
||||
</ClientProvider>
|
||||
</AppLocaleProvider>
|
||||
</DateFnScope>
|
||||
</ThemeProvider>
|
||||
</ErrorBoundary>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
import {
|
||||
catchError,
|
||||
ParentComponent,
|
||||
createContext,
|
||||
createMemo,
|
||||
createResource,
|
||||
useContext,
|
||||
} from "solid-js";
|
||||
import { match } from "@formatjs/intl-localematcher";
|
||||
import { Accessor } from "solid-js";
|
||||
import { Accessor, createEffect, createSignal } from "solid-js";
|
||||
import { $settings } from "../settings/stores";
|
||||
import { enGB } from "date-fns/locale/en-GB";
|
||||
import { useStore } from "@nanostores/solid";
|
||||
|
|
@ -17,6 +17,13 @@ import {
|
|||
type Template,
|
||||
} from "@solid-primitives/i18n";
|
||||
|
||||
async function synchronised(
|
||||
name: string,
|
||||
callback: () => Promise<void> | void,
|
||||
): Promise<void> {
|
||||
await navigator.locks.request(name, callback);
|
||||
}
|
||||
|
||||
export const SUPPORTED_LANGS = ["en", "zh-Hans"] as const;
|
||||
|
||||
export const SUPPORTED_REGIONS = ["en_US", "en_GB", "zh_CN"] as const;
|
||||
|
|
@ -31,6 +38,14 @@ export function autoMatchLangTag() {
|
|||
return match(Array.from(navigator.languages), SUPPORTED_LANGS, DEFAULT_LANG);
|
||||
}
|
||||
|
||||
const DateFnLocaleCx = /* __@PURE__ */ createContext<Accessor<Locale>>(
|
||||
() => enGB,
|
||||
);
|
||||
|
||||
const cachedDateFnLocale: Record<string, Locale> = {
|
||||
enGB,
|
||||
};
|
||||
|
||||
export function autoMatchRegion() {
|
||||
const specifiers = navigator.languages.map((x) => x.split("-"));
|
||||
|
||||
|
|
@ -55,7 +70,7 @@ export function autoMatchRegion() {
|
|||
return "en_GB";
|
||||
}
|
||||
|
||||
export function createCurrentRegion() {
|
||||
export function useRegion() {
|
||||
const appSettings = useStore($settings);
|
||||
|
||||
return createMemo(
|
||||
|
|
@ -85,6 +100,53 @@ async function importDateFnLocale(tag: string): Promise<Locale> {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Provides runtime values and fetch dependencies for date-fns locale
|
||||
*/
|
||||
export const DateFnScope: ParentComponent = (props) => {
|
||||
const [dateFnLocale, setDateFnLocale] = createSignal(enGB, {
|
||||
name: "dateFnLocale",
|
||||
});
|
||||
const region = useRegion();
|
||||
|
||||
createEffect(() => {
|
||||
const dateFnLocaleName = region();
|
||||
|
||||
if (cachedDateFnLocale[dateFnLocaleName]) {
|
||||
setDateFnLocale(cachedDateFnLocale[dateFnLocaleName]);
|
||||
} else {
|
||||
synchronised("i18n-wrapper-load-date-fns-locale", async () => {
|
||||
if (cachedDateFnLocale[dateFnLocaleName]) {
|
||||
setDateFnLocale(cachedDateFnLocale[dateFnLocaleName]);
|
||||
return;
|
||||
}
|
||||
const target = `date-fns/locale/${dateFnLocaleName}`;
|
||||
try {
|
||||
const mod = await importDateFnLocale(dateFnLocaleName);
|
||||
cachedDateFnLocale[dateFnLocaleName] = mod;
|
||||
setDateFnLocale(mod);
|
||||
} catch (reason) {
|
||||
console.error(
|
||||
{
|
||||
act: "load-date-fns-locale",
|
||||
stat: "failed",
|
||||
reason,
|
||||
target,
|
||||
},
|
||||
"failed to load date-fns locale",
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<DateFnLocaleCx.Provider value={dateFnLocale}>
|
||||
{props.children}
|
||||
</DateFnLocaleCx.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Get the {@link Locale} object for date-fns.
|
||||
*
|
||||
|
|
@ -93,11 +155,11 @@ async function importDateFnLocale(tag: string): Promise<Locale> {
|
|||
* @returns Accessor for Locale
|
||||
*/
|
||||
export function useDateFnLocale(): Accessor<Locale> {
|
||||
const { dateFn } = useAppLocale();
|
||||
return dateFn;
|
||||
const cx = useContext(DateFnLocaleCx);
|
||||
return cx;
|
||||
}
|
||||
|
||||
export function createCurrentLanguage() {
|
||||
export function useLanguage() {
|
||||
const settings = useStore($settings);
|
||||
return () => settings().language || autoMatchLangTag();
|
||||
}
|
||||
|
|
@ -117,7 +179,7 @@ type MergedImportedModule<T> = T extends []
|
|||
export function createStringResource<
|
||||
T extends ImportFn<Record<string, string | Template<any> | undefined>>[],
|
||||
>(...importFns: T) {
|
||||
const language = createCurrentLanguage();
|
||||
const language = useLanguage(); // TODO: this function costs to much, provide a global cache
|
||||
const cache: Record<string, MergedImportedModule<T>> = {};
|
||||
|
||||
return createResource(
|
||||
|
|
@ -147,38 +209,3 @@ export function createTranslator<
|
|||
|
||||
return [translator(res[0], resolveTemplate), res] as const;
|
||||
}
|
||||
|
||||
export type AppLocale = {
|
||||
dateFn: () => Locale;
|
||||
language: () => string;
|
||||
region: () => string;
|
||||
};
|
||||
|
||||
const AppLocaleContext = /* @__PURE__ */ createContext<AppLocale>();
|
||||
|
||||
export const AppLocaleProvider = AppLocaleContext.Provider;
|
||||
|
||||
export function useAppLocale() {
|
||||
const l = useContext(AppLocaleContext);
|
||||
if (!l) {
|
||||
throw new TypeError("app locale not found");
|
||||
}
|
||||
return l;
|
||||
}
|
||||
|
||||
export function createDateFnLocaleResource(region: () => string) {
|
||||
const [localeUncaught] = createResource(
|
||||
region,
|
||||
async (region) => {
|
||||
return await importDateFnLocale(region);
|
||||
},
|
||||
{ initialValue: enGB },
|
||||
);
|
||||
|
||||
return createMemo(
|
||||
() =>
|
||||
catchError(localeUncaught, (reason) => {
|
||||
console.error("fetch date-fns locale", reason);
|
||||
}) ?? enGB,
|
||||
);
|
||||
}
|
||||
|
|
|
|||
57
src/timelines/CompactToot.tsx
Normal file
57
src/timelines/CompactToot.tsx
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
import type { mastodon } from "masto";
|
||||
import { Show, type Component } from "solid-js";
|
||||
import tootStyle from "./toot.module.css";
|
||||
import { formatRelative } from "date-fns";
|
||||
import Img from "~material/Img";
|
||||
import { Body2 } from "~material/typography";
|
||||
import { appliedCustomEmoji } from "../masto/toot";
|
||||
import { TootPreviewCard } from "./RegularToot";
|
||||
|
||||
type CompactTootProps = {
|
||||
status: mastodon.v1.Status;
|
||||
now: Date;
|
||||
class?: string;
|
||||
};
|
||||
|
||||
const CompactToot: Component<CompactTootProps> = (props) => {
|
||||
const toot = () => props.status;
|
||||
return (
|
||||
<section
|
||||
class={[tootStyle.toot, tootStyle.compact, props.class || ""].join(" ")}
|
||||
lang={toot().language || undefined}
|
||||
>
|
||||
<Img
|
||||
src={toot().account.avatar}
|
||||
class={[tootStyle.tootAvatar].join(" ")}
|
||||
/>
|
||||
<div class={[tootStyle.compactAuthorGroup].join(" ")}>
|
||||
<Body2
|
||||
ref={(e: { innerHTML: string }) => {
|
||||
appliedCustomEmoji(
|
||||
e,
|
||||
toot().account.displayName,
|
||||
toot().account.emojis,
|
||||
);
|
||||
}}
|
||||
></Body2>
|
||||
<span class={tootStyle.compactAuthorUsername}>
|
||||
@{toot().account.username}@{new URL(toot().account.url).hostname}
|
||||
</span>
|
||||
<time datetime={toot().createdAt}>
|
||||
{formatRelative(props.now, toot().createdAt)}
|
||||
</time>
|
||||
</div>
|
||||
<div
|
||||
ref={(e: { innerHTML: string }) => {
|
||||
appliedCustomEmoji(e, toot().content, toot().emojis);
|
||||
}}
|
||||
class={[tootStyle.compactTootContent].join(" ")}
|
||||
></div>
|
||||
<Show when={toot().card}>
|
||||
<TootPreviewCard src={toot().card!} alwaysCompact />
|
||||
</Show>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default CompactToot;
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
.RegularToot {
|
||||
--card-pad: 16px;
|
||||
--card-gut: 16px;
|
||||
--toot-avatar-size: 40px;
|
||||
margin-block: 0;
|
||||
position: relative;
|
||||
contain: layout style;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
transition:
|
||||
margin-top 60ms var(--tutu-anim-curve-sharp),
|
||||
margin-bottom 60ms var(--tutu-anim-curve-sharp),
|
||||
height 60ms var(--tutu-anim-curve-sharp),
|
||||
var(--tutu-transition-shadow);
|
||||
border-radius: 0;
|
||||
|
||||
time {
|
||||
color: var(--tutu-color-secondary-text-on-surface);
|
||||
}
|
||||
|
||||
>.retoot-grp {
|
||||
display: flex;
|
||||
gap: 0.25em;
|
||||
margin-bottom: 8px;
|
||||
align-items: center;
|
||||
|
||||
> :first-child {
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
& .custom-emoji {
|
||||
height: 1em;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
&.expanded {
|
||||
margin-block: 20px;
|
||||
box-shadow: var(--tutu-shadow-e9);
|
||||
}
|
||||
|
||||
&.thread-top,
|
||||
&.thread-mid,
|
||||
&.thread-btm {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 36px;
|
||||
background-color: var(--tutu-color-secondary);
|
||||
width: 2px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&.thread-mid {
|
||||
&::before {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.thread-top {
|
||||
&::before {
|
||||
top: 16px;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.thread-btm {
|
||||
&::before {
|
||||
top: 0;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -7,62 +7,63 @@ import {
|
|||
createRenderEffect,
|
||||
createSignal,
|
||||
type Setter,
|
||||
createContext,
|
||||
useContext,
|
||||
} from "solid-js";
|
||||
import tootStyle from "./toot.module.css";
|
||||
import { formatRelative } from "date-fns";
|
||||
import { formatRelative, parseISO } from "date-fns";
|
||||
import Img from "~material/Img.js";
|
||||
import { Body2 } from "~material/typography.js";
|
||||
import { SmartToySharp, Lock } from "@suid/icons-material";
|
||||
import { css } from "solid-styled";
|
||||
import {
|
||||
BookmarkAddOutlined,
|
||||
Repeat,
|
||||
ReplyAll,
|
||||
Star,
|
||||
StarOutline,
|
||||
Bookmark,
|
||||
Share,
|
||||
SmartToySharp,
|
||||
Lock,
|
||||
} from "@suid/icons-material";
|
||||
import { useTimeSource } from "~platform/timesrc.js";
|
||||
import { resolveCustomEmoji } from "../masto/toot.js";
|
||||
import { Divider } from "@suid/material";
|
||||
import cardStyle from "~material/cards.module.css";
|
||||
import Button from "~material/Button.js";
|
||||
import MediaAttachmentGrid from "./toots/MediaAttachmentGrid.jsx";
|
||||
import { useDateFnLocale } from "~platform/i18n";
|
||||
import { canShare, share } from "~platform/share";
|
||||
import { makeAcctText, useDefaultSession } from "../masto/clients";
|
||||
import TootContent from "./toots/TootContent";
|
||||
import BoostIcon from "./toots/BoostIcon";
|
||||
import PreviewCard from "./toots/PreviewCard";
|
||||
import TootPoll from "./toots/TootPoll";
|
||||
import TootActionGroup from "./toots/TootActionGroup.js";
|
||||
import "./RegularToot.css";
|
||||
|
||||
export type TootEnv = {
|
||||
boost: (value: mastodon.v1.Status) => void;
|
||||
favourite: (value: mastodon.v1.Status) => void;
|
||||
bookmark: (value: mastodon.v1.Status) => void;
|
||||
reply?: (
|
||||
value: mastodon.v1.Status,
|
||||
type TootActionGroupProps<T extends mastodon.v1.Status> = {
|
||||
onRetoot?: (value: T) => void;
|
||||
onFavourite?: (value: T) => void;
|
||||
onBookmark?: (value: T) => void;
|
||||
onReply?: (
|
||||
value: T,
|
||||
event: MouseEvent & { currentTarget: HTMLButtonElement },
|
||||
) => void;
|
||||
vote: (
|
||||
status: mastodon.v1.Status,
|
||||
votes: readonly number[],
|
||||
) => void | Promise<void>;
|
||||
};
|
||||
|
||||
const TootEnvContext = /* @__PURE__ */ createContext<TootEnv>();
|
||||
|
||||
export const TootEnvProvider = TootEnvContext.Provider;
|
||||
|
||||
export function useTootEnv() {
|
||||
const env = useContext(TootEnvContext);
|
||||
if (!env) {
|
||||
throw new TypeError(
|
||||
"environment not found, use TootEnvProvider to provide",
|
||||
);
|
||||
}
|
||||
return env;
|
||||
}
|
||||
|
||||
type RegularTootProps = {
|
||||
status: mastodon.v1.Status;
|
||||
actionable?: boolean;
|
||||
evaluated?: boolean;
|
||||
thread?: "top" | "bottom" | "middle";
|
||||
} & JSX.HTMLElementTags["article"];
|
||||
|
||||
onVote?: (value: {
|
||||
status: mastodon.v1.Status;
|
||||
votes: readonly number[];
|
||||
}) => void | Promise<void>;
|
||||
} & TootActionGroupProps<mastodon.v1.Status> &
|
||||
JSX.HTMLElementTags["article"];
|
||||
|
||||
function isolatedCallback(e: MouseEvent) {
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
export function findRootToot(element: HTMLElement) {
|
||||
let current: HTMLElement | null = element;
|
||||
|
|
@ -77,6 +78,73 @@ export function findRootToot(element: HTMLElement) {
|
|||
return current;
|
||||
}
|
||||
|
||||
function TootActionGroup<T extends mastodon.v1.Status>(
|
||||
props: TootActionGroupProps<T> & { value: T },
|
||||
) {
|
||||
let actGrpElement: HTMLDivElement;
|
||||
const toot = () => props.value;
|
||||
return (
|
||||
<div
|
||||
ref={actGrpElement!}
|
||||
class={tootStyle.tootBottomActionGrp}
|
||||
onClick={isolatedCallback}
|
||||
>
|
||||
<Show when={props.onReply}>
|
||||
<Button
|
||||
class={tootStyle.tootActionWithCount}
|
||||
onClick={[props.onReply!, props.value]}
|
||||
>
|
||||
<ReplyAll />
|
||||
<span>{toot().repliesCount}</span>
|
||||
</Button>
|
||||
</Show>
|
||||
|
||||
<Button
|
||||
class={tootStyle.tootActionWithCount}
|
||||
style={{
|
||||
color: toot().reblogged ? "var(--tutu-color-primary)" : undefined,
|
||||
}}
|
||||
onClick={() => props.onRetoot?.(toot())}
|
||||
>
|
||||
<Repeat />
|
||||
<span>{toot().reblogsCount}</span>
|
||||
</Button>
|
||||
<Button
|
||||
class={tootStyle.tootActionWithCount}
|
||||
style={{
|
||||
color: toot().favourited ? "var(--tutu-color-primary)" : undefined,
|
||||
}}
|
||||
onClick={() => props.onFavourite?.(toot())}
|
||||
>
|
||||
{toot().favourited ? <Star /> : <StarOutline />}
|
||||
<span>{toot().favouritesCount}</span>
|
||||
</Button>
|
||||
<Button
|
||||
class={tootStyle.tootAction}
|
||||
style={{
|
||||
color: toot().bookmarked ? "var(--tutu-color-primary)" : undefined,
|
||||
}}
|
||||
onClick={() => props.onBookmark?.(toot())}
|
||||
>
|
||||
{toot().bookmarked ? <Bookmark /> : <BookmarkAddOutlined />}
|
||||
</Button>
|
||||
<Show when={canShare({ url: toot().url ?? undefined })}>
|
||||
<Button
|
||||
class={tootStyle.tootAction}
|
||||
aria-label="Share"
|
||||
onClick={async () => {
|
||||
await share({
|
||||
url: toot().url ?? undefined,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Share />
|
||||
</Button>
|
||||
</Show>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TootAuthorGroup(
|
||||
props: {
|
||||
status: mastodon.v1.Status;
|
||||
|
|
@ -152,8 +220,6 @@ function onToggleReveal(setValue: Setter<boolean>, event: Event) {
|
|||
* this component under a `<DefaultSessionProvier />` with correct
|
||||
* session.
|
||||
*
|
||||
* This component requires be under `<TootEnvProvider />`.
|
||||
*
|
||||
* **Handling Clicks**
|
||||
* There are multiple actions supported in the component. Some handlers
|
||||
* are passed in, some should be handled as the click event.
|
||||
|
|
@ -175,39 +241,80 @@ function onToggleReveal(setValue: Setter<boolean>, event: Event) {
|
|||
* You can extract the intent from the attributes of the "actionable" element.
|
||||
* The action type is the dataset's `action`.
|
||||
*/
|
||||
const RegularToot: Component<RegularTootProps> = (oprops) => {
|
||||
const RegularToot: Component<RegularTootProps> = (props) => {
|
||||
let rootRef: HTMLElement;
|
||||
const [props, rest] = splitProps(oprops, [
|
||||
"status",
|
||||
"lang",
|
||||
"class",
|
||||
"actionable",
|
||||
"evaluated",
|
||||
"thread",
|
||||
]);
|
||||
const [managed, managedActionGroup, pollProps, rest] = splitProps(
|
||||
props,
|
||||
["status", "lang", "class", "actionable", "evaluated", "thread"],
|
||||
["onRetoot", "onFavourite", "onBookmark", "onReply"],
|
||||
["onVote"],
|
||||
);
|
||||
const now = useTimeSource();
|
||||
const status = () => props.status;
|
||||
const status = () => managed.status;
|
||||
const toot = () => status().reblog ?? status();
|
||||
const session = useDefaultSession();
|
||||
const [reveal, setReveal] = createSignal(false);
|
||||
|
||||
css`
|
||||
.reply-sep {
|
||||
margin-left: calc(var(--toot-avatar-size) + var(--card-pad) + 8px);
|
||||
margin-block: 8px;
|
||||
}
|
||||
|
||||
.thread-top,
|
||||
.thread-mid,
|
||||
.thread-btm {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 36px;
|
||||
background-color: var(--tutu-color-secondary);
|
||||
width: 2px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.thread-mid {
|
||||
&::before {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.thread-top {
|
||||
&::before {
|
||||
top: 16px;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.thread-btm {
|
||||
&::before {
|
||||
top: 0;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
return (
|
||||
<>
|
||||
<article
|
||||
classList={{
|
||||
"RegularToot": true,
|
||||
"expanded": props.evaluated,
|
||||
"thread-top": props.thread === "top",
|
||||
"thread-mid": props.thread === "middle",
|
||||
"thread-btm": props.thread === "bottom",
|
||||
[props.class || ""]: true,
|
||||
[tootStyle.toot]: true,
|
||||
[tootStyle.expanded]: managed.evaluated,
|
||||
"thread-top": managed.thread === "top",
|
||||
"thread-mid": managed.thread === "middle",
|
||||
"thread-btm": managed.thread === "bottom",
|
||||
[managed.class || ""]: true,
|
||||
}}
|
||||
ref={rootRef!}
|
||||
lang={toot().language || props.lang}
|
||||
lang={toot().language || managed.lang}
|
||||
{...rest}
|
||||
>
|
||||
<Show when={!!status().reblog}>
|
||||
<div class="retoot-grp">
|
||||
<div class={tootStyle.tootRetootGrp}>
|
||||
<BoostIcon />
|
||||
<Body2
|
||||
ref={(e: { innerHTML: string }) => {
|
||||
|
|
@ -253,14 +360,27 @@ const RegularToot: Component<RegularTootProps> = (oprops) => {
|
|||
/>
|
||||
</Show>
|
||||
<Show when={toot().poll}>
|
||||
<TootPoll value={toot().poll!} status={toot()} />
|
||||
<TootPoll
|
||||
options={toot().poll!.options}
|
||||
multiple={toot().poll!.multiple}
|
||||
votesCount={toot().poll!.votesCount}
|
||||
expired={toot().poll!.expired}
|
||||
expiredAt={
|
||||
toot().poll!.expiresAt
|
||||
? parseISO(toot().poll!.expiresAt!)
|
||||
: undefined
|
||||
}
|
||||
voted={toot().poll!.voted}
|
||||
ownVotes={toot().poll!.ownVotes || undefined}
|
||||
onVote={(votes) => pollProps.onVote?.({ status: status(), votes })}
|
||||
/>
|
||||
</Show>
|
||||
<Show when={props.actionable}>
|
||||
<Show when={managed.actionable}>
|
||||
<Divider
|
||||
class={cardStyle.cardNoPad}
|
||||
style={{ "margin-top": "8px" }}
|
||||
/>
|
||||
<TootActionGroup value={toot()} class={cardStyle.cardGutSkip} />
|
||||
<TootActionGroup value={toot()} {...managedActionGroup} />
|
||||
</Show>
|
||||
</article>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -13,10 +13,7 @@ import { Title } from "~material/typography";
|
|||
import { Close as CloseIcon } from "@suid/icons-material";
|
||||
import { useSessionForAcctStr } from "../masto/clients";
|
||||
import { resolveCustomEmoji } from "../masto/toot";
|
||||
import RegularToot, {
|
||||
findElementActionable,
|
||||
TootEnvProvider,
|
||||
} from "./RegularToot";
|
||||
import RegularToot, { findElementActionable } from "./RegularToot";
|
||||
import type { mastodon } from "masto";
|
||||
import cards from "~material/cards.module.css";
|
||||
import { css } from "solid-styled";
|
||||
|
|
@ -172,33 +169,6 @@ const TootBottomSheet: Component = (props) => {
|
|||
return Array.from(new Set(values).keys());
|
||||
};
|
||||
|
||||
const vote = async (status: mastodon.v1.Status, votes: readonly number[]) => {
|
||||
const client = session()?.client;
|
||||
if (!client) return;
|
||||
|
||||
const toot = status.reblog ?? status;
|
||||
if (!toot.poll) return;
|
||||
|
||||
const npoll = await client.v1.polls.$select(toot.poll.id).votes.create({
|
||||
choices: votes,
|
||||
});
|
||||
|
||||
if (status.reblog) {
|
||||
setRemoteToot({
|
||||
...status,
|
||||
reblog: {
|
||||
...status.reblog,
|
||||
poll: npoll,
|
||||
},
|
||||
});
|
||||
} else {
|
||||
setRemoteToot({
|
||||
...status,
|
||||
poll: npoll,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleMainTootClick = (
|
||||
event: MouseEvent & { currentTarget: HTMLElement },
|
||||
) => {
|
||||
|
|
@ -285,29 +255,23 @@ const TootBottomSheet: Component = (props) => {
|
|||
|
||||
<article>
|
||||
<Show when={toot()}>
|
||||
<TootEnvProvider
|
||||
value={{
|
||||
bookmark: onBookmark,
|
||||
boost: onBoost,
|
||||
favourite: onFav,
|
||||
vote,
|
||||
<RegularToot
|
||||
id={`toot-${toot()!.id}`}
|
||||
class={cards.card}
|
||||
style={{
|
||||
"scroll-margin-top":
|
||||
"calc(var(--scaffold-topbar-height) + 20px)",
|
||||
"cursor": "auto",
|
||||
"user-select": "auto",
|
||||
}}
|
||||
>
|
||||
<RegularToot
|
||||
id={`toot-${toot()!.id}`}
|
||||
class={cards.card}
|
||||
style={{
|
||||
"scroll-margin-top":
|
||||
"calc(var(--scaffold-topbar-height) + 20px)",
|
||||
cursor: "auto",
|
||||
"user-select": "auto",
|
||||
}}
|
||||
status={toot()!}
|
||||
actionable={!!actSession()}
|
||||
evaluated={true}
|
||||
onClick={handleMainTootClick}
|
||||
></RegularToot>
|
||||
</TootEnvProvider>
|
||||
status={toot()!}
|
||||
actionable={!!actSession()}
|
||||
evaluated={true}
|
||||
onBookmark={onBookmark}
|
||||
onRetoot={onBoost}
|
||||
onFavourite={onFav}
|
||||
onClick={handleMainTootClick}
|
||||
></RegularToot>
|
||||
</Show>
|
||||
</article>
|
||||
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ import {
|
|||
import type { Account } from "../accounts/stores";
|
||||
import "./TootComposer.css";
|
||||
import BottomSheet from "~material/BottomSheet";
|
||||
import { useAppLocale } from "~platform/i18n";
|
||||
import { useLanguage } from "~platform/i18n";
|
||||
import iso639_1 from "iso-639-1";
|
||||
import ChooseTootLang from "./ChooseTootLang";
|
||||
import type { mastodon } from "masto";
|
||||
|
|
@ -98,8 +98,7 @@ const TootVisibilityPickerDialog: Component<{
|
|||
style={{
|
||||
"border-top": "1px solid #ddd",
|
||||
background: "var(--tutu-color-surface)",
|
||||
padding:
|
||||
"8px 16px calc(8px + var(--safe-area-inset-bottom, 0px))",
|
||||
padding: "8px 16px calc(8px + var(--safe-area-inset-bottom, 0px))",
|
||||
width: "100%",
|
||||
"text-align": "end",
|
||||
}}
|
||||
|
|
@ -233,7 +232,7 @@ const TootComposer: Component<{
|
|||
const [permPicker, setPermPicker] = createSignal(false);
|
||||
const [language, setLanguage] = createSignal("en");
|
||||
const [langPickerOpen, setLangPickerOpen] = createSignal(false);
|
||||
const { language: appLanguage } = useAppLocale();
|
||||
const appLanguage = useLanguage();
|
||||
const [openMenu, menuState] = createManagedMenuState();
|
||||
|
||||
const randomPlaceholder = useRandomChoice(() => [
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ import {
|
|||
createSelector,
|
||||
Index,
|
||||
createMemo,
|
||||
For,
|
||||
} from "solid-js";
|
||||
import { type mastodon } from "masto";
|
||||
import { vibrate } from "~platform/hardware";
|
||||
|
|
@ -15,7 +14,6 @@ import { setCache as setTootBottomSheetCache } from "./TootBottomSheet";
|
|||
import RegularToot, {
|
||||
findElementActionable,
|
||||
findRootToot,
|
||||
TootEnvProvider,
|
||||
} from "./RegularToot";
|
||||
import cardStyle from "~material/cards.module.css";
|
||||
import type { ThreadNode } from "../masto/timelines";
|
||||
|
|
@ -234,10 +232,13 @@ const TootList: Component<{
|
|||
openFullScreenToot(status, element, true);
|
||||
};
|
||||
|
||||
const vote = async (
|
||||
status: mastodon.v1.Status,
|
||||
votes: readonly number[]
|
||||
) => {
|
||||
const vote = async ({
|
||||
status,
|
||||
votes,
|
||||
}: {
|
||||
status: mastodon.v1.Status;
|
||||
votes: readonly number[];
|
||||
}) => {
|
||||
const client = session()?.client;
|
||||
if (!client) return;
|
||||
|
||||
|
|
@ -262,6 +263,7 @@ const TootList: Component<{
|
|||
poll: npoll,
|
||||
});
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
@ -271,50 +273,49 @@ const TootList: Component<{
|
|||
return <p>Oops: {String(err)}</p>;
|
||||
}}
|
||||
>
|
||||
<TootEnvProvider value={{
|
||||
boost: toggleBoost,
|
||||
bookmark: onBookmark,
|
||||
favourite: toggleFavourite,
|
||||
reply: reply,
|
||||
vote: vote
|
||||
}}>
|
||||
<div ref={props.ref} id={props.id} class="toot-list">
|
||||
<For each={props.threads}>
|
||||
{(threadId, threadIdx) => {
|
||||
const thread = createMemo(() =>
|
||||
props.onUnknownThread(threadId)?.reverse(),
|
||||
);
|
||||
<div ref={props.ref} id={props.id} class="toot-list">
|
||||
<Index each={props.threads}>
|
||||
{(threadId, threadIdx) => {
|
||||
const thread = createMemo(() =>
|
||||
props.onUnknownThread(threadId())?.reverse(),
|
||||
);
|
||||
|
||||
const threadLength = () => thread()?.length ?? 0;
|
||||
const threadLength = () => thread()?.length ?? 0;
|
||||
|
||||
return (
|
||||
<Index each={thread()}>
|
||||
{(threadNode, index) => {
|
||||
const status = () => threadNode().value;
|
||||
return (
|
||||
<Index each={thread()}>
|
||||
{(threadNode, index) => {
|
||||
const status = () => threadNode().value;
|
||||
|
||||
return (
|
||||
<RegularToot
|
||||
data-status-id={status().id}
|
||||
data-thread-sort={index}
|
||||
status={status()}
|
||||
thread={
|
||||
threadLength() > 1
|
||||
? positionTootInThread(index, threadLength())
|
||||
: undefined
|
||||
}
|
||||
class={cardStyle.card}
|
||||
evaluated={checkIsExpended(status())}
|
||||
actionable={checkIsExpended(status())}
|
||||
onClick={[onItemClick, status()]}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
</Index>
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
</div>
|
||||
</TootEnvProvider>
|
||||
return (
|
||||
<RegularToot
|
||||
data-status-id={status().id}
|
||||
data-thread={threadIdx}
|
||||
data-thread-len={threadLength()}
|
||||
data-thread-sort={index}
|
||||
status={status()}
|
||||
thread={
|
||||
threadLength() > 1
|
||||
? positionTootInThread(index, threadLength())
|
||||
: undefined
|
||||
}
|
||||
class={cardStyle.card}
|
||||
evaluated={checkIsExpended(status())}
|
||||
actionable={checkIsExpended(status())}
|
||||
onBookmark={onBookmark}
|
||||
onRetoot={toggleBoost}
|
||||
onFavourite={toggleFavourite}
|
||||
onReply={reply}
|
||||
onVote={vote}
|
||||
onClick={[onItemClick, status()]}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
</Index>
|
||||
);
|
||||
}}
|
||||
</Index>
|
||||
</div>
|
||||
</ErrorBoundary>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,3 +1,41 @@
|
|||
.toot {
|
||||
--card-pad: 16px;
|
||||
--card-gut: 16px;
|
||||
--toot-avatar-size: 40px;
|
||||
margin-block: 0;
|
||||
position: relative;
|
||||
contain: content;
|
||||
cursor: pointer;
|
||||
|
||||
&.toot {
|
||||
/* fix composition ordering: I think the css module processor should aware the overriding and behaves, but no */
|
||||
transition:
|
||||
margin-top 60ms var(--tutu-anim-curve-sharp),
|
||||
margin-bottom 60ms var(--tutu-anim-curve-sharp),
|
||||
height 60ms var(--tutu-anim-curve-sharp),
|
||||
var(--tutu-transition-shadow);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&>.toot {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
time {
|
||||
color: var(--tutu-color-secondary-text-on-surface);
|
||||
}
|
||||
|
||||
& :global(.custom-emoji) {
|
||||
height: 1em;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
&.expanded {
|
||||
margin-block: 20px;
|
||||
box-shadow: var(--tutu-shadow-e9);
|
||||
}
|
||||
}
|
||||
|
||||
.tootAuthorGrp {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
|
@ -50,3 +88,90 @@
|
|||
border: 1px solid var(--tutu-color-surface);
|
||||
background-color: var(--tutu-color-surface-d);
|
||||
}
|
||||
|
||||
.toot.compact {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 8px;
|
||||
row-gap: 0;
|
||||
padding-block: var(--card-gut, 16px);
|
||||
padding-inline: var(--card-pad, 16px);
|
||||
|
||||
> :first-child {
|
||||
grid-row: 1/3;
|
||||
}
|
||||
|
||||
> :last-child {
|
||||
grid-column: 2 /3;
|
||||
}
|
||||
}
|
||||
|
||||
.compactAuthorGroup {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
flex-flow: row wrap;
|
||||
justify-content: flex-end;
|
||||
|
||||
>.compactAuthorUsername {
|
||||
color: var(--tutu-color-secondary-text-on-surface);
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
>time {
|
||||
color: var(--tutu-color-secondary-text-on-surface);
|
||||
}
|
||||
}
|
||||
|
||||
.tootRetootGrp {
|
||||
display: flex;
|
||||
gap: 0.25em;
|
||||
margin-bottom: 8px;
|
||||
align-items: center;
|
||||
|
||||
> :first-child {
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.tootBottomActionGrp {
|
||||
composes: cardGutSkip from "~material/cards.module.css";
|
||||
padding-block: calc((var(--card-gut) - 10px) / 2);
|
||||
|
||||
animation: 225ms var(--tutu-anim-curve-std) tootBottomExpanding;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-evenly;
|
||||
|
||||
>button {
|
||||
color: var(--tutu-color-on-surface);
|
||||
padding: 10px 8px;
|
||||
|
||||
>svg {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tootActionWithCount {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.tootAction {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@keyframes tootBottomExpanding {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
.TootActionGroup {
|
||||
padding-block: calc((var(--card-gut) - 10px) / 2);
|
||||
contain: layout style;
|
||||
|
||||
animation: 225ms var(--tutu-anim-curve-std) TootActionGroup_fade-in;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-evenly;
|
||||
|
||||
>button {
|
||||
color: var(--tutu-color-on-surface);
|
||||
padding: 10px 8px;
|
||||
|
||||
>svg {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
>* {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
>.with-count {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
>.plain {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes TootActionGroup_fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,89 +0,0 @@
|
|||
import type { mastodon } from "masto";
|
||||
import { useTootEnv } from "../RegularToot";
|
||||
import { Button } from "@suid/material";
|
||||
import { Show } from "solid-js";
|
||||
import {
|
||||
Bookmark,
|
||||
BookmarkAddOutlined,
|
||||
Repeat,
|
||||
ReplyAll,
|
||||
Share,
|
||||
Star,
|
||||
StarOutline,
|
||||
} from "@suid/icons-material";
|
||||
import { canShare, share } from "~platform/share";
|
||||
import "./TootActionGroup.css";
|
||||
|
||||
async function shareContent(toot: mastodon.v1.Status) {
|
||||
return await share({
|
||||
url: toot.url ?? undefined,
|
||||
});
|
||||
}
|
||||
|
||||
function isolatedCallback(e: MouseEvent) {
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
function TootActionGroup<T extends mastodon.v1.Status>(props: {
|
||||
value: T;
|
||||
class?: string;
|
||||
}) {
|
||||
const { reply, boost, favourite, bookmark } = useTootEnv();
|
||||
let actGrpElement: HTMLDivElement;
|
||||
const toot = () => props.value;
|
||||
return (
|
||||
<div
|
||||
ref={actGrpElement!}
|
||||
class={`TootActionGroup ${props.class || ""}`}
|
||||
onClick={isolatedCallback}
|
||||
>
|
||||
<Show when={reply}>
|
||||
<Button class="with-count" onClick={[reply!, props.value]}>
|
||||
<ReplyAll />
|
||||
<span>{toot().repliesCount}</span>
|
||||
</Button>
|
||||
</Show>
|
||||
|
||||
<Button
|
||||
class="with-count"
|
||||
style={{
|
||||
color: toot().reblogged ? "var(--tutu-color-primary)" : undefined,
|
||||
}}
|
||||
onClick={[boost, props.value]}
|
||||
>
|
||||
<Repeat />
|
||||
<span>{toot().reblogsCount}</span>
|
||||
</Button>
|
||||
<Button
|
||||
class="with-count"
|
||||
style={{
|
||||
color: toot().favourited ? "var(--tutu-color-primary)" : undefined,
|
||||
}}
|
||||
onClick={[favourite, props.value]}
|
||||
>
|
||||
{toot().favourited ? <Star /> : <StarOutline />}
|
||||
<span>{toot().favouritesCount}</span>
|
||||
</Button>
|
||||
<Button
|
||||
class="plain"
|
||||
style={{
|
||||
color: toot().bookmarked ? "var(--tutu-color-primary)" : undefined,
|
||||
}}
|
||||
onClick={[bookmark, props.value]}
|
||||
>
|
||||
{toot().bookmarked ? <Bookmark /> : <BookmarkAddOutlined />}
|
||||
</Button>
|
||||
<Show when={canShare({ url: toot().url ?? undefined })}>
|
||||
<Button
|
||||
class="plain"
|
||||
aria-label="Share"
|
||||
onClick={[shareContent, toot()]}
|
||||
>
|
||||
<Share />
|
||||
</Button>
|
||||
</Show>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default TootActionGroup;
|
||||
|
|
@ -28,17 +28,21 @@ import { useTimeSource } from "~platform/timesrc";
|
|||
import { useDateFnLocale } from "~platform/i18n";
|
||||
import TootPollDialog from "./TootPollDialog";
|
||||
import { ANIM_CURVE_STD } from "~material/theme";
|
||||
import { useTootEnv } from "../RegularToot";
|
||||
|
||||
type TootPollProps = {
|
||||
value: mastodon.v1.Poll
|
||||
status: mastodon.v1.Status
|
||||
options: Readonly<mastodon.v1.Poll["options"]>;
|
||||
multiple?: boolean;
|
||||
votesCount: number;
|
||||
expired?: boolean;
|
||||
expiredAt?: Date;
|
||||
voted?: boolean;
|
||||
ownVotes?: readonly number[];
|
||||
|
||||
onVote(votes: readonly number[]): void | Promise<void>;
|
||||
};
|
||||
|
||||
const TootPoll: Component<TootPollProps> = (props) => {
|
||||
let list: HTMLUListElement;
|
||||
const {vote}= useTootEnv()
|
||||
|
||||
const now = useTimeSource();
|
||||
const dateFnLocale = useDateFnLocale();
|
||||
const [mustShowResult, setMustShowResult] = createSignal<boolean>();
|
||||
|
|
@ -46,26 +50,24 @@ const TootPoll: Component<TootPollProps> = (props) => {
|
|||
|
||||
const [initialVote, setInitialVote] = createSignal(0);
|
||||
|
||||
const poll = () => props.value
|
||||
|
||||
const isShowResult = () => {
|
||||
const n = mustShowResult();
|
||||
if (typeof n !== "undefined") {
|
||||
return n;
|
||||
}
|
||||
|
||||
return poll().expired || poll().voted;
|
||||
return props.expired || props.voted;
|
||||
};
|
||||
|
||||
const isOwnVote = createSelector(
|
||||
() => poll().ownVotes,
|
||||
() => props.ownVotes,
|
||||
(idx: number, votes) => votes?.includes(idx) || false,
|
||||
);
|
||||
|
||||
const openVote = (i: number, event: Event) => {
|
||||
event.stopPropagation();
|
||||
|
||||
if (poll().expired || poll().voted) {
|
||||
if (props.expired || props.voted) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -98,13 +100,13 @@ const TootPoll: Component<TootPollProps> = (props) => {
|
|||
return (
|
||||
<section class="TootPoll">
|
||||
<div class="hints">
|
||||
<span>{poll().votesCount} votes in total</span>
|
||||
<Show when={poll().expired}>
|
||||
<span>{props.votesCount} votes in total</span>
|
||||
<Show when={props.expired}>
|
||||
<span>Poll is ended</span>
|
||||
</Show>
|
||||
</div>
|
||||
<List ref={list!} disablePadding class="option-list">
|
||||
<Index each={poll().options}>
|
||||
<Index each={props.options}>
|
||||
{(option, index) => {
|
||||
return (
|
||||
<>
|
||||
|
|
@ -138,7 +140,7 @@ const TootPoll: Component<TootPollProps> = (props) => {
|
|||
</Show>
|
||||
|
||||
<Show
|
||||
when={poll().multiple}
|
||||
when={props.multiple}
|
||||
fallback={
|
||||
<Radio
|
||||
checked={isOwnVote(index)}
|
||||
|
|
@ -162,14 +164,14 @@ const TootPoll: Component<TootPollProps> = (props) => {
|
|||
<Button onClick={animateAndSetMustShow}>
|
||||
{isShowResult() ? "Hide result" : "Reveal result"}
|
||||
</Button>
|
||||
<Show when={poll().expiresAt}>
|
||||
<Show when={props.expiredAt}>
|
||||
<span>
|
||||
<span style={{ "margin-inline-end": "0.5ch" }}>
|
||||
{isBefore(now(), poll().expiresAt!) ? "Expire in" : "Expired"}
|
||||
{isBefore(now(), props.expiredAt!) ? "Expire in" : "Expired"}
|
||||
</span>
|
||||
|
||||
<time dateTime={poll().expiresAt!}>
|
||||
{formatDistance(now(), poll().expiresAt!, {
|
||||
<time dateTime={props.expiredAt!.toISOString()}>
|
||||
{formatDistance(now(), props.expiredAt!, {
|
||||
locale: dateFnLocale(),
|
||||
})}
|
||||
</time>
|
||||
|
|
@ -179,8 +181,8 @@ const TootPoll: Component<TootPollProps> = (props) => {
|
|||
|
||||
<TootPollDialog
|
||||
open={showVoteDialog()}
|
||||
options={poll().options}
|
||||
onVote={[vote, props.status]}
|
||||
options={props.options}
|
||||
onVote={(votes) => console.debug(votes)}
|
||||
onClose={() => setShowVoteDialog(false)}
|
||||
initialVotes={[initialVote()]}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -26,13 +26,7 @@ export type TootPollDialogPoll = {
|
|||
initialVotes?: readonly number[];
|
||||
multiple?: boolean;
|
||||
|
||||
onVote: [
|
||||
(
|
||||
status: mastodon.v1.Status,
|
||||
votes: readonly number[],
|
||||
) => void | Promise<void>,
|
||||
mastodon.v1.Status,
|
||||
];
|
||||
onVote(votes: readonly number[]): void | Promise<void>;
|
||||
onClose?: BottomSheetProps["onClose"] &
|
||||
((reason: "cancel" | "success") => void);
|
||||
};
|
||||
|
|
@ -56,7 +50,7 @@ const TootPollDialog: Component<TootPollDialogPoll> = (props) => {
|
|||
const sendVote = async () => {
|
||||
setInProgress(true);
|
||||
try {
|
||||
await props.onVote[0](props.onVote[1], votes());
|
||||
await props.onVote(votes());
|
||||
} catch (reason) {
|
||||
console.error(reason);
|
||||
props.onClose?.("cancel");
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue