Allow switching between hex and text view of current file

src/assets/main.css

@@ -24,6 +24,12 @@ button {
   padding: 0.5em 0.75em;
 }
 
+select,
+input {
+  font-size: 1.1em;
+  padding: 0.5em;
+}
+
 progress::-webkit-progress-bar,
 progress::-moz-progress-bar {
   background: var(--fg-color);

src/components/DiskExplorer.vue

@@ -2,6 +2,7 @@
 import { FloppyDisk } from '@/floppy/disk.ts'
 import { computed, ref } from 'vue'
 import HexDump from '@/components/HexDump.vue'
+import TextDump from '@/components/TextDump.vue'
 
 const { floppyDisk = null } = defineProps<{ floppyDisk: FloppyDisk | null }>()
 
@@ -11,6 +12,8 @@ const currentFileData = ref(new ArrayBuffer(0))
 
 const currentFileName = ref<string>('')
 
+const dataView = ref('hex-dump')
+
 const directories = computed(() => {
   const fileList = floppyDisk?.getFileList()
 
@@ -97,8 +100,15 @@ function loadFile(name: string, firstCluster: number, size: number) {
         </li>
       </ul>
     </div>
-    <div class="hex">
+    <div>
-      <HexDump :buffer="currentFileData" />
+      <select v-model="dataView">
+        <option value="hex-dump">Hex Dump</option>
+        <option value="text-dump">Text</option>
+      </select>
+    </div>
+    <div class="current-file-view">
+      <TextDump v-if="dataView === 'text-dump'" :buffer="currentFileData" />
+      <HexDump v-if="dataView === 'hex-dump'" :buffer="currentFileData" />
     </div>
   </div>
 </template>
@@ -109,14 +119,15 @@ div.path {
 }
 
 div.cols {
+  margin-top: 1em;
   display: flex;
+  gap: 1em;
 }
 
 div.file-list {
   box-sizing: border-box;
   min-width: 12em;
   background: rgba(255, 255, 255, 0.075);
-  margin: 1em;
   max-height: 40em;
   overflow-y: auto;
   padding: 1em 1em 0;
@@ -157,4 +168,8 @@ ul {
   padding: 0;
   list-style: none;
 }
+
+.current-file-view {
+  width: 100%;
+}
 </style>

src/components/HexDump.vue

@@ -91,6 +91,7 @@ const hexDump = computed(() => {
 
 <style scoped>
 pre {
+  margin: 0;
   padding: 0.5em 1em 10em;
   box-sizing: border-box;
   overflow-y: scroll;

src/components/TextDump.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+const { buffer } = defineProps<{ buffer: ArrayBuffer }>()
+
+const textDump = computed(() => {
+  const decoder = new TextDecoder()
+  return decoder.decode(buffer)
+})
+</script>
+
+<template>
+  <textarea v-model="textDump" readonly></textarea>
+</template>
+
+<style scoped>
+textarea {
+  margin: 0;
+  padding: 0.5em 1em 1em;
+  text-wrap: wrap;
+  box-sizing: border-box;
+  min-height: 20rem;
+  height: 40rem;
+  max-height: 40rem;
+  background: rgba(255, 255, 255, 0.15);
+  color: #c0c0c0;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  width: 100%;
+  font-size: 1.1em;
+}
+</style>