wip styles for direct messages

dankoster · Nov 15, 2024 · e0aabe7 · e0aabe7
1 parent 8af2ae3
commit e0aabe7
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 11 deletions.
diff --git a/src/main.css b/src/main.css
@@ -200,15 +200,55 @@ body {
 .dm-chat {
 	border-top: 1px solid var(--separator-color);
 	padding: 2rem;
+
+	.dm-list {
+		.dm {
+			display: grid;
+            column-gap: 1rem;
+			margin-block: 1rem;
+			align-items: center;
+            grid-template-columns: min-content min-content 1fr;
+			grid-template-areas:
+				"avatar sender timestamp"
+				"avatar message message";
+
+
+			.dm-avatar {
+				grid-area: avatar;
+
+				img {
+					width: 1.8rem;
+					border-radius: 25%;
+				}
+			}
+
+			.dm-timestamp {
+				grid-area: timestamp;
+				font-size: x-small;
+                filter: brightness(0.5);
+			}
+
+			.dm-sender {
+				grid-area: sender;
+				white-space: nowrap;
+				font-weight: bold;
+			}
+
+			.dm-message {
+				grid-area: message;
+			}
+		}
+	}
 }
 
 .connections {
 	border-top: 1px solid var(--separator-color);
-	.connection-list {	
+
+	.connection-list {
 		margin-top: 0.5rem;
 	}
 }
-	
+
 .avatar {
 	display: flex;
 	align-items: center;
@@ -248,8 +288,8 @@ body {
 		}
 
 		.avatar-image {
-			width: 1rem;
-			height: 1rem;
+			width: 1.4rem;
+			height: 1.4rem;
 			border-radius: 25%;
 		}
 	}
@@ -333,4 +373,4 @@ body {
 			border: none;
 		}
 	}
-}
+}
diff --git a/src/main.tsx b/src/main.tsx
@@ -121,6 +121,11 @@ const App = () => {
 		return value ? `${value} unread` : ''
 	}
 
+	const avatarUrl = (conId: string) => {
+		const con = server.connections.find(c => c.id === conId)
+		return con?.identity?.avatar_url
+	}
+
 	const showDmConversation = async (con: Connection) => {
 		setDmError(null)
 		setSelectedDmTarget(con)
@@ -133,11 +138,11 @@ const App = () => {
 		try {
 			let history = await directMessages.getRecentHistory(con.id, con.publicKey)
 			const lastRead = directMessages.lastReadTimestamp(con.id)
-			
-			console.log('showDmConversation', {lastRead, history})
-			
+
+			console.log('showDmConversation', { lastRead, history })
+
 			//TODO: visually mark each message after the timestamp as unread
-			
+
 			setDmList(history)
 			directMessages.setLastReadNow(con.id)
 
@@ -214,9 +219,22 @@ const App = () => {
 					<Show when={dmError()}>ERROR: {dmError()}</Show>
 					<Show when={!dmError()}>
 						<span onclick={() => showDmConversation(null)}>close</span>
-						<div class="dm-messages">
+						<div class="dm-list">
 							<For each={dmList()}>
-								{dm => <div>[{new Date(dm.timestamp).toLocaleTimeString()}] {dm.fromName || dm.fromId}: {dm.message as string}</div>}
+								{dm => <div class="dm">
+									<div class="dm-avatar">
+										<img alt={dm.fromName} src={avatarUrl(dm.fromId)} />
+									</div>
+									<div class="dm-sender">
+										{dm.fromName || dm.fromId}
+									</div>
+									<div class="dm-timestamp">
+										{new Date(dm.timestamp).toLocaleTimeString()}
+									</div>
+									<div class="dm-message">
+										{dm.message as string}
+									</div>
+								</div>}
 							</For>
 						</div>
 						<input type="text" onKeyDown={(e) => onMessageKeyDown(e, selectedDmTarget())} />