fix: close sidebar on navigation change

Signed-off-by: skjnldsv <skjnldsv@protonmail.com>

Author: skjnldsv

src/global.d.ts

@@ -2,10 +2,28 @@
  * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
+import type { ViewerFileInfo } from './utils/fileUtils.ts'
 
 declare global {
 	interface Window {
-		OCA: Record<string, unknown>
+		OCA: {
+			Dashboard: {
+				register(name: string, callback: (el: HTMLElement) => void): void
+			}
+			Files: {
+				Sidebar: {
+					open: (path: string) => void
+					close: () => void
+					file: string | null | undefined
+					registerTab(tab: unknown): void
+					Tab: unknown
+				}
+			}
+			Viewer: {
+				open: ({ fileInfo, list } : { fileInfo: ViewerFileInfo, list: ViewerFileInfo[] }) => void
+				close: () => void
+			}
+		}
 	}
 }
 

src/router/index.ts

@@ -304,13 +304,20 @@ const router = new Router({
 	],
 })
 
-router.afterEach((to) => {
+router.afterEach((to, from) => {
+	// Update page title
 	const rootTitle = to.meta?.rootTitle?.(to)
 	if (rootTitle) {
 		document.title = `${rootTitle} - ${baseTitle}`
 	} else {
 		document.title = baseTitle
 	}
+
+	// Close sidebar on view change
+	const isSidebarOpen = !!window.OCA?.Files?.Sidebar?.file
+	if (isSidebarOpen && to.name !== from.name) {
+		window.OCA.Files.Sidebar.close()
+	}
 })
 
 export default router

src/sidebar.ts

@@ -51,7 +51,7 @@ const photosTab = new OCA.Files.Sidebar.Tab({
 })
 
 window.addEventListener('DOMContentLoaded', async function() {
-	if (OCA.Files && OCA.Files.Sidebar) {
+	if (window.OCA.Files && window.OCA.Files.Sidebar) {
 		window.OCA.Files.Sidebar.registerTab(photosTab)
 		const { default: PhotosTab } = await import(/* webpackPreload: true */ './views/PhotosTab.vue')
 		PhotosTabView = PhotosTabView ?? Vue.extend(PhotosTab)

src/utils/fileUtils.ts

@@ -92,11 +92,25 @@ export function sortCompareFileInfo(fileInfo1: FoldersNode, fileInfo2: FoldersNo
 		: -fileInfo1[key]?.toString()?.localeCompare(fileInfo2[key].toString(), getLanguage()) || -1
 }
 
+export type ViewerFileInfo = {
+	fileid: number
+	basename: string
+	filename: string
+	mime: string
+	mtime: Date
+	ownerId: string
+	source: string
+	hasPreview: boolean
+	previewUrl: string
+	etag: string
+	permissions: string
+}
+
 /**
  *
  * @param file
  */
-export function toViewerFileInfo(file: Node) {
+export function toViewerFileInfo(file: Node): ViewerFileInfo {
 	let permissions = ''
 
 	if ((file.permissions & Permission.CREATE) === Permission.CREATE) {