Status bar and icons view mode for gallery view

[Kurami32]

Description
Continuation of #1404
The original PR changed, so I think that is better open a new one also including the latest changes.

Summarizing:

• A new status bar for the listing view which shows some info of the current folder where you are. Like folders, files, and their size (and the total size of the selected items - this is useful when you will do a download).
• The size slider from the breadcrumbs moved to the status bar.
• A "sub-view" for the gallery view, also placed in the status bar. (the "icons-view" in the previous PR)
• Fixed typo in state.js and related files.

According to the contributing guide, A PR should contain:

• A clear description of why it was opened.
• A short title that best describes the change.
• Must pass unit and integration tests, which can be run checked locally prior to opening a PR.
• Any additional details for functionality not covered by tests.

Additional Details

2025-10-23.17-31-39.mp4

[Kurami32]

Now the slider also changes the size of the listing modes - And the main switch button only cycles between three modes.

2025-10-23.22-37-32.mp4

---

I think that I'm done! I'll update the translations.

[Kurami32]

I'm not sure why that test is failing, but anyways.

[gtsteffaniak]

did you check the test failure output?

It shows the console errors that are happening, these are real test failures from your changes. The steps are all succeeding -- but there are console errors that are occuring during the process which is why it failed.

see this test for steps to reproduce

filebrowser/frontend/tests/playwright/general/navigation.spec.ts

Lines 4 to 15 in 6d11e01

	test("navigate with hash in file name", async({ page, checkForErrors, context }) => {
	await page.goto("/files/");
	await expect(page).toHaveTitle("Graham's Filebrowser - Files - playwright-files");
	await page.locator('a[aria-label="folder#hash"]').waitFor({ state: 'visible' });
	await page.locator('a[aria-label="folder#hash"]').dblclick();
	await expect(page).toHaveTitle("Graham's Filebrowser - Files - folder#hash");
	await page.locator('a[aria-label="file#.sh"]').waitFor({ state: 'visible' });
	await page.locator('a[aria-label="file#.sh"]').dblclick();
	await expect(page).toHaveTitle("Graham's Filebrowser - Files - file#.sh");
	await expect(page.locator('.topTitle')).toHaveText('file#.sh');
	checkForErrors()
	})

[Kurami32]

Finally, they now passed! Thanks for pointing where was the error.

[gtsteffaniak]

I think the precedent was set poorly here... and now that I see a bunch of document.documentElement.style.setProperty i don't like it.

Before it was just one, I could fix this later if you want but this is kinda bad practice, because we have this reactive vue application and setting style properties via vanilla javascript document queries.

not a blocker, but this really should be done here or components/files/listingItem.vue as part of the vue component.

I could clean this up later.

[Kurami32]

sorry for that... please do it if it's not a hassle and if there no other issue 😅

[Kurami32]

Something happened?

[gtsteffaniak]

Oh I think because the dev branch deleted the PR also closed

[gtsteffaniak]

Just reopen against main and I will move to a dev branch when its ready. I am going to release v1.0.0 sometime this weekend and it will probably get merged in v1.1.0 following next week

[Kurami32]

Ah, I see, I'll do it then. 👍

[desone1313]

***@***.*** El mar, 28 oct 2025, 3:34 p. m., Kevin B. ***@***.***> escribió:

…

*Kurami32* left a comment (gtsteffaniak/filebrowser#1425) <#1425 (comment)> Ah, I see, I'll do it then. 👍 — Reply to this email directly, view it on GitHub <#1425 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BSDPM2PL3SLHQ4YJFN62X6L3Z6ZKNAVCNFSM6AAAAACKBZGU6KVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTINJXHE2DCMRUGE> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>