From 0402fd9c5604b1dbd3333cdea8077513e9eda823 Mon Sep 17 00:00:00 2001
From: Thomas Lynch <tom@69420.me>
Date: Mon, 6 Dec 2021 21:21:07 +1100
Subject: [PATCH] start on thread watchlist ref #292

---
 gulp/res/css/style.css        |  4 ++--
 gulp/res/css/themes/tchan.css |  2 +-
 gulp/res/css/themes/win95.css |  2 +-
 gulp/res/js/dragable.js       |  2 +-
 gulp/res/js/watchlist.js      | 27 +++++++++++++++++++++++++++
 gulpfile.js                   |  3 ++-
 views/includes/postform.pug   |  2 +-
 7 files changed, 35 insertions(+), 7 deletions(-)
 create mode 100644 gulp/res/js/watchlist.js

diff --git a/gulp/res/css/style.css b/gulp/res/css/style.css
index 8c7fb45e..c920d953 100644
--- a/gulp/res/css/style.css
+++ b/gulp/res/css/style.css
@@ -205,7 +205,7 @@ pre {
 	content: "Settings";
 }
 
-#dragHandle {
+#postform-dragHandle {
 	flex-grow: 1;
 	background: var(--darken);
 	height: 1.75em;
@@ -1520,7 +1520,7 @@ row.wrap.sb .col {
 		width: 2.25em;
 	}
 
-	input[type="range"], input[type="number"], input[type="text"], input[type="submit"], input[type="password"], input[type="file"], .postform-style, select, #dragHandle {
+	input[type="range"], input[type="number"], input[type="text"], input[type="submit"], input[type="password"], input[type="file"], .postform-style, select, #postform-dragHandle {
 		min-height: 2.25em;
 		box-sizing: border-box;
 	}
diff --git a/gulp/res/css/themes/tchan.css b/gulp/res/css/themes/tchan.css
index b3279f42..ed11bcbd 100644
--- a/gulp/res/css/themes/tchan.css
+++ b/gulp/res/css/themes/tchan.css
@@ -201,7 +201,7 @@ input[type=file],input[type=number],input[type=password],input[type=range],input
 	padding: 4px
 }
 
-#dragHandle {
+#postform-dragHandle {
 	border-radius: 4px
 }
 
diff --git a/gulp/res/css/themes/win95.css b/gulp/res/css/themes/win95.css
index e590f8ca..9247bab4 100644
--- a/gulp/res/css/themes/win95.css
+++ b/gulp/res/css/themes/win95.css
@@ -99,7 +99,7 @@ table {
 	background: var(--post-color);
 	border-spacing:0;
 }
-.post-info, #dragHandle, th:not(.alt){
+.post-info, #postform-dragHandle, th:not(.alt){
 	font-weight: bold;
 	color: #ddd;
 	background: #808080!important;
diff --git a/gulp/res/js/dragable.js b/gulp/res/js/dragable.js
index 0bce238f..b4812098 100644
--- a/gulp/res/js/dragable.js
+++ b/gulp/res/js/dragable.js
@@ -118,5 +118,5 @@ class Dragable {
 }
 
 if (document.getElementById('postform')) {
-	new Dragable('#dragHandle', '#postform');
+	new Dragable('#postform-dragHandle', '#postform');
 }
diff --git a/gulp/res/js/watchlist.js b/gulp/res/js/watchlist.js
new file mode 100644
index 00000000..b41652e6
--- /dev/null
+++ b/gulp/res/js/watchlist.js
@@ -0,0 +1,27 @@
+let watchList = new Set(JSON.parse(localStorage.getItem('watchlist')));
+window.addEventListener('settingsReady', () => {
+
+	const watchListInput = document.getElementById('watchlist-setting');
+	watchListInput.value = [...watchList];
+	const watchListClearButton = document.getElementById('watchlist-clear');
+
+	/*
+	 * todo: use compiled pug to create and/or update watchlist
+	 * similar to live.js, have a separate pug function and the list container,
+	 * and for each entry and add the listeners when inserting one
+	 */
+	//new Dragable('#watchlist', '#postform'); //make watch list draggable and maintains position
+
+	const removeWatchList = (board, thread) => {
+		watchList.delete(`${board}-${thread}`);
+	}
+	const clearWatchList = () => {
+		watchList = new Set();
+		watchListInput.value = '';
+		setLocalStorage('watchlist', '[]');
+		console.log('cleared watchlist');
+	}
+	watchListClearButton.addEventListener('click', clearWatchList, false);
+
+
+});
diff --git a/gulpfile.js b/gulpfile.js
index b6b809e7..7ea440e3 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -417,12 +417,12 @@ const extraLocals = ${JSON.stringify({ meta: config.get.meta, reverseImageLinksU
 			`!${paths.scripts.src}/saveoverboard.js`,
 			`!${paths.scripts.src}/hidefileinput.js`,
 			`!${paths.scripts.src}/dragable.js`,
+			`!${paths.scripts.src}/watchlist.js`,
 			`!${paths.scripts.src}/filters.js`,
 			`!${paths.scripts.src}/hideimages.js`,
 			`!${paths.scripts.src}/yous.js`,
 			`!${paths.scripts.src}/catalog.js`,
 			`!${paths.scripts.src}/time.js`,
-			`!${paths.scripts.src}/themelist.js`, //dont include files from my fuck up with git. todo: make this a migration?
 			`!${paths.scripts.src}/timezone.js`,
 		])
 		.pipe(concat('all.js'))
@@ -432,6 +432,7 @@ const extraLocals = ${JSON.stringify({ meta: config.get.meta, reverseImageLinksU
 			`${paths.scripts.src}/saveoverboard.js`,
 			`${paths.scripts.src}/hidefileinput.js`,
 			`${paths.scripts.src}/dragable.js`,
+			`${paths.scripts.src}/watchlist.js`,
 			`${paths.scripts.src}/hideimages.js`,
 			`${paths.scripts.src}/yous.js`,
 			`${paths.scripts.src}/filters.js`,
diff --git a/views/includes/postform.pug b/views/includes/postform.pug
index b0f50f02..7831bb7a 100644
--- a/views/includes/postform.pug
+++ b/views/includes/postform.pug
@@ -9,7 +9,7 @@ section.form-wrapper.flex-center
 			input(type='hidden' name='_csrf' value=csrf)
 		input(type='hidden' name='thread' value=isThread ? thread.postId : null)
 		section.row.jsonly
-			.noselect#dragHandle #{isThread ? 'New Reply' : 'New Thread'}
+			.noselect#postform-dragHandle #{isThread ? 'New Reply' : 'New Thread'}
 		if board.settings.forceAnon && !modview
 			section.row
 				.label Sage