Merge remote-tracking branch 'thomas/main'

web: removed non-working event buttons
Deleted js/index.js
Removed .DS_Store
web: Refactor UI code
web: retab & avoid race condition on main js entry
web: reconstructed project

web/css/damus.css

@@ -0,0 +1,30 @@
+/*
+ * This code is not maintained it needs to be cleaned up and deleted. The code
+ * resides here as a working base to migrate to styles.css. Original author is 
+ * JB55.
+ */
+
+/*
+.line-top {
+	width: 3px;
+	height: 5px;
+	background-color: var(--clrBorder);
+	margin-left: auto;
+	margin-right: auto;
+}*/
+
+.line-bot {
+	width: 3px;
+	height: 100%;
+	margin-top: -7px;
+	background-color: var(--clrBorder);
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.quote {
+  margin-left: 10px;
+  padding: 10px;
+  display: block;
+}
+

web/css/styles.css

@@ -0,0 +1,367 @@
+/* Hello welcome to my styles. Here are some notes.
+ *
+ *  - I use Noto Sans because it supports most languages.
+ *  - I will implement light mode first and then attempt dark.
+ *  - All variables should be declared at the top.
+ *  - Use as little as possible, write from scratch, and utilize helper 
+ *    classes.
+ *  - No transpilers!
+ */
+
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;800&display=swap');
+
+:root {
+	--clrBg:          #fff;
+	--clrPanel:       #f9f9f9;
+	--clrBorder:      #f2f2f2;
+	--clrBtn:         #202020;
+	--clrText:        #202020;
+	--clrTextLight:   #868686;
+	--clrTextLighter: #abb4ca;
+	--clrHeart:       #ff5050;
+	--clrWarn:        #fbc560;
+
+	--navPadding: 5px;
+	--fsSmall:    12px;
+	--fsNormal:   16px;
+	--fsReduced:  14px;
+	--fsEnlarged: 18px;
+
+	--ffDefault: "Noto Sans", sans-serif;
+}
+*:focus-visible {
+	/* Technically this is bad and something else should be done to indicate
+	 * that something is in focus.
+	 */
+	outline: none;
+}
+body {
+	background: var(--clrBg);
+	color: var(--clrText);
+	font-family: "Noto Sans", sans-serif;
+	font-size: var(--fsNormal);
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	height: 100%;
+}
+
+/* Utilities */
+.flex-fill {
+	flex: 1;
+}
+.hide {
+	display: none;
+}
+.loader {
+	font-size: 24px;
+}
+button.action:disabled {
+	cursor: default;
+	background-color: var(--clrTextLight);
+}
+button {
+	background: #171717;
+	cursor: pointer;
+}
+button.icon {
+	border: none;
+	background: transparent;
+	padding: 0;
+	margin: 0;
+}
+button.action {
+	border: none;
+	border-radius: 50px;
+	background: #171717;
+	padding: 10px 15px;
+	font-size: 16px;
+	color: white;
+	font-weight: 800;
+}
+.float-right {
+	float: right;
+}
+
+/* Application Framework */
+button.nav {
+	color: var(--clrBtn);
+	font-size: 24px;
+	padding: calc(var(--navPadding) * 4) calc(var(--navPadding) * 5);
+}
+
+#app-icon-logo {
+	font-size: 28px;
+	text-align: center;
+	padding: calc(var(--navPadding) * 4);
+}
+
+#app-icon-logo > img {
+	border-radius: 50%;
+	width: 42px;
+	height: 42px;
+}
+
+#container {
+	display: flex;
+
+	/*
+	flex-direction: row;
+	width: 100vw;
+	height: 100vh;
+	overflow: hidden;*/
+}
+#nav {
+	flex-shrink: 1;
+	border-right: 1px solid var(--clrBorder);
+}
+#content {
+	display: flex;
+	flex-direction: column;
+	border-right: 1px solid var(--clrBorder);
+}
+#content header > label {
+	padding: 22px 15px;
+	font-size: 22px;
+	font-weight: 800;
+	display: block;
+}
+
+#view {
+	max-width: 750px;
+	overflow-y: scroll;
+	flex: 1;
+}
+
+/* Events & Content */
+.event {
+	display: flex;
+	flex-direction: row;
+	padding: 15px;
+	transition: background-color 0.2s linear;
+}
+.event:hover {
+	background-color: var(--clrPanel);
+}
+.loading-events {
+	text-align: center;
+	padding: 15px;
+}
+.userpic {
+	flex-shrink: 1;
+}
+
+.pfp {
+	border-radius: 50%;
+	width: 64px;
+	height: 64px;
+	object-fit: fill;
+	font-size: 3.25em;
+}
+
+.event-content {
+	flex: 1;
+	padding-left: 15px;
+}
+.event-content > .info {
+	display: inline-block;
+}
+.username {
+	font-weight: 800;
+	font-size: var(--fsReduced);
+}
+.chatroom-name {
+	font-weight: bold;
+}
+.timestamp, .replying-to, .boosted-by {
+	font-size: var(--fsSmall);
+	color: var(--clrTextLight);
+}
+.comment {
+	word-break: break-word;
+}
+
+.inline-img {
+	width: 100%;
+	max-height: 300px;
+	object-fit: contain;
+}
+
+.action-bar {
+}
+.action-bar > button {
+	margin-right: 25px;
+	color: var(--clrTextLighter);
+	font-size: var(--fsNormal);
+}
+.reactions {
+	padding-bottom: 15px;
+}
+
+.reaction-group {
+	display: inline-flex;
+	align-items: center;
+	border: 2px solid var(--clrBorder);
+	padding: 4px;
+	border-radius: 5px;
+}
+
+.reaction-group img {
+	width: 18px;
+	height: 18px;
+	object-fit: cover;
+	border-radius: 50%;
+	margin-left: -8px;
+	vertical-align: top;
+}
+
+.reaction-group img:first-of-type {
+	margin-left: 0px;
+}
+
+.reaction-emoji {
+	margin-right: 4px;
+}
+
+.action-bar button.icon {
+	transition:	color 0.3s linear;
+}
+.action-bar button.icon:hover {
+	color: var(--clrText);
+}
+.action-bar button.heart:hover {
+	color: var(--clrHeart);
+}
+details.cw summary {
+	background: #f2f2f2;
+	padding: 10px;
+	border-radius: 12px;
+	color: #444;
+	cursor: pointer;
+	margin-bottom: 10px;
+	outline: none;
+}
+
+/* Thread Expansion */
+.thread-collapsed {
+	padding: 15px; 
+}
+.thread-summary {
+	background: #f2f2f2;
+	padding: 10px;
+	border-radius: 12px;
+	color: #444;
+	cursor: pointer;
+}
+
+/* Modal */
+.modal {
+	position: fixed;
+	z-index: 1; 
+	left: 0;
+	top: 0;
+	width: 100%; 
+	height: 100%;
+	background: rgba(0,0,0,0.4);
+	opacity: 1;
+	transition: opacity 0.2s linear;
+}
+.modal.closed {
+	opacity: 0;
+	pointer-events: none;
+}
+.modal-content {
+	padding: 20px;
+	overflow: auto;
+	border-radius: 15px;
+	background: var(--clrPanel);
+	max-width: 700px;
+	margin: 0 auto;
+	margin-top: 35px;
+}
+.modal header {
+	display: flex;
+}
+.modal header label {
+	font-weight: 800;
+	font-size: var(--fsEnlarged);
+	flex: 1;
+}
+.modal header button {
+	font-size: 24px;
+}
+
+/* Post & Reply */
+#newpost {
+	padding: 0px 15px 15px;
+	display: flex;
+	flex-direction: row;
+	border-bottom: solid 1px var(--clrBorder);
+}
+#newpost > :first-child {
+	width: 64px;
+}
+#newpost > :last-child {
+	padding-left: 15px;
+	flex: 1;
+}
+textarea.post-input {
+	display: block;
+	width: 100%;
+	border: none;
+	background: transparent;
+	color: var(--clrText);
+	font-size: var(--fsEnlarged);
+	font-family: var(--ffDefault);
+	margin: 10px 0;
+	padding: 0;
+	box-sizing: border-box;
+	resize: vertical;
+}
+
+.post-tools {
+	text-align: right;
+}
+.post-tools > button.icon {
+	margin-right: 10px;
+	font-size: var(--fsEnlarged);
+	color: var(--clrTextLight);
+}
+.post-tools > button.icon.cw.active {
+	color: var(--clrWarn);
+}
+input[type="text"].cw {
+	border: none;
+	border-bottom: solid 2px var(--clrWarn);
+	font-size: var(--fsReduced);
+}
+
+.clickable {
+	cursor: pointer;
+}
+
+.bottom-border {
+	border-bottom: solid 1px var(--clrBorder);
+}
+
+.deleted-comment {
+	border: 2px dashed var(--clrBorder);
+	border-radius: 10px;
+	padding: 10px;
+}
+
+@media (max-width: 800px){
+	:root {
+		--navPadding: 2px;
+	}
+
+	.pfp {
+		width: 44px;
+		height: 44px;
+		font-size: 2.2em;
+	}
+
+	#newpost > :first-child {
+		width: 0;
+	}
+}