Profile: support wide page
This commit is contained in:
thislight
parent
bb3ba32dc5
commit
66d0bc8d84
3 changed files with 347 additions and 302 deletions
|
|
@ -1,9 +1,10 @@
|
||||||
.StackedPage {
|
.StackedPage {
|
||||||
contain: layout style;
|
contain: strict;
|
||||||
container: StackedPage / size;
|
container: StackedPage / inline-size;
|
||||||
display: contents;
|
width: 100vw;
|
||||||
max-width: 100vw;
|
width: 100dvw;
|
||||||
max-width: 100dvw;
|
height: 100vh;
|
||||||
|
height: 100dvh;
|
||||||
}
|
}
|
||||||
|
|
||||||
dialog.StackedPage {
|
dialog.StackedPage {
|
||||||
|
|
|
||||||
|
|
@ -115,6 +115,44 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@container StackedPage (inline-size >=960px) {
|
||||||
|
.Profile {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto 560px;
|
||||||
|
grid-template-rows: min-content 1fr;
|
||||||
|
height: 100cqh;
|
||||||
|
|
||||||
|
>.topbar {
|
||||||
|
grid-column: 1 / 3;
|
||||||
|
grid-row: 1 /2;
|
||||||
|
|
||||||
|
.MuiToolbar-root {
|
||||||
|
padding-right: calc(560px + 24px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> .details {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column nowrap;
|
||||||
|
|
||||||
|
> .intro {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
>.recent-toots {
|
||||||
|
overflow-y: auto;
|
||||||
|
margin-top: calc(-1 * var(--scaffold-topbar-height));
|
||||||
|
z-index: calc(var(--tutu-zidx-nav, 1) + 1);
|
||||||
|
|
||||||
|
>.toot-list-toolbar {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.Profile__page-title {
|
.Profile__page-title {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
|
||||||
|
|
@ -237,315 +237,321 @@ const Profile: Component = () => {
|
||||||
}
|
}
|
||||||
class="Profile"
|
class="Profile"
|
||||||
>
|
>
|
||||||
<Menu
|
<div class="details">
|
||||||
id={optMenuId}
|
<Menu
|
||||||
open={menuOpen()}
|
id={optMenuId}
|
||||||
onClose={[setMenuOpen, false]}
|
open={menuOpen()}
|
||||||
anchor={() =>
|
onClose={[setMenuOpen, false]}
|
||||||
document.getElementById(menuButId)!.getBoundingClientRect()
|
anchor={() =>
|
||||||
}
|
document.getElementById(menuButId)!.getBoundingClientRect()
|
||||||
aria-label="Options for the Profile"
|
}
|
||||||
>
|
aria-label="Options for the Profile"
|
||||||
<Show when={session().account}>
|
>
|
||||||
<MenuItem>
|
<Show when={session().account}>
|
||||||
<ListItemAvatar>
|
<MenuItem>
|
||||||
<Avatar src={session().account?.inf?.avatar} />
|
<ListItemAvatar>
|
||||||
</ListItemAvatar>
|
<Avatar src={session().account?.inf?.avatar} />
|
||||||
<ListItemText secondary={"Default account"}>
|
</ListItemAvatar>
|
||||||
<span ref={useSessionDisplayName}></span>
|
<ListItemText secondary={"Default account"}>
|
||||||
</ListItemText>
|
<span ref={useSessionDisplayName}></span>
|
||||||
{/* <ArrowRight /> // for future */}
|
</ListItemText>
|
||||||
</MenuItem>
|
{/* <ArrowRight /> // for future */}
|
||||||
</Show>
|
|
||||||
<Show when={session().account && profile()}>
|
|
||||||
<Show
|
|
||||||
when={isCurrentSessionProfile()}
|
|
||||||
fallback={
|
|
||||||
<MenuItem
|
|
||||||
onClick={(event) => {
|
|
||||||
const { left, right, top } =
|
|
||||||
event.currentTarget.getBoundingClientRect();
|
|
||||||
openSubscribeMenu({
|
|
||||||
left,
|
|
||||||
right,
|
|
||||||
top,
|
|
||||||
e: 1,
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<ListItemIcon>
|
|
||||||
<PlaylistAdd />
|
|
||||||
</ListItemIcon>
|
|
||||||
<ListItemText>Subscribe...</ListItemText>
|
|
||||||
</MenuItem>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<MenuItem disabled>
|
|
||||||
<ListItemIcon>
|
|
||||||
<Edit />
|
|
||||||
</ListItemIcon>
|
|
||||||
<ListItemText>Edit...</ListItemText>
|
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
</Show>
|
</Show>
|
||||||
<Divider />
|
<Show when={session().account && profile()}>
|
||||||
</Show>
|
<Show
|
||||||
<MenuItem disabled>
|
when={isCurrentSessionProfile()}
|
||||||
<ListItemIcon>
|
fallback={
|
||||||
<Group />
|
<MenuItem
|
||||||
</ListItemIcon>
|
|
||||||
<ListItemText>Followers</ListItemText>
|
|
||||||
<ListItemSecondaryAction>
|
|
||||||
<span aria-label="The number of the account follower">
|
|
||||||
{profile()?.followersCount ?? ""}
|
|
||||||
</span>
|
|
||||||
</ListItemSecondaryAction>
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem disabled>
|
|
||||||
<ListItemIcon>
|
|
||||||
<Subject />
|
|
||||||
</ListItemIcon>
|
|
||||||
<ListItemText>Following</ListItemText>
|
|
||||||
<ListItemSecondaryAction>
|
|
||||||
<span aria-label="The number the account following">
|
|
||||||
{profile()?.followingCount ?? ""}
|
|
||||||
</span>
|
|
||||||
</ListItemSecondaryAction>
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem disabled>
|
|
||||||
<ListItemIcon>
|
|
||||||
<PersonOff />
|
|
||||||
</ListItemIcon>
|
|
||||||
<ListItemText>Blocklist</ListItemText>
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem disabled>
|
|
||||||
<ListItemIcon>
|
|
||||||
<Send />
|
|
||||||
</ListItemIcon>
|
|
||||||
<ListItemText>Mention in...</ListItemText>
|
|
||||||
</MenuItem>
|
|
||||||
<Divider />
|
|
||||||
<MenuItem
|
|
||||||
component={"a"}
|
|
||||||
href={profile()?.url}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<ListItemIcon>
|
|
||||||
<OpenInBrowser />
|
|
||||||
</ListItemIcon>
|
|
||||||
<ListItemText>Open in browser...</ListItemText>
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem onClick={() => share({ url: profile()?.url })}>
|
|
||||||
<ListItemIcon>
|
|
||||||
<Share />
|
|
||||||
</ListItemIcon>
|
|
||||||
<ListItemText>Share...</ListItemText>
|
|
||||||
</MenuItem>
|
|
||||||
</Menu>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
height: `${268 * (Math.min(560, windowSize.width) / 560)}px`,
|
|
||||||
}}
|
|
||||||
class="banner"
|
|
||||||
role="presentation"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
ref={(e) => obx.observe(e)}
|
|
||||||
src={bannerImg()}
|
|
||||||
crossOrigin="anonymous"
|
|
||||||
alt={`Banner image for ${profile()?.displayName || "the user"}`}
|
|
||||||
onLoad={(event) => {
|
|
||||||
const ins = new FastAverageColor();
|
|
||||||
const colors = ins.getColor(event.currentTarget);
|
|
||||||
setBannerSampledColors({
|
|
||||||
average: colors.hex,
|
|
||||||
text: colors.isDark ? "white" : "black",
|
|
||||||
});
|
|
||||||
ins.destroy();
|
|
||||||
}}
|
|
||||||
></img>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Menu {...subscribeMenuState}>
|
|
||||||
<MenuItem
|
|
||||||
onClick={toggleSubscribeHome}
|
|
||||||
aria-label={`${relationship()?.following ? "Unfollow" : "Follow"} on your home timeline`}
|
|
||||||
>
|
|
||||||
<ListItemAvatar>
|
|
||||||
<Avatar src={session().account?.inf?.avatar}></Avatar>
|
|
||||||
</ListItemAvatar>
|
|
||||||
<ListItemText
|
|
||||||
secondary={
|
|
||||||
relationship()?.following
|
|
||||||
? undefined
|
|
||||||
: profile()?.locked
|
|
||||||
? "A request will be sent"
|
|
||||||
: undefined
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<span ref={useSessionDisplayName}></span>
|
|
||||||
<span>'s Home</span>
|
|
||||||
</ListItemText>
|
|
||||||
|
|
||||||
<Checkbox checked={relationship()?.following ?? false} />
|
|
||||||
</MenuItem>
|
|
||||||
</Menu>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="intro"
|
|
||||||
style={{
|
|
||||||
"background-color": bannerSampledColors()?.average,
|
|
||||||
color: bannerSampledColors()?.text,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<section class="acct-grp">
|
|
||||||
<Avatar
|
|
||||||
src={avatarImg()}
|
|
||||||
alt={`${profile()?.displayName || "the user"}'s avatar`}
|
|
||||||
sx={{
|
|
||||||
marginTop: "calc(-16px - 72px / 2)",
|
|
||||||
width: "72px",
|
|
||||||
height: "72px",
|
|
||||||
}}
|
|
||||||
></Avatar>
|
|
||||||
<div class="name-grp">
|
|
||||||
<div class="display-name">
|
|
||||||
<Show when={profile()?.bot}>
|
|
||||||
<SmartToySharp class="acct-mark" aria-label="Bot" />
|
|
||||||
</Show>
|
|
||||||
<Show when={profile()?.locked}>
|
|
||||||
<Lock class="acct-mark" aria-label="Locked" />
|
|
||||||
</Show>
|
|
||||||
<Body2
|
|
||||||
component="span"
|
|
||||||
ref={(e: HTMLElement) =>
|
|
||||||
createRenderEffect(() => (e.innerHTML = displayName()))
|
|
||||||
}
|
|
||||||
aria-label="Display name"
|
|
||||||
></Body2>
|
|
||||||
</div>
|
|
||||||
<span aria-label="Complete username" class="username">{fullUsername()}</span>
|
|
||||||
</div>
|
|
||||||
<div role="presentation">
|
|
||||||
<Switch>
|
|
||||||
<Match
|
|
||||||
when={
|
|
||||||
!session().account ||
|
|
||||||
profileUncaught.loading ||
|
|
||||||
profileUncaught.error
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{<></>}
|
|
||||||
</Match>
|
|
||||||
<Match when={isCurrentSessionProfile()}>
|
|
||||||
<IconButton color="inherit">
|
|
||||||
<Edit />
|
|
||||||
</IconButton>
|
|
||||||
</Match>
|
|
||||||
<Match when={true}>
|
|
||||||
<Button
|
|
||||||
variant="contained"
|
|
||||||
color="secondary"
|
|
||||||
onClick={(event) => {
|
onClick={(event) => {
|
||||||
openSubscribeMenu(
|
const { left, right, top } =
|
||||||
event.currentTarget.getBoundingClientRect(),
|
event.currentTarget.getBoundingClientRect();
|
||||||
);
|
openSubscribeMenu({
|
||||||
|
left,
|
||||||
|
right,
|
||||||
|
top,
|
||||||
|
e: 1,
|
||||||
|
});
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{relationship()?.following ? "Subscribed" : "Subscribe"}
|
<ListItemIcon>
|
||||||
</Button>
|
<PlaylistAdd />
|
||||||
</Match>
|
</ListItemIcon>
|
||||||
</Switch>
|
<ListItemText>Subscribe...</ListItemText>
|
||||||
</div>
|
</MenuItem>
|
||||||
</section>
|
}
|
||||||
<section
|
>
|
||||||
class="description"
|
<MenuItem disabled>
|
||||||
aria-label={`${profile()?.displayName || "the user"}'s description`}
|
<ListItemIcon>
|
||||||
ref={(e) =>
|
<Edit />
|
||||||
createRenderEffect(() => (e.innerHTML = description() || ""))
|
</ListItemIcon>
|
||||||
}
|
<ListItemText>Edit...</ListItemText>
|
||||||
></section>
|
</MenuItem>
|
||||||
|
</Show>
|
||||||
<table
|
<Divider />
|
||||||
class="acct-fields"
|
</Show>
|
||||||
aria-label={`${profile()?.displayName || "the user"}'s fields`}
|
<MenuItem disabled>
|
||||||
>
|
<ListItemIcon>
|
||||||
<tbody>
|
<Group />
|
||||||
<For each={profile()?.fields ?? []}>
|
</ListItemIcon>
|
||||||
{(item, index) => {
|
<ListItemText>Followers</ListItemText>
|
||||||
return (
|
<ListItemSecondaryAction>
|
||||||
<tr data-field-index={index()}>
|
<span aria-label="The number of the account follower">
|
||||||
<td>{item.name}</td>
|
{profile()?.followersCount ?? ""}
|
||||||
<td>
|
</span>
|
||||||
<Show when={item.verifiedAt}>
|
</ListItemSecondaryAction>
|
||||||
<Verified />
|
</MenuItem>
|
||||||
</Show>
|
<MenuItem disabled>
|
||||||
</td>
|
<ListItemIcon>
|
||||||
<td
|
<Subject />
|
||||||
ref={(e) => {
|
</ListItemIcon>
|
||||||
createRenderEffect(() => (e.innerHTML = item.value));
|
<ListItemText>Following</ListItemText>
|
||||||
}}
|
<ListItemSecondaryAction>
|
||||||
></td>
|
<span aria-label="The number the account following">
|
||||||
</tr>
|
{profile()?.followingCount ?? ""}
|
||||||
);
|
</span>
|
||||||
}}
|
</ListItemSecondaryAction>
|
||||||
</For>
|
</MenuItem>
|
||||||
</tbody>
|
<MenuItem disabled>
|
||||||
</table>
|
<ListItemIcon>
|
||||||
</div>
|
<PersonOff />
|
||||||
|
</ListItemIcon>
|
||||||
<div class="toot-list-toolbar">
|
<ListItemText>Blocklist</ListItemText>
|
||||||
<TootFilterButton
|
</MenuItem>
|
||||||
options={{
|
<MenuItem disabled>
|
||||||
pinned: "Pinneds",
|
<ListItemIcon>
|
||||||
boost: "Boosts",
|
<Send />
|
||||||
reply: "Replies",
|
</ListItemIcon>
|
||||||
original: "Originals",
|
<ListItemText>Mention in...</ListItemText>
|
||||||
}}
|
</MenuItem>
|
||||||
applied={recentTootFilter()}
|
|
||||||
onApply={setRecentTootFilter}
|
|
||||||
disabledKeys={["original"]}
|
|
||||||
></TootFilterButton>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<TimeSourceProvider value={time}>
|
|
||||||
<Show when={recentTootFilter().pinned && pinnedToots.list.length > 0}>
|
|
||||||
<TootList
|
|
||||||
threads={pinnedToots.list}
|
|
||||||
onUnknownThread={pinnedToots.getPath}
|
|
||||||
onChangeToot={pinnedToots.set}
|
|
||||||
/>
|
|
||||||
<Divider />
|
<Divider />
|
||||||
</Show>
|
<MenuItem
|
||||||
<TootList
|
component={"a"}
|
||||||
id={recentTootListId}
|
href={profile()?.url}
|
||||||
threads={recentToots.list}
|
target="_blank"
|
||||||
onUnknownThread={recentToots.getPath}
|
rel="noopener noreferrer"
|
||||||
onChangeToot={recentToots.set}
|
>
|
||||||
/>
|
<ListItemIcon>
|
||||||
</TimeSourceProvider>
|
<OpenInBrowser />
|
||||||
|
</ListItemIcon>
|
||||||
<Show when={!recentTootChunk()?.done}>
|
<ListItemText>Open in browser...</ListItemText>
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem onClick={() => share({ url: profile()?.url })}>
|
||||||
|
<ListItemIcon>
|
||||||
|
<Share />
|
||||||
|
</ListItemIcon>
|
||||||
|
<ListItemText>Share...</ListItemText>
|
||||||
|
</MenuItem>
|
||||||
|
</Menu>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
"text-align": "center",
|
height: `${268 * (Math.min(560, windowSize.width) / 560)}px`,
|
||||||
"padding-bottom": "var(--safe-area-inset-bottom)",
|
}}
|
||||||
|
class="banner"
|
||||||
|
role="presentation"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
ref={(e) => obx.observe(e)}
|
||||||
|
src={bannerImg()}
|
||||||
|
crossOrigin="anonymous"
|
||||||
|
alt={`Banner image for ${profile()?.displayName || "the user"}`}
|
||||||
|
onLoad={(event) => {
|
||||||
|
const ins = new FastAverageColor();
|
||||||
|
const colors = ins.getColor(event.currentTarget);
|
||||||
|
setBannerSampledColors({
|
||||||
|
average: colors.hex,
|
||||||
|
text: colors.isDark ? "white" : "black",
|
||||||
|
});
|
||||||
|
ins.destroy();
|
||||||
|
}}
|
||||||
|
></img>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Menu {...subscribeMenuState}>
|
||||||
|
<MenuItem
|
||||||
|
onClick={toggleSubscribeHome}
|
||||||
|
aria-label={`${relationship()?.following ? "Unfollow" : "Follow"} on your home timeline`}
|
||||||
|
>
|
||||||
|
<ListItemAvatar>
|
||||||
|
<Avatar src={session().account?.inf?.avatar}></Avatar>
|
||||||
|
</ListItemAvatar>
|
||||||
|
<ListItemText
|
||||||
|
secondary={
|
||||||
|
relationship()?.following
|
||||||
|
? undefined
|
||||||
|
: profile()?.locked
|
||||||
|
? "A request will be sent"
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<span ref={useSessionDisplayName}></span>
|
||||||
|
<span>'s Home</span>
|
||||||
|
</ListItemText>
|
||||||
|
|
||||||
|
<Checkbox checked={relationship()?.following ?? false} />
|
||||||
|
</MenuItem>
|
||||||
|
</Menu>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="intro"
|
||||||
|
style={{
|
||||||
|
"background-color": bannerSampledColors()?.average,
|
||||||
|
color: bannerSampledColors()?.text,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<IconButton
|
<section class="acct-grp">
|
||||||
aria-label="Load More"
|
<Avatar
|
||||||
aria-controls={recentTootListId}
|
src={avatarImg()}
|
||||||
size="large"
|
alt={`${profile()?.displayName || "the user"}'s avatar`}
|
||||||
color="primary"
|
sx={{
|
||||||
onClick={[refetchRecentToots, "prev"]}
|
marginTop: "calc(-16px - 72px / 2)",
|
||||||
disabled={isTootListLoading()}
|
width: "72px",
|
||||||
|
height: "72px",
|
||||||
|
}}
|
||||||
|
></Avatar>
|
||||||
|
<div class="name-grp">
|
||||||
|
<div class="display-name">
|
||||||
|
<Show when={profile()?.bot}>
|
||||||
|
<SmartToySharp class="acct-mark" aria-label="Bot" />
|
||||||
|
</Show>
|
||||||
|
<Show when={profile()?.locked}>
|
||||||
|
<Lock class="acct-mark" aria-label="Locked" />
|
||||||
|
</Show>
|
||||||
|
<Body2
|
||||||
|
component="span"
|
||||||
|
ref={(e: HTMLElement) =>
|
||||||
|
createRenderEffect(() => (e.innerHTML = displayName()))
|
||||||
|
}
|
||||||
|
aria-label="Display name"
|
||||||
|
></Body2>
|
||||||
|
</div>
|
||||||
|
<span aria-label="Complete username" class="username">
|
||||||
|
{fullUsername()}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div role="presentation">
|
||||||
|
<Switch>
|
||||||
|
<Match
|
||||||
|
when={
|
||||||
|
!session().account ||
|
||||||
|
profileUncaught.loading ||
|
||||||
|
profileUncaught.error
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{<></>}
|
||||||
|
</Match>
|
||||||
|
<Match when={isCurrentSessionProfile()}>
|
||||||
|
<IconButton color="inherit">
|
||||||
|
<Edit />
|
||||||
|
</IconButton>
|
||||||
|
</Match>
|
||||||
|
<Match when={true}>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
color="secondary"
|
||||||
|
onClick={(event) => {
|
||||||
|
openSubscribeMenu(
|
||||||
|
event.currentTarget.getBoundingClientRect(),
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{relationship()?.following ? "Subscribed" : "Subscribe"}
|
||||||
|
</Button>
|
||||||
|
</Match>
|
||||||
|
</Switch>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section
|
||||||
|
class="description"
|
||||||
|
aria-label={`${profile()?.displayName || "the user"}'s description`}
|
||||||
|
ref={(e) =>
|
||||||
|
createRenderEffect(() => (e.innerHTML = description() || ""))
|
||||||
|
}
|
||||||
|
></section>
|
||||||
|
|
||||||
|
<table
|
||||||
|
class="acct-fields"
|
||||||
|
aria-label={`${profile()?.displayName || "the user"}'s fields`}
|
||||||
>
|
>
|
||||||
<Show when={isTootListLoading()} fallback={<ExpandMore />}>
|
<tbody>
|
||||||
<CircularProgress sx={{ width: "24px", height: "24px" }} />
|
<For each={profile()?.fields ?? []}>
|
||||||
</Show>
|
{(item, index) => {
|
||||||
</IconButton>
|
return (
|
||||||
|
<tr data-field-index={index()}>
|
||||||
|
<td>{item.name}</td>
|
||||||
|
<td>
|
||||||
|
<Show when={item.verifiedAt}>
|
||||||
|
<Verified />
|
||||||
|
</Show>
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
ref={(e) => {
|
||||||
|
createRenderEffect(() => (e.innerHTML = item.value));
|
||||||
|
}}
|
||||||
|
></td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
</For>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</Show>
|
</div>
|
||||||
|
|
||||||
|
<div class="recent-toots">
|
||||||
|
<div class="toot-list-toolbar">
|
||||||
|
<TootFilterButton
|
||||||
|
options={{
|
||||||
|
pinned: "Pinneds",
|
||||||
|
boost: "Boosts",
|
||||||
|
reply: "Replies",
|
||||||
|
original: "Originals",
|
||||||
|
}}
|
||||||
|
applied={recentTootFilter()}
|
||||||
|
onApply={setRecentTootFilter}
|
||||||
|
disabledKeys={["original"]}
|
||||||
|
></TootFilterButton>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<TimeSourceProvider value={time}>
|
||||||
|
<Show when={recentTootFilter().pinned && pinnedToots.list.length > 0}>
|
||||||
|
<TootList
|
||||||
|
threads={pinnedToots.list}
|
||||||
|
onUnknownThread={pinnedToots.getPath}
|
||||||
|
onChangeToot={pinnedToots.set}
|
||||||
|
/>
|
||||||
|
<Divider />
|
||||||
|
</Show>
|
||||||
|
<TootList
|
||||||
|
id={recentTootListId}
|
||||||
|
threads={recentToots.list}
|
||||||
|
onUnknownThread={recentToots.getPath}
|
||||||
|
onChangeToot={recentToots.set}
|
||||||
|
/>
|
||||||
|
</TimeSourceProvider>
|
||||||
|
|
||||||
|
<Show when={!recentTootChunk()?.done}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
"text-align": "center",
|
||||||
|
"padding-bottom": "var(--safe-area-inset-bottom)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<IconButton
|
||||||
|
aria-label="Load More"
|
||||||
|
aria-controls={recentTootListId}
|
||||||
|
size="large"
|
||||||
|
color="primary"
|
||||||
|
onClick={[refetchRecentToots, "prev"]}
|
||||||
|
disabled={isTootListLoading()}
|
||||||
|
>
|
||||||
|
<Show when={isTootListLoading()} fallback={<ExpandMore />}>
|
||||||
|
<CircularProgress sx={{ width: "24px", height: "24px" }} />
|
||||||
|
</Show>
|
||||||
|
</IconButton>
|
||||||
|
</div>
|
||||||
|
</Show>
|
||||||
|
</div>
|
||||||
</Scaffold>
|
</Scaffold>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue