johnnygear/gear-orders
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Timeline - Link to subs

Browse source
This commit is contained in:
John Groszko 2026-04-23 16:36:38 -05:00
parent cfccd424cb
commit 2089ee4161
1 changed files with 74 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

135
web/vite/src/TimelineList.tsx
View file

@ -14,6 +14,7 @@ import {
IconLock,
IconX,
} from "@tabler/icons-react";
import { useUserContext } from "./UserContext";
const TIMELINE_TYPE = {
ORDER_NOT_ISSUED: {
@ -60,69 +61,81 @@ const TIMELINE_TYPE = {
export const TimelineList: React.FC<{
timeline: TimelineEvent[];
}> = ({ timeline }) => (
<Box>
<Title order={1} mb="lg">
Timeline
</Title>
<Card py="xs">
<Timeline bulletSize={24} lineWidth={2} my="lg">
{timeline.map(
({
id,
updated_at,
type,
text,
username,
actor_username,
orders_pool,
extra,
}) => (
<Timeline.Item key={id} active {...(TIMELINE_TYPE[type] ?? {})}>
<Text size="sm">
{text.split("\n").map((str, idx) => (
<React.Fragment key={idx}>
{str}
<br />
</React.Fragment>
))}
</Text>
<Flex mt={4} gap="xs">
{extra?.mastodon_status_url ? (
}> = ({ timeline }) => {
const { username: my_username } = useUserContext();
return (
<Box>
<Title order={1} mb="lg">
Timeline
</Title>
<Card py="xs">
<Timeline bulletSize={24} lineWidth={2} my="lg">
{timeline.map(
({
id,
updated_at,
type,
text,
username,
actor_username,
orders_pool,
extra,
}) => (
<Timeline.Item key={id} active {...(TIMELINE_TYPE[type] ?? {})}>
<Text size="sm">
{text.split("\n").map((str, idx) => (
<React.Fragment key={idx}>
{str}
<br />
</React.Fragment>
))}
</Text>
<Flex mt={4} gap="xs">
{extra?.mastodon_status_url ? (
<Text size="xs">
<Anchor href={extra.mastodon_status_url} target="_blank">
Mastodon Post <IconExternalLink size="0.75rem" />
</Anchor>
</Text>
) : null}
{orders_pool ? (
<Text size="xs">
{orders_pool.id ? (
<Anchor
component={Link}
to={`/orders/${username}/${orders_pool.id}`}
>
{orders_pool.name}
</Anchor>
) : (
orders_pool.name
)}
</Text>
) : null}
{actor_username ? (
<Text size="xs">
<IconCrown size="0.75rem" /> {actor_username}
</Text>
) : null}
<Text size="xs">
<Anchor href={extra.mastodon_status_url} target="_blank">
Mastodon Post <IconExternalLink size="0.75rem" />
</Anchor>
</Text>
) : null}
{orders_pool ? (
<Text size="xs">
{orders_pool.id ? (
<Anchor
component={Link}
to={`/orders/${username}/${orders_pool.id}`}
>
{orders_pool.name}
{username != my_username ? (
<Anchor component={Link} to={`/orders/${username}`}>
<IconLock size="0.75rem" /> {username}
</Anchor>
) : (
orders_pool.name
<>
<IconLock size="0.75rem" /> {username}
</>
)}
</Text>
) : null}
{actor_username ? (
<Text size="xs">
<IconCrown size="0.75rem" /> {actor_username}
</Text>
) : null}
<Text size="xs">
<IconLock size="0.75rem" /> {username}
</Text>
<Text size="xs">{moment(updated_at).fromNow()}</Text>
</Flex>
</Timeline.Item>
),
)}
</Timeline>
</Card>
</Box>
);
<Text size="xs">{moment(updated_at).fromNow()}</Text>
</Flex>
</Timeline.Item>
),
)}
</Timeline>
</Card>
</Box>
);
};