fix: Dashboard directories and displays modest style fixes

frontend/resources/vue/components/DashboardComponent.vue

@@ -1,17 +1,13 @@
 <template>
     <ActionButton v-if="component.type == 'link'" :actionData="component.action" :key="component.title" />
 
+
+    <DashboardComponentDirectory v-else-if="component.type == 'directory'" :component="component" />
     <div v-else-if="component.type == 'directory'">
-        <router-link :to="{ name: 'Dashboard', params: { title: component.title } }" class="dashboard-link">
-            <button>
-                {{ component.title }}
-            </button>
-        </router-link>
     </div>
 
-    <div v-else-if="component.type == 'display'" class="display">
-        <div v-html="component.title" />
-    </div>
+
+    <DashboardComponentDisplay v-else-if="component.type == 'display'" :component="component" />
 
     <DashboardComponentMostRecentExecution v-else-if="component.type == 'stdout-most-recent-execution'" :component="component" />
 
@@ -31,6 +27,8 @@
 <script setup>
 import ActionButton from '../ActionButton.vue'
 import DashboardComponentMostRecentExecution from './DashboardComponentMostRecentExecution.vue'
+import DashboardComponentDirectory from './DashboardComponentDirectory.vue'
+import DashboardComponentDisplay from './DashboardComponentDisplay.vue'
 
 const props = defineProps({
     component: {

frontend/resources/vue/components/DashboardComponentDirectory.vue

@@ -0,0 +1,49 @@
+<template>
+    <button @click="router.push({ name: 'Dashboard', params: { title: component.title } })">
+        {{ component.title }}
+    </button>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const props = defineProps({
+    component: {
+        type: Object,
+        required: true
+    }
+})
+</script>
+
+<style scoped>
+.folder-container {
+    display: grid;
+}
+
+button {
+    box-shadow: 0 0 .6em #aaa;
+    background-color: #fff;
+    border-radius: .7em;
+}
+
+button:hover {
+    background-color: #f5f5f5;
+    border-color: #999;
+}
+
+@media (prefers-color-scheme: dark) {
+    button {
+        box-shadow: 0 0 .6em #000;
+        background-color: #111;
+        border-color: #000;
+    }
+
+    button:hover {
+        background-color: #222;
+        border-color: #000;
+    }
+}
+
+</style>

frontend/resources/vue/components/DashboardComponentDisplay.vue

@@ -0,0 +1,37 @@
+<template>
+    <div class="display">
+        <div v-html="component.title" />
+    </div>
+</template>
+
+<script setup>
+const props = defineProps({
+    component: {
+        type: Object,
+        required: true
+    }
+})
+</script>
+
+<style scoped>
+.display {
+	padding: 1em;
+	border-radius: .7em;
+	box-shadow: 0 0 .6em #aaa;
+	text-align: center;
+	font-size: small;
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+	justify-content: center;
+	align-items: center;
+}
+
+@media (prefers-color-scheme: dark) {
+    .display {
+        border-color: #000;
+        box-shadow: 0 0 .6em #000;
+    }
+}
+
+</style>

frontend/style.css

@@ -21,20 +21,6 @@ section {
 	padding: 0;
 }
 
-.display {
-	border: 1px solid #666;
-	padding: 1em;
-	border-radius: .7em;
-	box-shadow: 0 0 .6em #aaa;
-	text-align: center;
-	font-size: small;
-	display: flex;
-	flex-direction: column;
-	flex-grow: 1;
-	justify-content: center;
-	align-items: center;
-}
-
 aside .flex-row {
 	padding-left: 1em;
 	padding-right: .5em;