Bookmarks and Tab Backup/Export

[tsilvs]

Sometimes I just open too many tabs for later. And sometimes it's a list of games to play, videos to watch, articles to read.

But it can't be exported in any way. Tab export extensions, even though installable, don't have access to anythimg inside tab groups.

There is no "Bookmark all" button either, as well as bookmarks.

I am confused about how to not copy/paste everything 1 by 1 manually.

[FaFre]

For now there is only the clone tab feature when expanding the bottom sheet that allows quickly single tab duplicates.

Beeing able to export/import containers would be an interesting feature indeed. It would be possible to backup cookies as well.

[FaFre]

@tsilvs @User1l0 @bburdette I implemented the basic bookmark feature in https://github.com/FaFre/WebLibre/releases/tag/v0.9.29-alpha-7 if you wanna try it please go ahead. Feedback is very much appreciated!

The bookmarks site can be opened via the hamburger menu. Current tab can be added via triple dot menu.

Folder creation is currently only possible in the bookmark list view. Will add it inside the bookmark creation view in the next release.

[FaFre]

https://github.com/FaFre/WebLibre/releases/tag/v0.9.29-alpha-8 has further improvements. It is now possible to add new folders when creating/editing bookmarks. Search functionality has been added as well in the Bookmarks view. Search via "New Tab" screen is still todo.

[bburdette]

Enjoying the bookmarks so far. TY!

[tsilvs]

Ok, this is a nice feature to have. To complete it, there needs to be a "Bookmark all tabs" button.

@FaFre Can you add a "Bookmark All Tabs" button somewhere around here?

[FaFre]

@tsilvs @krakua0 I added the button in the latest release: https://github.com/FaFre/WebLibre/releases/tag/v0.9.30-alpha-3 check it out!

[FaFre]

Backup import/export is now available in the latest alpha build: https://github.com/FaFre/WebLibre/releases/tag/v0.9.30-alpha-13

[tsilvs]

Trying it out, thank you!

[FaFre]

Perfect, I'll close this now. The new F-Droid release should become available in a few hours.

[tsilvs]

@FaFre

Tested it on version 0.9.30. I suggest reopening the issue.

The browser mishandles the tabs list sent to bookmarker here .

Instead of bookmarking everything in 1 dialog, it opens bookmarking dialogs for every open tab. And I'm not sure if it limits the tabs to the current container, ot takes all of the tabs available.

This bookmarking dialog stream traps the user until every single bookmark is handled manually.

I have around 100+ open tabs between ~4 Containers. Handling each one individually would still be time consuming with the current UX flow.

This flow may be better UX:

1. User has several tabs open in several profiles.
2. User taps "Bookmark all" button, opening a new "Bookmark multiple tabs" handler dialog window (or the current one is patched to handle multiple bookmarks at once in one batch / array / iterator of bookmarkable objects). This dialog can display a counter like "Bookmarking ${N} tabs to:".
3. Every page in the current Container is saved in the same specified directory.

Optionnaly, allow users to choose to save all the tabs or only the ones in the current Container. This action should also gracefully handle the password protected Container. The app is already selecting the current Container here.

Copilot analysis

Certainly! Here’s a detailed review and recommendations based on your highlighted snippet:

---

Snippet:

for (final tab in tabData) {
  if (context.mounted) {
    await BookmarkEntryAddRoute(
      bookmarkInfo: jsonEncode(
        BookmarkInfo(
          title: tab.title,
          url: tab.url.toString(),
        ).encode(),
      ),
    ).push(context);
  }
}

---

1. Code Smells / Antipatterns

• UI Blocking Loop (Asynchronous Calls in Loop):
  The code uses await inside a for loop, which processes each tab sequentially and waits for the previous dialog to finish before starting the next. This can lead to slow performance and a poor user experience, especially if tabData has many entries.

• Dialog Spam / Multiple Pushes:
  This pattern will open a new route (presumably a dialog or screen) for each tab, resulting in the user being bombarded with dialogs in succession. This is rarely the intention for a "Bookmark all" action and could be overwhelming.

• Unnecessary Check for context.mounted in Loop:
  Checking context.mounted inside the loop is slightly redundant if you don't expect asynchronous code that might unmount the widget between iterations. If you do need it, you should break the loop if context.mounted becomes false.

• Mixing UI and Data Logic:
  The logic for creating and pushing bookmark dialogs is mixed with the iteration over data. This could be separated for better readability and maintainability.

2. Recommendations & Improved Code

a. Batch Bookmark Creation

Instead of pushing a dialog for each tab, consider either:

• Creating all bookmarks in batch, then showing a single confirmation dialog.
• Or, showing a single dialog that summarizes the action.

b. Sample Improved Implementation

Option 1: Batch Without Dialogs

If user confirmation isn’t needed for each tab, just add all bookmarks in one go:

onPressed: () async {
  final containerId = ref.read(selectedContainerProvider);
  final tabData = await ref
      .read(tabDataRepositoryProvider.notifier)
      .getContainerTabsData(containerId);

  // Create bookmark entries for all tabs
  final bookmarkEntries = tabData.map((tab) => BookmarkInfo(
    title: tab.title,
    url: tab.url.toString(),
  ));

  // Save all bookmarks (implement saveAllBookmarks as appropriate!)
  await bookmarkRepository.saveAllBookmarks(bookmarkEntries);

  if (context.mounted) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('${tabData.length} tabs bookmarked!')),
    );
  }
},

Option 2: Show Single Confirmation Dialog

If you want to confirm before bookmarking all:

onPressed: () async {
  final containerId = ref.read(selectedContainerProvider);
  final tabData = await ref
      .read(tabDataRepositoryProvider.notifier)
      .getContainerTabsData(containerId);

  if (tabData.isEmpty) return;

  final confirm = await showDialog<bool>(
    context: context,
    builder: (context) => AlertDialog(
      title: Text('Bookmark all tabs?'),
      content: Text('This will bookmark ${tabData.length} tabs.'),
      actions: [
        TextButton(onPressed: () => Navigator.pop(context, false), child: Text('Cancel')),
        ElevatedButton(onPressed: () => Navigator.pop(context, true), child: Text('Bookmark')),
      ],
    ),
  );

  if (confirm == true) {
    final bookmarkEntries = tabData.map((tab) => BookmarkInfo(
      title: tab.title,
      url: tab.url.toString(),
    ));
    await bookmarkRepository.saveAllBookmarks(bookmarkEntries);

    if (context.mounted) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('${tabData.length} tabs bookmarked!')),
      );
    }
  }
},

3. Dart/Flutter Best Practices

• Avoid sequential awaits in loops for independent operations.
• Batch operations for UI efficiency and better UX.
• Show concise, single feedback for bulk actions.
• Keep UI and data logic separate where possible.

---

Summary:
The current approach opens a dialog per tab, leading to poor UX and performance. Batch the bookmark creation, display a single feedback dialog or snackbar, and avoid unnecessary awaits in a loop. This makes your code more efficient, user-friendly, and maintainable.

Let me know if you want a more detailed refactor or further explanation on any point!