Change page security.

Added special script to handle parcel and node require.
Added new tagging control.
Adding new HTML Sanitizer.
Packages so I could be sqlite with the right electron version.
Some style changes.
Interface changes.
Changes to the sqlite/client. Interfaces cuased errors.
Fixed bugs in electron ipc handling.
Fixes to the sqlite libs.
Create a new input control that can handle pasting.
pasting HTML works with cycle through HTML,Text, Sanatized HTML.
New UI controls.
Time stamp control has more functionality.

r.js

@@ -0,0 +1 @@
+window.require = require;

src/img/clock1-white.svg

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 24 24"
+   version="1.1"
+   id="svg70"
+   sodipodi:docname="clock1-white.svg"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs74" />
+  <sodipodi:namedview
+     id="namedview72"
+     pagecolor="#505050"
+     bordercolor="#ffffff"
+     borderopacity="1"
+     inkscape:pageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     showgrid="false"
+     inkscape:zoom="27.291667"
+     inkscape:cx="12"
+     inkscape:cy="12"
+     inkscape:window-width="1552"
+     inkscape:window-height="864"
+     inkscape:window-x="48"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg70" />
+  <path
+     d="M 0,0 H 24 V 24 H 0 Z"
+     fill="none"
+     id="path64" />
+  <path
+     d="M 12,22 C 6.477,22 2,17.523 2,12 2,6.477 6.477,2 12,2 c 5.523,0 10,4.477 10,10 0,5.523 -4.477,10 -10,10 z m 0,-2 a 8,8 0 1 0 0,-16 8,8 0 0 0 0,16 z m 1,-8 h 4 v 2 H 11 V 7 h 2 z"
+     id="path66"
+     style="fill:#e6e6e6" />
+</svg>

src/main/ipc.js

@@ -0,0 +1,2 @@
+//IPC STUFF
+

src/ui/app-divider.riot

@@ -0,0 +1,48 @@
+<app-divider>
+
+	<div class="divider"><span></span><span>{props.label}</span><span></span></div>
+
+	<style>
+		
+		.divider {								/* minor cosmetics */
+            display: table; 
+            font-size: 24px; 
+            text-align: center; 
+            width: 75%; 						/* divider width */
+            margin: 40px auto;					/* spacing above/below */
+        }
+        .divider span { display: table-cell; position: relative; }
+        .divider span:first-child, .divider span:last-child {
+            width: 50%;
+            top: 13px;							/* adjust vertical align */
+            -moz-background-size: 100% 2px; 	/* line width */
+            background-size: 100% 2px; 			/* line width */
+            background-position: 0 0, 0 100%;
+            background-repeat: no-repeat;
+        }
+        .divider span:first-child {				/* color changes in here */
+            background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), to(#000));
+            background-image: -webkit-linear-gradient(180deg, transparent, #000);
+            background-image: -moz-linear-gradient(180deg, transparent, #000);
+            background-image: -o-linear-gradient(180deg, transparent, #000);
+            background-image: linear-gradient(90deg, transparent, #000);
+        }
+        .divider span:nth-child(2) {
+            color: #000; padding: 0px 5px; width: auto; white-space: nowrap;
+        }
+        .divider span:last-child {				/* color changes in here */
+            background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
+            background-image: -webkit-linear-gradient(180deg, #000, transparent);
+            background-image: -moz-linear-gradient(180deg, #000, transparent);
+            background-image: -o-linear-gradient(180deg, #000, transparent);
+            background-image: linear-gradient(90deg, #000, transparent);
+        }
+
+	</style>
+
+	<script>
+		
+
+	</script>
+
+</app-divider>

src/ui/timechain-input-buttons.riot

@@ -0,0 +1,43 @@
+<timechain-input-buttons>
+
+	<div class="timechain-intput-buttons">
+		<button onclick="{onCancel}" class="cancel">cancel</button>
+		<button onclick="{onSave}" class="save">save</button>
+	</div>
+
+	<style>
+
+		.timechain-intput-buttons .cancel {
+			background-color: #ecaec0;
+		}
+
+		.timechain-intput-buttons .save {
+			background-color: #aeecda;
+		}
+
+	</style>
+
+	<script>
+		
+		export default {
+
+			onMounted(){
+				this.sendOnSave = this.props.onsave;
+				this.sendOnCancel = this.props.oncancel;
+			},
+			onCancel(e){
+				if(this.sendOnCancel){
+					this.sendOnCancel(true);
+				}
+			},
+			onSave(e){
+				if(this.sendOnSave){
+					this.sendOnSave(true);
+				}
+			}
+
+		}
+
+	</script>
+
+</timechain-input-buttons>

src/ui/timechain-list.riot

@@ -0,0 +1,12 @@
+<timechain-list>
+
+	<div class="timechain-list-title">
+		List of shit
+		<hr>
+	</div>
+
+	<div class="timechain-list">
+		bla bla
+	</div>
+
+</timechain-list>

src/ui/timechain-tag.riot

@@ -0,0 +1,33 @@
+<timechain-tag>
+	<div class="timechain-tagging">
+		<input id="tagging" placeholder="tag your paste">
+	</div>
+
+	<style>
+
+		.tagify--focus {
+			border-color: yellow !important;
+		}
+
+		.tagify--empty .tagify__input::before {
+			color: whitesmoke !important;
+		}
+
+	</style>
+
+	<script>
+		import Tagify from '@yaireo/tagify'
+
+		export default {
+			onMounted(){
+				const inputElm = this.$('#tagging');
+				this.tagify = new Tagify(inputElm);
+				inputElm.addEventListener('change', this.onChange.bind(this));
+			},
+			onChange(e){
+				this.props.onchange(e.target.value);
+			}
+		}
+	</script>
+
+</timechain-tag>