Added actor + a bit more structure and styling

Author: Elise Bach

app/page.tsx

@@ -9,7 +9,7 @@ if (!apiKey) {
 	throw new Error("Please set the `PLAIN_API_KEY` environment variable");
 }
 
-const client = new PlainClient({
+export const client = new PlainClient({
 	apiKey,
 });
 

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

@@ -1,14 +1,24 @@
 .main {
   display: flex;
-  flex-direction: column;
-  gap: 16px;
-  align-items: center;
-  padding: 6rem;
+  justify-content: space-between;
   min-height: 100vh;
+  width: 100%;
+}
+
+.timeline {
+  padding: 24px;
+  flex-grow: 1;
+}
+
+.threadinfo {
+  min-width: 350px;
+  padding: 24px;
+  background: #fff;
+  border-left: 1px solid #eee;
 }
 
 .message {
-  border: 1px solid #ccc;
-  border-radius: 8px;
   padding: 12px;
+  border-bottom: 1px solid #eee;
+  width: 100%;
 }

app/thread/[threadId]/page.tsx

@@ -1,5 +1,21 @@
 import Navigation from "@/components/navigation";
 import styles from "./page.module.css";
+import Actor from "@/components/actor";
+import { ActorPartsFragment } from "@team-plain/typescript-sdk";
+
+function getFullname(actor) {
+	switch (actor.__typename) {
+		case "CustomerActor": {
+			return actor.customer.fullName;
+		}
+		case "UserActor": {
+			return actor.user.fullName;
+		}
+		case "MachineUserActor": {
+			return actor.user.fullName;
+		}
+	}
+}
 
 export default async function ThreadPage({
 	params,
@@ -79,25 +95,33 @@ export default async function ThreadPage({
 		<>
 			<Navigation hasBackButton title={thread.title} />
 			<main className={styles.main}>
-				<div className={styles.message}>
-					{timelineEntries.edges.map((entry) => {
-						console.log("ENTRY", entry);
+				<div className={styles.timeline}>
+					<div className={styles.message}>
+						{timelineEntries.edges.map((e) => {
+							const entry = e.node;
+							console.log("ENTRY", entry.actor);
 
-						return (
-							<div key={entry.node.id}>
-								{entry.node.entry.components.map((component, idx) => {
-									if (component.__typename === "ComponentText") {
-										return (
-											<div key={`comp_${component.text}`}>{component.text}</div>
-										);
-									}
+							return (
+								<div key={entry.id}>
+									<Actor fullName={getFullname(entry.actor)} />
+									{entry.entry.components.map((component, idx) => {
+										if (component.__typename === "ComponentText") {
+											return (
+												<div key={`comp_${component.text}`}>
+													{component.text}
+												</div>
+											);
+										}
 
-									return <div key={`comp_${idx}`}>TODO</div>;
-								})}
-							</div>
-						);
-					})}
+										return <div key={`comp_${idx}`}>TODO</div>;
+									})}
+								</div>
+							);
+						})}
+					</div>
 				</div>
+
+				<div className={styles.threadinfo}>jkdsfjkfsd</div>
 			</main>
 		</>
 	);

components/actor.module.css

@@ -0,0 +1,18 @@
+.actor {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+   margin-bottom: 12px;
+}
+
+.avatar {
+  background: #000;
+  color: #fff;
+  border-radius: 100%;
+  padding: 8px;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

components/actor.tsx

@@ -0,0 +1,14 @@
+import styles from "./actor.module.css";
+
+export default function Actor({
+	fullName,
+}: {
+	fullName: string;
+}) {
+	return (
+		<div className={styles.actor}>
+			<div className={styles.avatar}>{fullName[0].toUpperCase()}</div>
+			<div>{fullName}</div>
+		</div>
+	);
+}

components/navigation.tsx

@@ -1,18 +1,6 @@
 import styles from "./navigation.module.css";
-import { PlainClient } from "@team-plain/typescript-sdk";
 
-export const fetchCache = "force-no-store";
-
-const apiKey = process.env.PLAIN_API_KEY;
-if (!apiKey) {
-	throw new Error("Please set the `PLAIN_API_KEY` environment variable");
-}
-
-const client = new PlainClient({
-	apiKey,
-});
-
-export default async function Navigation({
+export default function Navigation({
 	hasBackButton = false,
 	title,
 }: {