Major improvement, security handling, file handling +fixes

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>