styling

app/src/App.module.scss

@@ -24,4 +24,10 @@
   flex-grow: 1;
   flex-basis: auto;
   overflow-x: scroll;
+
+  // Cribbed from https://www.magicpattern.design/tools/css-backgrounds
+  background-color: #e5e5f7;
+  opacity: 0.8;
+  background-image: radial-gradient(#444cf7 0.5px, #e5e5f7 0.5px);
+  background-size: 10px 10px;
 }

app/src/components/NodeDisplay.module.scss

@@ -13,6 +13,10 @@
   flex-direction: column;
 
   resize: horizontal;
+
+  background-color: rgba(255, 255, 255, 0.5);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
 }
 
 .header {

app/src/components/nodes/JournalPage.module.scss

@@ -4,7 +4,14 @@
   flex-direction: column;
 }
 
-.title {
+.titleContainer,
+.titleEditorForm {
+  display: flex;
+}
+
+.title,
+.titleEditor {
+  flex-grow: 1;
   padding: 12px;
   border: none;
   border-bottom: 1px solid lightgray;

app/src/components/nodes/JournalPage.tsx

@@ -33,7 +33,6 @@ export default function JournalPage({ id, data }: JournalPageProps) {
 
 	useEffect(() => {
 		if (changed) {
-			// console.log("OLD", previous, "NEW", valueToSave);
 			(async () => {
 				console.log("Saving...");
 				const resp = await fetch(`http://localhost:5195/node/${id}`, {
@@ -72,27 +71,34 @@ export default function JournalPage({ id, data }: JournalPageProps) {
 		<>
 			{isEditingTitle ? (
 				<form
+					className={styles.titleEditorForm}
 					onSubmit={(evt) => {
 						evt.preventDefault();
 						saveChangedTitle();
 					}}
 				>
 					<input
-						className={styles.title}
+						className={styles.titleEditor}
 						type="text"
 						value={title}
-						onChange={(evt) => setTitle(evt.target.value)}
+						onChange={(evt) => {
+							let newTitle = evt.target.value;
+							if (newTitle.trim().length === 0) newTitle = null;
+							setTitle(newTitle);
+						}}
 						onBlur={() => saveChangedTitle()}
 						// biome-ignore lint/a11y/noAutofocus: <explanation>
 						autoFocus
 					/>
 				</form>
 			) : (
-				<div
+				<div className={styles.titleContainer}>
-					className={styles.title}
+					<div
-					onDoubleClick={() => setIsEditingTitle(true)}
+						className={styles.title}
-				>
+						onDoubleClick={() => setIsEditingTitle(true)}
-					{title ?? <span className={styles.untitled}>(untitled)</span>}
+					>
+						{title ?? <span className={styles.untitled}>(untitled)</span>}
+					</div>
 				</div>
 			)}
 			<div data-color-mode="light" className={styles.container}>