refactor: standardize module tool bar

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

src/components/FilesSidebar.vue

@@ -25,7 +25,7 @@ const emit = defineEmits<{
     :model-value="modelValue"
     contained
     @update:model-value="emit('update:modelValue', $event)"
-    :permanent="!isMobile"
+    :permanent="modelValue && !isMobile"
     :temporary="isMobile"
     width="280"
     class="files-sidebar"

src/components/FilesToolbar.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useDisplay } from 'vuetify'
 import type { ViewMode } from '@/types'
 
 const props = defineProps<{
@@ -19,9 +18,6 @@ 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)
@@ -37,14 +33,16 @@ const viewModeModel = computed({
   <v-toolbar elevation="0" density="compact" class="files-toolbar">
     <template #prepend>
       <v-btn
-        v-if="isMobile"
         icon="mdi-menu"
         variant="text"
         @click="emit('toggle-sidebar')"
       />
     </template>
 
-    <v-toolbar-title>Files</v-toolbar-title>
+    <v-toolbar-title class="d-flex align-center">
+      <v-icon size="24" color="primary" class="mr-2">mdi-folder-multiple</v-icon>
+      <span class="text-subtitle-1 font-weight-bold">Files</span>
+    </v-toolbar-title>
 
     <v-spacer />
 
@@ -57,6 +55,7 @@ const viewModeModel = computed({
       prepend-inner-icon="mdi-magnify"
       hide-details
       single-line
+      clearable
       class="files-toolbar-search mx-4"
     />