start on thread watchlist ref #292

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;
 	}

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
 }
 

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;

gulp/res/js/dragable.js

@@ -118,5 +118,5 @@ class Dragable {
 }
 
 if (document.getElementById('postform')) {
-	new Dragable('#dragHandle', '#postform');
+	new Dragable('#postform-dragHandle', '#postform');
 }

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);
+
+
+});

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`,

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