more little things for 292, add/remove from list

gulp/res/css/style.css

@@ -214,6 +214,7 @@ pre {
 	align-items: center;
 	justify-content: center;
 	font-weight: bold;
+	width: 100%;
 }
 
 .wrapbar {
@@ -1197,6 +1198,19 @@ input[type="file"] {
 
 #threadwatcher {
 	display: flex;
+	flex-direction: column;
+}
+
+.watched-thread {
+	width: 100%;
+	justify-content: space-between;
+	padding: 3px;
+	box-sizing: border-box;
+}
+
+.watched-thread a {
+	width: unset
+	margin-right: 5px;
 }
 
 #postform:target {

gulp/res/js/threadwatcher.js

@@ -1,5 +1,5 @@
 function threadwatcher(locals) {var pug_html = "", pug_mixins = {}, pug_interp;pug_mixins["threadwatcher"] = pug_interp = function(){
 var block = (this && this.block), attributes = (this && this.attributes) || {};
-pug_html = pug_html + "\u003Cdiv class=\"flex-center\" id=\"threadwatcher\"\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"noselect\" id=\"threadwatcher-dragHandle\"\u003EThread Watcher\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E";
+pug_html = pug_html + "\u003Cdiv class=\"flex-center\" id=\"threadwatcher\"\u003E\u003Cdiv class=\"row noselect\" id=\"threadwatcher-dragHandle\"\u003EThread Watcher\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E";
 };
 pug_mixins["threadwatcher"]();;return pug_html;}

gulp/res/js/watchedthread.js

@@ -1,3 +1,4 @@
+function pug_attr(t,e,n,r){if(!1===e||null==e||!e&&("class"===t||"style"===t))return"";if(!0===e)return" "+(r?t:t+'="'+t+'"');var f=typeof e;return"object"!==f&&"function"!==f||"function"!=typeof e.toJSON||(e=e.toJSON()),"string"==typeof e||(e=JSON.stringify(e),n||-1===e.indexOf('"'))?(n&&(e=pug_escape(e))," "+t+'="'+e+'"'):" "+t+"='"+e.replace(/'/g,"'")+"'"}
 function pug_escape(e){var a=""+e,t=pug_match_html.exec(a);if(!t)return e;var r,c,n,s="";for(r=t.index,c=0;r<a.length;r++){switch(a.charCodeAt(r)){case 34:n="&quot;";break;case 38:n="&amp;";break;case 60:n="&lt;";break;case 62:n="&gt;";break;default:continue}c!==r&&(s+=a.substring(c,r)),c=r+1,s+=n}return c!==r?s+a.substring(c,r):s}
 var pug_match_html=/["&<>]/;function watchedthread(locals) {var pug_html = "", pug_mixins = {}, pug_interp;;
     var locals_for_with = (locals || {});
@@ -5,7 +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\u003E\u003Cdiv class=\"watched-thread\"\u003E\u003Cp\u003E \u003Cb\u003E\u002F" + (pug_escape(null == (pug_interp = thread.board) ? "" : pug_interp)) + "\u002F" + (pug_escape(null == (pug_interp = thread.postId) ? "" : pug_interp)) + "\u003C\u002Fb\u003E - " + (pug_escape(null == (pug_interp = thread.subject) ? "" : pug_interp)) + "\u003C\u002Fp\u003E\u003Ca class=\"close\"\u003EX\u003C\u002Fa\u003E\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E";
+pug_html = pug_html + "\u003Cdiv class=\"row watched-thread\"\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_mixins["watchedthread"](watchedthread);
     }.call(this, "watchedthread" in locals_for_with ?

gulp/res/js/watchlist.js

@@ -7,8 +7,12 @@ class ThreadWatcher {
 		this.clearButton = document.getElementById('watchlist-clear');
 		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() {
@@ -25,25 +29,34 @@ class ThreadWatcher {
 		const footer = document.getElementById('bottom');
 		footer.insertAdjacentHTML('afterend', threadWatcherHtml);
 		new Dragable('#threadwatcher-dragHandle', '#threadwatcher');
+		//todo: add() all ones saved in storage
 	}
 
+	//fetchThread() {}
+
 	add(board, thread) {
-/*
-		const watchListItemHtml = uploaditem({ data });
-		.insertAdjacentHTML('beforeend', uploadItemHtml);
-		const fileElem = this.fileUploadList.lastChild;
-		const lastClose = fileElem.querySelector('.close');
+		console.log('add');
+		//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 } });
+		this.threadWatcher.insertAdjacentHTML('beforeend', watchListItemHtml);
+		const watchedThreadElem = this.threadWatcher.lastChild;
+		const lastClose = watchedThreadElem.querySelector('.close');
 		lastClose.addEventListener('click', () => {
-			this.removeFile(fileElem, file.name, file.size);
+			watchedThreadElem.remove();
+			this.remove(board, thread);
 		});
-*/
 	}
 
 	remove(board, thread) {
+		console.log('remove');
 //
 	}
 
 	clear() {
+		console.log('clear');
 		watchList = new Set();
 		watchListInput.value = '';
 		setLocalStorage('watchlist', '[]');

views/mixins/threadwatcher.pug

@@ -1,4 +1,3 @@
 mixin threadwatcher()
 	.flex-center#threadwatcher
-		.row
-			.noselect#threadwatcher-dragHandle Thread Watcher
+		.row.noselect#threadwatcher-dragHandle Thread Watcher

views/mixins/watchedthread.pug

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