Office Overview Part 5/5 - Open files, advisor fixes and 50-file cap

README.md

@@ -19,6 +19,16 @@ Nextcloud Office supports dozens of document formats including DOC, DOCX, PPT, P
 
 Nextcloud Office is based on the Collabora Online Development Edition (CODE) and is available free and under heavy development, adding features and improvements all the time! Enterprise users have access to the more stable, scalable Collabora Online Enterprise based version through a Nextcloud support subscription.
 
+### Office Overview
+
+The app registers an **Office** entry in the Nextcloud navigation bar. The overview page gives you a single place to:
+
+- Browse recent documents, spreadsheets, presentations, and diagrams — with filter chips for *All*, *Mine* (owned by you), and *Shared with me*.
+- Search within the active category.
+- Create a new file from a blank document or from one of your personal templates.
+- Switch between grid and list view (preference is persisted per user).
+- Open any listed file directly in the editor with a single click.
+
 ## Installation
 
 Nextcloud Office is built on Collabora Online which requires a dedicated service running next to the Nextcloud webserver stack. There are several ways to run the coolwsd service. For full details, see the related section in the admin manual https://docs.nextcloud.com/server/latest/admin_manual/office/index.html

appinfo/info.xml

@@ -55,4 +55,12 @@ You can also edit your documents off-line with the Collabora Office app from the
 		<personal>OCA\Richdocuments\Settings\Personal</personal>
 		<personal-section>OCA\Richdocuments\Settings\Section</personal-section>
 	</settings>
+	<navigations>
+		<navigation>
+			<name>Office</name>
+			<route>richdocuments.overview.index</route>
+			<icon>app.svg</icon>
+			<order>10</order>
+		</navigation>
+	</navigations>
 </info>

appinfo/routes.php

@@ -24,6 +24,9 @@
 		// external api access
 		['name' => 'document#extAppGetData', 'url' => '/ajax/extapp/data/{fileId}', 'verb' => 'POST'],
 
+		// Office overview page
+		['name' => 'overview#index', 'url' => '/overview', 'verb' => 'GET'],
+
 		// Settings
 		['name' => 'settings#setPersonalSettings', 'url' => 'ajax/personal.php', 'verb' => 'POST'],
 		['name' => 'settings#setSettings', 'url' => 'ajax/admin.php', 'verb' => 'POST'],
@@ -48,6 +51,7 @@
 			],
 		],
 		['name' => 'settings#generateIframeToken', 'url' => 'settings/generateToken/{type}', 'verb' => 'GET'],
+		['name' => 'settings#setOverviewGridView', 'url' => 'settings/overview/grid_view', 'verb' => 'PUT'],
 
 		// Direct Editing: Webview
 		['name' => 'directView#show', 'url' => '/direct/{token}', 'verb' => 'GET'],

cypress/e2e/overview.spec.js

@@ -0,0 +1,254 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+const CATEGORY_FILES = [
+	{
+		category: 'Documents',
+		emptyMessage: 'No Documents found',
+		fixture: 'document.odt',
+		mimeType: 'application/vnd.oasis.opendocument.text',
+	},
+	{
+		category: 'Presentations',
+		emptyMessage: 'No Presentations found',
+		fixture: 'presentation.odp',
+		mimeType: 'application/vnd.oasis.opendocument.presentation',
+	},
+	{
+		category: 'Spreadsheets',
+		emptyMessage: 'No Spreadsheets found',
+		fixture: 'spreadsheet.ods',
+		mimeType: 'application/vnd.oasis.opendocument.spreadsheet',
+	},
+	{
+		category: 'Diagrams',
+		emptyMessage: 'No Diagrams found',
+		fixture: 'drawing.odg',
+		mimeType: 'application/vnd.oasis.opendocument.graphics',
+	},
+]
+
+describe('Office overview page', function() {
+	describe('without files', function() {
+		let randUser
+
+		before(function() {
+			cy.createRandomUser().then(user => {
+				randUser = user
+			})
+		})
+
+		beforeEach(function() {
+			cy.login(randUser)
+			cy.visit('/apps/richdocuments/overview')
+		})
+
+		it('Shows the navigation sidebar with appropriate entries', function() {
+			CATEGORY_FILES.forEach(({ category }) => {
+				cy.contains('.app-navigation-entry', category).should('exist')
+			})
+		})
+
+		it('Highlights the active navigation item and shows empty state on click', function() {
+			CATEGORY_FILES.forEach(({ category, emptyMessage }) => {
+				cy.contains('.app-navigation-entry', category).click()
+				cy.contains('.app-navigation-entry', category)
+					.should('have.class', 'active')
+				cy.get('.empty-content')
+					.should('be.visible')
+					.and('contain', emptyMessage)
+			})
+		})
+	})
+
+	describe('with files', function() {
+		let randUser
+
+		before(function() {
+			cy.nextcloudTestingAppConfigSet('richdocuments', 'doc_format', '')
+			cy.createRandomUser().then(user => {
+				randUser = user
+				cy.login(user)
+
+				CATEGORY_FILES.forEach(({ fixture, mimeType }) => {
+					cy.uploadFile(user, fixture, mimeType, `/${fixture}`)
+				})
+
+				cy.createFolder(user, 'subfolder').then(() => {
+					CATEGORY_FILES.forEach(({ fixture, mimeType }) => {
+						cy.uploadFile(user, fixture, mimeType, `/subfolder/${fixture}`)
+					})
+				})
+			})
+		})
+
+		beforeEach(function() {
+			cy.login(randUser)
+			cy.visit('/apps/richdocuments/overview', {
+				onBeforeLoad(win) {
+					cy.spy(win, 'postMessage').as('postMessage')
+				},
+			})
+		})
+
+		CATEGORY_FILES.forEach(({ category, fixture }) => {
+			it(`Shows ${category} file cards in the correct category`, function() {
+				cy.contains('.app-navigation-entry', category).click()
+
+				cy.contains('.file-card__name', fixture)
+					.scrollIntoView()
+					.should('be.visible')
+
+				cy.get('.file-card__preview img')
+					.should('exist')
+
+				cy.get('.app-navigation-search input[type="search"]')
+					.should('have.attr', 'aria-label', `Search ${category}`)
+			})
+
+			it(`Opens the viewer when clicking a ${category} file card`, function() {
+				cy.contains('.app-navigation-entry', category).click()
+				cy.contains('.file-card', fixture).click()
+
+				cy.waitForViewer()
+				cy.waitForCollabora()
+
+				cy.closeDocument()
+			})
+		})
+
+		it('Shows file cards for files in subdirectories', function() {
+			CATEGORY_FILES.forEach(({ category }) => {
+				cy.contains('.app-navigation-entry', category).click()
+				cy.get('.file-card').should('have.length.at.least', 2)
+			})
+		})
+
+		it('Filters file cards by search query', function() {
+			const { category, fixture } = CATEGORY_FILES[0]
+			const stem = fixture.split('.')[0]
+
+			cy.contains('.app-navigation-entry', category).click()
+
+			cy.get('.app-navigation-search input[type="search"]').type(stem)
+			cy.contains('.file-card__name', fixture).should('be.visible')
+		})
+
+		it('Shows empty state when search matches nothing', function() {
+			const { category } = CATEGORY_FILES[0]
+
+			cy.contains('.app-navigation-entry', category).click()
+
+			cy.get('.app-navigation-search input[type="search"]').type('xyz123noresults')
+			cy.get('.empty-content').should('be.visible')
+		})
+
+		it('Resets search when switching categories', function() {
+			const [first, second] = CATEGORY_FILES
+
+			cy.contains('.app-navigation-entry', first.category).click()
+			cy.get('.app-navigation-search input[type="search"]').type('xyz123noresults')
+
+			cy.contains('.app-navigation-entry', second.category).click()
+
+			cy.get('.app-navigation-search input[type="search"]').should('have.value', '')
+			cy.contains('.file-card__name', second.fixture).should('be.visible')
+		})
+	})
+
+	describe('create from template', function() {
+		let randUser
+
+		before(function() {
+			cy.createRandomUser().then(user => {
+				randUser = user
+			})
+		})
+
+		beforeEach(function() {
+			cy.login(randUser)
+			cy.visit('/apps/richdocuments/overview')
+			cy.contains('.app-navigation-entry', 'Documents').click()
+		})
+
+		it('Opens the create dialog with pre-filled filename when clicking Blank', function() {
+			cy.contains('.template-card__name', 'Blank')
+				.closest('.template-card')
+				.click()
+
+			cy.get('[role="dialog"]').should('be.visible')
+			cy.get('[role="dialog"] input[type="text"]').invoke('val').should('match', /\.\w+$/)
+		})
+
+		it('Creates a blank file and navigates to it', function() {
+			cy.intercept('POST', /templates\/create/).as('createFile')
+
+			cy.contains('.template-card__name', 'Blank')
+				.closest('.template-card')
+				.click()
+
+			cy.get('[role="dialog"]').within(() => {
+				cy.contains('button', 'Create').click()
+			})
+
+			cy.wait('@createFile').then(({ request, response }) => {
+				expect(request.body).to.have.property('templatePath', '')
+				expect(response.statusCode).to.equal(200)
+			})
+
+			// After successful creation the page navigates away from the overview
+			cy.location('pathname').should('not.include', 'overview')
+		})
+
+		it('Shows an error message when creation fails', function() {
+			cy.intercept('POST', /templates\/create/, {
+				statusCode: 403,
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({
+					ocs: {
+						meta: { status: 'failure', statuscode: 403, message: 'File already exists' },
+						data: {},
+					},
+				}),
+			}).as('createFail')
+
+			cy.contains('.template-card__name', 'Blank')
+				.closest('.template-card')
+				.click()
+
+			cy.get('[role="dialog"]').within(() => {
+				cy.contains('button', 'Create').click()
+			})
+
+			cy.wait('@createFail')
+
+			// Dialog stays open and shows the server error message
+			cy.get('[role="dialog"]', { timeout: 8000 }).should('contain.text', 'exists')
+		})
+
+		it('Uses templateId and templateType from the template when clicking a non-blank template', function() {
+			cy.get('.template-section__list .template-card').then($cards => {
+				const nonBlank = $cards.filter((_, el) => !el.querySelector('.template-card__name')?.textContent.includes('Blank'))
+				if (nonBlank.length === 0) {
+					this.skip()
+					return
+				}
+
+				cy.intercept('POST', /templates\/create/).as('createFromTemplate')
+
+				cy.wrap(nonBlank.first()).click()
+
+				cy.get('[role="dialog"]').within(() => {
+					cy.contains('button', 'Create').click()
+				})
+
+				cy.wait('@createFromTemplate').then(({ request }) => {
+					expect(request.body.templatePath).to.not.equal('')
+					expect(request.body.templateType).to.not.equal('user_system')
+				})
+			})
+		})
+	})
+})

cypress/e2e/templates.spec.js

@@ -52,7 +52,7 @@ describe('Global templates', function() {
 			.scrollIntoView()
 
 		cy.intercept('DELETE', '**/richdocuments/template/*').as('templateDeleteRequest')
-		cy.get('.template-btn[data-cy-template-btn-name="systemtemplate"]').click()
+		cy.get('.file-card[data-cy-template-btn-name="systemtemplate"]').click()
 
 		cy.wait('@templateDeleteRequest').then(({ response }) => {
 			expect(response.statusCode).to.equal(204)

lib/Controller/OverviewController.php

@@ -0,0 +1,61 @@
+<?php
+
+declare(strict_types=1);
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+namespace OCA\Richdocuments\Controller;
+
+use OCA\Viewer\Event\LoadViewer;
+use OCP\AppFramework\Controller;
+use OCP\AppFramework\Http\Attribute\NoAdminRequired;
+use OCP\AppFramework\Http\Attribute\NoCSRFRequired;
+use OCP\AppFramework\Http\TemplateResponse;
+use OCP\AppFramework\Services\IInitialState;
+use OCP\EventDispatcher\IEventDispatcher;
+use OCP\IConfig;
+use OCP\IPreview;
+use OCP\IRequest;
+use OCP\Util;
+
+class OverviewController extends Controller {
+
+	public function __construct(
+		string $appName,
+		IRequest $request,
+		private IEventDispatcher $eventDispatcher,
+		private IInitialState $initialState,
+		private IPreview $preview,
+		private IConfig $config,
+		private ?string $userId,
+	) {
+		parent::__construct($appName, $request);
+	}
+
+	/**
+	 * @return TemplateResponse
+	 */
+	#[NoAdminRequired]
+	#[NoCSRFRequired]
+	public function index(): TemplateResponse {
+		Util::addScript('richdocuments', 'richdocuments-overview');
+
+		$this->initialState->provideInitialState('previewEnabled', $this->preview->isMimeSupported('application/vnd.oasis.opendocument.text'));
+		$this->initialState->provideInitialState('overview_config', [
+			'overview_grid_view' => $this->userId !== null
+				&& $this->config->getUserValue($this->userId, 'richdocuments', 'overview_grid_view', '1') === '1',
+		]);
+
+		// Viewer is pre-installed in production but may not be available in other environments
+		if (class_exists(LoadViewer::class)) {
+			$this->eventDispatcher->dispatchTyped(new LoadViewer());
+		}
+
+		return new TemplateResponse('richdocuments', 'overview', [
+			'id-app-content' => '#app-content-vue',
+			'id-app-navigation' => '#app-navigation-vue',
+		]);
+	}
+}

lib/Controller/SettingsController.php

@@ -320,6 +320,15 @@ public function setPersonalSettings($templateFolder,
 		return new JSONResponse($response);
 	}
 
+	#[NoAdminRequired]
+	public function setOverviewGridView(bool $value): JSONResponse {
+		if ($this->userId === null) {
+			return new JSONResponse([], Http::STATUS_UNAUTHORIZED);
+		}
+		$this->config->setUserValue($this->userId, 'richdocuments', 'overview_grid_view', $value ? '1' : '0');
+		return new JSONResponse(['message' => 'ok']);
+	}
+
 	/**
 	 * @NoAdminRequired
 	 * @PublicPage