Update design when dashboard is empty (#66)

* Change banner if dashboard is empty

* remove import

src/components/Rooms.vue

 <template>
   <div class="row mb-5">
     <div
-      class="card d-flex align-items-center justify-content-center"
+      class="card d-flex align-items-center justify-content-center py-5"
       v-if="store.categories.length === 0"
     >
-      <p class="py-5 m-0">
-        Hier ist noch nichts zu sehen. Erstelle deine erste Kategorie!
+      <i class="fa-regular fa-xl fa-folder-open"></i>
+      <h4 class="mt-3">Keine Kategorien vorhanden</h4>
+      <p class="m-0">
+        Hier ist noch nichts zu sehen. Erstelle deine erste Kategorie, um zu
+        starten!
       </p>
+      <button
+        class="btn btn-primary mt-3"
+        data-bs-toggle="modal"
+        data-bs-target="#create-category-modal"
+      >
+        <i class="fa fa-plus"></i>
+        Neue Kategorie anlegen
+      </button>
     </div>
 
     <div
@@ -100,6 +111,7 @@
 
   <EditCategoryModal :category="categoryToEdit" />
   <EditRoomModal :room="roomToEdit" />
+  <CreateCategoryModal />
 </template>
 
 <script setup lang="ts">
@@ -113,6 +125,7 @@
   import EditRoomModal from '@/components/EditRoomModal.vue';
   import { useChannel } from '@/composables/channel/channel';
   import { useRouter } from 'vue-router';
+  import CreateCategoryModal from '@/components/CreateCategoryModal.vue';
 
   const user = useUser();
   const auth = useAuth();

src/views/DashboardView.vue

@@ -4,7 +4,7 @@
     <hr />
 
     <div class="row my-5">
-      <div class="col">
+      <div v-if="store.categories && store.categories.length !== 0" class="col">
         <button
           class="btn btn-primary"
           data-bs-toggle="modal"
@@ -38,8 +38,10 @@
   import Rooms from '@/components/Rooms.vue';
   import { useChannel } from '@/composables/channel/channel';
   import { useAuth } from '@/composables/auth';
+  import { useStore } from '@/composables/store';
 
   const channel = useChannel();
   const auth = useAuth();
+  const store = useStore();
   channel.connect();
 </script>