2024-07-14 12:28:44 +00:00
|
|
|
import {
|
|
|
|
Component,
|
|
|
|
For,
|
|
|
|
onCleanup,
|
|
|
|
createSignal,
|
|
|
|
Show,
|
|
|
|
untrack,
|
|
|
|
onMount,
|
2024-07-22 13:57:04 +00:00
|
|
|
type ParentComponent,
|
|
|
|
children,
|
2024-07-14 12:28:44 +00:00
|
|
|
} from "solid-js";
|
|
|
|
import { useDocumentTitle } from "../utils";
|
2024-07-22 13:57:04 +00:00
|
|
|
import { useSessions } from "../masto/clients";
|
2024-07-14 12:28:44 +00:00
|
|
|
import { type mastodon } from "masto";
|
|
|
|
import Scaffold from "../material/Scaffold";
|
|
|
|
import {
|
|
|
|
AppBar,
|
|
|
|
Button,
|
|
|
|
Fab,
|
|
|
|
LinearProgress,
|
|
|
|
ListItemSecondaryAction,
|
|
|
|
ListItemText,
|
|
|
|
MenuItem,
|
|
|
|
Switch,
|
|
|
|
Toolbar,
|
|
|
|
} from "@suid/material";
|
|
|
|
import { css } from "solid-styled";
|
|
|
|
import { TimeSourceProvider, createTimeSource } from "../platform/timesrc";
|
|
|
|
import TootThread from "./TootThread.js";
|
|
|
|
import { useAcctProfile } from "../masto/acct";
|
|
|
|
import ProfileMenuButton from "./ProfileMenuButton";
|
|
|
|
import Tabs from "../material/Tabs";
|
|
|
|
import Tab from "../material/Tab";
|
|
|
|
import { Create as CreateTootIcon } from "@suid/icons-material";
|
|
|
|
import { useTimeline } from "../masto/timelines";
|
|
|
|
import { makeEventListener } from "@solid-primitives/event-listener";
|
2024-07-22 13:57:04 +00:00
|
|
|
import BottomSheet from "../material/BottomSheet";
|
2024-07-23 00:28:47 +00:00
|
|
|
import { $settings } from "../settings/stores";
|
|
|
|
import { useStore } from "@nanostores/solid";
|
2024-07-14 12:28:44 +00:00
|
|
|
|
|
|
|
const TimelinePanel: Component<{
|
|
|
|
client: mastodon.rest.Client;
|
|
|
|
name: "home" | "public" | "trends";
|
|
|
|
prefetch?: boolean;
|
|
|
|
}> = (props) => {
|
|
|
|
const [timeline, { refetch: refetchTimeline, mutate: mutateTimeline }] =
|
|
|
|
useTimeline(() =>
|
|
|
|
props.name !== "trends"
|
|
|
|
? props.client.v1.timelines[props.name]
|
|
|
|
: props.client.v1.trends.statuses,
|
|
|
|
);
|
|
|
|
|
|
|
|
const tlEndObserver = new IntersectionObserver(() => {
|
|
|
|
if (untrack(() => props.prefetch) && !timeline.loading)
|
|
|
|
refetchTimeline({ direction: "old" });
|
|
|
|
});
|
|
|
|
|
|
|
|
onCleanup(() => tlEndObserver.disconnect());
|
|
|
|
|
|
|
|
const onBookmark = async (
|
|
|
|
index: number,
|
|
|
|
client: mastodon.rest.Client,
|
|
|
|
status: mastodon.v1.Status,
|
|
|
|
) => {
|
|
|
|
const result = await (status.bookmarked
|
|
|
|
? client.v1.statuses.$select(status.id).unbookmark()
|
|
|
|
: client.v1.statuses.$select(status.id).bookmark());
|
|
|
|
mutateTimeline((o) => {
|
|
|
|
o[index] = result;
|
|
|
|
return o;
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
const onBoost = async (
|
|
|
|
index: number,
|
|
|
|
client: mastodon.rest.Client,
|
|
|
|
status: mastodon.v1.Status,
|
|
|
|
) => {
|
|
|
|
const reblogged = false;
|
|
|
|
mutateTimeline((o) => {
|
|
|
|
Object.assign(o[index].reblog ?? o[index], {
|
|
|
|
reblogged: !reblogged,
|
|
|
|
});
|
|
|
|
return o;
|
|
|
|
});
|
|
|
|
const result = reblogged
|
|
|
|
? await client.v1.statuses.$select(status.id).unreblog()
|
|
|
|
: (await client.v1.statuses.$select(status.id).reblog()).reblog!;
|
|
|
|
mutateTimeline((o) => {
|
|
|
|
Object.assign(o[index].reblog ?? o[index], {
|
|
|
|
reblogged: result.reblogged,
|
|
|
|
reblogsCount: result.reblogsCount,
|
|
|
|
});
|
|
|
|
return o;
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<div>
|
|
|
|
<For each={timeline()}>
|
|
|
|
{(item, index) => {
|
|
|
|
return (
|
|
|
|
<TootThread
|
|
|
|
status={item}
|
|
|
|
onBoost={(...args) => onBoost(index(), ...args)}
|
|
|
|
onBookmark={(...args) => onBookmark(index(), ...args)}
|
|
|
|
client={props.client}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
}}
|
|
|
|
</For>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div ref={(e) => tlEndObserver.observe(e)}></div>
|
|
|
|
<Show when={timeline.loading}>
|
|
|
|
<div class="loading-line" style={{ width: "100%" }}>
|
|
|
|
<LinearProgress />
|
|
|
|
</div>
|
|
|
|
</Show>
|
|
|
|
<Show when={timeline.error}>
|
|
|
|
<div
|
|
|
|
style={{
|
|
|
|
display: "flex",
|
2024-07-24 06:27:20 +00:00
|
|
|
padding: "20px 0 var(--safe-area-inset-bottom, 20px)",
|
2024-07-14 12:28:44 +00:00
|
|
|
"align-items": "center",
|
|
|
|
"justify-content": "center",
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<Button variant="contained" onClick={[refetchTimeline, "old"]}>
|
|
|
|
Retry
|
|
|
|
</Button>
|
|
|
|
</div>
|
|
|
|
</Show>
|
|
|
|
<Show when={!props.prefetch && !timeline.loading}>
|
|
|
|
<div
|
|
|
|
style={{
|
|
|
|
display: "flex",
|
2024-07-24 06:27:20 +00:00
|
|
|
padding: "20px 0 var(--safe-area-inset-bottom, 20px)",
|
2024-07-14 12:28:44 +00:00
|
|
|
"align-items": "center",
|
|
|
|
"justify-content": "center",
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<Button variant="contained" onClick={[refetchTimeline, "old"]}>
|
|
|
|
Load More
|
|
|
|
</Button>
|
|
|
|
</div>
|
|
|
|
</Show>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2024-07-22 13:57:04 +00:00
|
|
|
const Home: ParentComponent = (props) => {
|
2024-07-14 12:28:44 +00:00
|
|
|
let panelList: HTMLDivElement;
|
|
|
|
useDocumentTitle("Timelines");
|
|
|
|
const now = createTimeSource();
|
|
|
|
|
2024-07-23 00:28:47 +00:00
|
|
|
const settings$ = useStore($settings)
|
2024-07-15 05:59:10 +00:00
|
|
|
const sessions = useSessions();
|
|
|
|
const client = () => sessions()[0].client;
|
|
|
|
const [profile] = useAcctProfile(client);
|
2024-07-14 12:28:44 +00:00
|
|
|
|
|
|
|
const [panelOffset, setPanelOffset] = createSignal(0);
|
2024-07-23 00:28:47 +00:00
|
|
|
const prefetching = () => !settings$().prefetchTootsDisabled
|
2024-07-14 12:28:44 +00:00
|
|
|
const [currentFocusOn, setCurrentFocusOn] = createSignal<HTMLElement[]>([]);
|
|
|
|
const [focusRange, setFocusRange] = createSignal([0, 0] as readonly [
|
|
|
|
number,
|
|
|
|
number,
|
|
|
|
]);
|
|
|
|
|
2024-07-22 13:57:04 +00:00
|
|
|
const child = children(() => props.children)
|
|
|
|
|
2024-07-14 12:28:44 +00:00
|
|
|
let scrollEventLockReleased = true;
|
|
|
|
|
|
|
|
const recalculateTabIndicator = () => {
|
|
|
|
scrollEventLockReleased = false;
|
|
|
|
try {
|
|
|
|
const { x: panelX, width: panelWidth } =
|
|
|
|
panelList.getBoundingClientRect();
|
|
|
|
let minIdx = +Infinity,
|
|
|
|
maxIdx = -Infinity;
|
|
|
|
const items = panelList.querySelectorAll(".tab-panel");
|
|
|
|
const ranges = Array.from(items).map((x) => {
|
|
|
|
const rect = x.getBoundingClientRect();
|
|
|
|
const inlineStart = rect.x - panelX;
|
|
|
|
const inlineEnd = rect.width + inlineStart;
|
|
|
|
return [inlineStart, inlineEnd] as const;
|
|
|
|
});
|
|
|
|
for (let i = 0; i < items.length; i++) {
|
|
|
|
const e = items.item(i);
|
|
|
|
const [inlineStart, inlineEnd] = ranges[i];
|
|
|
|
if (inlineStart >= 0 && inlineEnd <= panelWidth) {
|
|
|
|
minIdx = Math.min(minIdx, i);
|
|
|
|
maxIdx = Math.max(maxIdx, i);
|
|
|
|
e.classList.add("active");
|
|
|
|
} else {
|
|
|
|
e.classList.remove("active");
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
if (isFinite(minIdx) && isFinite(maxIdx)) {
|
|
|
|
setFocusRange([minIdx, maxIdx]);
|
|
|
|
}
|
|
|
|
} finally {
|
|
|
|
scrollEventLockReleased = true;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
onMount(() => {
|
|
|
|
makeEventListener(panelList, "scroll", () => {
|
|
|
|
if (scrollEventLockReleased) {
|
|
|
|
requestAnimationFrame(recalculateTabIndicator);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
makeEventListener(window, "resize", () => {
|
|
|
|
if (scrollEventLockReleased) {
|
|
|
|
requestAnimationFrame(recalculateTabIndicator);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
requestAnimationFrame(recalculateTabIndicator);
|
|
|
|
});
|
|
|
|
|
|
|
|
const isTabFocus = (idx: number) => {
|
|
|
|
const [start, end] = focusRange();
|
|
|
|
if (!isFinite(start) || !isFinite(end)) return false;
|
|
|
|
return idx >= start && idx <= end;
|
|
|
|
};
|
|
|
|
|
|
|
|
const onTabClick = (idx: number) => {
|
|
|
|
const items = panelList.querySelectorAll(".tab-panel");
|
|
|
|
if (items.length > idx) {
|
2024-08-05 07:11:22 +00:00
|
|
|
items.item(idx).scrollIntoView({ block: "start", behavior: "smooth" });
|
2024-07-14 12:28:44 +00:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
css`
|
|
|
|
.tab-panel {
|
|
|
|
overflow: visible auto;
|
|
|
|
max-width: 560px;
|
|
|
|
height: 100%;
|
|
|
|
padding: 40px 16px;
|
|
|
|
scroll-snap-align: center;
|
|
|
|
|
|
|
|
@media (max-width: 600px) {
|
|
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.panel-list {
|
|
|
|
display: grid;
|
|
|
|
grid-auto-columns: 560px;
|
|
|
|
grid-auto-flow: column;
|
|
|
|
overflow-x: auto;
|
|
|
|
scroll-snap-type: x mandatory;
|
|
|
|
scroll-snap-stop: always;
|
|
|
|
height: calc(100vh - var(--scaffold-topbar-height, 0px));
|
|
|
|
height: calc(100dvh - var(--scaffold-topbar-height, 0px));
|
2024-07-24 06:27:20 +00:00
|
|
|
padding-left: var(--safe-area-inset-left, 0);
|
|
|
|
padding-right: var(--safe-area-inset-right, 0);
|
2024-07-14 12:28:44 +00:00
|
|
|
|
|
|
|
@media (max-width: 600px) {
|
|
|
|
grid-auto-columns: 100%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
return (
|
2024-07-22 13:57:04 +00:00
|
|
|
<>
|
|
|
|
<Scaffold
|
|
|
|
topbar={
|
|
|
|
<AppBar position="static">
|
2024-07-24 06:27:20 +00:00
|
|
|
<Toolbar variant="dense" class="responsive" sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}>
|
2024-07-22 13:57:04 +00:00
|
|
|
<Tabs onFocusChanged={setCurrentFocusOn} offset={panelOffset()}>
|
|
|
|
<Tab focus={isTabFocus(0)} onClick={[onTabClick, 0]}>
|
|
|
|
Home
|
|
|
|
</Tab>
|
|
|
|
<Tab focus={isTabFocus(1)} onClick={[onTabClick, 1]}>
|
|
|
|
Trending
|
|
|
|
</Tab>
|
|
|
|
<Tab focus={isTabFocus(2)} onClick={[onTabClick, 2]}>
|
|
|
|
Public
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
<ProfileMenuButton profile={profile()}>
|
2024-07-23 00:28:47 +00:00
|
|
|
<MenuItem onClick={(e) => $settings.setKey("prefetchTootsDisabled", !$settings.get().prefetchTootsDisabled)}>
|
2024-07-22 13:57:04 +00:00
|
|
|
<ListItemText>Prefetch Toots</ListItemText>
|
|
|
|
<ListItemSecondaryAction>
|
|
|
|
<Switch checked={prefetching()}></Switch>
|
|
|
|
</ListItemSecondaryAction>
|
|
|
|
</MenuItem>
|
|
|
|
</ProfileMenuButton>
|
|
|
|
</Toolbar>
|
|
|
|
</AppBar>
|
|
|
|
}
|
|
|
|
fab={
|
|
|
|
<Fab color="secondary">
|
|
|
|
<CreateTootIcon />
|
|
|
|
</Fab>
|
|
|
|
}
|
|
|
|
>
|
|
|
|
<TimeSourceProvider value={now}>
|
|
|
|
<div class="panel-list" ref={panelList!}>
|
|
|
|
<div class="tab-panel">
|
|
|
|
<div>
|
|
|
|
<TimelinePanel
|
|
|
|
client={client()}
|
|
|
|
name="home"
|
|
|
|
prefetch={prefetching()}
|
|
|
|
/>
|
|
|
|
</div>
|
2024-07-14 12:28:44 +00:00
|
|
|
</div>
|
2024-07-22 13:57:04 +00:00
|
|
|
<div class="tab-panel">
|
|
|
|
<div>
|
|
|
|
<TimelinePanel
|
|
|
|
client={client()}
|
|
|
|
name="trends"
|
|
|
|
prefetch={prefetching()}
|
|
|
|
/>
|
|
|
|
</div>
|
2024-07-14 12:28:44 +00:00
|
|
|
</div>
|
2024-07-22 13:57:04 +00:00
|
|
|
<div class="tab-panel">
|
|
|
|
<div>
|
|
|
|
<TimelinePanel
|
|
|
|
client={client()}
|
|
|
|
name="public"
|
|
|
|
prefetch={prefetching()}
|
|
|
|
/>
|
|
|
|
</div>
|
2024-07-14 12:28:44 +00:00
|
|
|
</div>
|
2024-07-22 13:57:04 +00:00
|
|
|
<div></div>
|
2024-07-14 12:28:44 +00:00
|
|
|
</div>
|
2024-07-22 13:57:04 +00:00
|
|
|
</TimeSourceProvider>
|
|
|
|
<BottomSheet open={!!child()}>{child()}</BottomSheet>
|
|
|
|
</Scaffold>
|
|
|
|
</>
|
2024-07-14 12:28:44 +00:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default Home;
|