Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature Request: UI Rework #1273

Open
aitorllj93 opened this issue Nov 21, 2023 · 10 comments
Open

Feature Request: UI Rework #1273

aitorllj93 opened this issue Nov 21, 2023 · 10 comments

Comments

@aitorllj93
Copy link

aitorllj93 commented Nov 21, 2023

Type

  • Request modification of existing behavior or design

What is the problem that your feature request solves

This comes from a conversation with @pirate in the REST API status question. We both agree that would be nice to add a new UI to the project including state-of art technologies and patterns and improving the user experience

Describe the ideal specific solution you'd want, and whether it fits into any broader scope of changes

New FrontEnd built on top of Django Templates. Tailwind for the styles instead of Bootstrap. Possibly HTMX in case we need to add some extra JS logic. Additionally, we might need some additional JS libraries or components, in those cases we should have an open talk about the specific cases and reach to an agreement, by trying to minimize the impact on the application overall


  • I'm willing to contribute dev time to fix this issue
  • I like ArchiveBox so far / would recommend it to a friend

cc @pirate @zblesk

@aitorllj93
Copy link
Author

@pirate feel free to assign me the issue, I can work on some prototyping this weekend so I can show you my ideas and we can define the scope and features that would be nice to include. I can also try to start including tailwind in the project although it's my first time with Django so I might need some help on that. Let me know if there's anyone else worth it to mention on the UI topic, I would love to hear some feedback on usability improvements we can include.

@aitorllj93
Copy link
Author

This is an example of a previous pet project I worked on during my first try on HTMX. All the interactions, including the right drawer are built using htmx & tailwind. The only custom javascript there is for the epub reader library, which is an isolated template rendered after the html or htmx navigate to that specific page.

Screen.Recording.2023-11-22.at.00.49.31_compressed.mp4

@Victor239
Copy link

This would be enormously helpful to have thumbnails of all archived content, the current table is useful for seeing many items at a time but sometimes I'd rather be quickly reminded of what an item actually is via a thumbnail.

@pirate
Copy link
Member

pirate commented Oct 17, 2024

There is actually already a thumbnail grid view in the upper right of the filters area (on the snapshots admin list).

The button to use it is way too small, so most people don't see it. We should make it more prominent.

@Victor239
Copy link

Thanks, yeah had never noticed that before. The thumbnails don't seem to load for me though, but when I click on each item I can see a thumbnail underneath their SingleFile section at least:
Image

@pirate
Copy link
Member

pirate commented Oct 17, 2024

The Snapshot grid view thumbnails are only based on the screenshot output, so if you're missing that output which it looks like you are, then nothing will show.

Do you have chrome or the screenshot method disabled? If you open a new issue with the output of archivebox version I can help debug the missing screenshots.

@Victor239
Copy link

Victor239 commented Oct 17, 2024

I believe when I created these archives I only selected the SingleFile option. It's been a few years since I last used AB so getting familiar with it again after seeing the HN post.

It would be useful to have AB utilise the thumbnail from SingleFile, or whatever alternative archive types are available if screenshot wasn't selected. I think I might have not selected Screenshot as an additional archive type to reduce storage usage.

@pirate
Copy link
Member

pirate commented Oct 17, 2024

Singlefile is fairly heavy to use for thumbnails, you'd effecitvley be loading iframes of 40 sites all at once to view the grid. I would re-enable screenshots, they're not too big usually, just an extra 1MB/url.

@Victor239
Copy link

Thanks, will do!

@TomK32
Copy link

TomK32 commented Jan 16, 2025

Singlefile is fairly heavy to use for thumbnails, you'd effecitvley be loading iframes of 40 sites all at once to view the grid. I would re-enable screenshots, they're not too big usually, just an extra 1MB/url.

Might make sense to generate a thumbnail (in landscape, or even better use the image provided in the open graph metadata if available) of the screenshot just for the grid view. I'll put some work into getting that grid/list view button into a spot where people can actually see it.

Other things about the grid: Link to the index.html, I'm not a fan of this massive header and prefer to be sent to the singlefile.html when I click the snapshot. Maybe I can make that configurable? There's too much noise on the grid view anyways: Do we care about the datetime, number of outputs or size in MB. Even the checkbox for selecting them is something that should be switched elsewhere or by tapping for a longer duration.

The filters weren't mentioned, but I'd love to change them to something like the date filters that Firefox's History window has: Today, Yestday, Last 7 Days, This Month, December 2024, ... older than 3 Months. Thoughts?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants