refactor: improvemets

Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>

src/components/FilesSidebar.vue

@@ -1,16 +1,22 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { useDisplay } from 'vuetify'
+import type { ServiceObject } from '@DocumentsManager/models/service'
 
 const display = useDisplay()
+const isMobile = computed(() => display.mdAndDown.value)
 
 defineProps<{
   modelValue: boolean
+  activeProviderId: string
   activeServiceId: string
+  services: ServiceObject[]
 }>()
 
 const emit = defineEmits<{
   'update:modelValue': [value: boolean]
   'navigate-home': []
+  'select-service': [service: ServiceObject]
 }>()
 </script>
 
@@ -18,9 +24,9 @@ const emit = defineEmits<{
   <v-navigation-drawer
     :model-value="modelValue"
     @update:model-value="emit('update:modelValue', $event)"
-    :permanent="display.mdAndUp.value"
-    :temporary="display.smAndDown.value"
-    width="240"
+    :permanent="!isMobile"
+    :temporary="isMobile"
+    width="280"
     class="files-sidebar"
   >
     <div class="pa-4">
@@ -53,11 +59,18 @@ const emit = defineEmits<{
       <v-list density="compact" nav>
         <v-list-subheader>Storage</v-list-subheader>
         <v-list-item
+          v-for="service in services"
+          :key="`${service.provider}:${String(service.identifier ?? '')}`"
           prepend-icon="mdi-harddisk"
-          title="Personal"
-          subtitle="Local storage"
-          :active="activeServiceId === 'personal'"
+          :title="service.label || String(service.identifier ?? 'Unnamed Service')"
+          :subtitle="service.provider"
+          :active="activeProviderId === service.provider && activeServiceId === String(service.identifier ?? '')"
+          @click="emit('select-service', service)"
         />
+
+        <div v-if="services.length === 0" class="files-sidebar-empty text-caption text-medium-emphasis px-4 py-2">
+          No storage services available.
+        </div>
       </v-list>
     </div>
   </v-navigation-drawer>
@@ -68,4 +81,8 @@ const emit = defineEmits<{
   border-right: 1px solid rgb(var(--v-border-color)) !important;
   overflow-y: auto;
 }
+
+.files-sidebar-empty {
+  line-height: 1.4;
+}
 </style>