Improve task manager

src/client/components/tab.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="pxhvhrfw" v-size="{ max: [500] }">
-	<button v-for="item in items" class="_button" @click="$emit('update:value', item.value)" :class="{ active: value === item.value }" :key="item.value"><Fa v-if="item.icon" :icon="item.icon" class="icon"/>{{ item.label }}</button>
+	<button v-for="item in items" class="_button" @click="$emit('update:value', item.value)" :class="{ active: value === item.value }" :disabled="value === item.value" :key="item.value"><Fa v-if="item.icon" :icon="item.icon" class="icon"/>{{ item.label }}</button>
 </div>
 </template>
 
@@ -29,11 +29,20 @@ export default defineComponent({
 		padding: 15px 12px 12px 12px;
 		border-bottom: solid 3px transparent;
 
+		&:disabled {
+			opacity: 1 !important;
+			cursor: default;
+		}
+
 		&.active {
 			color: var(--accent);
 			border-bottom-color: var(--accent);
 		}
 
+		&:not(.active):hover {
+			color: var(--fgHighlighted);
+		}
+
 		> .icon {
 			margin-right: 6px;
 		}

src/client/components/taskmanager.vue

@@ -6,6 +6,7 @@
 	<div class="qljqmnzj">
 		<MkTab v-model:value="tab" :items="[{ label: 'Windows', value: 'windows', }, { label: 'Stream', value: 'stream', }, { label: 'Stream (Pool)', value: 'streamPool', }, { label: 'API', value: 'api', }]" style="border-bottom: solid 1px var(--divider);"/>
 
+		<div class="content">
 			<div v-if="tab === 'windows'" class="windows">
 				<div class="header">
 					<div>#ID</div>
@@ -48,6 +49,13 @@
 				</div>
 			</div>
 		</div>
+
+		<footer>
+			<div><span class="label">Windows</span>{{ popups.length }}</div>
+			<div><span class="label">Stream</span>{{ connections.length }}</div>
+			<div><span class="label">Stream (Pool)</span>{{ pools.length }}</div>
+		</footer>
+	</div>
 </XWindow>
 </template>
 
@@ -108,6 +116,15 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .qljqmnzj {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
+
+	> .content {
+		flex: 1;
+		overflow: auto;
+
 		> .windows,
 		> .stream,
 		> .streamPool {
@@ -118,7 +135,6 @@ export default defineComponent({
 
 			> div {
 				display: table-row;
-			font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
 
 				&.header {
 					opacity: 0.7;
@@ -130,4 +146,27 @@ export default defineComponent({
 			}
 		}
 	}
+
+	> footer {
+		display: flex;
+		width: 100%;
+		padding: 8px 16px;
+		box-sizing: border-box;
+		border-top: solid 1px var(--divider);
+		font-size: 0.9em;
+
+		> div {
+			flex: 1;
+
+			> .label {
+				opacity: 0.7;
+				margin-right: 0.5em;
+
+				&:after {
+					content: ":";
+				}
+			}
+		}
+	}
+}
 </style>