From b5f0e8afbbac312d0b455b826e631d787e7f5b16 Mon Sep 17 00:00:00 2001
From: iamBadgers <jmosrael@gmail.com>
Date: Sun, 13 Jul 2025 11:14:33 -0700
Subject: [PATCH] minor ui tweaks

---
 frontend/src/App.vue                          |  4 +-
 .../src/components/CharacterSelectorRow.vue   | 53 +++++++++++++++----
 2 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 77cd821..e2d9f1d 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -48,7 +48,7 @@ const butts = () => {
 </template>
 
 <style scoped>
-/*header {
+header {
   line-height: 1.5;
 }
 
@@ -73,5 +73,5 @@ const butts = () => {
     place-items: flex-start;
     flex-wrap: wrap;
   }
-}*/
+}
 </style>
diff --git a/frontend/src/components/CharacterSelectorRow.vue b/frontend/src/components/CharacterSelectorRow.vue
index e881eee..85b2928 100644
--- a/frontend/src/components/CharacterSelectorRow.vue
+++ b/frontend/src/components/CharacterSelectorRow.vue
@@ -2,27 +2,60 @@
   <v-expansion-panel>
     <v-expansion-panel-title>
       <div class="d-flex flex-row">
-        <div class="charactername">{{ character.characterName || "Unkown Character"}}</div>
-        <div class="playername"> ( {{ character.playerName || "Unkown Player"}} )</div>
+        <div class="charactername">{{ characterName }}</div>
+        <div class="playername">( {{ playerName }} )</div>
       </div>
     </v-expansion-panel-title>
     <v-expansion-panel-text>
-      <div>Alias: {{ character.characterAlias }}</div>
-      <slot></slot>
+      <div>Alias: {{ alias }}</div>
+      <JsonEditorVue v-model="json" v-bind="editorConfig" />
     </v-expansion-panel-text>
   </v-expansion-panel>
 </template>
 
 <style>
-	.charactername {
-		font-weight: bold;
-		margin-right: 10px;
-	}
+.charactername {
+  font-weight: bold;
+  margin-right: 10px;
+}
 </style>
 
 <script setup lang="ts">
-import { defineProps } from 'vue'
+import JsonEditorVue from 'json-editor-vue'
+
+import { computed } from 'vue'
 import { Character, ListCharacterRequest } from '../proto/character'
 
-const props = defineProps<{ character?: Character }>()
+const editorConfig = {
+  mainMenuBar: false,
+  navigationBar: false,
+  readOnly: true,
+}
+
+const {
+  character = {
+    playerName: 'Unkown Player',
+    characterName: 'Player Character',
+    characterAlias: ['No Alias'],
+    json: "",
+  },
+} = defineProps<{ character?: Character }>()
+
+const playerName = computed(() => {
+  return character.playerName || 'Unnamed Player'
+})
+
+const characterName = computed(() => {
+  return character.characterName || 'Unnamed Character'
+})
+
+const alias = computed(() => {
+  return (character.characterAlias || [])
+    .map((entry) => '"' + entry + '"')
+    .join(', ')
+})
+
+const json = computed(() => {
+  return character.json || '{}'
+})
 </script>