chore(client): tweak client

1 files changed, 79 insertions, 27 deletions

diff --git a/packages/client/src/components/object-view.value.vue b/packages/client/src/components/object-view.value.vue
index 6f388636dd..0c7230d783 100644
--- a/packages/client/src/components/object-view.value.vue
+++ b/packages/client/src/components/object-view.value.vue
@@ -1,31 +1,35 @@
 <template>
 <div class="igpposuu _monospace">
 	<div v-if="value === null" class="null">null</div>
-	<div v-else-if="typeof value === 'boolean'" class="boolean">{{ value ? 'true' : 'false' }}</div>
+	<div v-else-if="typeof value === 'boolean'" class="boolean" :class="{ true: value, false: !value }">{{ value ? 'true' : 'false' }}</div>
 	<div v-else-if="typeof value === 'string'" class="string">"{{ value }}"</div>
 	<div v-else-if="typeof value === 'number'" class="number">{{ number(value) }}</div>
-	<div v-else-if="Array.isArray(value)" class="array">
-		<button @click="collapsed_ = !collapsed_">[ {{ collapsed_ ? '+' : '-' }} ]</button>
-		<template v-if="!collapsed_">
-			<div v-for="i in value.length" class="element">
-				{{ i }}: <XValue :value="value[i - 1]" collapsed/>
-			</div>
-		</template>
+	<div v-else-if="isArray(value) && isEmpty(value)" class="array empty">[]</div>
+	<div v-else-if="isArray(value)" class="array">
+		<div v-for="i in value.length" class="element">
+			{{ i }}: <XValue :value="value[i - 1]" collapsed/>
+		</div>
 	</div>
-	<div v-else-if="typeof value === 'object'" class="object">
-		<button @click="collapsed_ = !collapsed_">{ {{ collapsed_ ? '+' : '-' }} }</button>
-		<template v-if="!collapsed_">
-			<div v-for="k in Object.keys(value)" class="kv">
-				<div class="k">{{ k }}:</div>
-				<div class="v"><XValue :value="value[k]" collapsed/></div>
+	<div v-else-if="isObject(value) && isEmpty(value)" class="object empty">{}</div>
+	<div v-else-if="isObject(value)" class="object">
+		<div v-for="k in Object.keys(value)" class="kv">
+			<button class="toggle _button" :class="{ visible: collapsable(value[k]) }" @click="collapsed[k] = !collapsed[k]">{{ collapsed[k] ? '+' : '-' }}</button>
+			<div class="k">{{ k }}:</div>
+			<div v-if="collapsed[k]" class="v">
+				<button class="_button" @click="collapsed[k] = !collapsed[k]">
+					<template v-if="typeof value[k] === 'string'">"..."</template>
+					<template v-else-if="isArray(value[k])">[...]</template>
+					<template v-else-if="isObject(value[k])">{...}</template>
+				</button>
 			</div>
-		</template>
+			<div v-else class="v"><XValue :value="value[k]"/></div>
+		</div>
 	</div>
 </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from 'vue';
+import { computed, defineComponent, reactive, ref } from 'vue';
 import number from '@/filters/number';
 
 export default defineComponent({
@@ -33,24 +37,44 @@ export default defineComponent({
 
 	props: {
 		value: {
-			type: Object,
 			required: true,
 		},
-		collapsed: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
 	},
 
 	setup(props) {
-		const collapsed_ = ref(props.collapsed);
+		const collapsed = reactive({});
+
+		if (isObject(props.value)) {
+			for (const key in props.value) {
+				collapsed[key] = collapsable(props.value[key]);
+			}
+		}
+
+		function isObject(v): boolean {
+			return typeof v === 'object' && !Array.isArray(v) && v !== null;
+		}
+
+		function isArray(v): boolean {
+			return Array.isArray(v);
+		}
+
+		function isEmpty(v): boolean {
+			return (isArray(v) && v.length === 0) || (isObject(v) && Object.keys(v).length === 0);
+		}
+
+		function collapsable(v): boolean {
+			return (isObject(v) || isArray(v)) && !isEmpty(v);
+		}
 
 		return {
 			number,
-			collapsed_,
+			collapsed,
+			isObject,
+			isArray,
+			isEmpty,
+			collapsable,
 		};
-	}
+	},
 });
 </script>
 
@@ -66,6 +90,14 @@ export default defineComponent({
 	> .boolean {
 		display: inline;
 		color: var(--codeBoolean);
+
+		&.true {
+			font-weight: bold;
+		}
+
+		&.false {
+			opacity: 0.7;
+		}
 	}
 
 	> .string {
@@ -78,7 +110,12 @@ export default defineComponent({
 		color: var(--codeNumber);
 	}
 
-	> .array {
+	> .array.empty {
+		display: inline;
+		opacity: 0.7;
+	}
+
+	> .array:not(.empty) {
 		display: inline;
 
 		> .element {
@@ -87,13 +124,28 @@ export default defineComponent({
 		}
 	}
 
-	> .object {
+	> .object.empty {
+		display: inline;
+		opacity: 0.7;
+	}
+
+	> .object:not(.empty) {
 		display: inline;
 
 		> .kv {
 			display: block;
 			padding-left: 16px;
 
+			> .toggle {
+				width: 16px;
+				color: var(--accent);
+				visibility: hidden;
+
+				&.visible {
+					visibility: visible;
+				}
+			}
+
 			> .k {
 				display: inline;
 				margin-right: 8px;