From 4f503ac1a317e65c1bea972ced935ad1b3eb200a Mon Sep 17 00:00:00 2001
From: Michael Zhang <mail@mzhang.io>
Date: Mon, 27 May 2024 20:38:18 -0500
Subject: [PATCH] styling

---
 app/src/App.module.scss                       |  6 +++++
 app/src/components/NodeDisplay.module.scss    |  4 ++++
 .../components/nodes/JournalPage.module.scss  |  9 +++++++-
 app/src/components/nodes/JournalPage.tsx      | 22 ++++++++++++-------
 4 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/app/src/App.module.scss b/app/src/App.module.scss
index 481cc25..ce1d4af 100644
--- a/app/src/App.module.scss
+++ b/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;
 }
\ No newline at end of file
diff --git a/app/src/components/NodeDisplay.module.scss b/app/src/components/NodeDisplay.module.scss
index 60496b1..74c72f1 100644
--- a/app/src/components/NodeDisplay.module.scss
+++ b/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 {
diff --git a/app/src/components/nodes/JournalPage.module.scss b/app/src/components/nodes/JournalPage.module.scss
index d4b3798..af4b3c3 100644
--- a/app/src/components/nodes/JournalPage.module.scss
+++ b/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;
diff --git a/app/src/components/nodes/JournalPage.tsx b/app/src/components/nodes/JournalPage.tsx
index 06abf2d..a81e3a6 100644
--- a/app/src/components/nodes/JournalPage.tsx
+++ b/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
-					className={styles.title}
-					onDoubleClick={() => setIsEditingTitle(true)}
-				>
-					{title ?? <span className={styles.untitled}>(untitled)</span>}
+				<div className={styles.titleContainer}>
+					<div
+						className={styles.title}
+						onDoubleClick={() => setIsEditingTitle(true)}
+					>
+						{title ?? <span className={styles.untitled}>(untitled)</span>}
+					</div>
 				</div>
 			)}
 			<div data-color-mode="light" className={styles.container}>