refactor: improvemets

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

src/components/FilesInfoPanel.vue

@@ -1,17 +1,37 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { VNavigationDrawer } from 'vuetify/components'
 import { CollectionObject } from '@DocumentsManager/models/collection'
 import { EntityObject } from '@DocumentsManager/models/entity'
 import { getFileIcon, formatSize, formatDate } from '@/utils/fileHelpers'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   selectedItems: (CollectionObject | EntityObject)[]
-}>()
+  embedded?: boolean
+}>(), {
+  embedded: false,
+})
 
 const emit = defineEmits<{
   'close': []
 }>()
 
+const panelComponent = computed(() => props.embedded ? 'div' : VNavigationDrawer)
+
+const panelProps = computed(() => {
+  if (props.embedded) {
+    return {}
+  }
+
+  return {
+    modelValue: hasSelection.value,
+    key: props.selectedItems.map(item => String(item.identifier)).join(','),
+    location: 'right',
+    width: 320,
+    temporary: true,
+  }
+})
+
 const hasSelection = computed(() => props.selectedItems.length > 0)
 const singleSelection = computed(() => props.selectedItems.length === 1)
 const selectedItem = computed(() => props.selectedItems[0] ?? null)
@@ -52,13 +72,12 @@ const totalSize = computed(() => {
 </script>
 
 <template>
-  <v-navigation-drawer
-    :model-value="hasSelection"
-    :key="selectedItems.map(i => String(i.identifier)).join(',')"
-    location="right"
-    width="320"
-    temporary
+  <component
+    :is="panelComponent"
+    v-if="!embedded || hasSelection"
+    v-bind="panelProps"
     class="files-info-panel"
+    :class="{ 'files-info-panel--embedded': embedded }"
   >
     <div class="pa-4">
       <!-- Header -->
@@ -172,11 +191,18 @@ const totalSize = computed(() => {
         </v-list>
       </template>
     </div>
-  </v-navigation-drawer>
+  </component>
 </template>
 
 <style scoped>
 .files-info-panel {
   border-left: 1px solid rgb(var(--v-border-color)) !important;
 }
+
+.files-info-panel--embedded {
+  width: 320px;
+  flex-shrink: 0;
+  overflow-y: auto;
+  background-color: rgb(var(--v-theme-surface));
+}
 </style>