🎐 Zen mode

[karlitschek]

Tested on Win11Pro, FF and Chrome "latest":

🤖 AI (if applicable)

• The content of this PR was partly or fully generated using AI

[enjeck]

Haven't properly reviewed yet. Would like to see a screenshot or vid of what it looks like first.

From a brief look, I do see there are too many comments in the code. We don't need a comment to justify every choice IMO. Makes the code look cluttered and easy for some comments to get stale/outdated and bring more confusion in the future.

[enjeck]

Maybe we should add a line in our AGENTS.md's code style to avoid adding too many comments? I notice that whenever I prompt the AI models to do a certain change and explain why, they overdo it and add comments to the code explaining their changes. Even when its not necessary and the code would be more readable/understandable without it. It's a fine balance.

Maybe this only bothers me and everyone else is fine with the many comments, haha 🤷‍♀️

[AndyScherzinger]

Maybe this only bothers me and everyone else is fine with the many comments, haha 🤷‍♀️

I think is is a general point and valid, also seen it elsewhere and I agree, comment should explain the behavior/function etc. but not document decision that might fade or change over time and then the comment is confusing because it did not get updated.

I'll make a PR in parallel, to tackle that 👍

• Edit: PR is docs: Add code comment conventions for AI agents to AGENTS.md #1982

[AndyScherzinger]

Tested successfully on latest Firefox, added some polishing (via AI)

[jancborchardt]

Looks really nice. Would maybe even go for "fullscreen", that is hiding the Nextcloud header as well. Then it’s truly Zen 😌

[AndyScherzinger]

Looks really nice. Would maybe even go for "fullscreen", that is hiding the Nextcloud header as well. Then it’s truly Zen 😌

Done @jancborchardt 👍 see updated gif in the PR description

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated no new comments.

Suppressed comments (2)

src/App.vue:225

• created() registers window.addEventListener('beforeunload', this.onClose), but unmounted() does not remove it. If the component is ever unmounted/remounted, the handler can accumulate and fire multiple times.

	unmounted() {
		document.removeEventListener('visibilitychange', this.onVisibilityChange)
		document.removeEventListener('keydown', this.onKeyDown)
		this.stopRefreshTimer()
	},

playwright/support/note.ts:55

• deleteAllNotes awaits each DELETE request but doesn't assert the deletion succeeded. If the API returns an error, tests can proceed in an inconsistent state and fail later in harder-to-debug ways.

	for (const note of await response.json()) {
		await page.request.delete(`/index.php/apps/notes/api/v1/notes/${note.id}`, { headers })
	}

[AndyScherzinger]

Addressed #1970 (review) - regarding the tests. Left the code comment, since that existed before this PR, hence not introduced/to be fixed by this PR.

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated no new comments.

Suppressed comments (2)

src/App.vue:339

• The global keydown handler will toggle zen mode repeatedly when the user holds the shortcut key long enough to trigger key-repeat. That can leave zen mode in an unpredictable state (toggling on/off multiple times) and makes the shortcut feel flaky. Consider ignoring repeated keydown events (and optionally already-handled events via defaultPrevented) before doing any work.

		onKeyDown(event) {
			// `code` pins the physical key across layouts, `key` covers those with the period elsewhere.
			const isToggle = (event.ctrlKey || event.metaKey)
				&& (event.code === 'Period' || event.key === '.')
			const isExit = event.key === 'Escape' && this.zenMode

playwright/support/note.ts:51

• This helper builds a Basic Auth header using btoa(...). In Playwright tests this code runs in the Node test runner, where btoa support can vary and it also doesn’t reliably handle non-Latin1 credentials. Using Buffer.from(...).toString('base64') is the standard, environment-independent way to create the header (and you can also set Accept: application/json to match the API docs).

	const user = process.env.NC_USER ?? 'admin'
	const password = process.env.NC_PASS ?? 'admin'
	const headers = { Authorization: `Basic ${btoa(`${user}:${password}`)}` }

	const response = await page.request.get('/index.php/apps/notes/api/v1/notes', { headers })
	expect(response.ok()).toBeTruthy()