feat(api): add API documentation and ShareX integration

- Add an API documentation page with curl and ShareX examples.
- Implement a dynamic ShareX configuration endpoint (`/api/v1/sharex/warpbox-anonymous.sxcu`) that generates a `.sxcu` file pre-configured with the instance's base URL.
- Update anonymous uploads to return a private management link (`manageUrl`) and a deletion link (`deleteUrl`) in JSON responses.
- Update README with details on Stage 3 Anonymous Integrations.
- Add styling for the new API documentation view and management details.

backend/static/css/app.css

@@ -425,6 +425,18 @@ button {
   gap: 0.5rem;
 }
 
+.manage-link {
+  margin: 0.9rem 0 0;
+  color: var(--muted-foreground);
+  font-size: 0.78rem;
+  text-align: left;
+}
+
+.manage-link a {
+  color: var(--foreground);
+  font-weight: 600;
+}
+
 .result-list,
 .download-list {
   display: grid;
@@ -457,7 +469,8 @@ button {
 
 .result-item strong,
 .download-item strong,
-code {
+.result-item code,
+.download-item code {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -483,7 +496,8 @@ code {
 
 .result-item small,
 .download-item small,
-code {
+.result-item code,
+.download-item code {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -495,6 +509,24 @@ code {
 
 code {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  color: var(--muted-foreground);
+}
+
+pre {
+  overflow-x: auto;
+  margin: 0.8rem 0 0;
+  border: 1px solid var(--border);
+  border-radius: calc(var(--radius) - 0.125rem);
+  background: var(--background);
+  padding: 0.9rem;
+  text-align: left;
+}
+
+pre code {
+  display: block;
+  margin: 0;
+  overflow: visible;
+  white-space: pre;
 }
 
 .download-view {
@@ -729,6 +761,39 @@ code {
   gap: 0.75rem;
 }
 
+.manage-details {
+  display: grid;
+  gap: 0.5rem;
+  margin: 1rem 0 0;
+  text-align: left;
+}
+
+.manage-details div {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  border-bottom: 1px solid var(--border);
+  padding: 0.45rem 0;
+}
+
+.manage-details dt,
+.manage-details dd {
+  margin: 0;
+  min-width: 0;
+}
+
+.manage-details dt {
+  color: var(--muted-foreground);
+  font-size: 0.78rem;
+  font-weight: 600;
+}
+
+.manage-details dd {
+  color: var(--foreground);
+  font-size: 0.84rem;
+  text-align: right;
+}
+
 .preview-stage {
   overflow: hidden;
   margin-bottom: 1rem;
@@ -777,6 +842,105 @@ code {
   padding: 2rem 0 3rem;
 }
 
+.docs-view {
+  width: min(72rem, calc(100% - 2rem));
+  margin: 0 auto;
+  padding: 2rem 0 3rem;
+}
+
+.docs-header {
+  max-width: 44rem;
+}
+
+.docs-header p {
+  margin: 0.55rem 0 0;
+  color: var(--muted-foreground);
+  line-height: 1.55;
+}
+
+.docs-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+  margin-top: 1.5rem;
+}
+
+.docs-card {
+  box-shadow: none;
+}
+
+.docs-card h2 {
+  margin: 0;
+  font-size: 1rem;
+}
+
+.docs-card p {
+  margin: 0.65rem 0 0;
+  color: var(--muted-foreground);
+  font-size: 0.88rem;
+  line-height: 1.55;
+}
+
+.docs-card-wide {
+  grid-column: 1 / -1;
+}
+
+.endpoint-list,
+.field-grid {
+  display: grid;
+  gap: 0.65rem;
+  margin: 1rem 0 0;
+}
+
+.endpoint-list div,
+.field-grid {
+  min-width: 0;
+}
+
+.endpoint-list div {
+  display: grid;
+  grid-template-columns: 7rem minmax(0, 1fr);
+  gap: 0.75rem;
+  align-items: baseline;
+}
+
+.endpoint-list dt,
+.endpoint-list dd {
+  margin: 0;
+  min-width: 0;
+}
+
+.endpoint-list dt,
+.field-grid span {
+  color: var(--muted-foreground);
+  font-size: 0.78rem;
+  font-weight: 700;
+}
+
+.endpoint-list dd code {
+  display: block;
+}
+
+.docs-steps {
+  margin: 0.85rem 0 0;
+  padding-left: 1.1rem;
+  color: var(--muted-foreground);
+  font-size: 0.88rem;
+  line-height: 1.6;
+}
+
+.docs-steps li + li {
+  margin-top: 0.35rem;
+}
+
+.field-grid {
+  grid-template-columns: minmax(8rem, 0.35fr) minmax(0, 1fr);
+}
+
+.field-grid p {
+  margin: 0;
+}
+
 .admin-header,
 .table-header {
   display: flex;
@@ -892,6 +1056,16 @@ code {
     grid-template-columns: 1fr;
   }
 
+  .docs-grid,
+  .field-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .endpoint-list div {
+    grid-template-columns: 1fr;
+    gap: 0.25rem;
+  }
+
   .result-actions {
     width: 100%;
   }

backend/static/js/app.js

@@ -12,6 +12,7 @@
   const totalProgressBar = document.querySelector("#total-progress-bar");
   const copyURL = document.querySelector("#copy-url");
   const openBox = document.querySelector("#open-box");
+  const manageLink = document.querySelector("#manage-link");
   const fileBrowser = document.querySelector("[data-file-browser]");
   const viewButtons = document.querySelectorAll("[data-view-button]");
   const previewImages = document.querySelector("[data-preview-images]");
@@ -228,6 +229,13 @@
     result.hidden = false;
     openBox.href = payload.boxUrl;
     resultMeta.textContent = `${payload.files.length} file${payload.files.length === 1 ? "" : "s"} · expires ${formatDate(payload.expiresAt)}`;
+    if (manageLink) {
+      const anchor = manageLink.querySelector("a");
+      manageLink.hidden = !payload.manageUrl;
+      if (anchor && payload.manageUrl) {
+        anchor.href = payload.manageUrl;
+      }
+    }
 
     resultList.replaceChildren();
     payload.files.forEach((file) => {