refactor: improvemets

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

src/components/FilesToolbar.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useDisplay } from 'vuetify'
 import type { ViewMode } from '@/types'
 
 const props = defineProps<{
@@ -18,6 +19,9 @@ const emit = defineEmits<{
   'new-folder': []
 }>()
 
+const display = useDisplay()
+const isMobile = computed(() => display.mdAndDown.value)
+
 const searchModel = computed({
   get: () => props.searchQuery,
   set: (value: string) => emit('update:searchQuery', value)
@@ -30,19 +34,15 @@ const viewModeModel = computed({
 </script>
 
 <template>
-  <v-app-bar elevation="0" class="files-toolbar border-b">
+  <v-app-bar elevation="0" density="compact" class="files-toolbar">
     <template #prepend>
-      <v-btn
-        icon="mdi-menu"
-        variant="text"
+      <v-app-bar-nav-icon
+        v-if="isMobile"
         @click="emit('toggle-sidebar')"
       />
     </template>
 
-    <v-app-bar-title class="d-flex align-center">
-      <v-icon size="28" color="primary" class="mr-2">mdi-folder-outline</v-icon>
-      <span class="text-h6 font-weight-bold">Files</span>
-    </v-app-bar-title>
+    <v-app-bar-title>Files</v-app-bar-title>
 
     <v-spacer />
 
@@ -55,8 +55,7 @@ const viewModeModel = computed({
       prepend-inner-icon="mdi-magnify"
       hide-details
       single-line
-      class="mx-4"
-      style="max-width: 300px;"
+      class="files-toolbar-search mx-4"
     />
 
     <!-- View toggle -->
@@ -131,7 +130,14 @@ const viewModeModel = computed({
   border-bottom: 1px solid rgb(var(--v-border-color)) !important;
 }
 
-.border-b {
-  border-bottom: 1px solid rgb(var(--v-border-color));
+@media (max-width: 960px) {
+  .files-toolbar-search {
+    max-width: 180px;
+    margin-inline: 8px !important;
+  }
+}
+
+.files-toolbar-search {
+  max-width: 300px;
 }
 </style>