feat: added checkbox, replaced AdvancedTable select column content with checkboxes

frontend/src/App.vue

@@ -1221,6 +1221,43 @@ img {
 	}
 }
 
+.checkbox {
+	input[type="checkbox"] {
+		height: 36px;
+		width: 36px;
+		background-color: var(--white);
+		border: 1px solid var(--light-grey-2);
+		appearance: none;
+		border-radius: 3px;
+		cursor: pointer;
+		position: relative;
+
+		&:checked {
+			&:before {
+				content: "";
+				position: absolute;
+				top: 5px;
+				right: 10px;
+				background-color: var(--primary-color);
+				width: 5px;
+				height: 25px;
+				transform: rotate(45deg);
+			}
+
+			&:after {
+				content: "";
+				position: absolute;
+				top: 16px;
+				left: 4px;
+				background-color: var(--primary-color);
+				width: 11px;
+				height: 6px;
+				transform: rotate(45deg);
+			}
+		}
+	}
+}
+
 .button:focus,
 .button:active {
 	border-color: var(--light-grey-2) !important;

frontend/src/components/AdvancedTable.vue

@@ -407,6 +407,15 @@
 										)
 									"
 								></slot>
+								<p
+									class="checkbox"
+									v-if="column.name === 'select'"
+								>
+									<input
+										type="checkbox"
+										:checked="item.selected"
+									/>
+								</p>
 								<div
 									class="resizer"
 									v-if="column.resizable"
@@ -659,9 +668,10 @@ export default {
 				hidable: false,
 				draggable: false,
 				resizable: false,
-				minWidth: 5,
-				width: 5,
-				maxWidth: 5
+				pinable: false,
+				minWidth: 56,
+				width: 56,
+				maxWidth: 56
 			},
 			...this.columns
 		];
@@ -981,7 +991,6 @@ export default {
 						border: 1px solid var(--light-grey-2);
 						border-width: 1px 1px 1px 0;
 
-						&:first-child,
 						&:last-child {
 							border-width: 1px 0 1px;
 						}
@@ -1025,11 +1034,6 @@ export default {
 
 			tbody {
 				tr {
-					&.selected td:first-child {
-						border-left: 5px solid var(--primary-color);
-						padding-left: 0;
-					}
-
 					&.highlighted {
 						background-color: var(--light-grey);
 					}
@@ -1038,7 +1042,6 @@ export default {
 						border: 1px solid var(--light-grey-2);
 						border-width: 0 1px 1px 0;
 
-						&:first-child,
 						&:last-child {
 							border-width: 0 0 1px;
 						}
@@ -1054,14 +1057,6 @@ export default {
 			text-overflow: ellipsis;
 			overflow: hidden;
 
-			&:first-child {
-				position: sticky;
-				left: 0;
-				z-index: 2;
-				padding: 0;
-				padding-left: 5px;
-			}
-
 			.resizer {
 				height: 100%;
 				width: 5px;