Initial commit

src/components/reader/ReaderEmpty.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+const emit = defineEmits<{
+  compose: []
+}>()
+
+const handleCompose = () => {
+  emit('compose')
+}
+</script>
+
+<template>
+  <div class="empty-state">
+    <v-icon size="96" color="grey-lighten-1">mdi-email-open-outline</v-icon>
+    <div class="text-h5 mt-6 text-medium-emphasis">No message selected</div>
+    <div class="text-body-1 mt-2 text-medium-emphasis">
+      Select a message to read or compose a new one
+    </div>
+    <v-btn
+      color="primary"
+      size="large"
+      class="mt-6"
+      prepend-icon="mdi-pencil"
+      @click="handleCompose"
+    >
+      Compose New Message
+    </v-btn>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.empty-state {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px;
+  text-align: center;
+}
+</style>