Upgrade DB, previews, and student UX flow

.env.example

@@ -1,5 +1,11 @@
 SECRET_KEY=change_me
-DATABASE_URL=sqlite:///app.db
+# For Hugging Face Spaces persistence (recommended):
+# DATABASE_URL=sqlite:////data/porahobebot.db
+DATABASE_URL=
+# Optional SQLite Cloud direct config (used if DATABASE_URL is empty)
+SQLITECLOUD_HOST=
+SQLITECLOUD_DB_NAME=porahobe
+SQLITECLOUD_API_KEY=
 
 GOOGLE_CLIENT_ID=
 GOOGLE_CLIENT_SECRET=

README.md

@@ -82,8 +82,8 @@ Create a `.env` file in the project root directory. You can copy the structure f
 # Core Security
 SECRET_KEY=your_secure_random_key
 
-# Database
-DATABASE_URL=sqlite:///app.db
+# Database (for Hugging Face Spaces persistence)
+DATABASE_URL=sqlite:////data/porahobebot.db
 
 # Authentication (Optional if not using OAuth)
 GOOGLE_CLIENT_ID=your_google_client_id

README_SPACES.md

@@ -11,7 +11,10 @@ Flask application for sharing and organizing notes.
 ## Environment variables (Space Settings -> Variables and secrets)
 
 - `SECRET_KEY`
-- `DATABASE_URL` (optional, defaults to SQLite)
+- `DATABASE_URL` (recommended: `sqlite:////data/porahobebot.db`)
+- `SQLITECLOUD_HOST` (optional alternative to `DATABASE_URL`)
+- `SQLITECLOUD_DB_NAME` (optional, default `porahobe`)
+- `SQLITECLOUD_API_KEY` (optional alternative to `DATABASE_URL`)
 - `GOOGLE_CLIENT_ID`
 - `GOOGLE_CLIENT_SECRET`
 - `DISCORD_CLIENT_ID`
@@ -28,6 +31,10 @@ Flask application for sharing and organizing notes.
 ## Notes
 
 - The app listens on port `7860`.
+- Enable Persistent Storage for your Space and keep the database on `/data`.
+- If `DATABASE_URL` is unset, the app now auto-uses `/data/porahobebot.db` when `/data` exists.
+- Startup includes a one-time copy from legacy paths (`app.db`, `instance/app.db`) into `/data/porahobebot.db` if the `/data` DB is missing.
+- If you cannot use Space persistent storage, set `SQLITECLOUD_HOST`, `SQLITECLOUD_DB_NAME`, and `SQLITECLOUD_API_KEY`.
 - DB migrations run at startup by default. Set `RUN_MIGRATIONS=0` to skip.
 - If `migrations/` is missing, startup falls back to `db.create_all()` by default.
 - Set `RUN_CREATE_ALL_IF_NO_MIGRATIONS=0` to disable that fallback.

app/blueprints/notes.py

@@ -10,6 +10,9 @@ from flask_login import current_user, login_required
 from werkzeug.utils import secure_filename
 from sqlalchemy import or_
 import requests
+import os
+import re
+from urllib.parse import parse_qs, quote_plus, urlparse
 
 from app.extensions import db
 from app.models import Note, NoteType, Subject
@@ -17,6 +20,120 @@ from app.utilities.s3 import upload_to_s3, generate_presigned_url
 
 notes_bp = Blueprint("notes", __name__)
 
+IMAGE_EXTENSIONS = {"jpg", "jpeg", "png", "gif", "webp", "svg", "bmp"}
+VIDEO_EXTENSIONS = {"mp4", "webm", "ogg", "mov", "m4v"}
+AUDIO_EXTENSIONS = {"mp3", "wav", "ogg", "m4a", "aac", "flac"}
+TEXT_EXTENSIONS = {
+    "txt",
+    "md",
+    "csv",
+    "json",
+    "log",
+    "py",
+    "js",
+    "ts",
+    "html",
+    "css",
+}
+DOC_EXTENSIONS = {"doc", "docx", "ppt", "pptx", "xls", "xlsx"}
+
+
+def _extract_extension(path_or_url):
+    parsed = urlparse(path_or_url or "")
+    filename = os.path.basename(parsed.path or path_or_url or "")
+    if "." not in filename:
+        return ""
+    return filename.rsplit(".", 1)[-1].lower()
+
+
+def _extract_youtube_embed_url(raw_url):
+    try:
+        parsed = urlparse(raw_url)
+    except Exception:
+        return None
+
+    host = parsed.netloc.lower().replace("www.", "").replace("m.", "")
+    query = parse_qs(parsed.query)
+    path_parts = [p for p in parsed.path.split("/") if p]
+    video_id = None
+    playlist_id = (query.get("list") or [None])[0]
+    start_raw = (query.get("t") or query.get("start") or [None])[0]
+
+    if host == "youtu.be" and path_parts:
+        video_id = path_parts[0]
+    elif host.endswith("youtube.com"):
+        if parsed.path == "/watch":
+            video_id = (query.get("v") or [None])[0]
+        elif path_parts and path_parts[0] in {"shorts", "embed", "live", "v"}:
+            video_id = path_parts[1] if len(path_parts) > 1 else None
+
+    if not video_id and not playlist_id:
+        return None
+
+    start_seconds = 0
+    if start_raw:
+        if str(start_raw).isdigit():
+            start_seconds = int(start_raw)
+        else:
+            match = re.match(
+                r"^(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?$", str(start_raw).strip()
+            )
+            if match:
+                hours = int(match.group(1) or 0)
+                minutes = int(match.group(2) or 0)
+                seconds = int(match.group(3) or 0)
+                start_seconds = (hours * 3600) + (minutes * 60) + seconds
+
+    if video_id:
+        embed_url = f"https://www.youtube.com/embed/{video_id}"
+        params = []
+        if playlist_id:
+            params.append(f"list={playlist_id}")
+        if start_seconds > 0:
+            params.append(f"start={start_seconds}")
+        return f"{embed_url}?{'&'.join(params)}" if params else embed_url
+
+    return f"https://www.youtube.com/embed/videoseries?list={playlist_id}"
+
+
+def _build_preview_data(note):
+    if note.original_link:
+        external_url = note.link
+        youtube_embed = _extract_youtube_embed_url(external_url)
+        ext = _extract_extension(external_url)
+
+        if youtube_embed:
+            return {"kind": "youtube", "url": external_url, "embed_url": youtube_embed}
+        if ext == "pdf":
+            return {"kind": "iframe", "url": external_url}
+        return {"kind": "external", "url": external_url}
+
+    ext = _extract_extension(note.link)
+    file_url = note.presigned_url
+    filename = os.path.basename(note.link or "")
+
+    if ext in IMAGE_EXTENSIONS:
+        kind = "image"
+    elif ext == "pdf":
+        kind = "pdf"
+    elif ext in VIDEO_EXTENSIONS:
+        kind = "video"
+    elif ext in AUDIO_EXTENSIONS:
+        kind = "audio"
+    elif ext in TEXT_EXTENSIONS:
+        kind = "text"
+    elif ext in DOC_EXTENSIONS:
+        kind = "document"
+    else:
+        kind = "download"
+
+    data = {"kind": kind, "url": file_url, "filename": filename, "ext": ext}
+    if kind == "document":
+        data["viewer_url"] = (
+            f"https://docs.google.com/gview?embedded=1&url={quote_plus(file_url)}"
+        )
+    return data
+
 
 @notes_bp.route("/upload", methods=["GET", "POST"])
 @login_required
@@ -142,6 +259,7 @@ def list():
     subject_id = request.args.get("subject")
     note_type_id = request.args.get("note_type")
     user_id = request.args.get("user")
+    sort = request.args.get("sort", "newest")
 
     query = Note.query
 
@@ -159,7 +277,14 @@ def list():
     if user_id:
         query = query.filter_by(user_id=user_id)
 
-    notes = query.order_by(Note.created_at.desc()).all()
+    if sort == "oldest":
+        query = query.order_by(Note.created_at.asc())
+    elif sort == "title":
+        query = query.order_by(Note.title.asc())
+    else:
+        query = query.order_by(Note.created_at.desc())
+
+    notes = query.all()
 
     for note in notes:
         if note.link and not note.original_link:
@@ -179,6 +304,7 @@ def list():
         selected_subject=subject_id,
         selected_note_type=note_type_id,
         selected_user=user_id,
+        selected_sort=sort,
     )
 
 
@@ -192,7 +318,8 @@ def preview(id):
     else:
         note.presigned_url = note.link
 
-    return render_template("note_preview.html", note=note)
+    preview_data = _build_preview_data(note)
+    return render_template("note_preview.html", note=note, preview=preview_data)
 
 
 @notes_bp.route("/share/<int:id>")
@@ -203,6 +330,56 @@ def share(id):
     return render_template("note_share.html", note=note, share_url=share_url)
 
 
+@notes_bp.route("/edit/<int:id>", methods=["GET", "POST"])
+@login_required
+def edit(id):
+    note = Note.query.get_or_404(id)
+
+    if note.user_id != current_user.id:
+        return redirect(url_for("notes.my_notes"))
+
+    if request.method == "POST":
+        subject_id = request.form.get("subject")
+        note_type_name = request.form.get("note_type", "").strip()
+        title = request.form.get("title", "").strip()
+        description = request.form.get("description", "").strip()
+        external_link = request.form.get("external_link", "").strip()
+
+        if not subject_id or not note_type_name or not title:
+            return redirect(url_for("notes.edit", id=note.id))
+
+        subject = Subject.query.get(subject_id)
+        if not subject:
+            return redirect(url_for("notes.edit", id=note.id))
+
+        note_type_obj = NoteType.query.filter_by(name=note_type_name).first()
+        if not note_type_obj:
+            note_type_obj = NoteType(name=note_type_name)
+            db.session.add(note_type_obj)
+            db.session.flush()
+
+        note.title = title
+        note.description = description or None
+        note.subject_id = subject.id
+        note.note_type_id = note_type_obj.id
+
+        if note.original_link is not None and external_link:
+            note.link = external_link
+            note.original_link = external_link
+
+        db.session.commit()
+        return redirect(url_for("notes.preview", id=note.id))
+
+    subjects = Subject.query.order_by(Subject.name.asc()).all()
+    note_types = NoteType.query.order_by(NoteType.name.asc()).all()
+    return render_template(
+        "note_edit.html",
+        note=note,
+        subjects=subjects,
+        note_types=note_types,
+    )
+
+
 @notes_bp.route("/my-notes")
 @login_required
 def my_notes():

app/templates/my_notes.html

@@ -14,7 +14,7 @@
     {% if notes %}
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
         {% for note in notes %}
-        <div class="glass p-5 rounded-xl card-hover group">
+        <div class="glass p-5 rounded-xl card-hover group cursor-pointer note-card" data-href="{{ url_for('notes.preview', id=note.id) }}" role="link" tabindex="0">
             <div class="flex items-start justify-between mb-3">
                 <div class="flex-1">
                     <h3 class="font-display text-lg font-bold mb-1 group-hover:text-blue-400 transition truncate">
@@ -40,8 +40,8 @@
             </div>
             
             <div class="flex gap-2">
-                <a href="{{ url_for('notes.preview', id=note.id) }}" class="flex-1 bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 font-mono text-[10px] text-center hover:bg-white/10 transition">
-                    Preview
+                <a href="{{ url_for('notes.edit', id=note.id) }}" class="flex-1 bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 font-mono text-[10px] text-center hover:bg-white/10 transition">
+                    Edit
                 </a>
                 <a href="{{ url_for('notes.share', id=note.id) }}" class="flex-1 bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 font-mono text-[10px] text-center hover:bg-white/10 transition">
                     Share
@@ -64,4 +64,23 @@
     </div>
     {% endif %}
 </div>
-{% endblock %}
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        const cards = document.querySelectorAll('.note-card[data-href]');
+        cards.forEach((card) => {
+            card.addEventListener('click', (event) => {
+                if (event.target.closest('a, button, input, select, textarea, form, label')) {
+                    return;
+                }
+                window.location.href = card.dataset.href;
+            });
+            card.addEventListener('keydown', (event) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault();
+                    window.location.href = card.dataset.href;
+                }
+            });
+        });
+    });
+</script>
+{% endblock %}

app/templates/note_edit.html

@@ -0,0 +1,67 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="max-w-3xl mx-auto px-4 sm:px-6">
+  <div class="mb-8">
+    <h1 class="font-display text-4xl sm:text-5xl font-bold tracking-tight mb-2">
+      <span class="bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
+        Edit Note
+      </span>
+    </h1>
+    <p class="font-mono text-sm text-gray-400">Update title, tags, and details</p>
+  </div>
+
+  <form method="POST" class="glass p-6 rounded-2xl space-y-5">
+    <div>
+      <label class="block font-mono text-sm text-gray-300 mb-2">Title</label>
+      <input type="text" name="title" required value="{{ note.title }}"
+        class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 font-mono text-sm focus:outline-none focus:border-blue-500 transition">
+    </div>
+
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+      <div>
+        <label class="block font-mono text-sm text-gray-300 mb-2">Subject Tag</label>
+        <select name="subject" required
+          class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 font-mono text-sm focus:outline-none focus:border-blue-500 transition">
+          {% for subject in subjects %}
+          <option value="{{ subject.id }}" {% if note.subject_id == subject.id %}selected{% endif %}>
+            {{ subject.name }}
+          </option>
+          {% endfor %}
+        </select>
+      </div>
+
+      <div>
+        <label class="block font-mono text-sm text-gray-300 mb-2">Type Tag</label>
+        <input type="text" name="note_type" required value="{{ note.note_type.name }}"
+          class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 font-mono text-sm focus:outline-none focus:border-blue-500 transition">
+      </div>
+    </div>
+
+    <div>
+      <label class="block font-mono text-sm text-gray-300 mb-2">Description</label>
+      <textarea name="description" rows="4"
+        class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 font-mono text-sm focus:outline-none focus:border-blue-500 transition">{{ note.description or '' }}</textarea>
+    </div>
+
+    {% if note.original_link %}
+    <div>
+      <label class="block font-mono text-sm text-gray-300 mb-2">External Link</label>
+      <input type="url" name="external_link" value="{{ note.original_link }}"
+        class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 font-mono text-sm focus:outline-none focus:border-blue-500 transition">
+    </div>
+    {% endif %}
+
+    <div class="flex flex-wrap gap-3 pt-2">
+      <button type="submit"
+        class="btn-magnetic glass px-8 py-3 rounded-xl font-mono font-semibold border-2 border-blue-500/50 hover:border-blue-400 animate-glow">
+        Save Changes
+      </button>
+      <a href="{{ url_for('notes.preview', id=note.id) }}"
+        class="btn-magnetic glass px-8 py-3 rounded-xl font-mono font-semibold hover:bg-white/5">
+        Cancel
+      </a>
+    </div>
+  </form>
+</div>
+{% endblock %}

app/templates/note_preview.html

@@ -42,47 +42,87 @@
   </div>
 
   <!-- Preview Area -->
-  <div class="glass p-4 sm:p-8 rounded-2xl mb-8" id="preview-container">
-    {% if note.original_link %}
-    <div id="link-preview" class="text-center py-8" data-url="{{ note.presigned_url }}">
-      <p class="font-mono text-sm text-gray-400 mb-4">External Link</p>
-      <a href="{{ note.presigned_url }}" target="_blank"
-        class="inline-flex items-center gap-2 font-mono text-blue-400 hover:text-blue-300 transition break-all">
-        {{ note.presigned_url }}
-        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-            d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
-        </svg>
-      </a>
+  <div class="grid grid-cols-1 xl:grid-cols-4 gap-4 mb-8">
+    <div class="glass p-4 sm:p-8 rounded-2xl xl:col-span-3" id="preview-container">
+      {% if preview.kind == 'youtube' %}
+      <div class="rounded-2xl overflow-hidden bg-black/40 border border-white/10">
+        <iframe src="{{ preview.embed_url }}" class="w-full aspect-video" frameborder="0"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowfullscreen loading="lazy"></iframe>
+      </div>
+      {% elif preview.kind == 'image' %}
+      <img src="{{ preview.url }}" class="w-full rounded-xl object-contain max-h-[80vh]" alt="{{ note.title }}" loading="lazy">
+      {% elif preview.kind == 'pdf' %}
+      <iframe src="{{ preview.url }}" class="w-full h-[75vh] rounded-xl bg-white/5"></iframe>
+      {% elif preview.kind == 'video' %}
+      <video controls class="w-full rounded-xl bg-black/40">
+        <source src="{{ preview.url }}">
+      </video>
+      {% elif preview.kind == 'audio' %}
+      <div class="glass rounded-xl p-6">
+        <audio controls class="w-full">
+          <source src="{{ preview.url }}">
+        </audio>
+      </div>
+      {% elif preview.kind == 'text' %}
+      <iframe src="{{ preview.url }}" class="w-full h-[75vh] rounded-xl bg-white/5"></iframe>
+      {% elif preview.kind == 'document' %}
+      <iframe src="{{ preview.viewer_url }}" class="w-full h-[75vh] rounded-xl bg-white/5"></iframe>
+      {% elif preview.kind == 'iframe' %}
+      <iframe src="{{ preview.url }}" class="w-full h-[75vh] rounded-xl bg-white/5"></iframe>
+      {% else %}
+      <div class="text-center py-12">
+        <p class="font-mono text-gray-300 mb-3">Inline preview is not available for this resource.</p>
+        <a href="{{ preview.url }}" target="_blank"
+          class="inline-flex items-center gap-2 font-mono text-sm text-blue-400 hover:text-blue-300 transition break-all">
+          Open in new tab
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+              d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+          </svg>
+        </a>
+      </div>
+      {% endif %}
     </div>
-    {% else %}
-    {% set ext = note.link.split('.')[-1].lower() %}
 
-    {% if ext in ['jpg', 'jpeg', 'png', 'gif', 'webp'] %}
-    <img src="{{ note.presigned_url }}" class="w-full rounded-xl" alt="{{ note.title }}">
-    {% elif ext == 'pdf' %}
-    <iframe src="{{ note.presigned_url }}" class="w-full h-[600px] rounded-xl bg-white/5"></iframe>
-    {% elif ext in ['mp4', 'webm', 'ogg'] %}
-    <video controls class="w-full rounded-xl">
-      <source src="{{ note.presigned_url }}" type="video/{{ ext }}">
-    </video>
-    {% elif ext in ['mp3', 'wav', 'ogg'] %}
-    <audio controls class="w-full">
-      <source src="{{ note.presigned_url }}" type="audio/{{ ext }}">
-    </audio>
-    {% elif ext in ['txt', 'md'] %}
-    <iframe src="{{ note.presigned_url }}" class="w-full h-[600px] rounded-xl bg-white/5"></iframe>
-    {% else %}
-    <div class="text-center py-12">
-      <p class="font-mono text-gray-400 mb-4">Preview not available for this file type</p>
-      <p class="font-mono text-sm text-gray-500">{{ note.link.split('/')[-1] }}</p>
-    </div>
-    {% endif %}
-    {% endif %}
+    <aside class="glass rounded-2xl p-5 space-y-4">
+      <h2 class="font-display text-xl">Preview Details</h2>
+      <div class="space-y-3 font-mono text-xs text-gray-300">
+        <div class="flex items-center justify-between gap-3">
+          <span class="text-gray-500">Mode</span>
+          <span class="uppercase tracking-wide">{{ preview.kind }}</span>
+        </div>
+        {% if preview.ext %}
+        <div class="flex items-center justify-between gap-3">
+          <span class="text-gray-500">File Type</span>
+          <span class="uppercase tracking-wide">{{ preview.ext }}</span>
+        </div>
+        {% endif %}
+        {% if preview.filename %}
+        <div class="pt-2">
+          <p class="text-gray-500 mb-1">Filename</p>
+          <p class="break-words text-gray-300">{{ preview.filename }}</p>
+        </div>
+        {% endif %}
+      </div>
+
+      {% if preview.url %}
+      <a href="{{ preview.url }}" target="_blank"
+        class="w-full inline-flex justify-center items-center gap-2 px-3 py-2 rounded-lg bg-white/5 border border-white/10 font-mono text-xs hover:bg-white/10 transition">
+        Open Raw Link
+      </a>
+      {% endif %}
+    </aside>
   </div>
 
   <!-- Actions -->
   <div class="flex gap-4">
+    {% if current_user.id == note.user_id %}
+    <a href="{{ url_for('notes.edit', id=note.id) }}"
+      class="btn-magnetic glass px-8 py-4 rounded-xl font-mono font-semibold hover:bg-white/5 text-center">
+      Edit
+    </a>
+    {% endif %}
     {% if note.presigned_url %}
     {% if note.original_link %}
     <a href="{{ note.presigned_url }}" target="_blank"
@@ -102,43 +142,4 @@
     </a>
   </div>
 </div>
-
-<script>
-  document.addEventListener('DOMContentLoaded', function () {
-    const linkPreview = document.getElementById('link-preview');
-    if (linkPreview) {
-      const url = linkPreview.getAttribute('data-url');
-
-      // Regex for Playlist
-      const playlistRegex = /[?&]list=([^#\&\?]+)/;
-      const playlistMatch = url.match(playlistRegex);
-
-      // Regex for Video
-      const videoRegex = /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/i;
-      const videoMatch = url.match(videoRegex);
-
-      let embedUrl = null;
-
-      if (playlistMatch && playlistMatch[1]) {
-        embedUrl = `https://www.youtube.com/embed/videoseries?list=${playlistMatch[1]}`;
-      } else if (videoMatch && videoMatch[1]) {
-        embedUrl = `https://www.youtube.com/embed/${videoMatch[1]}`;
-      }
-
-      if (embedUrl) {
-        const iframe = document.createElement('iframe');
-        iframe.setAttribute('src', embedUrl);
-        iframe.setAttribute('class', 'w-full aspect-video rounded-xl shadow-lg');
-        iframe.setAttribute('frameborder', '0');
-        iframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture');
-        iframe.setAttribute('allowfullscreen', 'true');
-        iframe.setAttribute('loading', 'eager');
-
-        linkPreview.innerHTML = '';
-        linkPreview.appendChild(iframe);
-        linkPreview.classList.remove('text-center', 'py-8');
-      }
-    }
-  });
-</script>
 {% endblock %}

app/templates/notes_list.html

@@ -13,7 +13,7 @@
     
     <!-- Search & Filter -->
     <form method="GET" class="glass p-4 rounded-xl mb-8">
-        <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
+        <div class="grid grid-cols-1 md:grid-cols-5 gap-3">
             <input type="text" name="search" placeholder="Search..." value="{{ search or '' }}"
                 class="bg-white/5 border border-white/10 rounded-lg px-3 py-2 font-mono text-xs focus:outline-none focus:border-blue-500 transition">
             
@@ -36,6 +36,13 @@
                     </option>
                 {% endfor %}
             </select>
+
+            <select name="sort"
+                class="bg-white/5 border border-white/10 rounded-lg px-3 py-2 font-mono text-xs focus:outline-none focus:border-blue-500 transition">
+                <option value="newest" {% if selected_sort == 'newest' %}selected{% endif %}>Newest first</option>
+                <option value="oldest" {% if selected_sort == 'oldest' %}selected{% endif %}>Oldest first</option>
+                <option value="title" {% if selected_sort == 'title' %}selected{% endif %}>Title A-Z</option>
+            </select>
             
             <div class="flex gap-2">
                 <button type="submit" class="flex-1 bg-blue-500/20 border border-blue-500/50 rounded-lg px-3 py-2 font-mono text-xs hover:bg-blue-500/30 transition">
@@ -52,7 +59,7 @@
     {% if notes %}
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
         {% for note in notes %}
-        <div class="glass p-5 rounded-xl card-hover group">
+        <div class="glass p-5 rounded-xl card-hover group cursor-pointer note-card" data-href="{{ url_for('notes.preview', id=note.id) }}" role="link" tabindex="0">
             <div class="flex items-start justify-between mb-3">
                 <div class="flex-1">
                     <h3 class="font-display text-lg font-bold mb-1 group-hover:text-blue-400 transition truncate">
@@ -65,6 +72,9 @@
                         <span class="px-2 py-0.5 bg-purple-500/20 border border-purple-500/50 rounded-md font-mono text-[10px]">
                             {{ note.note_type.name }}
                         </span>
+                        <span class="px-2 py-0.5 bg-white/5 border border-white/10 rounded-md font-mono text-[10px] text-gray-400">
+                            {% if note.original_link %}Link{% else %}File{% endif %}
+                        </span>
                     </div>
                 </div>
             </div>
@@ -81,10 +91,7 @@
             </div>
             
             <div class="flex gap-2">
-                <a href="{{ url_for('notes.preview', id=note.id) }}" class="flex-1 bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 font-mono text-[10px] text-center hover:bg-white/10 transition">
-                    Preview
-                </a>
-                <a href="{{ url_for('notes.share', id=note.id) }}" class="flex-1 bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 font-mono text-[10px] text-center hover:bg-white/10 transition">
+                <a href="{{ url_for('notes.share', id=note.id) }}" class="flex-1 bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 font-mono text-[10px] text-center hover:bg-white/10 transition interactive-link">
                     Share
                 </a>
             </div>
@@ -97,4 +104,23 @@
     </div>
     {% endif %}
 </div>
-{% endblock %}
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        const cards = document.querySelectorAll('.note-card[data-href]');
+        cards.forEach((card) => {
+            card.addEventListener('click', (event) => {
+                if (event.target.closest('a, button, input, select, textarea, form, label')) {
+                    return;
+                }
+                window.location.href = card.dataset.href;
+            });
+            card.addEventListener('keydown', (event) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault();
+                    window.location.href = card.dataset.href;
+                }
+            });
+        });
+    });
+</script>
+{% endblock %}

app/templates/upload.html

@@ -11,6 +11,23 @@
         <p class="font-mono text-sm text-gray-400">Share your knowledge with the community</p>
     </div>
     
+    <div class="glass p-4 rounded-xl mb-6">
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-3 font-mono text-xs text-gray-300">
+            <div class="p-3 bg-white/5 rounded-lg border border-white/10">
+                <p class="text-blue-300 mb-1">Step 1</p>
+                <p>Set a clear title and choose the right subject tag.</p>
+            </div>
+            <div class="p-3 bg-white/5 rounded-lg border border-white/10">
+                <p class="text-blue-300 mb-1">Step 2</p>
+                <p>Upload files or paste one/many links (one per line).</p>
+            </div>
+            <div class="p-3 bg-white/5 rounded-lg border border-white/10">
+                <p class="text-blue-300 mb-1">Step 3</p>
+                <p>Add short notes so other students know what this contains.</p>
+            </div>
+        </div>
+    </div>
+
     <form method="POST" enctype="multipart/form-data" class="space-y-6">
         <div class="glass p-8 rounded-2xl space-y-6">
             <!-- Title -->
@@ -64,6 +81,7 @@
             <!-- Link Input -->
             <div id="link_input" style="display: none;">
                 <label class="block font-mono text-sm text-gray-400 mb-2">Links (one per line)</label>
+                <p class="font-mono text-xs text-gray-500 mb-2">YouTube videos, playlists, docs, and normal URLs are supported.</p>
                 <textarea name="links" rows="5"
                     class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 font-mono focus:outline-none focus:border-blue-500 transition"></textarea>
             </div>
@@ -87,6 +105,7 @@
     const dropzone = document.getElementById('file_dropzone');
     const filesField = document.getElementById('files');
     const fileCount = document.getElementById('selected_file_count');
+    const linksField = document.querySelector('textarea[name="links"]');
 
     function updateSelectedFileText(files) {
         if (!files || files.length === 0) {
@@ -153,5 +172,12 @@
     });
 
     toggleInputType();
+
+    linksField.addEventListener('focus', () => {
+        if (!noteTypeInput.value) {
+            noteTypeInput.value = 'link';
+            toggleInputType();
+        }
+    });
 </script>
 {% endblock %}

app/utilities/s3.py

@@ -1,10 +1,15 @@
 import mimetypes
+import time
+from threading import Lock
 
 import boto3
 from botocore.config import Config
 from flask import current_app
 from flask_login import current_user
 
+_PRESIGNED_URL_CACHE = {}
+_CACHE_LOCK = Lock()
+
 
 def get_s3_client():
     s3_config = Config(
@@ -26,6 +31,14 @@ def get_s3_client():
 
 
 def generate_presigned_url(key, expiration=3600):
+    cache_key = (key, int(expiration))
+    now = time.time()
+
+    with _CACHE_LOCK:
+        cached = _PRESIGNED_URL_CACHE.get(cache_key)
+        if cached and cached["expires_at"] > now:
+            return cached["url"]
+
     s3_client = get_s3_client()
     bucket = current_app.config["S3_BUCKET_NAME"]
 
@@ -35,6 +48,19 @@ def generate_presigned_url(key, expiration=3600):
         ExpiresIn=expiration,
     )
 
+    with _CACHE_LOCK:
+        # Keep a short buffer to avoid serving stale links close to expiry.
+        _PRESIGNED_URL_CACHE[cache_key] = {
+            "url": presigned_url,
+            "expires_at": now + max(1, int(expiration) - 30),
+        }
+        # Opportunistic cleanup to avoid unbounded growth.
+        expired_keys = [
+            k for k, v in _PRESIGNED_URL_CACHE.items() if v["expires_at"] <= now
+        ]
+        for expired_key in expired_keys:
+            _PRESIGNED_URL_CACHE.pop(expired_key, None)
+
     return presigned_url
 
 

config.py

@@ -1,10 +1,67 @@
 import os
+from urllib.parse import parse_qs, urlparse, urlunparse
+
+
+def _normalize_sqlitecloud_uri(raw_uri):
+    uri = (raw_uri or "").strip()
+    if not uri:
+        return ""
+
+    # If a malformed value includes extra text before sqlitecloud://, keep only
+    # the driver URL portion.
+    idx = uri.find("sqlitecloud://")
+    if idx > 0:
+        uri = uri[idx:]
+
+    if not uri.startswith("sqlitecloud://"):
+        return uri
+
+    parsed = urlparse(uri)
+    query = parse_qs(parsed.query)
+
+    # Some copied strings accidentally place the actual URL in the apikey query.
+    apikey_values = query.get("apikey", [])
+    if apikey_values and apikey_values[0].startswith("sqlitecloud://"):
+        nested = apikey_values[0]
+        nested_idx = nested.find("sqlitecloud://")
+        if nested_idx >= 0:
+            return _normalize_sqlitecloud_uri(nested[nested_idx:])
+
+    db_name = os.environ.get("SQLITECLOUD_DB_NAME", "").strip()
+    path = parsed.path or ""
+    if path in ("", "/") and db_name:
+        path = f"/{db_name}"
+
+    return urlunparse(
+        (parsed.scheme, parsed.netloc, path, parsed.params, parsed.query, parsed.fragment)
+    )
+
+
+def _default_database_uri():
+    explicit = os.environ.get("DATABASE_URL")
+    if explicit:
+        return _normalize_sqlitecloud_uri(explicit)
+
+    sqlitecloud_host = os.environ.get("SQLITECLOUD_HOST", "").strip()
+    sqlitecloud_api_key = os.environ.get("SQLITECLOUD_API_KEY", "").strip()
+    sqlitecloud_db_name = os.environ.get("SQLITECLOUD_DB_NAME", "porahobe").strip()
+    if sqlitecloud_host and sqlitecloud_api_key:
+        host = sqlitecloud_host.replace("sqlitecloud://", "").replace("https://", "")
+        host = host.split("?")[0].split("/")[0].split(":443")[0]
+        return f"sqlitecloud://{host}:8860/{sqlitecloud_db_name}?apikey={sqlitecloud_api_key}"
+
+    if os.path.isdir("/data"):
+        # Hugging Face Spaces persistent volume.
+        return "sqlite:////data/porahobebot.db"
+
+    # Local/dev fallback.
+    return "sqlite:///instance/app.db"
 
 
 class Config:
     SECRET_KEY = os.environ.get("SECRET_KEY") or "dev-secret-key"
 
-    SQLALCHEMY_DATABASE_URI = os.environ.get("DATABASE_URL") or "sqlite:///app.db"
+    SQLALCHEMY_DATABASE_URI = _default_database_uri()
     SQLALCHEMY_TRACK_MODIFICATIONS = False
 
     # Google OAuth

docker-entrypoint.sh

@@ -3,6 +3,20 @@ set -e
 
 mkdir -p instance
 
+# One-time migration for Spaces: move legacy ephemeral SQLite DB to persistent /data.
+if [ -d "/data" ]; then
+    TARGET_DB="/data/porahobebot.db"
+    if [ ! -f "$TARGET_DB" ]; then
+        for CANDIDATE in "/home/user/app/app.db" "/home/user/app/instance/app.db" "app.db" "instance/app.db"; do
+            if [ -f "$CANDIDATE" ]; then
+                echo "Migrating legacy database from $CANDIDATE to $TARGET_DB"
+                cp "$CANDIDATE" "$TARGET_DB"
+                break
+            fi
+        done
+    fi
+fi
+
 if [ "${RUN_MIGRATIONS:-1}" = "1" ]; then
     if [ -d migrations ]; then
         flask db upgrade

pyproject.toml

@@ -7,6 +7,7 @@ requires-python = ">=3.13"
 dependencies = [
     "flask>=3.1.2",
     "flask-sqlalchemy>=3.1.1",
+    "sqlalchemy-sqlitecloud",
     "flask-migrate>=4.0.5",
     "requests-oauthlib>=1.3.1",
     "oauthlib>=3.2.2",

requirements.txt

@@ -1,5 +1,6 @@
 flask>=3.1.2
 flask-sqlalchemy>=3.1.1
+sqlalchemy-sqlitecloud
 flask-migrate>=4.0.5
 requests-oauthlib>=1.3.1
 oauthlib>=3.2.2