Initial commit

2025-12-21 09:57:09 -05:00
commit 8ac20d8b45
38 changed files with 4677 additions and 0 deletions
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ViewMode } from '@/types'
+
+const props = defineProps<{
+  searchQuery: string
+  viewMode: ViewMode
+  isLoading: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:searchQuery': [value: string]
+  'update:viewMode': [value: ViewMode]
+  'toggle-sidebar': []
+  'refresh': []
+  'open-file-picker': []
+  'open-folder-picker': []
+  'new-folder': []
+}>()
+
+const searchModel = computed({
+  get: () => props.searchQuery,
+  set: (value: string) => emit('update:searchQuery', value)
+})
+
+const viewModeModel = computed({
+  get: () => props.viewMode,
+  set: (value: ViewMode) => emit('update:viewMode', value)
+})
+</script>
+
+<template>
+  <v-app-bar elevation="0" class="files-toolbar border-b">
+    <template #prepend>
+      <v-btn
+        icon="mdi-menu"
+        variant="text"
+        @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-spacer />
+
+    <!-- Search -->
+    <v-text-field
+      v-model="searchModel"
+      density="compact"
+      variant="outlined"
+      placeholder="Search files..."
+      prepend-inner-icon="mdi-magnify"
+      hide-details
+      single-line
+      class="mx-4"
+      style="max-width: 300px;"
+    />
+
+    <!-- View toggle -->
+    <v-btn-toggle
+      v-model="viewModeModel"
+      color="primary"
+      variant="outlined"
+      density="compact"
+      mandatory
+      class="mr-2"
+    >
+      <v-btn value="grid" size="small">
+        <v-icon>mdi-view-grid</v-icon>
+      </v-btn>
+      <v-btn value="list" size="small">
+        <v-icon>mdi-view-list</v-icon>
+      </v-btn>
+      <v-btn value="details" size="small">
+        <v-icon>mdi-view-headline</v-icon>
+      </v-btn>
+    </v-btn-toggle>
+
+    <template #append>
+      <v-btn
+        icon="mdi-refresh"
+        variant="text"
+        @click="emit('refresh')"
+        :loading="isLoading"
+      />
+      <v-menu>
+        <template #activator="{ props: menuProps }">
+          <v-btn
+            color="secondary"
+            variant="tonal"
+            class="mr-2"
+            v-bind="menuProps"
+          >
+            <v-icon start>mdi-upload</v-icon>
+            <span class="d-none d-sm-inline">Upload</span>
+            <v-icon end size="small">mdi-chevron-down</v-icon>
+          </v-btn>
+        </template>
+        <v-list density="compact">
+          <v-list-item @click="emit('open-file-picker')">
+            <template #prepend>
+              <v-icon>mdi-file-upload</v-icon>
+            </template>
+            <v-list-item-title>Upload Files</v-list-item-title>
+          </v-list-item>
+          <v-list-item @click="emit('open-folder-picker')">
+            <template #prepend>
+              <v-icon>mdi-folder-upload</v-icon>
+            </template>
+            <v-list-item-title>Upload Folder</v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+      <v-btn
+        color="primary"
+        variant="elevated"
+        @click="emit('new-folder')"
+      >
+        <v-icon start>mdi-folder-plus</v-icon>
+        <span class="d-none d-sm-inline">New Folder</span>
+      </v-btn>
+    </template>
+  </v-app-bar>
+</template>
+
+<style scoped>
+.files-toolbar {
+  border-bottom: 1px solid rgb(var(--v-border-color)) !important;
+}
+
+.border-b {
+  border-bottom: 1px solid rgb(var(--v-border-color));
+}
+</style>