Merge branch 'main' of https://git.louiscreates.com/tototomate123/cau-praktikum

app/__init__.py

@@ -26,9 +26,13 @@ def create_app():
 
     from .routes.auth import auth_bp
     from .routes.main import main_bp
+    from .routes.friends import friends_bp
+    from .routes.presence import presence_bp
 
-    app.register_blueprint(auth_bp)
     app.register_blueprint(main_bp)
+    app.register_blueprint(auth_bp)
+    app.register_blueprint(friends_bp)
+    app.register_blueprint(presence_bp)
 
     init_db(app)
 

app/db.py

@@ -66,4 +66,13 @@ def init_db(app):
         );
         """
         )
-        db.commit()
+
+        # Lightweight migration support for existing databases.
+        user_columns = {
+            row["name"]
+            for row in db.execute("PRAGMA table_info(users)").fetchall()
+        }
+        if "last_seen_at" not in user_columns:
+            db.execute("ALTER TABLE users ADD COLUMN last_seen_at TIMESTAMP")
+
+        db.commit()

app/routes/friends.py

@@ -0,0 +1,327 @@
+from flask import Blueprint, flash, jsonify, redirect, request, url_for
+from flask_login import current_user, login_required
+
+from app.db import get_db
+
+
+friends_bp = Blueprint("friends", __name__)
+
+
+def _get_friendship_row(user_a_id: int, user_b_id: int):
+    db = get_db()
+    return db.execute(
+        """
+        SELECT requester_id, addressee_id, status
+        FROM friendships
+        WHERE (requester_id = ? AND addressee_id = ?)
+           OR (requester_id = ? AND addressee_id = ?)
+        LIMIT 1
+        """,
+        (user_a_id, user_b_id, user_b_id, user_a_id),
+    ).fetchone()
+
+
+def _send_friend_request_or_accept(addressee_id: int):
+    if addressee_id == current_user.id:
+        return {"error": "cannot send a request to yourself"}, 400
+
+    db = get_db()
+    user_exists = db.execute(
+        "SELECT id FROM users WHERE id = ?",
+        (addressee_id,),
+    ).fetchone()
+    if not user_exists:
+        return {"error": "user not found"}, 404
+
+    friendship = _get_friendship_row(current_user.id, addressee_id)
+    if friendship:
+        if friendship["status"] == "accepted":
+            return {"error": "already friends"}, 409
+        if friendship["status"] == "blocked":
+            return {"error": "cannot send request"}, 403
+        if friendship["status"] == "pending":
+            if friendship["addressee_id"] == current_user.id:
+                db.execute(
+                    """
+                    UPDATE friendships
+                    SET status = 'accepted'
+                    WHERE requester_id = ? AND addressee_id = ?
+                    """,
+                    (addressee_id, current_user.id),
+                )
+                db.commit()
+                return {"status": "accepted"}, 200
+            return {"error": "request already sent"}, 409
+
+    db.execute(
+        """
+        INSERT INTO friendships (requester_id, addressee_id, status)
+        VALUES (?, ?, 'pending')
+        """,
+        (current_user.id, addressee_id),
+    )
+    db.commit()
+    return {"status": "pending"}, 201
+
+
+def _accept_friend_request(requester_id: int):
+    db = get_db()
+    updated = db.execute(
+        """
+        UPDATE friendships
+        SET status = 'accepted'
+        WHERE requester_id = ?
+          AND addressee_id = ?
+          AND status = 'pending'
+        """,
+        (requester_id, current_user.id),
+    ).rowcount
+
+    if updated == 0:
+        return {"error": "request not found"}, 404
+
+    db.commit()
+    return {"status": "accepted"}, 200
+
+
+def _decline_friend_request(requester_id: int):
+    db = get_db()
+    deleted = db.execute(
+        """
+        DELETE FROM friendships
+        WHERE requester_id = ?
+          AND addressee_id = ?
+          AND status = 'pending'
+        """,
+        (requester_id, current_user.id),
+    ).rowcount
+
+    if deleted == 0:
+        return {"error": "request not found"}, 404
+
+    db.commit()
+    return {"status": "declined"}, 200
+
+
+def _cancel_outgoing_friend_request(addressee_id: int):
+    db = get_db()
+    deleted = db.execute(
+        """
+        DELETE FROM friendships
+        WHERE requester_id = ?
+          AND addressee_id = ?
+          AND status = 'pending'
+        """,
+        (current_user.id, addressee_id),
+    ).rowcount
+
+    if deleted == 0:
+        return {"error": "request not found"}, 404
+
+    db.commit()
+    return {"status": "canceled"}, 200
+
+
+def _friends_page_data(search_query: str = ""):
+    db = get_db()
+
+    friends = db.execute(
+        """
+        SELECT DISTINCT u.id, u.username,
+               CASE
+                   WHEN u.last_seen_at IS NOT NULL
+                    AND u.last_seen_at >= datetime('now', '-35 seconds')
+                   THEN 1 ELSE 0
+               END AS is_online
+        FROM friendships f
+        JOIN users u
+          ON (
+            (f.requester_id = ? AND f.addressee_id = u.id)
+            OR
+            (f.addressee_id = ? AND f.requester_id = u.id)
+          )
+        WHERE f.status = 'accepted'
+        ORDER BY u.username COLLATE NOCASE ASC
+        """,
+        (current_user.id, current_user.id),
+    ).fetchall()
+
+    incoming = db.execute(
+        """
+        SELECT f.requester_id AS id, u.username
+        FROM friendships f
+        JOIN users u ON u.id = f.requester_id
+        WHERE f.addressee_id = ?
+          AND f.status = 'pending'
+        ORDER BY u.username COLLATE NOCASE ASC
+        """,
+        (current_user.id,),
+    ).fetchall()
+
+    outgoing = db.execute(
+        """
+        SELECT f.addressee_id AS id, u.username
+        FROM friendships f
+        JOIN users u ON u.id = f.addressee_id
+        WHERE f.requester_id = ?
+          AND f.status = 'pending'
+        ORDER BY u.username COLLATE NOCASE ASC
+        """,
+        (current_user.id,),
+    ).fetchall()
+
+    search_results = []
+    normalized_query = search_query.strip()
+    if len(normalized_query) >= 2:
+        like_query = f"%{normalized_query}%"
+        rows = db.execute(
+            """
+            SELECT u.id, u.username
+            FROM users u
+            WHERE u.id != ?
+              AND u.username LIKE ?
+            ORDER BY u.username COLLATE NOCASE ASC
+            LIMIT 20
+            """,
+            (current_user.id, like_query),
+        ).fetchall()
+
+        for row in rows:
+            relation = "none"
+            friendship = _get_friendship_row(current_user.id, row["id"])
+            if friendship:
+                if friendship["status"] == "accepted":
+                    relation = "accepted"
+                elif friendship["status"] == "pending":
+                    relation = (
+                        "incoming"
+                        if friendship["addressee_id"] == current_user.id
+                        else "outgoing"
+                    )
+                else:
+                    relation = friendship["status"]
+
+            search_results.append(
+                {
+                    "id": row["id"],
+                    "username": row["username"],
+                    "relation": relation,
+                }
+            )
+
+    return {
+        "friends": friends,
+        "incoming_requests": incoming,
+        "outgoing_requests": outgoing,
+        "search_results": search_results,
+        "search_query": normalized_query,
+    }
+
+
+@friends_bp.route("/friends/request", methods=["POST"])
+@login_required
+def request_page_action():
+    try:
+        addressee_id = int(request.form.get("addressee_id", ""))
+    except ValueError:
+        flash("Invalid user id", "error")
+        return redirect(url_for("main.friends", q=request.form.get("q", "")))
+
+    payload, status = _send_friend_request_or_accept(addressee_id)
+    if status in (200, 201):
+        flash("Friend request updated", "success")
+    else:
+        flash(payload["error"], "error")
+
+    return redirect(url_for("main.friends", q=request.form.get("q", "")))
+
+
+@friends_bp.route("/friends/requests/<int:requester_id>/accept", methods=["POST"])
+@login_required
+def accept_page_action(requester_id: int):
+    payload, status = _accept_friend_request(requester_id)
+    if status == 200:
+        flash("Friend request accepted", "success")
+    else:
+        flash(payload["error"], "error")
+
+    return redirect(url_for("main.friends", q=request.form.get("q", "")))
+
+
+@friends_bp.route("/friends/requests/<int:requester_id>/decline", methods=["POST"])
+@login_required
+def decline_page_action(requester_id: int):
+    payload, status = _decline_friend_request(requester_id)
+    if status == 200:
+        flash("Friend request declined", "success")
+    else:
+        flash(payload["error"], "error")
+
+    return redirect(url_for("main.friends", q=request.form.get("q", "")))
+
+
+@friends_bp.route("/friends/requests/<int:addressee_id>/cancel", methods=["POST"])
+@login_required
+def cancel_page_action(addressee_id: int):
+    payload, status = _cancel_outgoing_friend_request(addressee_id)
+    if status == 200:
+        flash("Outgoing request canceled", "success")
+    else:
+        flash(payload["error"], "error")
+
+    return redirect(url_for("main.friends", q=request.form.get("q", "")))
+
+
+@friends_bp.route("/api/friends", methods=["GET"])
+@login_required
+def list_friends():
+    data = _friends_page_data("")
+    return jsonify({"friends": [dict(row) for row in data["friends"]]})
+
+
+@friends_bp.route("/api/friends/search", methods=["GET"])
+@login_required
+def search_people():
+    data = _friends_page_data(request.args.get("q", ""))
+    return jsonify({"results": data["search_results"]})
+
+
+@friends_bp.route("/api/friends/requests/incoming", methods=["GET"])
+@login_required
+def incoming_friend_requests():
+    data = _friends_page_data("")
+    return jsonify({"requests": [dict(row) for row in data["incoming_requests"]]})
+
+
+@friends_bp.route("/api/friends/requests/outgoing", methods=["GET"])
+@login_required
+def outgoing_friend_requests():
+    data = _friends_page_data("")
+    return jsonify({"requests": [dict(row) for row in data["outgoing_requests"]]})
+
+
+@friends_bp.route("/api/friends/requests", methods=["POST"])
+@login_required
+def send_friend_request():
+    payload = request.get_json(silent=True) or {}
+    addressee_id = payload.get("addressee_id")
+
+    if not isinstance(addressee_id, int):
+        return jsonify({"error": "addressee_id must be an integer"}), 400
+
+    response_payload, status = _send_friend_request_or_accept(addressee_id)
+    return jsonify(response_payload), status
+
+
+@friends_bp.route("/api/friends/requests/<int:requester_id>/accept", methods=["POST"])
+@login_required
+def accept_friend_request(requester_id: int):
+    payload, status = _accept_friend_request(requester_id)
+    return jsonify(payload), status
+
+
+@friends_bp.route("/api/friends/requests/<int:requester_id>/decline", methods=["POST"])
+@login_required
+def decline_friend_request(requester_id: int):
+    payload, status = _decline_friend_request(requester_id)
+    return jsonify(payload), status

app/routes/main.py

@@ -1,16 +1,10 @@
-from flask import Blueprint, render_template, redirect, url_for
+from flask import Blueprint, render_template, redirect, url_for, request
 from flask_login import login_required, current_user
+from app.routes.friends import _friends_page_data
 
 main_bp = Blueprint("main", __name__)
 
-""" def login_required(view):
-    @wraps(view)
-    def wrapped_view(**kwargs):
-        if "user_id" not in session:
-            return redirect(url_for("auth.login"))
-        return view(**kwargs)
-    return wrapped_view
-     """
+
 
 @main_bp.route("/", methods=["GET", "POST"])
 def index():
@@ -18,10 +12,10 @@ def index():
         return redirect(url_for("main.home"))
     return render_template("index.html")
 
+
 @main_bp.route("/home", methods=["GET", "POST"])
 @login_required
 def home():
-    print(f"Current user: {current_user.username}")
     return render_template("home.html")
 
 
@@ -31,7 +25,9 @@ def play():
     return render_template("play.html")
 
 
+#todo: decide if this should get moved to the friends.py file
 @main_bp.route("/friends", methods=["GET"])
 @login_required
 def friends():
-    return render_template("friends.html")
+    data = _friends_page_data(request.args.get("q", ""))
+    return render_template("friends.html", **data)

app/routes/presence.py

@@ -0,0 +1,24 @@
+from flask import Blueprint, jsonify
+from flask_login import login_required, current_user
+from app.db import get_db
+
+presence_bp = Blueprint("presence", __name__)
+
+def _mark_current_user_online() -> None:
+    db = get_db()
+    db.execute(
+        "UPDATE users SET last_seen_at = CURRENT_TIMESTAMP WHERE id = ?",
+        (current_user.id,),
+    )
+    db.commit()
+
+
+@presence_bp.route("/api/presence/ping", methods=["POST"])
+@login_required
+def presence_ping():
+    if not current_user.is_authenticated: # should not happen due to @login_required, but just in case
+        return ("", 204)
+
+    _mark_current_user_online()
+    return jsonify({"status": "ok"})
+    

app/static/app.css

@@ -8,6 +8,7 @@
   --primary: #1f2937;
   --primary-strong: #0f172a;
   --success: #16a34a;
+  --danger: #b91c1c;
 }
 
 * {
@@ -26,15 +27,19 @@ body {
 }
 
 .topbar {
-  height: 64px;
   border-bottom: 1px solid var(--border);
   background: var(--surface);
+}
+
+.topbar-inner {
+  max-width: 1000px;
+  margin: 0 auto;
+  min-height: 64px;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 12px;
   padding: 0 20px;
-  position: sticky;
-  top: 0;
 }
 
 .brand {
@@ -58,12 +63,7 @@ body {
   font-weight: 600;
 }
 
-.topnav a:hover {
-  color: var(--text);
-  background: var(--surface-soft);
-  border-color: var(--border);
-}
-
+.topnav a:hover,
 .topnav a.active {
   color: var(--text);
   background: var(--surface-soft);
@@ -76,18 +76,41 @@ body {
   padding: 7px 10px;
   font-size: 0.9rem;
   color: var(--muted);
+  border-radius: 4px;
 }
 
 .page-wrap {
-  max-width: 1080px;
+  max-width: 1000px;
   margin: 0 auto;
   padding: 24px 20px 30px;
 }
 
+h1,
+h2,
+h3 {
+  margin: 0;
+}
+
 h1 {
-  margin: 8px 0 10px;
-  font-size: clamp(1.6rem, 3vw, 2.25rem);
-  line-height: 1.15;
+  margin-bottom: 12px;
+  font-size: clamp(1.6rem, 3vw, 2.1rem);
+}
+
+h2 {
+  margin-bottom: 10px;
+  font-size: 1.25rem;
+}
+
+h3 {
+  margin: 14px 0 0;
+  font-size: 1rem;
+}
+
+.panel {
+  border: 1px solid var(--border);
+  background: var(--surface);
+  border-radius: 8px;
+  padding: 16px;
 }
 
 .cta-row {
@@ -124,10 +147,8 @@ h1 {
 }
 
 .queue-layout {
-  margin-top: 14px;
   display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 12px;
+  grid-template-columns: 1fr;
 }
 
 .chip-row {
@@ -153,45 +174,103 @@ h1 {
   background: #eef2f6;
 }
 
-.friend-list {
-  margin: 0;
-  padding: 0;
-  list-style: none;
+.search-form {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 12px;
 }
 
-.friend-list li {
+.search-form input {
+  flex: 1;
+  min-width: 0;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 9px 12px;
+  font: inherit;
+}
+
+.friends-section,
+.friends-search-panel {
+  margin-top: 14px;
+}
+
+.friends-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.friend-card {
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--surface-soft);
+  padding: 10px;
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 7px 0;
-  border-top: 1px solid var(--border);
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.friend-main {
+  min-width: 0;
+}
+
+.friend-username {
+  font-weight: 600;
+}
+
+.friend-status {
+  font-size: 0.9rem;
   color: var(--muted);
 }
 
-.friend-list li:first-child {
-  border-top: 0;
+.status-online {
+  color: var(--success);
 }
 
-.dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 4px;
-  background: var(--success);
+.status-offline {
+  color: var(--muted);
 }
 
-@media (max-width: 900px) {
-  .panel-grid {
-    grid-template-columns: 1fr;
-  }
+.friend-actions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
 
-  .queue-layout {
-    grid-template-columns: 1fr;
-  }
+.friend-note,
+.muted {
+  color: var(--muted);
+}
+
+.flash-stack {
+  margin-bottom: 14px;
+  display: grid;
+  gap: 8px;
+}
+
+.flash {
+  border: 1px solid var(--border);
+  background: var(--surface);
+  border-radius: 6px;
+  padding: 10px 12px;
+  color: var(--text);
+}
+
+.flash.success {
+  border-color: #b7dfc3;
+  background: #ecfdf3;
+}
+
+.flash.error {
+  border-color: #f0c2c2;
+  background: #fef2f2;
+  color: var(--danger);
 }
 
 @media (max-width: 700px) {
-  .topbar {
-    height: auto;
+  .topbar-inner {
+    min-height: auto;
     flex-wrap: wrap;
     gap: 8px;
     padding: 10px 14px;
@@ -211,9 +290,12 @@ h1 {
     padding: 16px 14px 24px;
   }
 
-  .hero,
-  .stack-head,
-  .panel {
-    padding: 14px;
+  .search-form {
+    flex-direction: column;
+  }
+
+  .friend-card {
+    flex-direction: column;
+    align-items: flex-start;
   }
 }

app/static/js/presence.js

@@ -0,0 +1,18 @@
+(function startPresenceHeartbeat() {
+  const ping = function () {
+    fetch("/api/presence/ping", {
+      method: "POST",
+      credentials: "same-origin",
+      keepalive: true,
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: "{}",
+    }).catch(function () {
+      // ignore network issues; next interval will retry
+    });
+  };
+
+  ping();
+  setInterval(ping, 15000);
+})();

app/static/style.css

@@ -1,9 +1,93 @@
-.link-button {
-  border: 1px solid black;
-  padding: 10px;
-  text-decoration: none;
-  border-radius: 5px;
-  background-color: lightgray;
-  color: black;
-  margin: 5px;
+:root {
+  --bg: #f4f6f8;
+  --surface: #ffffff;
+  --border: #dde2e8;
+  --text: #111827;
+  --muted: #5f6b7a;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: "Segoe UI", sans-serif;
+  color: var(--text);
+  background: var(--bg);
+}
+
+.public-wrap {
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 24px 20px;
+}
+
+.public-card {
+  border: 1px solid var(--border);
+  background: var(--surface);
+  border-radius: 8px;
+  padding: 18px;
+}
+
+h1 {
+  margin: 0 0 10px;
+}
+
+.muted {
+  color: var(--muted);
+}
+
+.public-actions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.auth-form {
+  display: grid;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.auth-form input {
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 9px 10px;
+  font: inherit;
+}
+
+.link-button {
+  display: inline-block;
+  border: 1px solid #111827;
+  padding: 8px 12px;
+  text-decoration: none;
+  border-radius: 4px;
+  color: #111827;
+  background: #f3f4f6;
+  cursor: pointer;
+  font: inherit;
+}
+
+.flash-stack {
+  margin-bottom: 10px;
+  display: grid;
+  gap: 8px;
+}
+
+.flash {
+  border: 1px solid var(--border);
+  background: var(--surface);
+  border-radius: 6px;
+  padding: 10px 12px;
+}
+
+.flash.error {
+  border-color: #f0c2c2;
+  background: #fef2f2;
+}
+
+.flash.success {
+  border-color: #b7dfc3;
+  background: #ecfdf3;
 }

app/templates/base_app.html

@@ -0,0 +1,54 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{% block title %}Chess{% endblock %}</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="{{ url_for('static', filename='app.css') }}" />
+  </head>
+  <body>
+    <div class="site-shell">
+      <header class="topbar">
+        <div class="topbar-inner">
+          <a href="{{ url_for('main.home') }}" class="brand">Chess</a>
+          <nav class="topnav">
+            <a
+              href="{{ url_for('main.home') }}"
+              class="{{ 'active' if active_page == 'home' else '' }}"
+              >Home</a
+            >
+            <a
+              href="{{ url_for('main.play') }}"
+              class="{{ 'active' if active_page == 'play' else '' }}"
+              >Play</a
+            >
+            <a
+              href="{{ url_for('main.friends') }}"
+              class="{{ 'active' if active_page == 'friends' else '' }}"
+              >Friends</a
+            >
+          </nav>
+          <div class="profile-pill">{{ current_user.username }}</div>
+        </div>
+      </header>
+
+      <main class="page-wrap">
+        {% with messages = get_flashed_messages(with_categories=true) %} {% if
+        messages %}
+        <div class="flash-stack">
+          {% for category, message in messages %}
+          <div class="flash {{ category }}">{{ message }}</div>
+          {% endfor %}
+        </div>
+        {% endif %} {% endwith %} {% block content %}{% endblock %}
+      </main>
+    </div>
+    <script src="{{ url_for('static', filename='js/presence.js') }}"></script>
+  </body>
+</html>

app/templates/base_public.html

@@ -0,0 +1,25 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{% block title %}Chess{% endblock %}</title>
+    <link
+      rel="stylesheet"
+      href="{{ url_for('static', filename='style.css') }}"
+    />
+  </head>
+  <body>
+    <main class="public-wrap">
+      {% with messages = get_flashed_messages(with_categories=true) %} {% if
+      messages %}
+      <div class="flash-stack">
+        {% for category, message in messages %}
+        <div class="flash {{ category }}">{{ message }}</div>
+        {% endfor %}
+      </div>
+      {% endif %} {% endwith %} {% block content %}{% endblock %}
+    </main>
+    <script src="{{ url_for('static', filename='js/presence.js') }}"></script>
+  </body>
+</html>

app/templates/friends.html

@@ -1,48 +1,153 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Friends</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap"
-      rel="stylesheet"
+{% extends "base_app.html" %} {% set active_page = 'friends' %} {% block title
+%}Friends{% endblock %} {% block content %}
+<h1>Friends</h1>
+
+<section class="panel friends-search-panel">
+  <h2>Find people</h2>
+  <form method="GET" action="{{ url_for('main.friends') }}" class="search-form">
+    <input
+      type="search"
+      name="q"
+      minlength="2"
+      value="{{ search_query }}"
+      placeholder="Search by username"
     />
-    <link rel="stylesheet" href="{{ url_for('static', filename='app.css') }}" />
-  </head>
-  <body>
-    <div class="site-shell">
-      <header class="topbar">
-        <a href="{{ url_for('main.home') }}" class="brand">Chess</a>
-        <nav class="topnav">
-          <a href="{{ url_for('main.home') }}">Home</a>
-          <a href="{{ url_for('main.play') }}">Play</a>
-          <a href="{{ url_for('main.friends') }}" class="active">Friends</a>
-        </nav>
-        <div class="profile-pill">{{ current_user.username }}</div>
-      </header>
+    <button type="submit" class="btn btn-primary">Search</button>
+  </form>
 
-      <h1>Friends</h1>
-
-        <section class="panel-grid">
-          <article class="panel">
-            <h2>Online now</h2>
-            <ul class="friend-list">
-              <li><span class="dot"></span>name1</li>
-              <li><span class="dot"></span>friend2</li>
-              <li><span class="dot"></span>bro has a lot of friends</li>
-            </ul>
-          </article>
-
-          <article class="panel">
-            <h2>Incoming invites</h2>
-            <p>No pending invitations
-            </p>
-          </article>
-        </section>
-      </main>
+  {% if search_query %}
+  <div class="friends-list">
+    {% if search_results %} {% for person in search_results %}
+    <div class="friend-card">
+      <div class="friend-main">
+        <div class="friend-username">{{ person.username }}</div>
+        <div class="friend-status">{{ person.relation|capitalize }}</div>
+      </div>
+      <div class="friend-actions">
+        {% if person.relation == 'none' %}
+        <form
+          method="POST"
+          action="{{ url_for('friends.request_page_action') }}"
+        >
+          <input type="hidden" name="addressee_id" value="{{ person.id }}" />
+          <input type="hidden" name="q" value="{{ search_query }}" />
+          <button class="btn btn-secondary" type="submit">Add Friend</button>
+        </form>
+        {% elif person.relation == 'incoming' %}
+        <form
+          method="POST"
+          action="{{ url_for('friends.accept_page_action', requester_id=person.id) }}"
+        >
+          <input type="hidden" name="q" value="{{ search_query }}" />
+          <button class="btn btn-primary" type="submit">Accept</button>
+        </form>
+        <form
+          method="POST"
+          action="{{ url_for('friends.decline_page_action', requester_id=person.id) }}"
+        >
+          <input type="hidden" name="q" value="{{ search_query }}" />
+          <button class="btn btn-secondary" type="submit">Decline</button>
+        </form>
+        {% elif person.relation == 'outgoing' %}
+        <form
+          method="POST"
+          action="{{ url_for('friends.cancel_page_action', addressee_id=person.id) }}"
+        >
+          <input type="hidden" name="q" value="{{ search_query }}" />
+          <button class="btn btn-secondary" type="submit">
+            Cancel Request
+          </button>
+        </form>
+        {% else %}
+        <span class="friend-note">No action available</span>
+        {% endif %}
+      </div>
     </div>
-  </body>
-</html>
+    {% endfor %} {% else %}
+    <p class="muted">No users found for "{{ search_query }}".</p>
+    {% endif %}
+  </div>
+  {% endif %}
+</section>
+
+<section class="panel friends-section">
+  <!-- todo: update presence -->
+  <h2>Your friends</h2>
+  {% if friends %}
+  <div class="friends-list">
+    {% for friend in friends %}
+    <div class="friend-card">
+      <div class="friend-main">
+        <div class="friend-username">{{ friend.username }}</div>
+        <div
+          class="friend-status {{ 'status-online' if friend.is_online else 'status-offline' }}"
+        >
+          {{ 'Online' if friend.is_online else 'Offline' }}
+        </div>
+      </div>
+      <!-- todo: implement button -->
+      <button class="btn btn-secondary" type="button">Challenge</button>
+    </div>
+    {% endfor %}
+  </div>
+  {% else %}
+  <p class="muted">No friends yet.</p>
+  {% endif %}
+</section>
+
+<section class="panel friends-section">
+  <h2>Requests</h2>
+
+  <h3>Incoming</h3>
+  {% if incoming_requests %}
+  <div class="friends-list">
+    {% for req in incoming_requests %}
+    <div class="friend-card">
+      <div class="friend-main">
+        <div class="friend-username">{{ req.username }}</div>
+        <div class="friend-status">Pending</div>
+      </div>
+      <div class="friend-actions">
+        <form
+          method="POST"
+          action="{{ url_for('friends.accept_page_action', requester_id=req.id) }}"
+        >
+          <button class="btn btn-primary" type="submit">Accept</button>
+        </form>
+        <form
+          method="POST"
+          action="{{ url_for('friends.decline_page_action', requester_id=req.id) }}"
+        >
+          <button class="btn btn-secondary" type="submit">Decline</button>
+        </form>
+      </div>
+    </div>
+    {% endfor %}
+  </div>
+  {% else %}
+  <p class="muted">No incoming requests.</p>
+  {% endif %}
+
+  <h3>Outgoing</h3>
+  {% if outgoing_requests %}
+  <div class="friends-list">
+    {% for req in outgoing_requests %}
+    <div class="friend-card">
+      <div class="friend-main">
+        <div class="friend-username">{{ req.username }}</div>
+        <div class="friend-status">Pending</div>
+      </div>
+      <form
+        method="POST"
+        action="{{ url_for('friends.cancel_page_action', addressee_id=req.id) }}"
+      >
+        <button class="btn btn-secondary" type="submit">Cancel Request</button>
+      </form>
+    </div>
+    {% endfor %}
+  </div>
+  {% else %}
+  <p class="muted">No outgoing requests.</p>
+  {% endif %}
+</section>
+{% endblock %}

app/templates/home.html

@@ -1,40 +1,10 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Home</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap"
-      rel="stylesheet"
-    />
-    <link rel="stylesheet" href="{{ url_for('static', filename='app.css') }}" />
-  </head>
-  <body>
-    <div class="site-shell">
-      <header class="topbar">
-        <a href="{{ url_for('main.home') }}" class="brand">Chess</a>
-        <nav class="topnav">
-          <a href="{{ url_for('main.home') }}" class="active">Home</a>
-          <a href="{{ url_for('main.play') }}">Play</a>
-          <a href="{{ url_for('main.friends') }}">Friends</a>
-        </nav>
-        <div class="profile-pill">{{ current_user.username }}</div>
-      </header>
-
-      <main class="page-wrap">
-        <h1>Welcome back, {{current_user.username}}</h1>
-        <div class="cta-row">
-          <a href="{{ url_for('main.play') }}" class="btn btn-primary"
-            >Start a game</a
-          >
-          <a href="{{ url_for('main.friends') }}" class="btn btn-secondary"
-            >Open friends</a
-          >
-        </div>
-      </main>
-    </div>
-  </body>
-</html>
+{% extends "base_app.html" %} {% set active_page = 'home' %} {% block title
+%}Home{% endblock %} {% block content %}
+<h1>Welcome back, {{ current_user.username }}</h1>
+<div class="cta-row">
+  <a href="{{ url_for('main.play') }}" class="btn btn-primary">Start a game</a>
+  <a href="{{ url_for('main.friends') }}" class="btn btn-secondary"
+    >Open friends</a
+  >
+</div>
+{% endblock %}

app/templates/index.html

@@ -1,20 +1,14 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Chess</title>
-    <link
-      rel="stylesheet"
-      href="{{ url_for('static', filename='style.css') }}"
-    />
-  </head>
-  <body>
-    <h1>Chess Game</h1>
-    <p>main page</p>
-
-    <a href="{{ url_for('auth.login') }}" class="link-button"> Login </a>
-
-    <a href="{{ url_for('auth.register') }}" class="link-button"> Register </a>
-  </body>
-</html>
+{% extends "base_public.html" %} {% block title %}Chess{% endblock %} {% block
+content %}
+<section class="public-card">
+  <h1>Play Chess</h1>
+  <p class="muted">
+    Play games and challenge your friends. You just log in or create a new
+    account below.
+  </p>
+  <div class="public-actions">
+    <a href="{{ url_for('auth.login') }}" class="link-button">Login</a>
+    <a href="{{ url_for('auth.register') }}" class="link-button">Register</a>
+  </div>
+</section>
+{% endblock %}

app/templates/login.html

@@ -1,9 +1,12 @@
-<h1>Login</h1>
-
-<form method="POST">
-  <input name="username" placeholder="Username" required />
-  <input name="password" type="password" placeholder="Password" required />
-  <button type="submit">Login</button>
-</form>
-
-<a href="{{ url_for('auth.register') }}">Register</a>
+{% extends "base_public.html" %} {% block title %}Login{% endblock %} {% block
+content %}
+<section class="public-card">
+  <h1>Login</h1>
+  <form method="POST" class="auth-form">
+    <input name="username" placeholder="Username" required />
+    <input name="password" type="password" placeholder="Password" required />
+    <button type="submit" class="link-button">Login</button>
+  </form>
+  <a href="{{ url_for('auth.register') }}">Register</a>
+</section>
+{% endblock %}

app/templates/play.html

@@ -1,56 +1,25 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Play</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap"
-      rel="stylesheet"
-    />
-    <link rel="stylesheet" href="{{ url_for('static', filename='app.css') }}" />
-  </head>
-  <body>
-    <div class="site-shell">
-      <header class="topbar">
-        <a href="{{ url_for('main.home') }}" class="brand">Chess</a>
-        <nav class="topnav">
-          <a href="{{ url_for('main.home') }}">Home</a>
-          <a href="{{ url_for('main.play') }}" class="active">Play</a>
-          <a href="{{ url_for('main.friends') }}">Friends</a>
-        </nav>
-        <div class="profile-pill">{{ current_user.username }}</div>
-      </header>
-
-      <!-- todo: make all of this via js and implement logic -->
-      <main class="page-wrap">
-        <section class="queue-layout">
-          <article class="panel">
-            <h2>Game settings</h2>
-            <h4>Choose a time setup</h4>
-            <div class="chip-row">
-              <button class="chip">1 + 0</button>
-              <button class="chip">3 + 2</button>
-              <button class="chip active">10 + 0</button>
-              <button class="chip">15 + 10</button>
-            </div>
-            <h4>You play as</h4>
-            <div class="chip-row">
-              <button class="chip">white</button>
-              <button class="chip">black</button>
-              <button class="chip active">random</button>
-            </div>
-            <div class="cta-row">
-              <!--               <button class="btn btn-primary" type="button">Start game</button> -->
-              <button class="btn btn-secondary" type="button">
-                Create game code
-              </button>
-            </div>
-          </article>
-        </section>
-      </main>
+{% extends "base_app.html" %} {% set active_page = 'play' %} {% block title
+%}Play{% endblock %} {% block content %}
+<section class="queue-layout">
+  <article class="panel">
+    <h1>Play</h1>
+    <h2>Game settings</h2>
+    <h3>Choose a time setup</h3>
+    <div class="chip-row">
+      <button class="chip" type="button">1 + 0</button>
+      <button class="chip" type="button">3 + 2</button>
+      <button class="chip active" type="button">10 + 0</button>
+      <button class="chip" type="button">15 + 10</button>
     </div>
-  </body>
-</html>
+    <h3>You play as</h3>
+    <div class="chip-row">
+      <button class="chip" type="button">white</button>
+      <button class="chip" type="button">black</button>
+      <button class="chip active" type="button">random</button>
+    </div>
+    <div class="cta-row">
+      <button class="btn btn-secondary" type="button">Create game code</button>
+    </div>
+  </article>
+</section>
+{% endblock %}

app/templates/register.html

@@ -1,9 +1,12 @@
-<h1>Register</h1>
-
-<form method="POST">
-  <input name="username" placeholder="Username" required />
-  <input name="password" type="password" required />
-  <button type="submit">Create Account</button>
-</form>
-
-<a href="{{ url_for('auth.login') }}">Back to Login</a>
+{% extends "base_public.html" %} {% block title %}Register{% endblock %} {%
+block content %}
+<section class="public-card">
+  <h1>Register</h1>
+  <form method="POST" class="auth-form">
+    <input name="username" placeholder="Username" required />
+    <input name="password" type="password" placeholder="Password" required />
+    <button type="submit" class="link-button">Create Account</button>
+  </form>
+  <a href="{{ url_for('auth.login') }}">Back to Login</a>
+</section>
+{% endblock %}