Major improvement, security handling, file handling +fixes

frontend/src/lib/api.js

@@ -1,6 +1,8 @@
 //               "window.location.origin"
 const API_BASE = "http://127.0.0.1:8090";
 
+export const BOT_USERNAME = "council_websharingbot";
+
 export async function fetchMetadata(cxid, password = "") {
   let url = `${API_BASE}/api/content/${encodeURIComponent(cxid)}`;
   if (password) url += `?sc=${encodeURIComponent(password)}`;

frontend/src/routes/Home.svelte

@@ -1,11 +1,12 @@
 <script>
-  import { fetchMetadata, verifyPassword } from '../lib/api.js'
+  import { fetchMetadata, verifyPassword, BOT_USERNAME } from '../lib/api.js'
 
   let cxidInput = $state('')
   let passwordInput = $state('')
   let needsPassword = $state(false)
   let loading = $state(false)
   let error = $state('')
+  let reportCxid = $state('')
 
   async function submit() {
     error = ''
@@ -49,6 +50,12 @@
 
   <div class="panel">
     <p class="cg-subtitle">-- cannibal girls --</p>
+    <p class="bot-link">
+      <a href="https://t.me/{BOT_USERNAME}?start=submit" target="_blank" rel="noopener">
+        t.me/{BOT_USERNAME}
+      </a>
+    </p>
+    <p class="share-text">Share & submit your own media</p>
     <label for="cxid">Content ID</label>
     <input id="cxid" type="text" bind:value={cxidInput} placeholder="Enter content ID..." onkeydown={onKeydown} />
 
@@ -68,7 +75,16 @@
     <details class="misc-section">
       <summary>[ Misc ]</summary>
       <div class="misc-content">
-        <a href="https://t.me/harmfulmeowbot?start=report" target="_blank" rel="noopener">Report Content</a>
+        <a href="https://t.me/harmfulmeowbot?start=submit" target="_blank" rel="noopener">Report Content via Telegram</a>
+        <div class="report-direct">
+          <span>Report Content directly</span>
+          <div class="report-direct-row">
+            <input type="text" bind:value={reportCxid} placeholder="Content ID or link..." />
+            <a href={`https://t.me/harmfulmeowbot?start=report_${reportCxid}`} target="_blank" rel="noopener">
+              <button disabled={!reportCxid.trim()}>[ Submit ]</button>
+            </a>
+          </div>
+        </div>
       </div>
     </details>
   </div>
@@ -169,4 +185,48 @@
   .misc-content a:hover {
     text-decoration: underline;
   }
+  .report-direct {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    margin-top: 4px;
+  }
+  .report-direct span {
+    font-size: 0.9rem;
+    color: var(--retro-green);
+  }
+  .report-direct-row {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+  }
+  .report-direct-row input {
+    flex: 1;
+    padding: 4px 8px;
+    font-size: 0.85rem;
+    border: 2px solid var(--retro-border);
+    background: #fff;
+    color: #333;
+  }
+  .report-direct-row button {
+    padding: 4px 8px;
+    font-size: 0.75rem;
+    cursor: pointer;
+  }
+  .bot-link {
+    font-style: italic;
+    text-align: center;
+    margin: 0;
+  }
+  .bot-link a {
+    color: var(--retro-green);
+    text-decoration: underline;
+    font-size: 0.95rem;
+  }
+  .share-text {
+    font-size: 0.85rem;
+    color: #555;
+    text-align: center;
+    margin: 2px 0 8px;
+  }
 </style>

frontend/src/routes/ViewContent.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { fetchMetadata, verifyPassword, fileUrl, rawUrl } from '../lib/api.js'
+  import { fetchMetadata, verifyPassword, fileUrl, rawUrl, formatSize } from '../lib/api.js'
   import { detectLanguage } from '../lib/lang.js'
   import ImageViewer from '../components/ImageViewer.svelte'
   import VideoPlayer from '../components/VideoPlayer.svelte'
@@ -33,7 +33,7 @@
     phase = 'loading_meta'
     error = ''
     try {
-      const meta = await fetchMetadata(cxid, password)
+      const meta = await fetchMetadata(cxid, sc)
       metadata = meta
       phase = 'rendering'
     } catch (e) {
@@ -120,6 +120,18 @@
         <span class="meta">Views: {metadata.current_views}/{metadata.max_views}</span>
       {/if}
     </div>
+    <div class="metadata-bar">
+      <span class="meta">{new Date(metadata.created_at).toLocaleString()}</span>
+      <span class="meta">{formatSize(metadata.total_size)}</span>
+      {#if metadata.author}
+        <span class="meta">
+          <a href="https://t.me/{metadata.author.username}" target="_blank" rel="noopener">
+            @{metadata.author.username}
+          </a>
+          [{metadata.author.user_id}]
+        </span>
+      {/if}
+    </div>
 
     {#if metadata.files.length === 1}
       {@const file = metadata.files[0]}
@@ -200,6 +212,12 @@
     padding-bottom: 12px;
     border-bottom: 2px solid var(--retro-border);
   }
+  .metadata-bar {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+    margin-bottom: 16px;
+  }
   .meta {
     font-size: 0.9rem;
     color: #555;