Additional Bug fixes

frontend/src/lib/api.js

@@ -1,10 +1,15 @@
+//               "window.location.origin"
 const API_BASE = "http://127.0.0.1:8090";
 
 export async function fetchMetadata(cxid) {
   const res = await fetch(
     `${API_BASE}/api/content/${encodeURIComponent(cxid)}`,
   );
-  if (!res.ok) throw new Error(await res.text());
+  if (!res.ok) {
+    const err = new Error(await res.text());
+    err.status = res.status;
+    throw err;
+  }
   return res.json();
 }
 

frontend/src/routes/Home.svelte

@@ -45,7 +45,7 @@
 <main class="home">
   <div class="hero">
     <h1 class="retro-heading">CG.CX</h1>
-    <p class="tagline">Secure content sharing</p>
+    <p class="cg-subtitle">-- cannibal girls --</p>
   </div>
 
   <div class="panel">
@@ -86,11 +86,16 @@
   .hero {
     text-align: center;
   }
-  .tagline {
-    font-size: 1.2rem;
-    color: var(--retro-green-light);
-    margin-top: 8px;
+  .cg-subtitle {
+    font-family: 'Press Start 2P', cursive;
+    font-size: 0.9rem;
+    text-align: center;
     letter-spacing: 2px;
+    margin-top: 8px;
+    background: linear-gradient(90deg, var(--retro-green), var(--retro-green-light));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
   }
   .panel {
     width: min(400px, 100%);

frontend/src/routes/ViewContent.svelte

@@ -45,7 +45,18 @@
       phase = 'rendering'
     } catch (e) {
       phase = 'error'
-      error = e.message || 'Failed to load content.'
+      const status = e.status || 0
+      if (status === 404) {
+        error = '[ Not Found ] This content does not exist or has been removed.'
+      } else if (status === 401) {
+        error = '[ Unauthorized ] This content requires a password.'
+      } else if (status === 429) {
+        error = '[ Rate Limited ] Too many requests. Please wait.'
+      } else if (status >= 500) {
+        error = '[ Server Error ] Something went wrong. Please try again later.'
+      } else {
+        error = '[ Error ] Failed to load content.'
+      }
     }
   }
 
@@ -96,8 +107,10 @@
     </div>
   {:else if phase === 'error'}
     <div class="center">
-      <p class="error">{error}</p>
-      <button onclick={goHome}>Home</button>
+      <div class="error-box">
+        <p class="error">{error}</p>
+        <button onclick={goHome}>Home</button>
+      </div>
     </div>
   {:else if phase === 'rendering'}
     <div class="content-header">
@@ -155,7 +168,19 @@
     flex-direction: column;
     gap: 12px;
   }
-  .error { color: var(--retro-danger); }
+  .error { color: var(--retro-danger); font-size: 0.85rem; line-height: 1.5; }
+  .error-box {
+    width: min(400px, 100%);
+    background: var(--retro-panel);
+    border: 3px solid var(--retro-danger);
+    padding: 24px;
+    box-shadow: 6px 6px 0px var(--retro-shadow);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+    text-align: center;
+  }
   .content-header {
     display: flex;
     align-items: center;

frontend/vite.config.ts

@@ -7,4 +7,9 @@ export default defineConfig({
     outDir: 'dist',
     emptyOutDir: true,
   },
+  server: {
+    proxy: {
+      '/api': 'http://127.0.0.1:8090',
+    },
+  },
 })