Rubicon/tutu
1
0
Fork 0
Code Issues 18 Pull requests 1 Projects 1 Activity Actions

added settings

Browse source
This commit is contained in:
thislight 2024-07-22 21:57:04 +08:00
parent 5ec00d4999
commit 5833e5a76b
15 changed files with 359 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

140
src/timelines/Home.tsx
View file

@ -6,9 +6,11 @@ import {
Show,
untrack,
onMount,
type ParentComponent,
children,
} from "solid-js";
import { useDocumentTitle } from "../utils";
import { useSessions } from "../masto/clients";
import { useSessions } from "../masto/clients";
import { type mastodon } from "masto";
import Scaffold from "../material/Scaffold";
import {
@ -32,6 +34,7 @@ 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";
import BottomSheet from "../material/BottomSheet";
const TimelinePanel: Component<{
client: mastodon.rest.Client;
@ -145,7 +148,7 @@ const TimelinePanel: Component<{
);
};
const Home: Component = () => {
const Home: ParentComponent = (props) => {
let panelList: HTMLDivElement;
useDocumentTitle("Timelines");
const now = createTimeSource();
@ -162,6 +165,8 @@ const Home: Component = () => {
number,
]);
const child = children(() => props.children)
let scrollEventLockReleased = true;
const recalculateTabIndicator = () => {
@ -221,7 +226,7 @@ const Home: Component = () => {
const onTabClick = (idx: number) => {
const items = panelList.querySelectorAll(".tab-panel");
if (items.length > idx) {
items.item(idx).scrollIntoView({ behavior: "smooth" });
items.item(idx).scrollIntoView({ block: "nearest", behavior: "smooth" });
}
};
@ -235,10 +240,6 @@ const Home: Component = () => {
max-height: calc(100dvh - var(--scaffold-topbar-height, 0px));
scroll-snap-align: center;
&:not(.active) {
overflow: hidden;
}
@media (max-width: 600px) {
padding: 0;
}
@ -261,71 +262,74 @@ const Home: Component = () => {
`;
return (
<Scaffold
topbar={
<AppBar position="static">
<Toolbar variant="dense" class="responsive">
<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()}>
<MenuItem onClick={(e) => setPrefetching((x) => !x)}>
<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()}
/>
<>
<Scaffold
topbar={
<AppBar position="static">
<Toolbar variant="dense" class="responsive">
<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()}>
<MenuItem onClick={(e) => setPrefetching((x) => !x)}>
<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>
</div>
</div>
<div class="tab-panel">
<div>
<TimelinePanel
client={client()}
name="trends"
prefetch={prefetching()}
/>
<div class="tab-panel">
<div>
<TimelinePanel
client={client()}
name="trends"
prefetch={prefetching()}
/>
</div>
</div>
</div>
<div class="tab-panel">
<div>
<TimelinePanel
client={client()}
name="public"
prefetch={prefetching()}
/>
<div class="tab-panel">
<div>
<TimelinePanel
client={client()}
name="public"
prefetch={prefetching()}
/>
</div>
</div>
<div></div>
</div>
<div></div>
</div>
</TimeSourceProvider>
</Scaffold>
</TimeSourceProvider>
<BottomSheet open={!!child()}>{child()}</BottomSheet>
</Scaffold>
</>
);
};