#292

gulp/res/css/style.css

@@ -1209,7 +1209,7 @@ input[type="file"] {
 }
 
 .watched-thread a {
-	width: unset
+	width: unset;
 	margin-right: 5px;
 }
 

gulp/res/js/filters.js

@@ -261,6 +261,11 @@ const postMenuChange = function(e) {
 			break;
 		case 'moderate':
 			return moderatePost(postContainer);
+		case 'watch':
+			if (postContainer.classList.contains('op')) {
+				threadWatcher.add(postDataset.board, postDataset.postId, postDataset.subject);
+			}
+			return;
 	}
 	toggleFilter(filterType, filterData, hiding);
 };

gulp/res/js/watchedthread.js

@@ -6,9 +6,9 @@ var pug_match_html=/["&<>]/;function watchedthread(locals) {var pug_html = "", p
     (function (watchedthread) {
       pug_mixins["watchedthread"] = pug_interp = function(thread){
 var block = (this && this.block), attributes = (this && this.attributes) || {};
-pug_html = pug_html + "\u003Cdiv class=\"row watched-thread\"\u003E\u003Ca class=\"close\"\u003EX\u003C\u002Fa\u003E";
+pug_html = pug_html + "\u003Cdiv" + (" class=\"row watched-thread\""+pug_attr("data-id", `${thread.board}-${thread.postId}`, true, false)) + "\u003E\u003Ca class=\"close\"\u003EX\u003C\u002Fa\u003E";
 const watchedThreadLink = `/${thread.board}/thread/${thread.postId}.html`;
-pug_html = pug_html + "\u003Ca" + (pug_attr("href", watchedThreadLink, true, false)) + "\u003E\u002F" + (pug_escape(null == (pug_interp = thread.board) ? "" : pug_interp)) + "\u002F - " + (pug_escape(null == (pug_interp = thread.subject) ? "" : pug_interp)) + "\u003C\u002Fa\u003E\u003Ca" + (pug_attr("href", `${watchedThreadLink}#bottom`, true, false)) + "\u003E[▼]\u003C\u002Fa\u003E\u003C\u002Fdiv\u003E";
+pug_html = pug_html + "\u003Ca" + (pug_attr("href", watchedThreadLink, true, false)) + "\u003E\u002F" + (pug_escape(null == (pug_interp = thread.board) ? "" : pug_interp)) + "\u002F - " + (pug_escape(null == (pug_interp = thread.subject || 'No subject') ? "" : pug_interp)) + "\u003C\u002Fa\u003E\u003Ca" + (pug_attr("href", `${watchedThreadLink}#bottom`, true, false)) + "\u003E[▼]\u003C\u002Fa\u003E\u003C\u002Fdiv\u003E";
 };
 pug_mixins["watchedthread"](watchedthread);
     }.call(this, "watchedthread" in locals_for_with ?

gulp/res/js/watchlist.js

@@ -1,68 +1,86 @@
 class ThreadWatcher {
 
-	constructor() {
-		this.watchListSet = new Set(JSON.parse(localStorage.getItem('watchlist')));
+	init() {
+		this.watchListMap = new Map(JSON.parse(localStorage.getItem('watchlist')));
 		this.settingsInput = document.getElementById('watchlist-setting');
-		this.settingsInput.value = [...this.watchListSet];
 		this.clearButton = document.getElementById('watchlist-clear');
-		this.clearButton.addEventListener('click', this.clear, false);
+		this.clear = this.clear.bind(this);
+		this.clearButton.addEventListener('click', this.clear, false)
 		this.createListHtml();
-		this.threadWatcher = document.getElementById('threadwatcher');
-		//show this time in draghandle? could also add .spin (same as captcha refresh) when updating
 		this.refreshInterval = setInterval(this.refresh, 60 * 1000);
 		this.refresh();
-
-		this.add()
 	}
 
 	refresh() {
 		console.log('refreshing thread watcher');
-		//
 	}
 
 	//pause() { }
 
 	//resume() { }
 
+	updateSettingsList() {
+		const mapSpread = [...this.watchListMap];
+		setLocalStorage('watchlist', JSON.stringify(mapSpread));
+		this.settingsInput.value = mapSpread;
+	}
+
 	createListHtml() {
 		const threadWatcherHtml = threadwatcher();
 		const footer = document.getElementById('bottom');
 		footer.insertAdjacentHTML('afterend', threadWatcherHtml);
+		this.threadWatcher = document.getElementById('threadwatcher');
 		new Dragable('#threadwatcher-dragHandle', '#threadwatcher');
-		//todo: add() all ones saved in storage
+		for (let t of this.watchListMap.entries()) {
+			console.log(t)
+			const [board, postId] = t[0].split('-');
+			const subject = t[1];
+			this.add(board, postId, subject, true);
+		}
 	}
 
-	//fetchThread() {}
+	fetchThread() {
+		//todo: if 404, remove()
+	}
 
-	add(board, thread) {
-		console.log('add');
+	add(board, postId, subject, insertOnly=false) {
+		const key = `${board}-${postId}`;
+		if (!insertOnly) {
+			if (this.watchListMap.has(key)) {
+				return; //already watching
+			}
+			console.log('adding', key, 'to watchlist');
+			this.watchListMap.set(key, subject);
+		}
 		//todo: = fetchThread();
-		//todo: dedup/prevent dup
-		//todo: push to watchListSet
 		//todo: modify watchListItemHtml to highlight/bold, if already in selected thread
-		const watchListItemHtml = watchedthread({ watchedthread: { board: 'test', subject: 'testing 123', postId: 1 } });
+		const watchListItemHtml = watchedthread({ watchedthread: { board, postId, subject } });
 		this.threadWatcher.insertAdjacentHTML('beforeend', watchListItemHtml);
 		const watchedThreadElem = this.threadWatcher.lastChild;
 		const lastClose = watchedThreadElem.querySelector('.close');
 		lastClose.addEventListener('click', () => {
 			watchedThreadElem.remove();
-			this.remove(board, thread);
+			this.remove(key);
 		});
+		this.updateSettingsList();
 	}
 
-	remove(board, thread) {
-		console.log('remove');
-//
+	remove(key) {
+		console.log('removing', key, 'from watchlist');
+		this.watchListMap.delete(key);
+		this.updateSettingsList();
 	}
 
 	clear() {
-		console.log('clear');
-		watchList = new Set();
-		watchListInput.value = '';
+		this.watchListMap = new Map();
+		Array.from(this.threadWatcher.children)
+			.forEach((c, i) => i > 0 && c.remove()); //remove all except first child (the draghandle)
 		setLocalStorage('watchlist', '[]');
 		console.log('cleared watchlist');
+		this.updateSettingsList();
 	}
 
 }
 
-window.addEventListener('settingsReady', () => new ThreadWatcher());
+const threadWatcher = new ThreadWatcher();
+window.addEventListener('settingsReady', () => threadWatcher.init());

gulpfile.js

@@ -434,10 +434,10 @@ 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`,
+			`${paths.scripts.src}/watchlist.js`,
 			`${paths.scripts.src}/catalog.js`,
 			`${paths.scripts.src}/time.js`,
 		])

views/mixins/post.pug

@@ -71,6 +71,8 @@ mixin post(post, truncate, manage=false, globalmanage=false, ban=false, overboar
 						option(value='ftrip') Filter Tripcode
 					if !overboard && !ban
 						option(value='moderate') Moderate
+					if !post.thread
+						option(value='watch') Watch
 		.post-data
 			if post.files.length > 0
 				.post-files(class=(post.files.length > 1 ? 'fn' : ''))

views/mixins/watchedthread.pug

@@ -1,6 +1,7 @@
 mixin watchedthread(thread)
-	.row.watched-thread
+	.row.watched-thread(data-id=`${thread.board}-${thread.postId}`)
 		a.close X
 		- const watchedThreadLink = `/${thread.board}/thread/${thread.postId}.html`;
-		a(href=watchedThreadLink) /#{thread.board}/ - #{thread.subject}
+		a(href=watchedThreadLink) /#{thread.board}/ - #{thread.subject || 'No subject'}
 		a(href=`${watchedThreadLink}#bottom`) [▼]
+		//-notification count