feat: rework list views

BigJk · Oct 27, 2024 · 6c51d9f · 6c51d9f
1 parent 680b91c
commit 6c51d9f
Show file tree

Hide file tree

Showing 21 changed files with 4,903 additions and 7,726 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -1,62 +1,60 @@
 {
-  "name": "snd-frontend",
-  "version": "0.1.0",
-  "description": "Frontend of the Sales & Dungeons app",
-  "main": "index.html",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "watch": "vite build --watch",
-    "preview": "vite preview",
-    "format-all": "prettier --config .prettierrc.json --write ./src/js/",
-    "format-check": "prettier --config .prettierrc.json --check ./src/js/",
-    "lint": "eslint . --ext .ts",
-    "lint-fix": "eslint . --ext .ts --fix",
-    "fix-all": "npm run format-all && npm run lint-fix"
-  },
-  "author": "BigJk",
-  "license": "MIT",
-  "devDependencies": {
-    "@airjp73/dice-notation": "^2.2.2",
-    "@emmetio/codemirror-plugin": "^0.5.4",
-    "@ianvs/prettier-plugin-sort-imports": "^4.1.1",
-    "@shoelace-style/shoelace": "^2.14.0",
-    "@types/lodash-es": "^4.17.7",
-    "@types/markdown-it": "^13.0.6",
-    "@types/mithril": "^2.0.12",
-    "@types/object-hash": "^3.0.2",
-    "@types/toastify-js": "^1.11.1",
-    "@typescript-eslint/eslint-plugin": "^6.7.4",
-    "@typescript-eslint/parser": "^6.7.4",
-    "browserslist": "^4.9.1",
-    "caniuse-lite": "^1.0.30001030",
-    "emmet-monaco-es": "^5.3.0",
-    "eslint": "^8.50.0",
-    "eslint-plugin-unused-imports": "^3.0.0",
-    "fuse.js": "^6.6.2",
-    "goober": "^2.1.13",
-    "highlight.js": "^11.5.1",
-    "ionicons": "^4.0.0",
-    "js-beautify": "^1.14.7",
-    "lodash-es": "^4.17.15",
-    "markdown-it": "^12.3.2",
-    "markdown-it-replace-link": "^1.2.0",
-    "mithril": "^2.0.4",
-    "monaco-editor": "^0.39.0",
-    "monaco-themes": "^0.4.4",
-    "nunjucks": "git+https://[email protected]/ogonkov/nunjucks.git#fix_async_extensions_parse",
-    "object-hash": "^3.0.0",
-    "prettier": "^3.0.3",
-    "reconnecting-websocket": "^4.4.0",
-    "sass": "^1.25.0",
-    "seedrandom": "^3.0.5",
-    "tachyons": "^4.11.1",
-    "tippy.js": "^6.3.7",
-    "toastify-js": "^1.6.2",
-    "vite": "^3.1.0",
-    "vite-plugin-monaco-editor": "^1.1.0",
-    "vite-tsconfig-paths": "^4.2.0",
-    "wildcard-match": "^5.1.2",
-    "xoid": "^1.0.0-beta.8"
-  }
+	"name": "snd-frontend",
+	"version": "0.1.0",
+	"description": "Frontend of the Sales & Dungeons app",
+	"main": "index.html",
+	"scripts": {
+		"dev": "vite",
+		"build": "vite build",
+		"watch": "vite build --watch",
+		"preview": "vite preview",
+		"format-all": "prettier --config .prettierrc.json --write ./src/js/",
+		"format-check": "prettier --config .prettierrc.json --check ./src/js/",
+		"lint": "eslint . --ext .ts",
+		"lint-fix": "eslint . --ext .ts --fix",
+		"fix-all": "npm run format-all && npm run lint-fix"
+	},
+	"author": "BigJk",
+	"license": "MIT",
+	"devDependencies": {
+		"@airjp73/dice-notation": "^2.2.2",
+		"@ianvs/prettier-plugin-sort-imports": "^4.3.1",
+		"@shoelace-style/shoelace": "2.14.0",
+		"@types/lodash-es": "^4.17.12",
+		"@types/markdown-it": "^14.1.2",
+		"@types/mithril": "^2.2.7",
+		"@types/object-hash": "^3.0.6",
+		"@types/toastify-js": "^1.12.3",
+		"@typescript-eslint/eslint-plugin": "^6.7.4",
+		"@typescript-eslint/parser": "^6.7.4",
+		"browserslist": "^4.24.0",
+		"caniuse-lite": "^1.0.30001664",
+		"emmet-monaco-es": "^5.4.0",
+		"eslint": "^8.50.0",
+		"eslint-plugin-unused-imports": "^3.0.0",
+		"fuse.js": "^6.6.2",
+		"goober": "^2.1.14",
+		"highlight.js": "^11.10.0",
+		"ionicons": "^4.0.0",
+		"lodash-es": "^4.17.21",
+		"markdown-it": "^12.3.2",
+		"markdown-it-replace-link": "^1.2.1",
+		"mithril": "^2.2.5",
+		"monaco-editor": "^0.39.0",
+		"monaco-themes": "^0.4.4",
+		"nunjucks": "git+https://[email protected]/ogonkov/nunjucks.git#fix_async_extensions_parse",
+		"object-hash": "^3.0.0",
+		"prettier": "^3.3.3",
+		"reconnecting-websocket": "^4.4.0",
+		"sass": "^1.79.4",
+		"seedrandom": "^3.0.5",
+		"tachyons": "^4.12.0",
+		"tippy.js": "^6.3.7",
+		"toastify-js": "^1.12.0",
+		"vite": "^3.2.5",
+		"vite-plugin-monaco-editor": "^1.1.0",
+		"vite-tsconfig-paths": "^4.2.0",
+		"wildcard-match": "^5.1.3",
+		"xoid": "^1.0.0-beta.12"
+	}
 }
diff --git a/frontend/src/css/atomic.scss b/frontend/src/css/atomic.scss
@@ -1,140 +1,145 @@
 .bg-black-05 {
-  background-color: rgba(0, 0, 0, .05);
+	background-color: rgba(0, 0, 0, 0.05);
 }
 
 .bg-black-01 {
-  background-color: rgba(0, 0, 0, .01);
+	background-color: rgba(0, 0, 0, 0.01);
 }
 
 .bg-white-05 {
-  background-color: rgba(255, 255, 255, 0.05);
+	background-color: rgba(255, 255, 255, 0.05);
 }
 
 .hover-bg-black-05:hover {
-  background-color: rgba(0, 0, 0, .05);
+	background-color: rgba(0, 0, 0, 0.05);
 }
 
 .hover-bg-black-05:focus {
-  background-color: rgba(0, 0, 0, .05);
+	background-color: rgba(0, 0, 0, 0.05);
 }
 
 .overflow-ellipsis {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
 }
 
 .text-muted {
-  opacity: .8;
+	opacity: 0.8;
 }
 
 .f8 {
-  font-size: .6rem;
+	font-size: 0.6rem;
 }
 
-.flex-gap-1, .gap-1 {
-  gap: .25rem;
+.flex-gap-1,
+.gap-1 {
+	gap: 0.25rem;
 }
 
-.flex-gap-2, .gap-2 {
-  gap: .5rem;
+.flex-gap-2,
+.gap-2 {
+	gap: 0.5rem;
 }
 
-.flex-gap-3, .gap-3 {
-  gap: 1rem;
+.flex-gap-3,
+.gap-3 {
+	gap: 1rem;
 }
 
-.flex-gap-4, .gap-4 {
-  gap: 2rem;
+.flex-gap-4,
+.gap-4 {
+	gap: 2rem;
 }
 
-.flex-gap-5, .gap-5 {
-  gap: 4rem;
+.flex-gap-5,
+.gap-5 {
+	gap: 4rem;
 }
 
 .no-input {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
 }
 
 .no-mouse-events {
-  pointer-events: none;
+	pointer-events: none;
 }
 
 .overscroll-contain {
-  overscroll-behavior: contain;
+	overscroll-behavior: contain;
 }
 
 .bg-paper {
-  background-color: #fcfcff;
+	background-color: #fcfcff;
 }
 
 .light-shadow {
-  -webkit-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.1);
-  -moz-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.1);
-  box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.1);
+	-webkit-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.1);
+	-moz-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.1);
+	box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.1);
 }
 
 .cut-text {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
 }
 
 .text-overflow-hide {
-  text-overflow: ellipsis;
-  overflow: hidden;
+	text-overflow: ellipsis;
+	overflow: hidden;
 }
 
 .grid-bg {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23545454' fill-opacity='0.2'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
-  background-position-y: -10px;
-  background-position-x: -10px;
-  background-color: #0D1B2A;
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23545454' fill-opacity='0.2'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+	background-position-y: -10px;
+	background-position-x: -10px;
+	background-color: #0d1b2a;
 }
 
 .break-word {
-  word-break: break-word;
-  word-wrap: break-word;
+	word-break: break-word;
+	word-wrap: break-word;
 }
 
 @-webkit-keyframes rotating /* Safari and Chrome */ {
-  from {
-    -webkit-transform: rotate(0deg);
-    -o-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  to {
-    -webkit-transform: rotate(360deg);
-    -o-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
+	from {
+		-webkit-transform: rotate(0deg);
+		-o-transform: rotate(0deg);
+		transform: rotate(0deg);
+	}
+	to {
+		-webkit-transform: rotate(360deg);
+		-o-transform: rotate(360deg);
+		transform: rotate(360deg);
+	}
 }
 @keyframes rotating {
-  from {
-    -ms-transform: rotate(0deg);
-    -moz-transform: rotate(0deg);
-    -webkit-transform: rotate(0deg);
-    -o-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  to {
-    -ms-transform: rotate(360deg);
-    -moz-transform: rotate(360deg);
-    -webkit-transform: rotate(360deg);
-    -o-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
+	from {
+		-ms-transform: rotate(0deg);
+		-moz-transform: rotate(0deg);
+		-webkit-transform: rotate(0deg);
+		-o-transform: rotate(0deg);
+		transform: rotate(0deg);
+	}
+	to {
+		-ms-transform: rotate(360deg);
+		-moz-transform: rotate(360deg);
+		-webkit-transform: rotate(360deg);
+		-o-transform: rotate(360deg);
+		transform: rotate(360deg);
+	}
 }
 
 .rotating {
-  -webkit-animation: rotating 2s linear infinite;
-  -moz-animation: rotating 2s linear infinite;
-  -ms-animation: rotating 2s linear infinite;
-  -o-animation: rotating 2s linear infinite;
-  animation: rotating 2s linear infinite;
-}
+	-webkit-animation: rotating 2s linear infinite;
+	-moz-animation: rotating 2s linear infinite;
+	-ms-animation: rotating 2s linear infinite;
+	-o-animation: rotating 2s linear infinite;
+	animation: rotating 2s linear infinite;
+}