From 7c225145f0fff1a966f0180ab3c2e0f051d70b45 Mon Sep 17 00:00:00 2001
From: Derick Phan <derickphan@fico.com>
Date: Thu, 26 Mar 2026 21:51:58 -0700
Subject: [PATCH] Redesign subscriptions page with card layout

Replace cramped table layout with card-based design that works
better in narrow viewports and across different themes.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 handlers.py | 34 ++++++++++++++++------------------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/handlers.py b/handlers.py
index 27ff3d3..2034d3f 100644
--- a/handlers.py
+++ b/handlers.py
@@ -685,32 +685,30 @@ def handle_subscriptions(msg=""):
         subs = db.execute("SELECT * FROM subscriptions ORDER BY id DESC").fetchall()
     finally:
         return_db(db)
-    items = ""
+    cards = ""
     for s in subs:
         auto_label = "on" if s["auto_sync"] else "off"
         last = s["last_sync"] or "never"
-        items += (
-            f'<tr>'
-            f'<td><b>{esc(s["name"] or "unknown")}</b><br><small>{esc(s["dest_hash"])}</small></td>'
-            f'<td>{esc(last)}</td>'
-            f'<td>'
+        cards += (
+            f'<div style="border:1px solid #ddd;border-radius:4px;padding:0.9rem 1rem;margin-bottom:0.75rem">'
+            f'<div style="margin-bottom:0.4rem"><b>{esc(s["name"] or "unknown")}</b></div>'
+            f'<div><small>{esc(s["dest_hash"])}</small></div>'
+            f'<div style="margin-top:0.4rem;font-size:0.85rem;color:#606060">last sync: {esc(last)}</div>'
+            f'<div style="display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap;margin-top:0.7rem">'
+            f'<a href="/subscriptions/browse/{s["id"]}">browse</a>'
+            f'<form method="post" action="/subscriptions/sync/{s["id"]}" style="display:inline">'
+            f'{_csrf_field()}<button>sync now</button></form>'
             f'<form method="post" action="/subscriptions/autosync/{s["id"]}" style="display:inline">'
             f'{_csrf_field()}<button>auto-sync: {auto_label}</button></form>'
-            f'</td>'
-            f'<td>'
-            f'<a href="/subscriptions/browse/{s["id"]}">browse</a> '
-            f'<form method="post" action="/subscriptions/sync/{s["id"]}" style="display:inline">'
-            f'{_csrf_field()}<button>sync now</button></form> '
             f'<form method="post" action="/subscriptions/delete/{s["id"]}" style="display:inline">'
             f'{_csrf_field()}<button>remove</button></form>'
-            f'</td>'
-            f'</tr>'
+            f'</div>'
+            f'</div>'
         )
-    table = ""
+    listing = ""
     if subs:
-        table = (
-            f'<table><tr><th>instance</th><th>last sync</th><th>auto-sync</th><th>actions</th></tr>'
-            f'{items}</table>'
+        listing = (
+            f'{cards}'
             f'<form method="post" action="/subscriptions/syncall">'
             f'{_csrf_field()}<button>sync all</button></form>'
         )
@@ -722,7 +720,7 @@ def handle_subscriptions(msg=""):
         f'<button>subscribe</button>'
         f'</form>'
         f'<p>{msg}</p>'
-        f'<hr>{table}'
+        f'<hr>{listing}'
         f'<br><a href="/">back</a>'
     )