From 1d5cdf96075c54e87fa501cbd9d7f533cecc891e Mon Sep 17 00:00:00 2001
From: Tasia <tasiaiso@proton.me>
Date: Thu, 22 Feb 2024 18:11:13 +0100
Subject: [PATCH] feat(wiki): improvements to the wiki's UI

---
 apps/wiki/tf-collection.js |  3 ++-
 apps/wiki/tf-wiki-app.js   | 19 +++++++++++++------
 apps/wiki/tf-wiki-doc.js   | 20 ++++++++++++++++----
 apps/wiki/tildefriends.css |  8 ++++++++
 4 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/apps/wiki/tf-collection.js b/apps/wiki/tf-collection.js
index 9308ba71..03fb91b0 100644
--- a/apps/wiki/tf-collection.js
+++ b/apps/wiki/tf-collection.js
@@ -5,6 +5,7 @@ class TfCollectionElement extends LitElement {
 	static get properties() {
 		return {
 			whoami: {type: String},
+			category: {type: String},
 			collection: {type: Object},
 			selected_id: {type: String},
 			is_creating: {type: Boolean},
@@ -68,7 +69,7 @@ class TfCollectionElement extends LitElement {
 			<link rel="stylesheet" href="tildefriends.css"/>
 			<span class="inline-flex-row">
 				<select class="button" @change=${this.on_selected} id="select" value=${this.selected_id}>
-					<option value="" ?selected=${this.selected_id === ''} disabled hidden>(select)</option>
+					<option value="" ?selected=${this.selected_id === ''} disabled hidden>(select ${this.category})</option>
 					${Object.values(this.collection ?? {}).sort((x, y) => x.name.localeCompare(y.name)).map(x => html`<option value=${x.id} ?selected=${this.selected_id === x.id}>${x.name}</option>`)}
 				</select>
 				<span ?hidden=${!this.is_renaming || !this.whoami}>
diff --git a/apps/wiki/tf-wiki-app.js b/apps/wiki/tf-wiki-app.js
index 9bcb308e..92b0dad9 100644
--- a/apps/wiki/tf-wiki-app.js
+++ b/apps/wiki/tf-wiki-app.js
@@ -242,15 +242,20 @@ class TfCollectionsAppElement extends LitElement {
 		return html`
 			<link rel="stylesheet" href="tildefriends.css"/>
 			<style>
-				.toc {
+				.toc-item {
 					white-space: nowrap;
 					cursor: pointer;
 				}
-				.toc:hover {
+				.toc-item:hover {
 					background-color: #0cc;
 				}
-				.toc.selected {
+				.toc-item.selected {
 					background-color: #088;
+					font-weight: bold;
+				}
+				.table-of-contents {
+					flex: 0 0;
+					margin-right: 16px;
 				}
 			</style>
 			<div>
@@ -260,6 +265,7 @@ class TfCollectionsAppElement extends LitElement {
 				${keyed(this.whoami, html`<tf-collection
 					.collection=${this.wikis}
 					whoami=${this.whoami}
+					category="wiki"
 					selected_id=${this.wiki?.id}
 					@create=${this.on_wiki_create}
 					@rename=${this.on_wiki_rename}
@@ -268,6 +274,7 @@ class TfCollectionsAppElement extends LitElement {
 				${keyed(this.wiki_doc?.id, html`<tf-collection
 					.collection=${this.wiki_docs}
 					whoami=${this.whoami}
+					category="document"
 					selected_id=${(this.wiki_doc && this.wiki_doc?.parent == this.wiki?.id) ? this.wiki_doc?.id : ''}
 					@create=${this.on_wiki_doc_create}
 					@rename=${this.on_wiki_doc_rename}
@@ -292,12 +299,12 @@ class TfCollectionsAppElement extends LitElement {
 				</div>
 			</div>
 			<div class="flex-row">
-				<div style="flex: 0 0">
+				<div class="box table-of-contents">
 					${Object.values(this.wikis || {}).sort((x, y) => x.name.localeCompare(y.name)).map(wiki => html`
-						<div class="toc ${self.wiki?.id === wiki.id ? 'selected' : ''}" @click=${() => self.on_wiki_changed({detail: {value: wiki}})}>📕${wiki.name}</div>
+						<div class="toc-item ${self.wiki?.id === wiki.id ? 'selected' : ''}" @click=${() => self.on_wiki_changed({detail: {value: wiki}})}>${self.wiki?.id === wiki.id ? '' : '>'} ${wiki.name}</div>
 						<ul>
 							${Object.values(self.wiki_docs || {}).filter(doc => doc.parent === wiki?.id).sort((x, y) => x.name.localeCompare(y.name)).map(doc => html`
-								<li class="toc ${self.wiki_doc?.id === doc.id ? 'selected' : ''}" style="list-style: none; text-indent: -1rem" @click=${() => self.on_wiki_doc_changed({detail: {value: doc}})}>${doc?.private ? '🔒' : '📄'} ${doc.name}</li>
+								<li class="toc-item ${self.wiki_doc?.id === doc.id ? 'selected' : ''}" style="list-style: none; text-indent: -1rem" @click=${() => self.on_wiki_doc_changed({detail: {value: doc}})}>${doc?.private ? '🔒' : '📄'} ${doc.name}</li>
 							`)}
 						</ul>
 					`)}
diff --git a/apps/wiki/tf-wiki-doc.js b/apps/wiki/tf-wiki-doc.js
index 4b3eb57b..5c7ce3ad 100644
--- a/apps/wiki/tf-wiki-doc.js
+++ b/apps/wiki/tf-wiki-doc.js
@@ -76,7 +76,9 @@ class TfWikiDocElement extends LitElement {
 
 	async load_blob() {
 		let blob = await tfrpc.rpc.get_blob(this.value?.blob);
-		if (blob.endsWith('.box')) {
+		if(!blob) {
+			console.warn("no blob found, we're going to assume the document is empty (load_blob())");
+		} else if (blob.endsWith('.box')) {
 			let d = await tfrpc.rpc.try_decrypt(this.whoami, blob);
 			if (d) {
 				blob = d;
@@ -239,6 +241,15 @@ class TfWikiDocElement extends LitElement {
 				a:visited { color: #6c71c4 }
 				a:hover { color: #859900 }
 				a:active { color: #2aa198 }
+
+				#editor-text-area {
+					background-color: #00000040;
+					color: white;
+					style="flex: 1 1;
+					min-height: 10em;
+					font-size: larger;
+					${this.value?.private ? 'border: 4px solid #800' : ''
+				}
 			</style>
 			<div class="inline-flex-row">
 				<button ?disabled=${!this.whoami || this.is_editing} @click=${() => self.is_editing = true}>Edit</button>
@@ -249,15 +260,16 @@ class TfWikiDocElement extends LitElement {
 				<button ?disabled=${!this.is_editing} @click=${this.on_blog_publish}>Publish Blog</button>
 			</div>
 			<div ?hidden=${!this.value?.private} style="color: #800">🔒 document is private</div>
-			<div class="flex-row" ${this.value?.private ? 'border-top: 4px solid #800' : ''}">
+			<div class="flex-column" ${this.value?.private ? 'border-top: 4px solid #800' : ''}">
 				<textarea
 					?hidden=${!this.is_editing}
-					style="flex: 1 1; min-height: 10em; ${this.value?.private ? 'border: 4px solid #800' : ''}"
+					id="editor-text-area"
 					@input=${this.on_edit}
 					@paste=${this.paste}
 					.value=${this.blob ?? ''}></textarea>
 				<div style="flex: 1 1">
-					<div ?hidden=${!this.is_editing} style="border: 1px solid #fff; border-radius: 1em; padding: 0.5em">
+					<div ?hidden=${!this.is_editing} class="box">
+						Summary
 						<img ?hidden=${!thumbnail_ref} style="max-width: 128px; max-height: 128px; float: right" src="/${thumbnail_ref}/view">
 						<h1 ?hidden=${!this.title(this.blob)}>${unsafeHTML(this.markdown(this.title(this.blob)))}</h1>
 						${unsafeHTML(this.markdown(this.summary(this.blob)))}
diff --git a/apps/wiki/tildefriends.css b/apps/wiki/tildefriends.css
index 23e50fe8..e3276c2e 100644
--- a/apps/wiki/tildefriends.css
+++ b/apps/wiki/tildefriends.css
@@ -100,3 +100,11 @@ tr:nth-child(even) {
 	display: inline-flex;
 	flex-direction: row;
 }
+
+.box {
+	background-color: #00000020;
+	border: 1px solid grey;
+	border-radius: 8px;
+	padding: 16px;
+	margin: 4px;
+}