- Post editing

- Post deleting
- Simple search functionality
- CSS now uses vars
- Fixing text box font size on iOS

htdocs/index.php

@@ -97,16 +97,18 @@ function trace(string $message): void {
 
 /// Represents a journal post.
 class Post {
-	public int $post_id;
+	public ?int $post_id;
 	public string $body;
 	public int $author_id;
 	public int $created;
+	public ?int $updated;
 
 	function __construct(array $row) {
 		$this->post_id = $row['rowid'];
 		$this->body = $row['body'];
 		$this->author_id = $row['author_id'];
 		$this->created = $row['created'];
+		$this->updated = $row['updated'];
 	}
 
 	/// Normalizes the body of a post.
@@ -167,6 +169,7 @@ class Post {
 	public static function get_posts(
 			int $user_id,
 			int $count = RECENT_POSTS_PER_PAGE,
+			?string $query = null,
 			?int $before_time = null): array {
 		$sql = 'SELECT rowid, * FROM posts WHERE author_id=:author_id';
 		$args = array(
@@ -177,6 +180,16 @@ class Post {
 			$sql .= ' AND created < :before_time';
 			$args[':before_time'] = $before_time;
 		}
+		$search_where = '';
+		if ($query) {
+			foreach (explode(' ', $query) as $i => $term) {
+				if (strlen($term) == 0) continue;
+				$symbol = ":wordpattern{$i}";
+				$search_where .= " AND body LIKE $symbol ESCAPE '!'";
+				$args[$symbol] = '%' . Database::escape_like($term, '!') . '%';
+			}
+			$sql .= $search_where;
+		}
 		$sql .= ' ORDER BY created DESC LIMIT :count;';
 		$posts = Database::query_objects('Post', $sql, $args);
 
@@ -189,12 +202,8 @@ class Post {
 		if ($before_time) {
 			// We're paged forward. Check if there are newer posts.
 			$sql = 'SELECT rowid, * FROM posts WHERE author_id=:author_id AND ' .
-				'created >= :before_time ORDER BY created ASC LIMIT :count;';
-			$args = array(
-				':author_id' => $user_id,
-				':count' => $count + 1, // to see if it's the newest page
-				':before_time' => $before_time,
-			);
+				'created >= :before_time ' . $search_where . ' ORDER BY created ASC LIMIT :count;';
+			// Reusing same $args
 			$newer_posts = Database::query_objects('Post', $sql, $args);
 			if (sizeof($newer_posts) > $count) {
 				$prev_date = $newer_posts[array_key_last($newer_posts)]->created;
@@ -203,9 +212,48 @@ class Post {
 				$prev_page = BASE_URL;
 			}
 		}
+		if ($query) {
+			if ($prev_page) {
+				$prev_page .= (str_contains($prev_page, '?') ? '&' : '?') .
+					'search=' . urlencode($query);
+			}
+			if ($next_page) {
+				$next_page .= (str_contains($next_page, '?') ? '&' : '?') .
+					'search=' . urlencode($query);
+			}
+		}
 
 		return array($posts, $prev_page, $next_page);
 	}
+
+	/// Fetches a post by its post ID.
+	/// @param int $post_id  ID of the post.
+	/// @return ?Post  The Post, or null if not found.
+	public static function get_by_id(int $post_id): ?Post {
+		$sql = 'SELECT rowid, * FROM posts WHERE rowid=:post_id;';
+		$args = array(':post_id' => $post_id);
+		return Database::query_object('Post', $sql, $args);
+	}
+
+	/// Deletes this post.
+	public function delete(): void {
+		$sql = 'DELETE FROM posts WHERE rowid=:post_id;';
+		$args = array(':post_id' => $this->post_id);
+		Database::query($sql, $args);
+		$this->post_id = null;
+	}
+
+	/// Update text of post.
+	public function update(string $new_body): void {
+		$new_body = self::normalize_body($new_body);
+		$sql = 'UPDATE posts SET body=:body, updated=:updated WHERE rowid=:rowid;';
+		$args = array(
+			':body' => $new_body,
+			':updated' => time(),
+			':rowid' => $this->post_id,
+		);
+		Database::query($sql, $args);
+	}
 }
 
 /// Represents a user.
@@ -477,9 +525,12 @@ class Database {
 	///                 and named column values.
 	public static function query(string $sql, array $params = array()): bool|array {
 		$db = new SQLite3(DB_PATH);
+		trace('SQL: ' . $sql);
 		$stmt = $db->prepare($sql);
 		foreach ($params as $name => $value) {
-			$stmt->bindValue($name, $value, self::sqlite_type($value));
+			$type = self::sqlite_type($value);
+			$stmt->bindValue($name, $value, $type);
+			trace("\tbind {$name} => {$value} ({$type})");
 		}
 		$result = $stmt->execute();
 		if (gettype($result) == 'bool') {
@@ -514,6 +565,18 @@ class Database {
 				fatal_error("Bad datatype in sqlite statement");
 		}
 	}
+
+	/// Escapes a string for use in a LIKE clause.
+	/// @param string $value   String to escape.
+	/// @param string $escape  Character to use for escaping. Default is !
+	/// @return string  Escaped string
+	public static function escape_like(string $value, string $escape='!'): string {
+		$s = $value;
+		$s = str_replace($escape, $escape . $escape, $s); // escape char
+		$s = str_replace('%', $escape . '%', $s); // any chars
+		$s = str_replace('_', $escape . '_', $s); // one char
+		return $s;
+	}
 }
 
 /// App configuration management. All config is stored in the 'config' table in
@@ -717,11 +780,13 @@ class HTMLPage {
 		if (User::$current) {
 			print(<<<HTML
 							<div class="menu-container">
-								<details>
-									<summary><span>☰</span></summary>
+								<details class="menu">
+									<summary class="no-indicator menu-button"><span>☰</span></summary>
 
 									<ul>
-										<a href="?logout"><li>Log out</li></a>
+										<li><a href="?search">Search</a></li>
+										<li class="menu-divider"></li>
+										<li class="logout-item destructive"><a href="?logout">Log out</a></li>
 									</ul>
 								</details>
 							</div>
@@ -758,21 +823,42 @@ class HTMLPage {
 	}
 
 	public static function render_post_form(): void {
-		$body = array_key_exists(SESSION_KEY_POST_BODY, $_SESSION) ? $_SESSION[SESSION_KEY_POST_BODY] : '';
-		unset($_SESSION[SESSION_KEY_POST_BODY]);
+		$action = 'post';
+		$verb = 'Post';
+		$body = '';
+		if ($edit_id = validate($_GET, 'edit', INPUT_TYPE_INT, required: false)) {
+			if ($post = Post::get_by_id($edit_id)) {
+				$body = $post->body;
+				$action = 'edit';
+				$verb = 'Update';
+			} else {
+				unset($edit_id);
+			}
+		} elseif (array_key_exists(SESSION_KEY_POST_BODY, $_SESSION)) {
+			$body = $_SESSION[SESSION_KEY_POST_BODY];
+			unset($_SESSION[SESSION_KEY_POST_BODY]);
+		}
+		$body_html = htmlentities($body);
 		print(<<<HTML
 			<form id="post-form" method="POST">
-				<div class="text-container"><textarea name="body" placeholder="Your journal post here…">$body</textarea></div>
-				<input type="hidden" name="action" value="post" />
-				<div class="submit-post"><input type="submit" value="Post" /></div>
+				<div class="text-container"><textarea name="body" placeholder="Your journal post here…">$body_html</textarea></div>
+				<input type="hidden" name="action" value="{$action}" />
+			HTML
+		);
+		if ($edit_id) {
+			print("<input type=\"hidden\" name=\"edit_id\" value=\"{$edit_id}\" />");
+		}
+		print(<<<HTML
+				<div class="submit-post"><input type="submit" value="{$verb}" /></div>
 			</form>
 			HTML
 		);
 	}
 
 	public static function render_recent_posts(): void {
+		$query = validate($_GET, 'search', INPUT_TYPE_STRING | INPUT_TYPE_TRIMMED, required: false);
 		$before = validate($_GET, 'before', INPUT_TYPE_INT, required: false);
-		[ $posts, $prev_url, $next_url ] = Post::get_posts(User::$current->user_id, before_time: $before);
+		[ $posts, $prev_url, $next_url ] = Post::get_posts(User::$current->user_id, query: $query, before_time: $before);
 		print("<div class=\"post-container\">\n");
 		if ($prev_url !== null) {
 			print("<div class=\"previous\"><a href=\"{$prev_url}\">Previous</a></div>\n");
@@ -788,12 +874,18 @@ class HTMLPage {
 
 	/// Encodes a post body as HTML. Inserts linebreaks and paragraph tags.
 	private static function post_body_html(string $body): string {
+		$html_p_start = "<p>";
+		$html_p_end = "</p>\n";
+		$html_newline = "<br/>\n";
 		$body_html = htmlentities($body);
 		// Single newlines are turned into linebreaks.
-		$body_html = str_replace("\n", "<br/>\n", $body_html);
+		$body_html = str_replace("\n", $html_newline, $body_html);
 		// Pairs of newlines are turned into paragraph separators.
-		$paragraphs = explode("<br/>\n<br/>\n", $body_html);
-		$body_html = "<p>" . implode("</p>\n\n<p>", $paragraphs) . "</p>\n";
+		$body_html = $html_p_start .
+			str_replace($html_newline . $html_newline,
+				$html_p_end . $html_p_start,
+				$body_html) .
+			$html_p_end;
 		return $body_html;
 	}
 
@@ -804,17 +896,51 @@ class HTMLPage {
 			<div class="post">
 				<article>
 					<div class="post-body">{$body_html}</div>
-					<footer>
-						<div class="post-date">
-							Posted {$date}
-						</div>
-					</footer>
+					<div class="post-footer">
+						<footer class="secondary-text">
+							<div class="post-date">
+								Posted {$date}
+			HTML
+		);
+		if ($post->updated && $post->updated != $post->created) {
+			print('<br/>(updated ' . localized_date_string($post->updated) . ')');
+		}
+		print(<<<HTML
+							</div>
+							<details class="post-actions menu">
+								<summary class="no-indicator menu-button"><span>actions</span></summary>
+
+								<ul>
+									<li><a href="?edit={$post->post_id}">Edit</a></li>
+									<li class="menu-divider"></li>
+									<li class="post-action-delete destructive"><a href="?delete={$post->post_id}">Delete</a></li>
+								</ul>
+							</details>
+						</footer>
+					</div>
 				</article>
 			</div>
 			HTML
 		);
 	}
 
+	public static function render_search_form(): void {
+		$q = validate($_GET, 'search', INPUT_TYPE_STRING | INPUT_TYPE_TRIMMED, required: false);
+		$q_html = htmlentities($q);
+		$cancel = BASE_URL;
+		print(<<<HTML
+			<form id="search-form" method="GET">
+				<div>
+					<label for="search">Search:</label>
+					<input type="text" name="search" id="search" value="{$q_html}" autocapitalize="off" />
+					<input type="submit" value="Search" />
+					<a href="{$cancel}">Cancel</a>
+				</div>
+			</form>
+			HTML
+		);
+	}
+
 	public static function render_sign_in_form(): void {
 		print(<<<HTML
 			<form id="signin-form" method="POST">
@@ -888,7 +1014,15 @@ switch ($_SERVER['REQUEST_METHOD']) {
 		HTMLPage::render_page_start();
 		HTMLPage::render_error_if_needed();
 		if (User::$current) {
-			HTMLPage::render_post_form();
+			if ($delete_id = validate($_GET, 'delete', INPUT_TYPE_INT, required: false)) {
+				Post::get_by_id($delete_id)?->delete();
+				HTMLPage::redirect_home();
+			}
+			if (array_key_exists('search', $_GET)) {
+				HTMLPage::render_search_form();
+			} else {
+				HTMLPage::render_post_form();
+			}
 			HTMLPage::render_recent_posts();
 		} elseif (User::any_exist()) {
 			HTMLPage::render_sign_in_form();
@@ -912,6 +1046,15 @@ switch ($_SERVER['REQUEST_METHOD']) {
 				}
 				Post::create($body, $author, $created);
 				break;
+			case 'edit':
+				$body = validate($_POST, 'body', $nonempty_str_type);
+				$edit_id = validate($_POST, 'edit_id', INPUT_TYPE_INT);
+				if (!User::$current) {
+					// Not logged in. Save body for populating once they sign in.
+					fatal_error('Please sign in to edit.');
+				}
+				Post::get_by_id($edit_id)?->update($body);
+				break;
 			case 'createaccount':
 				$username = validate($_POST, 'username', INPUT_TYPE_USERNAME);
 				$password = validate($_POST, 'password', $password_type);

htdocs/journal.css

@@ -1,29 +1,133 @@
+/* Colors */
+
 :root {
-	background-color: white;
-	color: black;
+	--page-background: #fff;
+	--text-color: #000;
+	--secondary-text-color: #888;
+	--nav-background: #fff;
+	--menu-background: #eee;
+	--menu-border: #ccc;
+
+	--highlight: #d83;
+	--error-text: #d00;
+	--error-background: #fcc;
+	--error-border: #400;
+	--callout-text: #000;
+	--callout-background: #ffc;
+	--callout-border: #886;
+	--destructive: #e00;
+	--destructive-contrast: #fff;
+}
+
+@media(prefers-color-scheme: dark) {
+	:root {
+		--page-background: #222;
+		--text-color: #fff;
+		--secondary-text-color: #888;
+		--nav-background: #444;
+		--menu-background: #444;
+		--menu-border: #000;
+	}
 }
+
+/* Base */
+
 :root, input, textarea {
 	font-family: Garamond, Times New Roman, serif;
 	line-height: 1.25;
 	font-size: 12pt;
 }
+body, textarea, input, select {
+	background-color: var(--page-background);
+	color: var(--text-color);
+}
 body {
 	margin: 0;
 	padding: 0;
 }
 a {
-	color: #d83;
+	color: var(--highlight);
 	text-decoration: none;
 }
+summary {
+	-webkit-user-select: none;
+	user-select: none;
+}
+summary.no-indicator {
+	list-style-type: none;
+}
+summary.no-indicator::-webkit-details-marker {
+	display: none;
+}
+.secondary-text {
+	color: var(--secondary-text-color);
+	font-size: 0.8rem;
+}
+details.menu ul {
+	position: relative;
+	z-index: 1;
+	margin: 0;
+	padding: 0;
+	list-style-type: none;
+	border: 1px solid var(--menu-border);
+	background-color: var(--menu-background);
+	box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.25);
+	text-align: start;
+}
+details.menu li a {
+	color: var(--highlight);
+}
+details.menu li a:hover {
+	background-color: var(--highlight);
+	color: black;
+}
+details.menu li {
+}
+details.menu li a {
+	padding: 0.4em 1em;
+	display: inline-block;
+	position: relative;
+	width: 10ch;
+}
+details.menu li + li {
+	border-top: 1px solid var(--menu-border);
+}
+details.menu li.menu-divider {
+	padding-top: 0.75em;
+}
+details.menu li.destructive a {
+	color: var(--destructive);
+}
+details.menu li.destructive a:hover {
+	background-color: var(--destructive);
+	color: var(--destructive-contrast);
+}
+summary.menu-button:hover {
+	color: var(--highlight);
+}
+summary.menu-button > span:first-child {
+	display: inline-block;
+	line-height: 1em;
+	padding: 0.5rem 0.7em;
+	margin: 0;
+	border-radius: 0.5em;
+}
+details[open] summary.menu-button > span:first-child {
+	background-color: var(--highlight);
+	color: white;
+}
+
+
+/* Navigation */
 
 .top-nav {
 	position: fixed;
 	top: 0;
-	left: 0;
-	right: 0;
+	inset-inline-start: 0;
+	inset-inline-end: 0;
 	height: 2em;
 	text-align: center;
-	background-color: white;
+	background-color: var(--nav-background);
 	box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.25);
 }
 .title {
@@ -39,79 +143,42 @@ a {
 	right: 0;
 }
 .menu-container summary {
-	list-style-type: none;
 	text-align: right;
-	-webkit-user-select: none;
-	user-select: none;
-}
-.menu-container summary:hover {
-	color: #d83;
-}
-.menu-container summary span {
-	display: inline-block;
-	line-height: 1rem;
-	padding: 0.5rem 0.7rem;
-	margin: 0;
-	border-radius: 0.5rem;
-}
-.menu-container details {
-	text-align: left;
-}
-.menu-container details[open] summary span {
-	background-color: #d83;
-	color: white;
-}
-.menu-container ul {
-	margin: 0;
-	padding: 0;
-	list-style-type: none;
-	border: 1px solid #ccc;
-	background-color: #eee;
-	box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.25);
-}
-.menu-container a li {
-	color: #d83;
-}
-.menu-container a:hover li {
-	background-color: #d83;
-	color: black;
-}
-.menu-container li {
-	padding: 0.4em 1em;
-}
-.menu-container a + a li {
-	border-top: 1px solid #ccc;
-}
-summary::-webkit-details-marker {
-	display: none;
 }
 
+/* Content container */
+
 .content {
 	max-width: 66ch;
 	margin: 2.5em auto 2em auto;
 	padding: 0.5em;
 }
 
+/* Errors and alerts */
+
 .error {
 	padding: 1em;
-	border: 1px solid #400;
-	background-color: #fcc;
-	color: #d00;
+	border: 1px solid var(--error-border);
+	background-color: var(--error-background);
+	color: var(--error-text);
 	font-weight: bold;
 	margin-bottom: 1em;
 }
 .important {
 	padding: 1em;
-	border: 1px solid #886;
-	background-color: #ffc;
-	color: black;
+	border: 1px solid var(--callout-border);
+	background-color: var(--callout-background);
+	color: var(--callout-text);
 	margin-bottom: 1em;
 }
 
+/* Post form */
+
 textarea {
 	width: 100%;
 	height: 8em;
 	font-family: inherit;
+	font-size: 1rem;
 	margin: 0;
 	box-sizing: border-box;
 }
@@ -126,6 +193,8 @@ input[type="submit"] {
 	min-width: 15ch;
 }
 
+/* Posts */
+
 .post-container {
 	margin-top: 1.5rem;
 }
@@ -140,27 +209,34 @@ input[type="submit"] {
 	margin: 0;
 }
 .post-date {
-	font-size: 80%;
-	color: #888;
 	margin-top: 0.5em;
 }
-
-@media(prefers-color-scheme: dark) {
-	:root, textarea, input, select {
-		background-color: #222;
-		color: white;
-	}
-	.top-nav {
-		background-color: #444;
-	}
-	.menu-container ul {
-		border: 1px solid black;
-		background-color: #444;
-	}
-	.menu-container a + a li {
-		border-top: 1px solid #000;
-	}
+.post-footer {
+	position: relative;
+}
+.post-actions {
+	position: absolute;
+	top: 0;
+	inset-inline-end: 0;
+}
+.post-actions summary {
+	text-align: end;
+}
+.post-actions summary > span:first-child {
+	padding-top: 0;
+	padding-bottom: 0;
 }
+details.menu li.post-action-delete a {
+	color: var(--destructive);
+}
+details.menu li.post-action-delete a:hover {
+	background-color: var(--destructive);
+	color: var(--destructive-contrast);
+}
+
+
+/* Mobile */
+
 @media screen and (max-width: 450px) {
 	:root {
 		font-size: 16pt;

source/create-tables.sql

@@ -23,6 +23,7 @@ DROP TABLE IF EXISTS posts;
 CREATE TABLE posts (
 	body TEXT,                    -- main text of the post
 	created INTEGER,              -- timestamp when the post was created
+	updated INTEGER,              -- timestamp when the post was last edited
 	author_id INTEGER NOT NULL,   -- user_id of author
 	FOREIGN KEY (author_id) REFERENCES users (user_id)
 );
@@ -30,10 +31,10 @@ CREATE INDEX IF NOT EXISTS idx_posts_created ON posts (created DESC);
 
 DROP TABLE IF EXISTS sessions;
 CREATE TABLE sessions (
-	token TEXT UNIQUE NOT NULL,
-	user_id INTEGER NOT NULL,
-	created INTEGER,
-	updated INTEGER,
+	token TEXT UNIQUE NOT NULL,  -- random hex string
+	user_id INTEGER NOT NULL,    -- owner of the token
+	created INTEGER,             -- timestamp when the session was created
+	updated INTEGER,             -- timestamp when the session was last used
 	FOREIGN KEY (user_id) REFERENCES users (user_id)
 );
 CREATE UNIQUE INDEX IF NOT EXISTS idx_sessions_token ON sessions (token);