From 2089ee4161a7e70e4938f422db954885d9d5a8d6 Mon Sep 17 00:00:00 2001
From: John Groszko <john@tinythunk.com>
Date: Thu, 23 Apr 2026 16:36:38 -0500
Subject: [PATCH] Timeline - Link to subs

---
 web/vite/src/TimelineList.tsx | 135 +++++++++++++++++++---------------
 1 file changed, 74 insertions(+), 61 deletions(-)

diff --git a/web/vite/src/TimelineList.tsx b/web/vite/src/TimelineList.tsx
index bd3de15..3473d75 100644
--- a/web/vite/src/TimelineList.tsx
+++ b/web/vite/src/TimelineList.tsx
@@ -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>
+  );
+};