add uniform view navigation links to dashboard pages

Adds list/tree/graph links to the section header of the oplog,
tree, and graph pages. Links are displayed in a row at the top
right, on the same line as the section heading, with the
border extending under them.

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

1 files changed, 153 insertions, 2 deletions

diff --git a/src/zenserver/frontend/html/zen.css b/src/zenserver/frontend/html/zen.css
index cc9cd30e8..ad64bef85 100644
--- a/src/zenserver/frontend/html/zen.css
+++ b/src/zenserver/frontend/html/zen.css
@@ -104,8 +104,6 @@ a {
 
 	h1 {
 		font-size:			1.5em;
-		width:				100%;
-		border-bottom:		1px solid var(--theme_g2);
 	}
 
 	h2 {
@@ -122,6 +120,23 @@ a {
 		font-weight:		normal;
 	}
 
+	.zen_section_header {
+		display:			flex;
+		align-items:		baseline;
+		> h1, > h2, > h3 {
+			margin-top:		0;
+		}
+		&:has(> h1) {
+			border-bottom:	1px solid var(--theme_g2);
+		}
+	}
+
+	.zen_view_nav {
+		margin-left:		auto;
+		display:			flex;
+		gap:				0.7em;
+	}
+
 	margin-bottom:	3em;
 	> *:not(h1) {
 		margin-left:	2em;
@@ -205,6 +220,34 @@ a {
 	}
 }
 
+/* legend toggle ------------------------------------------------------------ */
+
+.legend_toggle {
+	cursor:				pointer;
+	user-select:		none;
+	&:hover {
+		text-decoration: underline;
+	}
+	&.legend_disabled {
+		opacity:		0.3;
+	}
+}
+
+.legend_scale {
+	position:			relative;
+	display:			inline-flex;
+	justify-content:	space-between;
+	align-items:		center;
+	width:				6em;
+	padding:			0 0.2em;
+	height:				1.1em;
+	vertical-align:		middle;
+	.legend_scale_lo, .legend_scale_hi {
+		font-size:		0.8em;
+		text-shadow:	0 0 3px var(--theme_g4), 0 0 3px var(--theme_g4);
+	}
+}
+
 
 /* modal -------------------------------------------------------------------- */
 
@@ -432,6 +475,86 @@ a {
 			text-align: right;
 		}
 	}
+	h3:has(.zen_minigraph_toggle) {
+		display:			flex;
+		align-items:		center;
+	}
+	.zen_minigraph_toggle {
+		display:			flex;
+		gap:				1em;
+		margin-left:		auto;
+		font-size:			0.9em;
+		.active {
+			font-weight:	bold;
+			text-decoration: underline;
+		}
+	}
+	.zen_minigraph {
+		position:			relative;
+		display:			flex;
+		height:				20em;
+		canvas {
+			flex:			1;
+			min-width:		0;
+			border:			1px solid var(--theme_g2);
+			cursor:			grab;
+		}
+		canvas:active {
+			cursor:			grabbing;
+		}
+		.minigraph_splitter {
+			width:						4px;
+			cursor:						col-resize;
+			background-color:			var(--theme_g2);
+			flex-shrink:				0;
+			&:hover, &.active {
+				background-color:		var(--theme_p1);
+			}
+		}
+		.minigraph_props {
+			width:						18em;
+			flex-shrink:				0;
+			border:						1px solid var(--theme_g2);
+			border-left:				none;
+			padding:					0.5em 0.6em;
+			font-size:					0.85em;
+			overflow-y:					auto;
+			.minigraph_props_empty {
+				color:					var(--theme_g1);
+				padding:				1em 0;
+				text-align:				center;
+			}
+			.minigraph_props_row {
+				display:				flex;
+				padding:				0.15em 0;
+			}
+			.minigraph_props_label {
+				color:					var(--theme_g1);
+				min-width:				8em;
+			}
+			.minigraph_props_row > span:last-child {
+				overflow:				hidden;
+				text-overflow:			ellipsis;
+				white-space:			nowrap;
+			}
+		}
+	}
+	.minigraph_legend {
+		display:					flex;
+		gap:						1.5em;
+		margin-top:					0.5em;
+		font-size:					0.85em;
+		> div {
+			display:				flex;
+			align-items:			center;
+			gap:					0.3em;
+		}
+		.legend_swatch {
+			width:					1.5em;
+			height:					0.3em;
+			display:				inline-block;
+		}
+	}
 }
 
 /* tree --------------------------------------------------------------------- */
@@ -561,11 +684,39 @@ html:has(#graph) {
 			.graph_entry_leaf {
 				color:				var(--theme_ln);
 			}
+			.graph_entry_active {
+				color:				var(--theme_p0);
+			}
 			.graph_entries_more {
 				color:				var(--theme_g1);
 				cursor:				default;
 			}
 		}
+		#graph_props {
+			border-top:				1px solid var(--theme_g2);
+			padding:				0.5em 0.6em;
+			font-size:				0.85em;
+			overflow-y:				auto;
+			min-height:				6em;
+			.graph_props_empty {
+				color:				var(--theme_g1);
+				padding:			1em 0;
+				text-align:			center;
+			}
+			.graph_props_row {
+				display:			flex;
+				padding:			0.15em 0;
+			}
+			.graph_props_label {
+				color:				var(--theme_g1);
+				min-width:			8em;
+			}
+			.graph_props_row > span:last-child {
+				overflow:			hidden;
+				text-overflow:		ellipsis;
+				white-space:		nowrap;
+			}
+		}
 	}
 	#graph_search_results {
 		position:					absolute;