From 0b47207949d02adca4036257550d05635c9b27e3 Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Tue, 12 Dec 2023 17:38:10 +0000
Subject: [PATCH] Show selected and hovered items in the wiki table of
 contents.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4675 ed5197a5-7fde-0310-b194-c3ffbd925b24
---
 apps/wiki.json           |  2 +-
 apps/wiki/tf-wiki-app.js | 16 ++++++++++++----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/apps/wiki.json b/apps/wiki.json
index f7504e7b..056170ac 100644
--- a/apps/wiki.json
+++ b/apps/wiki.json
@@ -1,5 +1,5 @@
 {
   "type": "tildefriends-app",
   "emoji": "📝",
-  "previous": "&FapSqeXK/JbtaIuh3Ot6SNJ1hR7kGRqZwiML5t5GdGw=.sha256"
+  "previous": "&58whE4qyKCpHyOXRE/wF78B4oGn9DhJHiJcVMPZB2pU=.sha256"
 }
\ No newline at end of file
diff --git a/apps/wiki/tf-wiki-app.js b/apps/wiki/tf-wiki-app.js
index 8ec7a996..3052e62a 100644
--- a/apps/wiki/tf-wiki-app.js
+++ b/apps/wiki/tf-wiki-app.js
@@ -240,6 +240,14 @@ class TfCollectionsAppElement extends LitElement {
 	render() {
 		let self = this;
 		return html`
+			<style>
+				.toc:hover {
+					background-color: #f00;
+				}
+				.toc.selected {
+					border: 1px solid #fff;
+				}
+			</style>
 			<div>
 				<tf-id-picker .ids=${this.ids} selected=${this.whoami} @change=${this.on_whoami_changed} ?hidden=${!this.ids?.length}></tf-id-picker>
 			</div>
@@ -280,11 +288,11 @@ class TfCollectionsAppElement extends LitElement {
 			</div>
 			<div style="display: flex; flex-direction: row">
 				<div style="flex: 0 0">
-					${Object.values(this.wikis || {}).map(wiki => html`
-						<div style="white-space: nowrap" @click=${() => self.on_wiki_changed({detail: {value: wiki}})}>${wiki.name}</div>
+					${Object.values(this.wikis || {}).sort((x, y) => x.name.localeCompare(y.name)).map(wiki => html`
+						<div class="toc ${self.wiki?.id === wiki.id ? 'selected' : ''}" style="white-space: nowrap; cursor: pointer" @click=${() => self.on_wiki_changed({detail: {value: wiki}})}>${wiki.name}</div>
 						<ul>
-							${Object.values(self.wiki_docs || {}).filter(doc => doc.parent === wiki?.id).map(doc => html`
-								<li style="white-space: nowrap" @click=${() => self.on_wiki_doc_changed({detail: {value: doc}})}>${doc.name}</li>
+							${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="white-space: nowrap; cursor: pointer" @click=${() => self.on_wiki_doc_changed({detail: {value: doc}})}>${doc.name}</li>
 							`)}
 						</ul>
 					`)}