Initial pass on character lists.

frontend/src/App.vue

@@ -29,8 +29,7 @@ const butts = () => {
 </script>
 
 <template>
-  <CharacterSelector></CharacterSelector>
-  <!--   <header>
+  <header>
     <img
       alt="Vue logo"
       class="logo"
@@ -38,16 +37,14 @@ const butts = () => {
       width="125"
       height="125"
     />
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
   </header>
 
   <main>
-    potato
+    <CharacterSelector></CharacterSelector>
+    <!-- potato
     <button class="button" @click="butts">butts</button>
-    <CharacterEditer></CharacterEditer>
-  </main> -->
+    <CharacterEditer></CharacterEditer> -->
+  </main>
 </template>
 
 <style scoped>

frontend/src/components/CharacterSelector.vue

@@ -12,7 +12,14 @@
     clearable
   ></v-text-field>
 
-  {{ characterList }}
+  <div v-for="character in characterList">{{ character }}</div>
+
+  <v-expansion-panels>
+    <CharacterSelectorRow
+      v-for="character in characterList"
+      :character="character"
+    />
+  </v-expansion-panels>
 </template>
 
 <style></style>
@@ -25,11 +32,12 @@ import { CharacterManagerClient } from '../proto/character.client'
 import { GrpcWebFetchTransport } from '@protobuf-ts/grpcweb-transport'
 import { watchDebounced } from '@vueuse/core'
 
+import CharacterSelectorRow from './CharacterSelectorRow.vue'
+
 const characterSearch = ref('')
 const playerSearch = ref('')
 
-const characterList = ref([])
-
+const characterList = ref(new Array<Character>())
 
 const client = new CharacterManagerClient(
   new GrpcWebFetchTransport({
@@ -40,12 +48,20 @@ const client = new CharacterManagerClient(
 
 watchDebounced(
   [characterSearch, playerSearch],
-  ([newCharacterValue, oldCharacterValue], [newPlayerValue, oldPlayerValue]) => {
+  (
+    [newCharacterValue, oldCharacterValue],
+    [newPlayerValue, oldPlayerValue],
+  ) => {
     console.log(newCharacterValue)
     console.log(newPlayerValue)
-    client.listCharacters({characterName: characterSearch.value, playerName: playerSearch.value}).then((res) => {
-      characterList.value = res.response.characters
-    })
+    client
+      .listCharacters({
+        characterName: characterSearch.value,
+        playerName: playerSearch.value,
+      })
+      .then((res) => {
+        characterList.value = res.response.characters
+      })
   },
   { debounce: 500 },
 )

frontend/src/components/CharacterSelectorRow.vue

@@ -0,0 +1,28 @@
+<template>
+  <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>
+    </v-expansion-panel-title>
+    <v-expansion-panel-text>
+      <div>Alias: {{ character.characterAlias }}</div>
+      <slot></slot>
+    </v-expansion-panel-text>
+  </v-expansion-panel>
+</template>
+
+<style>
+	.charactername {
+		font-weight: bold;
+		margin-right: 10px;
+	}
+</style>
+
+<script setup lang="ts">
+import { defineProps } from 'vue'
+import { Character, ListCharacterRequest } from '../proto/character'
+
+const props = defineProps<{ character?: Character }>()
+</script>