From 6e7cab20cfb51367114a8a49fbead3c53a426174 Mon Sep 17 00:00:00 2001
From: Guillermo Serrahima <dev@vylion.com>
Date: Thu, 19 Feb 2026 15:58:51 +0100
Subject: render posts in frontend, added basic styling

---
 frontend/src/main.ts | 56 +++++++++++++++++++++++++---------------------------
 1 file changed, 27 insertions(+), 29 deletions(-)

(limited to 'frontend/src/main.ts')

diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 3628147..d5f4d53 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,35 +1,33 @@
 import './style.css'
-/*
-import typescriptLogo from './typescript.svg'
-import viteLogo from '/vite.svg'
-import { setupCounter } from './counter.ts'
-*/
 
-const response = await fetch('http://localhost:8080/');
-const text = await response.text();
 const app = document.querySelector('#app');
-if (app) {
-  app.innerHTML = text;
+if (!app) {
+  console.error('App container not found');
+  throw new Error('App container not found');
 }
 
-/*
-document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
-  <div>
-    <a href="https://vite.dev" target="_blank">
-      <img src="${viteLogo}" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://www.typescriptlang.org/" target="_blank">
-      <img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />
-    </a>
-    <h1>Vite + TypeScript</h1>
-    <div class="card">
-      <button id="counter" type="button"></button>
-    </div>
-    <p class="read-the-docs">
-      Click on the Vite and TypeScript logos to learn more
-    </p>
-  </div>
-`
+app.innerHTML = '<div class="spinner"></div>';
 
-setupCounter(document.querySelector<HTMLButtonElement>('#counter')!)
-*/
\ No newline at end of file
+try {
+  const response = await fetch('http://localhost:8080/api/posts');
+  if (!response.ok) throw new Error(`HTTP ${response.status}`);
+  
+  const posts = await response.json();
+  app.innerHTML = '';
+  
+  for (const post of posts) {
+    const postHTML = `
+    <div class="note">
+      <img class="note-avatar" src="https://cdn.bsky.app/img/avatar/plain/did:plc:hyyqbqqhpxt2bnn7s2e2iuxd/bafkreidoiynom7v2y5rpsm467l3d2cnr7ozvlfusrchjey3k2jtyquufq4@jpeg" alt="avatar">
+      <div class="note-content">
+        <div style="font-weight: bold">@${post.authorHandle}</div>
+        <div class="note-text">${post.text || '<br>'}</div>
+        <div style="font-size: 12px; color: #888">${new Date(post.createdAt).toLocaleString()}</div>
+      </div>
+    </div>
+  `;
+    app.innerHTML += postHTML;
+  }
+} catch (err) {
+  app.innerHTML = `<div style="color: #f88">error loading posts: ${err}</div>`;
+}
\ No newline at end of file
-- 
cgit v1.2.3