feat(files): only render file list

Author: tomek2k1

apps/files/src/main.ts

@@ -11,7 +11,7 @@ import SettingsModel from './models/Setting.ts'
 import router from './router/router.ts'
 import RouterService from './services/RouterService.ts'
 import SettingsService from './services/Settings.js'
-import { renderFilesApp } from './services/renderFilesApp.ts'
+import { renderFilesView } from './services/renderFilesView.ts'
 import { getPinia } from './store/index.ts'
 
 __webpack_nonce__ = getCSPNonce()
@@ -27,7 +27,7 @@ if (!window.OCP.Files.Router) {
 }
 
 // Expose the ability to render the Files UI on a foreign page
-window.OCP.Files.renderFilesApp ??= renderFilesApp
+window.OCP.Files.renderFilesApp ??= renderFilesView
 
 // Init Pinia store
 Vue.use(PiniaVuePlugin)
@@ -37,8 +37,14 @@ const Settings = new SettingsService()
 Object.assign(window.OCA.Files, { Settings })
 Object.assign(window.OCA.Files.Settings, { Setting: SettingsModel })
 
-const FilesAppVue = Vue.extend(FilesApp)
-new FilesAppVue({
-	router: (window.OCP.Files.Router as RouterService)._router,
-	pinia: getPinia(),
-}).$mount('#content')
+// Other apps load this same script to get `OCP.Files.renderFilesApp()`.
+// Only take over `#content` when we are actually on the Files app's own
+// page - identifiable by the app-specific class core's layout adds to it.
+const contentEl = document.getElementById('content')
+if (contentEl?.classList.contains('app-files')) {
+	const FilesAppVue = Vue.extend(FilesApp)
+	new FilesAppVue({
+		router: (window.OCP.Files.Router as RouterService)._router,
+		pinia: getPinia(),
+	}).$mount(contentEl)
+}

apps/files/src/services/renderFilesApp.spec.ts

@@ -0,0 +1,68 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { View, getNavigation } from '@nextcloud/files'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { renderFilesView } from './renderFilesView.ts'
+
+const VIEW_ID = 'test-view'
+
+vi.mock('../views/FilesList.vue', () => ({
+	default: {
+		name: 'FilesList',
+		props: { embedded: { type: Boolean, default: false } },
+		render(h) {
+			return h('div', { attrs: { id: 'files-list-stub', 'data-embedded': String(this.embedded) } })
+		},
+	},
+}))
+
+describe('renderFilesView', () => {
+	beforeEach(() => {
+		document.body.innerHTML = ''
+		getNavigation().register(new View({
+			id: VIEW_ID,
+			name: 'Test view',
+			icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" /></svg>',
+			getContents: async () => ({ folder: {} as never, contents: [] }),
+		}))
+	})
+
+	afterEach(() => {
+		getNavigation().remove(VIEW_ID)
+	})
+
+	it('mounts only the file list, embedded, into the given element', () => {
+		const el = document.createElement('div')
+		document.body.appendChild(el)
+
+		renderFilesView(el, VIEW_ID)
+
+		const stub = document.body.querySelector('#files-list-stub')
+		expect(stub).not.toBeNull()
+		expect(stub?.getAttribute('data-embedded')).toBe('true')
+	})
+
+	it('activates the requested view without touching the browser URL', () => {
+		const el = document.createElement('div')
+		document.body.appendChild(el)
+		const before = window.location.href
+
+		renderFilesView(el, VIEW_ID)
+
+		expect(window.location.href).toBe(before)
+		expect(getNavigation().active?.id).toBe(VIEW_ID)
+	})
+
+	it('returns a handle that unmounts the file list', () => {
+		const el = document.createElement('div')
+		document.body.appendChild(el)
+
+		const rendered = renderFilesView(el, VIEW_ID)
+		rendered.destroy()
+
+		expect(document.body.querySelector('#files-list-stub')).toBeNull()
+	})
+})

apps/files/src/services/renderFilesApp.ts

@@ -0,0 +1,57 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { getNavigation } from '@nextcloud/files'
+import Vue from 'vue'
+import FilesList from '../views/FilesList.vue'
+import { createRouter } from '../router/router.ts'
+import { getPinia } from '../store/index.ts'
+
+/** Handle returned by `renderFilesView()` to tear down the embedded instance. */
+export interface RenderedFilesView {
+	/** Unmount the file list and free the DOM node it was rendered into. */
+	destroy: () => void
+}
+
+/**
+ * Render only the Files file list (breadcrumbs, toolbar, file list) into a
+ * foreign DOM element, activating the given Files navigation view.
+ *
+ * This never renders `NcContent` or `NcAppContent` - those belong to the
+ * Files app's own page chrome (see `FilesApp.vue`) and are skipped here so
+ * the file list can be embedded as a widget inside another app's page.
+ *
+ * The host page must dispatch `OCA\Files\Event\LoadFilesApp` server-side
+ * beforehand so the Files app's scripts and initial state are loaded, and
+ * the target view must already be registered via `getNavigation().register()`.
+ *
+ * Exposed as `OCP.Files.renderFilesApp()`.
+ *
+ * @param el the element to mount the file list into
+ * @param viewId the id of the Files navigation view to display
+ */
+export function renderFilesView(el: HTMLElement, viewId: string): RenderedFilesView {
+	const router = createRouter('abstract')
+	const FilesListVue = Vue.extend(FilesList)
+	const vm = new FilesListVue({
+		router,
+		pinia: getPinia(),
+		propsData: {
+			embedded: true,
+		},
+	}).$mount(el)
+
+	// Normally done by the navigation sidebar's route watcher; there is none
+	// here, so keep the active view in sync ourselves.
+	getNavigation().setActive(viewId)
+	router.push({ name: 'filelist', params: { view: viewId } }).catch(() => {})
+
+	return {
+		destroy: () => {
+			vm.$destroy()
+			vm.$el.remove()
+		},
+	}
+}

apps/files/src/services/renderFilesView.spec.ts

@@ -3,7 +3,7 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<NcAppContent :page-heading="pageHeading" data-cy-files-content>
+	<component :is="embedded ? 'div' : 'NcAppContent'" v-bind="embedded ? {} : { pageHeading }" data-cy-files-content>
 		<div class="files-list__header" :class="{ 'files-list__header--public': isPublic }">
 			<!-- Uploader -->
 			<component :is="isNarrow ? 'Teleport' : 'div'" :to="isNarrow ? 'body' : undefined">
@@ -150,7 +150,7 @@
 				</NcEmptyContent>
 			</template>
 		</FilesListVirtual>
-	</NcAppContent>
+	</component>
 </template>
 
 <script lang="ts">
@@ -237,6 +237,11 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		// Skip the NcAppContent wrapper when rendered standalone via `renderFilesView()`.
+		embedded: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	setup() {

apps/files/src/services/renderFilesView.ts

@@ -4,6 +4,7 @@
  */
 
 import type Tab from './apps/files/src/models/Tab.js'
+import type { RenderedFilesView } from './apps/files/src/services/renderFilesView.ts'
 import type RouterService from './apps/files/src/services/RouterService.ts'
 import type Settings from './apps/files/src/services/Settings.js'
 import type Sidebar from './apps/files/src/services/Sidebar.js'
@@ -32,7 +33,7 @@ declare global {
 		OCP: {
 			Files: {
 				Router: RouterService
-				renderFilesApp: (el: HTMLElement, viewId: string) => void
+				renderFilesApp: (el: HTMLElement, viewId: string) => RenderedFilesView
 			}
 		} & Nextcloud.v29.OCP