Improve task manager

src/client/components/taskmanager.vue

@@ -4,7 +4,20 @@
 		<Fa :icon="faTerminal" style="margin-right: 0.5em;"/>Task Manager
 	</template>
 	<div class="qljqmnzj">
-		<MkTab v-model:value="tab" :items="[{ label: 'Stream', value: 'stream', }, { label: 'API', value: 'api', }]" style="border-bottom: solid 1px var(--divider);"/>
+		<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 v-if="tab === 'windows'" class="windows">
+			<div class="header">
+				<div>#ID</div>
+				<div>Component</div>
+				<div>Action</div>
+			</div>
+			<div v-for="p in popups">
+				<div>#{{ p.id }}</div>
+				<div>{{ p.component.name ? p.component.name : '<anonymous>' }}</div>
+				<div><button class="_textButton" @click="killPopup(p)">Kill</button></div>
+			</div>
+		</div>
 		<div v-if="tab === 'stream'" class="stream">
 			<div class="header">
 				<div>#ID</div>
@@ -22,12 +35,24 @@
 				<div>{{ c.out }}</div>
 			</div>
 		</div>
+		<div v-if="tab === 'streamPool'" class="streamPool">
+			<div class="header">
+				<div>#ID</div>
+				<div>Ch</div>
+				<div>Users</div>
+			</div>
+			<div v-for="p in pools">
+				<div>#{{ p.id }}</div>
+				<div>{{ p.channel }}</div>
+				<div>{{ p.users }}</div>
+			</div>
+		</div>
 	</div>
 </XWindow>
 </template>
 
 <script lang="ts">
-import { defineComponent, markRaw, onBeforeUnmount, ref } from 'vue';
+import { defineComponent, markRaw, onBeforeUnmount, ref, shallowRef } from 'vue';
 import { faTerminal } from '@fortawesome/free-solid-svg-icons';
 import XWindow from '@/components/ui/window.vue';
 import MkTab from '@/components/tab.vue';
@@ -47,24 +72,34 @@ export default defineComponent({
 	emits: ['closed'],
 
 	setup() {
-		const connections = ref([]);
+		const connections = shallowRef([]);
+		const pools = shallowRef([]);
 		const refreshStreamInfo = () => {
-			console.log(os.stream.sharedConnections, os.stream.nonSharedConnections);
-			connections.value = markRaw(os.stream.sharedConnections.map(c => ({
+			console.log(os.stream.sharedConnectionPools, os.stream.sharedConnections, os.stream.nonSharedConnections);
+			const conn = os.stream.sharedConnections.map(c => ({
 				id: c.id, name: c.name, channel: c.channel, users: c.pool.users, in: c.inCount, out: c.outCount,
 			})).concat(os.stream.nonSharedConnections.map(c => ({
 				id: c.id, name: c.name, channel: c.channel, users: null, in: c.inCount, out: c.outCount,
-			}))));
-			connections.value.sort((a, b) => (a.id > b.id) ? 1 : -1);
+			})));
+			conn.sort((a, b) => (a.id > b.id) ? 1 : -1);
+			connections.value = conn;
+			pools.value = os.stream.sharedConnectionPools;
 		};
 		const interval = setInterval(refreshStreamInfo, 1000);
 		onBeforeUnmount(() => {
 			clearInterval(interval);
 		});
 
+		const killPopup = p => {
+			os.popups.value = os.popups.value.filter(x => x !== p);
+		};
+
 		return {
-			tab: 'stream',
+			tab: ref('stream'),
+			popups: os.popups,
 			connections,
+			pools,
+			killPopup,
 			faTerminal,
 		};
 	},
@@ -73,7 +108,9 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .qljqmnzj {
-	> .stream {
+	> .windows,
+	> .stream,
+	> .streamPool {
 		display: table;
 		width: 100%;
 		padding: 16px;

src/client/init.ts

@@ -252,7 +252,7 @@ if (store.getters.isSignedIn) {
 		}
 	}
 
-	const main = stream.useSharedConnection('main', 'system');
+	const main = stream.useSharedConnection('main', 'System');
 
 	// 自分の情報が更新されたとき
 	main.on('meUpdated', i => {

src/client/os.ts

@@ -127,6 +127,7 @@ function isModule(x: any): x is typeof import('*.vue') {
 	return x.default != null;
 }
 
+let popupIdCount = 0;
 export const popups = ref([]) as Ref<{
 	id: any;
 	component: any;
@@ -137,7 +138,7 @@ export function popup(component: Component | typeof import('*.vue'), props: Reco
 	if (isModule(component)) component = component.default;
 	markRaw(component);
 
-	const id = Math.random().toString(); // TODO: uuidとか使う
+	const id = ++popupIdCount;
 	const dispose = () => {
 		if (_DEV_) console.log('os:popup close', id, component, props, events);
 		// このsetTimeoutが無いと挙動がおかしくなる(autocompleteが閉じなくなる)。Vueのバグ？

src/client/ui/deck.vue

@@ -109,7 +109,7 @@ export default defineComponent({
 		window.addEventListener('wheel', this.onWheel);
 
 		if (this.$store.getters.isSignedIn) {
-			this.connection = os.stream.useSharedConnection('main');
+			this.connection = os.stream.useSharedConnection('main', 'UI');
 			this.connection.on('notification', this.onNotification);
 		}
 	},

src/client/ui/default.vue

@@ -141,7 +141,7 @@ export default defineComponent({
 	created() {
 		document.documentElement.style.overflowY = 'scroll';
 
-		this.connection = os.stream.useSharedConnection('main');
+		this.connection = os.stream.useSharedConnection('main', 'UI');
 		this.connection.on('notification', this.onNotification);
 
 		if (this.$store.state.deviceUser.widgets.length === 0) {

src/client/ui/zen.vue

@@ -71,7 +71,7 @@ export default defineComponent({
 	created() {
 		document.documentElement.style.overflowY = 'scroll';
 
-		this.connection = os.stream.useSharedConnection('main');
+		this.connection = os.stream.useSharedConnection('main', 'UI');
 		this.connection.on('notification', this.onNotification);
 	},