feat(files): show count and total size of selected files in bottom bar (issue #1683)

[ChonkyMonkey]

Alright, this is an edit of the original message because the inital design got quite an overhaul.

This PR implements the file size + counter as described in issue #1683 and with additional UI/UX suggestions from #1766.

Key Features

• when items are selected a floating footer appears, which shows file number and size as well as action buttons
  -- the available actions are Select all, Delete, Open, Duplicate and Move to...
• when the file details tab is open, these elements appear in the right panel
• when inside the trash folder the options change to Select all, Delete permanently, Restore from trash and Move to...

Behaviour Details

• when all items are selected the Select all button changes to a Deselect all button
• using the Move to... action from trash will restore the items in the specified directory
• selecting only a single file will display the old details tab; selecting 2 or more will display the new details tab

Image gallary

A couple of notes:

• The floating footer is overlaid on top of the tab view, and the tab content gets a bottom inset when that footer is present. This was done to keep the bottom most content visible even if the footer is active.
• The destination dialog flow is shared between normal move actions and move-from-trash via FileDialogContext, rather than adding a separate dialog/result path for trashed items.

I'm not 100% happy with the current details page implementation. When only one item is selected I chose to show the old page to avoid dealing with coming up with a new UI. #1766 unfortunatly omitted the file details display (type, size, created, modified, accessed) in their design, so I couldn't take theirs 1 for 1.
This causes a huge UI shift when selecting 1 item vs selecting multiple, which should be changed at a later stage I guess.

---

• I have disclosed use of any AI generated code in my commit messages.
  • If you are using an LLM, and do not fully understand the changes it is making to the code base, do not create a PR.
  • In our experience, AI generated code often results in overly complex code that lacks enough context for a proper fix or feature inclusion. This results in considerably longer code reviews. Due to this, AI authored or partially authored PRs may be closed without comment.
• I understand these changes in full and will be able to respond to review comments.
• My change is accurately described in the commit message.
• My contribution is tested and working as described.
• I have read the Developer Certificate of Origin and certify my contribution under its conditions.

[jacobgkau]

The PR template is mandatory, please fill it in: https://github.com/pop-os/cosmic-files/blob/master/.github/PULL_REQUEST_TEMPLATE.md

[Milli189]

this is actually amazing, I've been missing this feature in cosmic files

[maria-komarova]

I have finally been able to look into this since there were additional considerations with File details context drawer and footers we use in Trash and Networks. The designs are here: #1766 in case you might be interested in working on it.

[ChonkyMonkey]

Yep, I will start adjusting the design. Thanks for your suggestion!

[ChonkyMonkey]

I pushed the new changes! Wasn't able to test it with network folders yet.

[maria-komarova]

Could you post screenshots of the selections with the File details context drawer on, without it, with Settings context drawer open and with the selection inside the Trash folder?

[ChonkyMonkey]

Here you go:

Details on, single file selected:

Details on, mutiple files selected:

Files selected without details/setting drawer:

Files selected with settings drawer on:

Trash file selected without details:

Trash single file selected with details drawer:

Trash multiple files selected with details drawer:

---

As I said before the inconsistency between one file selected and multiple in the details page should be addressed. I'd be willing to do this, but I would need a UI blueprint. If you need anything else let me know.

[maria-komarova]

Everything looks good on the screenshots, just a few minor things.

I only just realized you edited the initial comment.

When only one item is selected I chose to show the old page to avoid dealing with coming up with a new UI. #1766 unfortunatly omitted the file details display (type, size, created, modified, accessed) in their design, so I couldn't take theirs 1 for 1.
This causes a huge UI shift when selecting 1 item vs selecting multiple, which should be changed at a later stage I guess.

The design for File details context drawer when multiple files are selected was pretty intentional. So the difference in the number of details provided is also intentional. It should be obvious the information changes as more files is selected. I am not sure we want to show the type unless all files are the same type. And combined file size doesn't seem to provide a lot of useful information while cluttering the view. Created, modified and accessed would need to be provided as ranges and again, not sure there is much benefit to seeing it. But here is an example of how it might look like:

Looks like we're missing the footer with the "Empty" button on the last two screenshots of the Trash folder with File details drawer.

One more suggestion, we don't need to always show how many folders are selected unless there are any. If only files are selected we should omit "0 folders selected" from the message. Same goes for files when only folders are selected.

[mmstick]

Conflicts must be resolved

[ChonkyMonkey]

@maria-komarova Got it, I will patch the few remaining things and probably push tomorror.

[ChonkyMonkey]

I fixed the few things you mentioned.

Trash also shows the empty footer when details are open and files are selected.
Note: When the settings panel is open and I continue reduceing the window width, it looks a bit funky with the new footer.

[maria-komarova]

Thank you for making the adjustments.
"1 file, 1 folder..." should go right under the the number of items selected. Basically, "Type" goes under everything since it's lower priority. We should also drop the word "Size" since it's apparent what the information is without this label.

Note: When the settings panel is open and I continue reduceing the window width, it looks a bit funky with the new footer.

Do you have a screenshot?

Please make sure the conflicts are resolved as @mmstick mentioned since the PR won't get a review until then.

[ChonkyMonkey]

Thank you for making the adjustments. "1 file, 1 folder..." should go right under the the number of items selected. Basically, "Type" goes under everything since it's lower priority. We should also drop the word "Size" since it's apparent what the information is without this label.

Note: When the settings panel is open and I continue reduceing the window width, it looks a bit funky with the new footer.

Do you have a screenshot?

Please make sure the conflicts are resolved as @mmstick mentioned since the PR won't get a review until then.

I can do that, I did it this way so it is consistent with the current details view. But I agree your order makes more sense.

[ChonkyMonkey]

I just noticed the links in the code map where broken and fixed them.

[jacobktm]

Count and total size works, and look like they conform with everything @maria-komarova requested.

I do also have a screenshot of what the footer looks like when the window width is reduced.

If this looks alright @maria-komarova I'll approve this.

Regression testing passed:

Checklist

Basic navigation

• Middle-click opens directory in a new tab (not focused).
• Open two scrollable tabs. Scroll one tab, then switch to the other tab; it should not have scrolled.
• Hover over the top item in the folder, then scroll down until it's out of view (while still hovered).
  On scrolling back up (with the mouse in a different position), the item should not have the hover highlight.
• Right-click an item in the sidebar. No visual change should occur with the rest of the items.
• Remove an item from the sidebar, then re-pin it.

File operations

• Right-click -> Create a new folder, then enter it.
• Right-click in the empty folder -> Create a new file.
• Navigate to the parent folder, create another new file, then drag it into the created folder.
• Files can be renamed.
• Files can be opened with non-default apps & browsing store for new apps works.
• Normal right-click shows Move to trash option.
• Shift right-click, and right-click followed by Shift, both show Permanently delete option.

Advanced navigation & view settings

• Image and video thumbnails generate & display in local folders.
• Gallery preview shows with Spacebar.
• Details pane shows with Ctrl+Spacebar.
• Zoom in/out and reset to default zoom work.
• Ctrl+1 and Ctrl+2 switch between list and icon view.
• Ctrl+H shows/hides hidden files.
• Directories can be sorted at top or inline.
• Settings -> Theme works.
• Settings -> Type to Search affects behavior as designed.
• Single-click to open setting takes effect.
• Sorting options work.
• Cutting, copying, and pasting files works.
• F5 reloads current directory.
• Left sidebar can be collapsed and expanded.

External filesystems

• Add a network drive (e.g. SFTP) and navigate into it.
• Plug in a USB drive; able to mount, browse, and eject.

Integrations

• Desktop icons display as expected
• Drag-and-drop into Firefox works

[jacobktm]

whoops, also I think another PR that just got merged introduced conflicts that will again need to be resolved.

[jackpot51]

I believe the code can be cleaned up significantly. Also please document any and all use of LLMs (also known as generative AI) in the creation of this PR.

[maria-komarova]

I do also have a screenshot of what the footer looks like when the window width is reduced.

Thanks for sharing this @jacobktm. It actually needs spacing between standard buttons on the left and two icon buttons on the right. The text below should be centered when footer is that narrow. I believe there was a mockup of this in Figma.

[ChonkyMonkey]

Thank you for your feedback @jackpot51, @maria-komarova and @jacobktm. I tried to address the things you mentioned in a new draft PR.

My reasoning was that this had turned into a fairly large rewrite, and I wanted to check whether you agree with the structure before replacing the current implementation in this PR. The cleanup mainly reduces churn in src/app.rs and src/tab.rs by moving feature-specific code into src/app/selection_footer.rs and src/tab/selection.rs
I hope this helps with the review process and improves the general code maintainability as well.

If this direction looks good, I will fold it back into feat/selection-size-footer and update this PR.

[Milli189]

any updates on this?

[ChonkyMonkey]

I am still waiting for a decision from @jackpot51, @jacobktm or someone on my last post.