render posts in frontend, added basic styling

2 files changed, 54 insertions, 69 deletions

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
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 3bcdbd0..13d2217 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -25,8 +25,6 @@ a:hover {
 body {
   margin: 0;
   display: flex;
-  place-items: center;
-  min-width: 320px;
   min-height: 100vh;
 }
 
@@ -39,47 +37,42 @@ h1 {
   max-width: 1280px;
   margin: 0 auto;
   padding: 2rem;
-  text-align: center;
 }
 
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vanilla:hover {
-  filter: drop-shadow(0 0 2em #3178c6aa);
+.note {
+  display: flex;
+  gap: 10px;
+  padding: 15px;
+  border-bottom: 1px solid #444;
 }
 
-.card {
-  padding: 2em;
+.note-avatar {
+  width: 48px;
+  height: 48px;
+  flex-shrink: 0;
 }
 
-.read-the-docs {
-  color: #888;
+.note-content {
+  flex: 1;
 }
 
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
+.note-text {
+  white-space: pre-wrap;
 }
-button:hover {
-  border-color: #646cff;
+
+.spinner {
+  border: 16px solid #f3f3f3;
+  border-top: 16px solid #3498db;
+  border-radius: 50%;
+  width: 120px;
+  height: 120px;
+  animation: spin 2s linear infinite;
+  margin: 50px auto;
 }
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
 }
 
 @media (prefers-color-scheme: light) {
@@ -87,10 +80,4 @@ button:focus-visible {
     color: #213547;
     background-color: #ffffff;
   }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
+}
\ No newline at end of file