Merge pull request #53 from kristianwind/charcoal-separators

Charcoal: lighter day separators in the note list

web/src/app.css

@@ -210,27 +210,39 @@
 	--shadow-lg: 0 8px 32px rgb(0 0 0 / 0.4);
 }
 
-/* Kul — a neutral dark grey, the greys of Apple Notes rather than the default's
+/* Kul — the greys of Apple Notes' dark mode, to Kristian's own sampled values.
-   faint green cast. The same green accent, so it still reads as verdande; only the
+   Three panel greys, lightest sidebar to darkest editor — the reverse of the usual
-   grounds, surfaces and inks turn to plain grey. */
+   sunken-is-darkest order, which is why the editor gets its own --editor-bg rather
+   than sharing --surface-raised with the list. The accent turns amber, and the
+   selected menu item, selected note and section headings each get a fallback token
+   so this theme can hit its colours without touching any other. */
 [data-theme='charcoal'] {
-	--ground: #1c1c1c;
+	--ground: #1e1e1e;
-	--surface: #232323;
+	--surface: #2a3033;
-	--surface-raised: #2b2b2b;
+	--surface-raised: #242b2e; /* the note list */
-	--surface-sunken: #171717;
+	--surface-sunken: #2d3133; /* the menu / sidebar — lightest here */
-	--line: #363636;
+	--line: #34393b;
-	--line-strong: #474747;
+	--line-strong: #414749;
 
-	--ink: #ededed;
+	--ink: #ffffff;
-	--ink-muted: #a4a4a4;
+	--ink-muted: #dcdcdc;
-	/* Light enough to clear 4.5:1 against the ground — the quiet tier of dates and
+	--ink-faint: #9ba0a2;
-	   counts is the first to disappear if it is too dim. */
-	--ink-faint: #8e8e8e;
 
-	--accent: #5fbf8f;
+	/* Amber, Apple's Notes accent. The bright value is the selected menu item; the
-	--accent-hover: #6fcf9f;
+	   dark text rides on top of it. */
-	--accent-sunken: #23332b80;
+	--accent: #ffce35;
-	--accent-ink: #0d1411;
+	--accent-hover: #ffd75a;
+	--accent-sunken: #ffce35;
+	--accent-ink: #1e1e1e;
+
+	/* Per-element, and only here — every other theme falls back to the shared token
+	   in the var() calls that read these. */
+	--editor-bg: #1e1e1e; /* the text field, a shade below the list */
+	--note-on-bg: #a78c26; /* a selected note in the list — gold */
+	--note-on-ink: #1e1e1e; /* dark text on the gold */
+	--nav-active-ink: #1e1e1e; /* dark text on the amber menu item */
+	--heading-ink: #8a8e90; /* PROJEKTER and the group names — quiet grey */
+	--note-group-bg: #2d3133; /* day separators take the menu's resting grey, not the darker ground */
 
 	--p1: #cf6b6b;
 	--p2: #d69f5c;

web/src/lib/components/Sidebar.svelte

@@ -1336,7 +1336,9 @@
 	h2 {
 		font-size: var(--menu-size);
 		font-weight: 600;
-		color: var(--ink);
+		/* Kul sets these headings to a quiet grey (--heading-ink); every other theme
+		   falls back to the reading ink and keeps them bold and bright. */
+		color: var(--heading-ink, var(--ink));
 	}
 
 	/* The heading's mark, in the muted ink so the bold name still leads. Sized and
@@ -1591,7 +1593,10 @@
 	   in both themes. */
 	a.active {
 		background: var(--accent-sunken);
-		color: var(--ink);
+		/* On a solid accent (Kul's amber menu item) the label goes dark via
+		   --nav-active-ink; on the tinted accent-sunken every other theme uses, it
+		   falls back to the reading ink. */
+		color: var(--nav-active-ink, var(--ink));
 		font-weight: 600;
 	}
 

web/src/routes/noter/+page.svelte

@@ -707,7 +707,10 @@
 	}}
 />
 
-<div class="notes">
+<!-- `has-note` drives the phone layout: one column, showing the list until a note
+     is opened and the editor once one is. On a wide screen both are always up and
+     the class does nothing. -->
+<div class="notes" class:has-note={selectedId}>
 	<aside>
 		<div class="head">
 			<h1>{t('notes.title')}</h1>
@@ -916,7 +919,15 @@
 	</aside>
 
 	<section class="editor">
-		{#if selected}
+		{#if selectedId}
+			<!-- Keyed on the id, which is set the instant a row is tapped — not on the
+			     loaded note, which arrives a moment later. On a phone that moment was the
+			     whole bug: the pane did not switch until the body had loaded, so the first
+			     tap looked like nothing and people tapped again. -->
+			<!-- Phone only (hidden on a wide screen by CSS): the way back to the list,
+			     since there the editor fills the screen and the list is not beside it. -->
+			<button class="back" onclick={() => open(null)}>‹ {t('notes.title')}</button>
+			{#if selected}
 			<NoteEditor
 				note={selected}
 				notes={notes}
@@ -1050,6 +1061,12 @@
 					{/if}
 				</div>
 			</footer>
+			{:else}
+				<!-- Chosen, but its full text is still loading. Keep the pane (so the tap
+				     felt like it landed) and stay quiet — the "pick a note" line is for
+				     when nothing is chosen at all, not for this half-second. -->
+				<p class="empty" aria-busy="true"></p>
+			{/if}
 		{:else}
 			<p class="empty">{t('notes.pickOne')}</p>
 		{/if}
@@ -1389,7 +1406,10 @@
 		top: 0;
 		z-index: 1;
 		margin: 0 0 var(--s1);
-		background: var(--ground);
+		/* --ground everywhere but Kul, where the ground is the darkest thing on screen
+		   and a day separator on it reads as a dark bar. There it takes the menu's own
+		   resting colour instead, via --note-group-bg. */
+		background: var(--note-group-bg, var(--ground));
 		border-radius: var(--radius);
 	}
 
@@ -1480,8 +1500,20 @@
 	}
 
 	.row.on {
-		background: var(--surface-raised);
+		background: var(--note-on-bg, var(--surface-raised));
-		color: var(--ink);
+		color: var(--note-on-ink, var(--ink));
+	}
+
+	/* On a themed selection colour (Kul's gold), the row's own quieter tiers go dark
+	   too, or the date and the filed line vanish into it. Other themes have no
+	   --note-on-ink, so these fall back to their normal muted inks. */
+	.row.on .when,
+	.row.on .filed {
+		color: var(--note-on-ink, var(--ink-muted));
+	}
+
+	.row.on .filed-icon {
+		color: var(--note-on-ink, var(--ink-faint));
 	}
 
 	/* Samme størrelse som en opgavetitel. En note og en opgave er to ting af samme
@@ -1577,8 +1609,10 @@
 		min-height: 0;
 		min-width: 0;
 		/* A nuance lighter than the ground in dark, still white in light — matches
-		   the note list beside it so the two read as one writing surface. */
+		   the note list beside it so the two read as one writing surface. Kul gives
-		background: var(--surface-raised);
+		   the text field its own darker grey via --editor-bg; other themes fall back
+		   to the shared surface so the list and the editor stay the same colour. */
+		background: var(--editor-bg, var(--surface-raised));
 		border: 1px solid var(--line);
 		border-radius: var(--radius);
 		/* Luft nok til at teksten ikke rører kanten.
@@ -1897,14 +1931,48 @@
 		font-size: var(--text-sm);
 	}
 
+	/* The way back to the list on a phone — an iOS-style "‹ Noter" at the top of the
+	   editor. Hidden on a wide screen, where the list is always beside the editor. */
+	.back {
+		display: none;
+		align-self: flex-start;
+		align-items: center;
+		gap: var(--s1);
+		margin-bottom: var(--s2);
+		padding: var(--s1) 0;
+		font-size: var(--text-base);
+		color: var(--accent);
+	}
+
 	@media (max-width: 700px) {
 		.notes {
 			grid-template-columns: 1fr;
+			padding: 0;
+			gap: 0;
 		}
 
-		aside {
+		/* One pane at a time. The two-column card layout has no room on a phone, so
-			border-right: 0;
+		   the list shows until a note is opened and the editor takes over once one is
-			padding-right: 0;
+		   — the back button is the way between them. Without this the editor stacked
+		   below a full-height list, so a tapped note opened out of sight. */
+		.notes.has-note aside {
+			display: none;
+		}
+
+		.notes:not(.has-note) .editor {
+			display: none;
+		}
+
+		/* Full-bleed: the card border and rounded corners are for sitting beside
+		   another card, and on one column there is nothing beside it. */
+		aside,
+		.editor {
+			border: 0;
+			border-radius: 0;
+		}
+
+		.back {
+			display: inline-flex;
 		}
 	}
 </style>