Remove title field and rename color to message

src/App.vue

@@ -18,8 +18,7 @@ onMounted(async () => {
   if (router.currentRoute.value.hash === '#login-success') {
     localStorage.removeItem('redirectPath');
     showSnackbar({
-      color: 'success',
-      title: 'Success',
+      status: 'success',
       message: "You're logged in!"
     });
   }

src/components/ui/Snackbar.vue

@@ -1,11 +1,13 @@
 <script lang="ts" setup>
 import { useSnackbar } from '@/composables/useSnackbar';
+import { computed } from 'vue';
 
-const { visible, color, title, message } = useSnackbar();
+const { visible, status, message } = useSnackbar();
+const title = computed(() => (status.value === 'error' ? 'Error' : 'Success'));
 </script>
 
 <template>
-  <v-snackbar v-model="visible" :color="color" vertical>
+  <v-snackbar v-model="visible" :color="status" vertical>
     <h6 class="text-h6 mb-1">{{ title }}</h6>
     <p class="text-body-1">{{ message }}</p>
   </v-snackbar>

src/composables/useSnackbar.ts

@@ -2,14 +2,12 @@ import { reactive, toRefs } from 'vue';
 
 interface Snackbar {
   visible: boolean;
-  color: '' | 'error' | 'success';
-  title: string;
+  status: '' | 'error' | 'success';
   message: string;
 }
 
 const snackbar = reactive<Snackbar>({
-  color: '',
-  title: '',
+  status: '',
   message: '',
   visible: false
 });

src/views/LogIn.vue

@@ -12,8 +12,7 @@ const { showSnackbar } = useSnackbar();
 onMounted(() => {
   if (route.hash === '#login-error') {
     showSnackbar({
-      color: 'error',
-      title: 'Error',
+      status: 'error',
       message: 'Failed to log you in.'
     });
   }