refactor(vue3): replace FileEntry mixin with composable

Signed-off-by: Vitor Mattos <1079143+vitormattos@users.noreply.github.com>

Author: vitormattos

src/composables/useFileEntry.ts

@@ -0,0 +1,110 @@
+/**
+ * SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { computed } from '@vue/reactivity'
+
+import { useSidebarStore } from '../store/sidebar.js'
+
+type FileEntryMetadata = {
+	extension?: string
+}
+
+export type FileEntrySource = {
+	id: number
+	name: string
+	nodeType?: string
+	created_at?: number | string | Date | null
+	metadata?: FileEntryMetadata
+	[key: string]: unknown
+}
+
+type FileEntryStore = {
+	selectFile: (id: number) => void
+}
+
+type ActionsMenuStore = {
+	opened: number | null
+}
+
+type FileEntryProps = {
+	source: FileEntrySource
+}
+
+export function useFileEntry(
+	props: FileEntryProps,
+	options: {
+		actionsMenuStore: ActionsMenuStore
+		filesStore: FileEntryStore
+	},
+) {
+	const sidebarStore = useSidebarStore()
+
+	const mtime = computed(() => new Date(props.source?.created_at || Date.now()))
+	const openedMenu = computed({
+		get: () => options.actionsMenuStore.opened === props.source.id,
+		set: (opened: boolean) => {
+			options.actionsMenuStore.opened = opened ? props.source.id : null
+		},
+	})
+	const mtimeOpacity = computed(() => {
+		const maxOpacityTime = 31 * 24 * 60 * 60 * 1000
+		const timestamp = mtime.value?.getTime?.()
+
+		if (!timestamp) {
+			return {}
+		}
+
+		const ratio = Math.round(Math.min(100, 100 * (maxOpacityTime - (Date.now() - timestamp)) / maxOpacityTime))
+		if (ratio < 0) {
+			return {}
+		}
+
+		return {
+			color: `color-mix(in srgb, var(--color-main-text) ${ratio}%, var(--color-text-maxcontrast))`,
+		}
+	})
+	const fileExtension = computed(() => {
+		if (props.source.nodeType === 'envelope') {
+			return ''
+		}
+		return props.source.metadata?.extension ? `.${props.source.metadata.extension}` : '.pdf'
+	})
+
+	function onRightClick(event: MouseEvent) {
+		if (openedMenu.value) {
+			return
+		}
+
+		options.actionsMenuStore.opened = props.source.id
+		event.preventDefault()
+		event.stopPropagation()
+
+		const target = event.currentTarget as HTMLElement | null
+		const root = target?.closest('.app-content') as HTMLElement | null
+		if (!root) {
+			return
+		}
+
+		const contentRect = root.getBoundingClientRect()
+		root.style.setProperty('--mouse-pos-x', `${Math.max(0, event.clientX - contentRect.left - 200)}px`)
+		root.style.setProperty('--mouse-pos-y', `${Math.max(0, event.clientY - contentRect.top)}px`)
+	}
+
+	function openDetailsIfAvailable(event: Event) {
+		event.preventDefault()
+		event.stopPropagation()
+		options.filesStore.selectFile(props.source.id)
+		sidebarStore.activeRequestSignatureTab()
+	}
+
+	return {
+		mtime,
+		openedMenu,
+		mtimeOpacity,
+		fileExtension,
+		onRightClick,
+		openDetailsIfAvailable,
+	}
+}

src/views/FilesList/FileEntry/FileEntry.vue

@@ -54,7 +54,7 @@
 
 <script setup lang="ts">
 import { t } from '@nextcloud/l10n'
-import { getCurrentInstance, ref } from 'vue'
+import { ref } from 'vue'
 
 import { showSuccess } from '@nextcloud/dialogs'
 import NcDateTime from '@nextcloud/vue/components/NcDateTime'
@@ -66,32 +66,45 @@ import FileEntryPreview from './FileEntryPreview.vue'
 import FileEntrySigners from './FileEntrySigners.vue'
 import FileEntryStatus from './FileEntryStatus.vue'
 
-import FileEntryMixin from './FileEntryMixin.js'
+import { useFileEntry, type FileEntrySource } from '../../../composables/useFileEntry.js'
 import { useActionsMenuStore } from '../../../store/actionsmenu.js'
 import { useFilesStore } from '../../../store/files.js'
 
 defineOptions({
 	name: 'FileEntry',
-	mixins: [FileEntryMixin],
 })
 
+type FileEntryActionsRef = {
+	doRename: (newName: string) => Promise<void>
+}
+
+type FileEntryNameRef = {
+	startRenaming?: () => void
+	stopRenaming?: () => void
+}
+
+const props = defineProps<{
+	source: FileEntrySource
+	loading: boolean
+}>()
+
 const actionsMenuStore = useActionsMenuStore()
 const filesStore = useFilesStore()
+const { mtime, openedMenu, mtimeOpacity, fileExtension, onRightClick, openDetailsIfAvailable } = useFileEntry(props, {
+	actionsMenuStore,
+	filesStore,
+})
+const actions = ref<FileEntryActionsRef | null>(null)
+const name = ref<FileEntryNameRef | null>(null)
 const isRenaming = ref(false)
 const renamingSaving = ref(false)
-const instance = getCurrentInstance()
-
-function getVm() {
-	return instance?.proxy as any
-}
 
 async function onRename(newName: string) {
-	const vm = getVm()
-	const oldName = vm.source.name
+	const oldName = props.source.name
 	renamingSaving.value = true
 	try {
-		await vm.$refs.actions.doRename(newName)
-		vm.$refs.name?.stopRenaming?.()
+		await actions.value?.doRename(newName)
+		name.value?.stopRenaming?.()
 		showSuccess(t('libresign', 'Renamed "{oldName}" to "{newName}"', {
 			oldName,
 			newName,
@@ -102,7 +115,7 @@ async function onRename(newName: string) {
 }
 
 function onStartRename() {
-	getVm().$refs.name?.startRenaming?.()
+	name.value?.startRenaming?.()
 }
 
 function onFileRenaming(nextIsRenaming: boolean) {
@@ -112,6 +125,14 @@ function onFileRenaming(nextIsRenaming: boolean) {
 defineExpose({
 	actionsMenuStore,
 	filesStore,
+	mtime,
+	openedMenu,
+	mtimeOpacity,
+	fileExtension,
+	onRightClick,
+	openDetailsIfAvailable,
+	actions,
+	name,
 	isRenaming,
 	renamingSaving,
 	onRename,

src/views/FilesList/FileEntry/FileEntryGrid.vue

@@ -58,20 +58,34 @@ import FileEntryPreview from './FileEntryPreview.vue'
 import FileEntrySigners from './FileEntrySigners.vue'
 import FileEntryStatus from './FileEntryStatus.vue'
 
-import FileEntryMixin from './FileEntryMixin.js'
+import { useFileEntry, type FileEntrySource } from '../../../composables/useFileEntry.js'
 import { useActionsMenuStore } from '../../../store/actionsmenu.js'
 import { useFilesStore } from '../../../store/files.js'
 
 defineOptions({
 	name: 'FileEntryGrid',
-	mixins: [FileEntryMixin],
 })
 
+const props = defineProps<{
+	source: FileEntrySource
+	loading: boolean
+}>()
+
 const actionsMenuStore = useActionsMenuStore()
 const filesStore = useFilesStore()
+const { mtime, openedMenu, mtimeOpacity, fileExtension, onRightClick, openDetailsIfAvailable } = useFileEntry(props, {
+	actionsMenuStore,
+	filesStore,
+})
 
 defineExpose({
 	actionsMenuStore,
 	filesStore,
+	mtime,
+	openedMenu,
+	mtimeOpacity,
+	fileExtension,
+	onRightClick,
+	openDetailsIfAvailable,
 })
 </script>