Compare commits

..

5 commits

Author SHA1 Message Date
thislight
c628397675
TootPreviewCard: minor layout adjustment
All checks were successful
/ depoly (push) Successful in 1m6s
Remove the image's centre in compact layout.
This helps the feeling when the text is too long.
I am still finding ways to limit the card height.
2024-08-22 17:11:45 +08:00
thislight
a24319911b
BottomSheet: sets max-height to 100vh on desktop 2024-08-22 16:50:12 +08:00
thislight
e74ae23612
TootBottomSheet: add replys 2024-08-22 16:50:07 +08:00
thislight
8dc261a863
Home: ignore paging for trending panel 2024-08-22 15:31:15 +08:00
thislight
964298f407
start of v1.0.5 2024-08-17 19:03:26 +08:00
6 changed files with 128 additions and 23 deletions

View file

@ -1,7 +1,7 @@
{ {
"$schema": "https://json.schemastore.org/package", "$schema": "https://json.schemastore.org/package",
"name": "tutu", "name": "tutu",
"version": "1.0.4", "version": "1.0.5",
"description": "", "description": "",
"private": true, "private": true,
"type": "module", "type": "module",

View file

@ -1,5 +1,5 @@
import { type mastodon } from "masto"; import { type mastodon } from "masto";
import { Accessor, createEffect, createResource, createSignal } from "solid-js"; import { Accessor, createEffect, createResource } from "solid-js";
import { createStore } from "solid-js/store"; import { createStore } from "solid-js/store";
type TimelineFetchTips = { type TimelineFetchTips = {
@ -8,19 +8,27 @@ type TimelineFetchTips = {
type Timeline = { type Timeline = {
list(params: { list(params: {
maxId?: string; readonly limit?: number;
minId?: string;
}): mastodon.Paginator<mastodon.v1.Status[], unknown>; }): mastodon.Paginator<mastodon.v1.Status[], unknown>;
}; };
export function useTimeline(timeline: Accessor<Timeline>) { export function useTimeline(
timeline: Accessor<Timeline>,
cfg?: {
/**
* Use full refresh mode. This mode ignores paging, it will refetch the specified number
* of toots at every refetch().
*/
fullRefresh?: number;
},
) {
let otl: Timeline | undefined; let otl: Timeline | undefined;
let npager: mastodon.Paginator<mastodon.v1.Status[], unknown> | undefined; let npager: mastodon.Paginator<mastodon.v1.Status[], unknown> | undefined;
let opager: mastodon.Paginator<mastodon.v1.Status[], unknown> | undefined; let opager: mastodon.Paginator<mastodon.v1.Status[], unknown> | undefined;
const [snapshot, { refetch }] = createResource< const [snapshot, { refetch }] = createResource<
{ {
records: mastodon.v1.Status[]; records: mastodon.v1.Status[];
direction: "new" | "old"; direction: "new" | "old" | "items";
tlChanged: boolean; tlChanged: boolean;
}, },
[Timeline], [Timeline],
@ -35,6 +43,20 @@ export function useTimeline(timeline: Accessor<Timeline>) {
otl = tl; otl = tl;
tlChanged = true; tlChanged = true;
} }
const fullRefresh = cfg?.fullRefresh;
if (typeof fullRefresh !== "undefined") {
const records = await tl
.list({
limit: fullRefresh,
})
.next();
return {
direction: "items",
records: records.value ?? [],
end: records.done,
tlChanged,
};
}
const direction = const direction =
typeof info.refetching !== "boolean" typeof info.refetching !== "boolean"
? (info.refetching?.direction ?? "old") ? (info.refetching?.direction ?? "old")
@ -70,10 +92,12 @@ export function useTimeline(timeline: Accessor<Timeline>) {
if (tlChanged) { if (tlChanged) {
setStore(() => []); setStore(() => []);
} }
if (direction == "new") { if (direction === "new") {
setStore((x) => [...records, ...x]); setStore((x) => [...records, ...x]);
} else if (direction == "old") { } else if (direction === "old") {
setStore((x) => [...x, ...records]); setStore((x) => [...x, ...records]);
} else if (direction === "items") {
setStore(() => records);
} }
}); });

View file

@ -10,10 +10,13 @@
max-width: 560px; max-width: 560px;
border-radius: 2px; border-radius: 2px;
overscroll-behavior: contain; overscroll-behavior: contain;
max-height: 100vh;
max-height: 100dvh;
&::backdrop { &::backdrop {
background-color: black; background-color: black;
opacity: 0.5; opacity: 0.5;
transition: opacity 220ms var(--tutu-anim-curve-std);
} }
box-shadow: var(--tutu-shadow-e16); box-shadow: var(--tutu-shadow-e16);
@ -39,5 +42,9 @@
&.animated { &.animated {
position: absolute; position: absolute;
transform: none; transform: none;
&::backdrop {
opacity: 0;
}
} }
} }

View file

@ -9,6 +9,8 @@ import {
type ParentComponent, type ParentComponent,
children, children,
Suspense, Suspense,
Match,
Switch as JsSwitch
} from "solid-js"; } from "solid-js";
import { useDocumentTitle } from "../utils"; import { useDocumentTitle } from "../utils";
import { type mastodon } from "masto"; import { type mastodon } from "masto";
@ -49,6 +51,7 @@ const TimelinePanel: Component<{
client: mastodon.rest.Client; client: mastodon.rest.Client;
name: "home" | "public" | "trends"; name: "home" | "public" | "trends";
prefetch?: boolean; prefetch?: boolean;
fullRefetch?: number;
openFullScreenToot: ( openFullScreenToot: (
toot: mastodon.v1.Status, toot: mastodon.v1.Status,
@ -60,10 +63,12 @@ const TimelinePanel: Component<{
timeline, timeline,
snapshot, snapshot,
{ refetch: refetchTimeline, mutate: mutateTimeline }, { refetch: refetchTimeline, mutate: mutateTimeline },
] = useTimeline(() => ] = useTimeline(
() =>
props.name !== "trends" props.name !== "trends"
? props.client.v1.timelines[props.name] ? props.client.v1.timelines[props.name]
: props.client.v1.trends.statuses, : props.client.v1.trends.statuses,
{ fullRefresh: props.fullRefetch },
); );
const [expandedThreadId, setExpandedThreadId] = createSignal<string>(); const [expandedThreadId, setExpandedThreadId] = createSignal<string>();
@ -176,15 +181,26 @@ const TimelinePanel: Component<{
"justify-content": "center", "justify-content": "center",
}} }}
> >
<JsSwitch>
<Match when={snapshot.error}>
<Button <Button
variant="contained" variant="contained"
onClick={[refetchTimeline, "old"]} onClick={[refetchTimeline, "old"]}
disabled={snapshot.loading} disabled={snapshot.loading}
> >
<Show when={snapshot.error} fallback={<>Load More</>}>
Retry Retry
</Show>
</Button> </Button>
</Match>
<Match when={typeof props.fullRefetch === "undefined"}>
<Button
variant="contained"
onClick={[refetchTimeline, "old"]}
disabled={snapshot.loading}
>
Load More
</Button>
</Match>
</JsSwitch>
</div> </div>
</> </>
); );
@ -403,6 +419,7 @@ const Home: ParentComponent = (props) => {
name="trends" name="trends"
prefetch={prefetching()} prefetch={prefetching()}
openFullScreenToot={openFullScreenToot} openFullScreenToot={openFullScreenToot}
fullRefetch={120}
/> />
</div> </div>
</div> </div>

View file

@ -3,12 +3,19 @@ import {
createEffect, createEffect,
createRenderEffect, createRenderEffect,
createResource, createResource,
For,
Show, Show,
type Component, type Component,
} from "solid-js"; } from "solid-js";
import Scaffold from "../material/Scaffold"; import Scaffold from "../material/Scaffold";
import TootThread from "./TootThread"; import TootThread from "./TootThread";
import { AppBar, Avatar, IconButton, Toolbar } from "@suid/material"; import {
AppBar,
Avatar,
CircularProgress,
IconButton,
Toolbar,
} from "@suid/material";
import { Title } from "../material/typography"; import { Title } from "../material/typography";
import { Close as CloseIcon, Send } from "@suid/icons-material"; import { Close as CloseIcon, Send } from "@suid/icons-material";
import { isiOS } from "../platform/host"; import { isiOS } from "../platform/host";
@ -63,6 +70,22 @@ const TootBottomSheet: Component = (props) => {
const toot = () => remoteToot() ?? getCache(acctText(), params.id); const toot = () => remoteToot() ?? getCache(acctText(), params.id);
const [tootContext] = createResource(
() => [session().client, params.id] as const,
async ([client, id]) => {
return await client.v1.statuses.$select(id).context.fetch();
},
);
const ancestors = () => tootContext()?.ancestors ?? [];
const descendants = () => tootContext()?.descendants ?? [];
createEffect(() => {
if (ancestors().length > 0) {
document.querySelector(`#toot-${toot()!.id}`)?.scrollIntoView();
}
});
const tootTitle = () => { const tootTitle = () => {
const t = toot(); const t = toot();
if (t) { if (t) {
@ -111,10 +134,22 @@ const TootBottomSheet: Component = (props) => {
</AppBar> </AppBar>
} }
> >
<For each={ancestors()}>
{(item) => (
<RegularToot
id={`toot-${item.id}`}
class={cards.card}
status={item}
></RegularToot>
)}
</For>
<article> <article>
<Show when={toot()}> <Show when={toot()}>
<RegularToot <RegularToot
id={`toot-${toot()!.id}`}
class={cards.card} class={cards.card}
style={{ "scroll-margin-top": "calc(var(--scaffold-topbar-height) + 20px)" }}
status={toot()!} status={toot()!}
actionable={true} actionable={true}
evaluated={true} evaluated={true}
@ -122,6 +157,28 @@ const TootBottomSheet: Component = (props) => {
</Show> </Show>
</article> </article>
<Show when={tootContext.loading}>
<div
style={{
display: "flex",
"justify-content": "center",
"margin-block": "12px",
}}
>
<CircularProgress style="width: 1.5em; height: 1.5em;" />
</div>
</Show>
<For each={descendants()}>
{(item) => (
<RegularToot
id={`toot-${item.id}`}
class={cards.card}
status={item}
></RegularToot>
)}
</For>
<div class="bottom-dock"> <div class="bottom-dock">
<Show when={profile()}> <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);"> <div style="display: flex; gap: 8px; background: var(--tutu-color-surface); padding: 8px 8px calc(var(--safe-area-inset-bottom, 0px) + 8px);">

View file

@ -117,6 +117,7 @@
color: var(--tutu-color-secondary-text-on-surface); color: var(--tutu-color-secondary-text-on-surface);
transition: color 220ms var(--tutu-anim-curve-std), background-color 220ms var(--tutu-anim-curve-std); transition: color 220ms var(--tutu-anim-curve-std), background-color 220ms var(--tutu-anim-curve-std);
padding-bottom: 8px; padding-bottom: 8px;
overflow: hidden;
>img { >img {
max-width: 100%; max-width: 100%;
@ -151,7 +152,6 @@
>img:first-child { >img:first-child {
grid-row: 1 / 3; grid-row: 1 / 3;
height: 100%;
object-fit: contain; object-fit: contain;
} }