1 files changed, 135 insertions, 0 deletions
diff --git a/apps/files/src/components/FileEntryGrid.vue b/apps/files/src/components/FileEntryGrid.vue
new file mode 100644
index 00000000000..1bd0572f53b
--- /dev/null
+++ b/apps/files/src/components/FileEntryGrid.vue
@@ -0,0 +1,135 @@
+<!--
+  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<tr :class="{'files-list__row--active': isActive, 'files-list__row--dragover': dragover, 'files-list__row--loading': isLoading}"
+		data-cy-files-list-row
+		:data-cy-files-list-row-fileid="fileid"
+		:data-cy-files-list-row-name="source.basename"
+		:draggable="canDrag"
+		class="files-list__row"
+		@contextmenu="onRightClick"
+		@dragover="onDragOver"
+		@dragleave="onDragLeave"
+		@dragstart="onDragStart"
+		@dragend="onDragEnd"
+		@drop="onDrop">
+		<!-- Failed indicator -->
+		<span v-if="isFailedSource" class="files-list__row--failed" />
+
+		<!-- Checkbox -->
+		<FileEntryCheckbox :fileid="fileid"
+			:is-loading="isLoading"
+			:nodes="nodes"
+			:source="source" />
+
+		<!-- Link to file -->
+		<td class="files-list__row-name" data-cy-files-list-row-name>
+			<!-- Icon or preview -->
+			<FileEntryPreview ref="preview"
+				:dragover="dragover"
+				:grid-mode="true"
+				:source="source"
+				@auxclick.native="execDefaultAction"
+				@click.native="execDefaultAction" />
+
+			<FileEntryName ref="name"
+				:basename="basename"
+				:extension="extension"
+				:grid-mode="true"
+				:nodes="nodes"
+				:source="source"
+				@auxclick.native="execDefaultAction"
+				@click.native="execDefaultAction" />
+		</td>
+
+		<!-- Mtime -->
+		<td v-if="!compact && isMtimeAvailable"
+			:style="mtimeOpacity"
+			class="files-list__row-mtime"
+			data-cy-files-list-row-mtime
+			@click="openDetailsIfAvailable">
+			<NcDateTime v-if="mtime"
+				ignore-seconds
+				:timestamp="mtime" />
+		</td>
+
+		<!-- Actions -->
+		<FileEntryActions ref="actions"
+			:class="`files-list__row-actions-${uniqueId}`"
+			:grid-mode="true"
+			:opened.sync="openedMenu"
+			:source="source" />
+	</tr>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import NcDateTime from '@nextcloud/vue/components/NcDateTime'
+
+import { useNavigation } from '../composables/useNavigation.ts'
+import { useRouteParameters } from '../composables/useRouteParameters.ts'
+import { useActionsMenuStore } from '../store/actionsmenu.ts'
+import { useDragAndDropStore } from '../store/dragging.ts'
+import { useFilesStore } from '../store/files.ts'
+import { useRenamingStore } from '../store/renaming.ts'
+import { useSelectionStore } from '../store/selection.ts'
+import FileEntryMixin from './FileEntryMixin.ts'
+import FileEntryActions from './FileEntry/FileEntryActions.vue'
+import FileEntryCheckbox from './FileEntry/FileEntryCheckbox.vue'
+import FileEntryName from './FileEntry/FileEntryName.vue'
+import FileEntryPreview from './FileEntry/FileEntryPreview.vue'
+
+export default defineComponent({
+	name: 'FileEntryGrid',
+
+	components: {
+		FileEntryActions,
+		FileEntryCheckbox,
+		FileEntryName,
+		FileEntryPreview,
+		NcDateTime,
+	},
+
+	mixins: [
+		FileEntryMixin,
+	],
+
+	inheritAttrs: false,
+
+	setup() {
+		const actionsMenuStore = useActionsMenuStore()
+		const draggingStore = useDragAndDropStore()
+		const filesStore = useFilesStore()
+		const renamingStore = useRenamingStore()
+		const selectionStore = useSelectionStore()
+		// The file list is guaranteed to be only shown with active view - thus we can set the `loaded` flag
+		const { currentView } = useNavigation(true)
+		const {
+			directory: currentDir,
+			fileId: currentFileId,
+		} = useRouteParameters()
+
+		return {
+			actionsMenuStore,
+			draggingStore,
+			filesStore,
+			renamingStore,
+			selectionStore,
+
+			currentDir,
+			currentFileId,
+			currentView,
+		}
+	},
+
+	data() {
+		return {
+			gridMode: true,
+		}
+	},
+})
+</script>