Skip to content

Commit 32465bf

Browse files
author
Elise Bach
committed
Progress on thread page
1 parent 7d9e634 commit 32465bf

File tree

6 files changed

+125
-129
lines changed

6 files changed

+125
-129
lines changed

‎app/globals.css‎

Lines changed: 3 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,6 @@
11
:root {
2-
--max-width: 1100px;
3-
--border-radius: 12px;
4-
--font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
5-
"Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
6-
"Fira Mono", "Droid Sans Mono", "Courier New", monospace;
7-
8-
--foreground-rgb: 0, 0, 0;
9-
--background-start-rgb: 214, 219, 220;
10-
--background-end-rgb: 255, 255, 255;
11-
12-
--primary-glow: conic-gradient(
13-
from 180deg at 50% 50%,
14-
#16abff33 0deg,
15-
#0885ff33 55deg,
16-
#54d6ff33 120deg,
17-
#0071ff33 160deg,
18-
transparent 360deg
19-
);
20-
--secondary-glow: radial-gradient(
21-
rgba(255, 255, 255, 1),
22-
rgba(255, 255, 255, 0)
23-
);
24-
25-
--tile-start-rgb: 239, 245, 249;
26-
--tile-end-rgb: 228, 232, 233;
27-
--tile-border: conic-gradient(
28-
#00000080,
29-
#00000040,
30-
#00000030,
31-
#00000020,
32-
#00000010,
33-
#00000010,
34-
#00000080
35-
);
36-
37-
--callout-rgb: 238, 240, 241;
38-
--callout-border-rgb: 172, 175, 176;
39-
--card-rgb: 180, 185, 188;
40-
--card-border-rgb: 131, 134, 135;
41-
}
42-
43-
@media (prefers-color-scheme: dark) {
44-
:root {
45-
--foreground-rgb: 255, 255, 255;
46-
--background-start-rgb: 0, 0, 0;
47-
--background-end-rgb: 0, 0, 0;
48-
49-
--primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
50-
--secondary-glow: linear-gradient(
51-
to bottom right,
52-
rgba(1, 65, 255, 0),
53-
rgba(1, 65, 255, 0),
54-
rgba(1, 65, 255, 0.3)
55-
);
56-
57-
--tile-start-rgb: 2, 13, 46;
58-
--tile-end-rgb: 2, 5, 19;
59-
--tile-border: conic-gradient(
60-
#ffffff80,
61-
#ffffff40,
62-
#ffffff30,
63-
#ffffff20,
64-
#ffffff10,
65-
#ffffff10,
66-
#ffffff80
67-
);
68-
69-
--callout-rgb: 20, 20, 20;
70-
--callout-border-rgb: 108, 108, 108;
71-
--card-rgb: 100, 100, 100;
72-
--card-border-rgb: 200, 200, 200;
73-
}
2+
--font: helvetica, arial, sans-serif;
3+
--text-muted: #666;
744
}
755

766
* {
@@ -83,16 +13,11 @@ html,
8313
body {
8414
max-width: 100vw;
8515
overflow-x: hidden;
16+
font: var(--font);
8617
}
8718

88-
8919
a {
9020
color: inherit;
9121
text-decoration: none;
9222
}
9323

94-
@media (prefers-color-scheme: dark) {
95-
html {
96-
color-scheme: dark;
97-
}
98-
}

‎app/thread/[threadId]/page.module.css‎

Lines changed: 45 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,58 @@
1010
flex-grow: 1;
1111
}
1212

13-
.threadinfo {
13+
.threadInfo {
1414
min-width: 350px;
1515
padding: 24px;
1616
background: #fff;
1717
border-left: 1px solid #eee;
18+
display: grid;
19+
grid-template-columns: 1fr 2fr;
20+
grid-auto-rows: max-content;
21+
gap: 12px;
22+
}
23+
24+
.threadInfoProp {
25+
font-weight: bold;
1826
}
1927

2028
.message {
2129
padding: 12px;
2230
border-bottom: 1px solid #eee;
2331
width: 100%;
24-
}
32+
margin-bottom: 16px;
33+
}
34+
35+
.component {
36+
margin-bottom: 8px;
37+
}
38+
39+
.avatar {
40+
background: #000;
41+
color: #fff;
42+
border-radius: 100%;
43+
padding: 8px;
44+
width: 24px;
45+
height: 24px;
46+
display: flex;
47+
justify-content: center;
48+
align-items: center;
49+
}
50+
51+
.entryHeader {
52+
display: flex;
53+
align-items: center;
54+
gap: 8px;
55+
font-size: 12px;
56+
margin-bottom: 12px;
57+
}
58+
59+
.actor {
60+
font-size: 14px;
61+
font-weight: bold;
62+
}
63+
64+
.timestamp {
65+
font-size: 12px;
66+
color: var(--text-muted);
67+
}

‎app/thread/[threadId]/page.tsx‎

Lines changed: 76 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import Navigation from "@/components/navigation";
22
import styles from "./page.module.css";
33
import Actor from "@/components/actor";
44
import { ActorPartsFragment } from "@team-plain/typescript-sdk";
5+
import Avatar from "@/components/avatar";
56

67
function getFullname(actor) {
78
switch (actor.__typename) {
@@ -33,6 +34,33 @@ export default async function ThreadPage({
3334
query: `{
3435
thread(threadId: "th_01J299WQGA3VNQ4FDECV7JK6MC") {
3536
title
37+
description
38+
priority
39+
status
40+
createdAt {
41+
iso8601
42+
}
43+
createdBy {
44+
__typename
45+
... on UserActor {
46+
user {
47+
fullName
48+
}
49+
}
50+
... on CustomerActor {
51+
customer {
52+
fullName
53+
}
54+
}
55+
... on MachineUserActor {
56+
machineUser {
57+
fullName
58+
}
59+
}
60+
}
61+
updatedAt {
62+
iso8601
63+
}
3664
timelineEntries {
3765
edges {
3866
node {
@@ -69,6 +97,10 @@ export default async function ThreadPage({
6997
}
7098
}
7199
}
100+
... on ChatEntry {
101+
chatId
102+
text
103+
}
72104
}
73105
}
74106
}
@@ -89,39 +121,67 @@ export default async function ThreadPage({
89121

90122
const thread = data.data.thread;
91123
const timelineEntries = thread.timelineEntries;
92-
console.log(thread);
93-
94124
return (
95125
<>
96126
<Navigation hasBackButton title={thread.title} />
97127
<main className={styles.main}>
98128
<div className={styles.timeline}>
99-
<div className={styles.message}>
100-
{timelineEntries.edges.map((e) => {
101-
const entry = e.node;
102-
console.log("ENTRY", entry.actor);
129+
{timelineEntries.edges.reverse().map((e) => {
130+
const entry = e.node;
131+
if (
132+
entry.entry.__typename !== "CustomEntry" &&
133+
entry.entry.__typename !== "EmailEntry" &&
134+
entry.entry.__typename !== "SlackReplyEntry" &&
135+
entry.entry.__typename !== "SlackMessageEntry" &&
136+
entry.entry.__typename !== "ChatEntry"
137+
) {
138+
return null;
139+
}
103140

104-
return (
105-
<div key={entry.id}>
106-
<Actor fullName={getFullname(entry.actor)} />
107-
{entry.entry.components.map((component, idx) => {
141+
return (
142+
<div className={styles.message} key={entry.id}>
143+
<div className={styles.entryHeader}>
144+
<div className={styles.avatar}>
145+
{getFullname(entry.actor)[0].toUpperCase()}
146+
</div>
147+
<div>
148+
<div className={styles.actor}>
149+
{getFullname(entry.actor)}
150+
</div>
151+
<div className={styles.timestamp}>
152+
{entry.timestamp.iso8601}
153+
</div>
154+
</div>
155+
</div>
156+
{entry.entry.__typename === "CustomEntry" &&
157+
entry.entry.components.map((component, idx) => {
108158
if (component.__typename === "ComponentText") {
109159
return (
110-
<div key={`comp_${component.text}`}>
160+
<div
161+
key={`comp_${component.text}`}
162+
className={styles.component}
163+
>
111164
{component.text}
112165
</div>
113166
);
114167
}
115168

116169
return <div key={`comp_${idx}`}>TODO</div>;
117170
})}
118-
</div>
119-
);
120-
})}
121-
</div>
171+
{entry.entry.__typename === "ChatEntry" && (
172+
<div>{entry.entry.text}</div>
173+
)}
174+
</div>
175+
);
176+
})}
122177
</div>
123178

124-
<div className={styles.threadinfo}>jkdsfjkfsd</div>
179+
<div className={styles.threadInfo}>
180+
<div className={styles.threadInfoProp}>Created by:</div>
181+
<div>{getFullname(thread.createdBy)}</div>
182+
<div className={styles.threadInfoProp}>Created at:</div>
183+
<div>{thread.createdAt.iso8601}</div>
184+
</div>
125185
</main>
126186
</>
127187
);

‎components/actor.module.css‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎components/actor.tsx‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎components/navigation.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default function Navigation({
1212
className={styles.nav}
1313
style={{ justifyContent: hasBackButton ? "flex-start" : "center" }}
1414
>
15-
{hasBackButton && <a href="/"> &lt; Go back</a>}
15+
{hasBackButton && <a href="/">&lt; Go back</a>}
1616
<h1>{title}</h1>
1717
</nav>
1818
);

0 commit comments

Comments
 (0)