feat: add JSON export for snippet backup

app/routes.py

@@ -1,8 +1,9 @@
 from datetime import datetime, UTC
 from math import ceil
+import json
 
 from bson import ObjectId
-from flask import Blueprint, render_template, request, redirect, url_for, flash
+from flask import Blueprint, render_template, request, redirect, url_for, flash, jsonify
 
 from app.db import snippets_collection
 from app.forms import SnippetForm
@@ -136,3 +137,25 @@ def edit_snippet(id):
     form.tags.data = ", ".join(snippet.get("tags", []))
 
     return render_template("edit.html", form=form, snippet=snippet)
+
+
+@main.route("/export")
+def export_snippets():
+    """Export all snippets as downloadable JSON file"""
+    # Get all snippets from database
+    snippets = list(snippets_collection.find())
+
+    # Convert ObjectId to string for JSON compatibility
+    for snippet in snippets:
+        snippet["_id"] = str(snippet["_id"])
+        # Convert datetime objects to ISO format strings
+        if "created_at" in snippet:
+            snippet["created_at"] = snippet["created_at"].isoformat()
+        if "updated_at" in snippet:
+            snippet["updated_at"] = snippet["updated_at"].isoformat()
+
+    # Return JSON with download headers
+    return jsonify(snippets), 200, {
+        "Content-Disposition": "attachment; filename=stash_snip_backup.json",
+        "Content-Type": "application/json"
+    }

app/static/style.css

@@ -501,3 +501,34 @@ main { max-width: 1000px; margin: 0 auto; padding: 2rem 1.5rem; }
     border-color: var(--amber);
     color: var(--amber);
 }
+
+.export-section {
+    margin: 20px 0;
+    display: flex;
+    justify-content: flex-start;
+}
+
+.export-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 16px;
+    background-color: #4CAF50;
+    color: white;
+    text-decoration: none;
+    border-radius: 4px;
+    font-size: 14px;
+    font-weight: 500;
+    transition: background-color 0.3s ease;
+    border: none;
+    cursor: pointer;
+}
+
+.export-btn:hover {
+    background-color: #45a049;
+}
+
+.export-btn svg {
+    width: 16px;
+    height: 16px;
+}

app/templates/index.html

@@ -6,6 +6,17 @@ <h1>My Snips</h1>
     <p>{{ total_snippets }} snippet{{ 's' if total_snippets != 1 else '' }} found</p>
 </div>
 
+<div class="export-section">
+    <a href="/export" class="export-btn" title="Download all snippets as JSON">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+            <polyline points="7 10 12 15 17 10"/>
+            <line x1="12" y1="15" x2="12" y2="3"/>
+        </svg>
+        Export JSON
+    </a>
+</div>
+
 <div class="search-bar">
     <form method="GET" action="/">
         <input type="text" name="q" value="{{ query }}" placeholder="Search snips...">