Add a checkbox to switch between diff variants

view/app.py

@@ -47,6 +47,9 @@ def index():
 	search = request.args.get("search", type=str, default="")
 	query = websearch_to_fts_query(search) if search else None
 
+	# View options
+	compact_diffs = request.args.get("compact_diffs") is not None
+
 	db.execute(f"SELECT count(*) FROM diffs{'_fts(?)' if query else ''}", (query,) if query else ())
 
 	diff_count = db.fetchall()[0][0]
@@ -77,6 +80,7 @@ def index():
 						   pagination=pagination,
 						   diff_count = diff_count,
 						   search=search,
+						   compact_diffs=compact_diffs,
 						   )
 
 

view/static/main.css

@@ -242,7 +242,7 @@ details[open] summary::before {
 	width: 1.25em;
 }
 
-.input {
+.text-input {
 	border-radius: var(--radius-s);
 	border: 1px solid var(--border-color);
 	padding: 0.375rem 0.75rem;
@@ -250,12 +250,25 @@ details[open] summary::before {
 	transition: border-color 120ms, box-shadow 120ms;
 }
 
-.input:focus {
+.text-input:focus {
 	border-color: var(--accent-color);
 	box-shadow: 0 0 0 2px hsl(225 90% 40% / 50%);
 	outline: none;
 }
 
+.checkbox {
+	font-size: var(--font-size-s);
+	display: flex;
+	align-items: center;
+	color: var(--color-muted);
+	font-weight: 500;
+	cursor: pointer;
+}
+
+.checkbox input {
+	margin-right: 0.5rem;
+}
+
 .button {
 	display: inline-flex;
 	align-items: center;
@@ -367,7 +380,7 @@ details[open] summary::before {
 
 /* Index */
 
-.filters {
+.home-filters {
 	margin-bottom: 2rem;
 	position: sticky;
 	top: 0;
@@ -376,12 +389,20 @@ details[open] summary::before {
 	border-bottom: 1px solid var(--border-color);
 }
 
-.filters form {
+.home-filters .container {
+	display: flex;
+	align-items: center;
+	flex-wrap: nowrap;
+	flex-shrink: 0;
+	gap: 1.5rem;
+}
+
+.home-filters form {
 	display: flex;
 	gap: 0.5rem;
 }
 
-.filters [name="search"] {
+.home-filters [name="search"] {
 	width: 100%;
 	max-width: 20rem;
 }

view/templates/index.html

@@ -3,11 +3,11 @@
 {% block header_class %}header-extended{% endblock header_class %}
 
 {% block body %}
-<div class="filters">
+<div class="home-filters">
 	<div class="container">
 		<form method="get">
 			<input
-				class="input"
+				class="text-input"
 				type="text"
 				id="search"
 				name="search"
@@ -22,10 +22,19 @@
 				<svg class="inline-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z"></path></svg>
 			</button>
 		</form>
+		<label class="checkbox">
+			<input type="checkbox" name="compact_diffs" value="true"
+				hx-get="/"
+				hx-target="#diff-list"
+				hx-select="#diff-list"
+				hx-swap="outerHTML"
+			/>
+			<p>Compact diffs</p>
+		</label>
 	</div>
 </div>
 
-<div class="container home-diff-list">
+<div class="container home-diff-list" id="diff-list">
 	{% for diff in diffs %}
 	<article class="card changeset-card">
 		<p class="changeset-card-actions">
@@ -41,27 +50,31 @@
 			</a>
 		</p>
 
-		<div class="changeset-card-diff-s">
+		{% if compact_diffs %}
-			<div>
+			<div class="changeset-card-title">{{ diff.diff_html|safe }}</div>
-				<div class="text-caption">Before</div>
+		{% else %}
-				<div class="diff-before changeset-card-title">{{ diff.diff_html|safe }}</div>
+			<div class="changeset-card-diff-s">
+				<div>
+					<div class="text-caption">Before</div>
+					<div class="diff-before changeset-card-title">{{ diff.diff_html|safe }}</div>
+				</div>
+				<div>
+					<div class="text-caption">After</div>
+					<div class="diff-after changeset-card-title">{{ diff.diff_html|safe }}</div>
+				</div>
 			</div>
-			<div>
-				<div class="text-caption">After</div>
-				<div class="diff-after changeset-card-title">{{ diff.diff_html|safe }}</div>
-			</div>
-		</div>
 
-		<table class="changeset-card-diff-m">
+			<table class="changeset-card-diff-m">
-			<tr>
+				<tr>
-				<th class="text-caption table-head">Before</th>
+					<th class="text-caption table-head">Before</th>
-				<td class="diff-before changeset-card-title">{{ diff.diff_html|safe }}</td>
+					<td class="diff-before changeset-card-title">{{ diff.diff_html|safe }}</td>
-			</tr>
+				</tr>
-			<tr>
+				<tr>
-				<th class="text-caption table-head">After</th>
+					<th class="text-caption table-head">After</th>
-				<td class="diff-after changeset-card-title">{{ diff.diff_html|safe }}</td>
+					<td class="diff-after changeset-card-title">{{ diff.diff_html|safe }}</td>
-			</tr>
+				</tr>
-		</table>
+			</table>
+		{% endif %}
 	</article>
 	{% endfor %}
 </div>