Navigation

Overall layout

The Bookmarks app uses a two-column layout:

| Area | What it contains | |------|-----------------| | Left sidebar | Folder tree, shortcut links (Favorites, All Bookmarks, All Folders), and the Import button | | Main area | The currently selected view — dashboard, folder content, bookmark form, list, or favorites |

The sidebar is always visible. The main area updates via HTMX without a full page reload, so navigation feels instant.

Sidebar

Folder tree

The sidebar lists your root folders (folders with no parent) alphabetically. Each folder name is a clickable link that opens the folder's content in the main area.

If a root folder has subfolders, they appear indented below it when you open the parent folder. The sidebar itself only shows root folders — the full subfolder hierarchy is revealed inside the folder content view.

Shortcut links

Below the folder list you'll find three permanent shortcuts:

| Link | Takes you to | |------|-------------| | Favorites | All bookmarks you have starred (the full Favorites view) | | All Bookmarks | A paginated, searchable list of every bookmark across all your circles | | All Folders | A paginated, searchable list of every root folder across all your circles |

New Folder button

The + New Folder button at the top of the sidebar opens the folder creation form in the main area.

Import button

The Import button in the sidebar opens a modal where you can upload a JSON file to bulk-create a folder and its bookmarks in one step.

Dashboard (home)

The dashboard is what you see when you first open Bookmarks. It gives you an instant overview:

• Recent Bookmarks — the 8 most recently saved bookmarks, each showing its title, URL, and folder (if any). Click any title to open the link in a new tab.
• Favorites — up to 6 starred bookmarks for quick access.
• Top Folders — up to 8 root-level folders. Click any folder card to open it.
• Counters — total bookmarks and total folders across all your circles, so you always know how large your library has grown.

From the dashboard you can also click + New Bookmark (top-right) or + New Folder (sidebar) to jump straight into creating content.

Folder content view

Clicking a folder in the sidebar or on the dashboard opens its content view. This view shows:

1. Subfolders — listed at the top as cards, each showing the folder's icon, name, and color. Click a subfolder card to navigate into it.
2. Bookmarks — listed below the subfolders. Each row shows the favicon, title (link), URL, folder badge, and tags.
3. Search bar — filters the folder's bookmarks by title or URL in real time.
4. Pagination bar — when a folder has many items, use the Previous / Next buttons or change the items-per-page setting (10, 20, or 50).
5. + New Subfolder button — creates a new folder nested inside the current one.
6. + New Bookmark button — opens the bookmark form with the current folder pre-selected.
7. Edit and Delete buttons on each item — visible only when you have the required permission.

Breadcrumb / back navigation

When you navigate into a subfolder, the folder content view shows the parent folder name so you always know where you are. Click the parent folder name to go back up one level.

All Bookmarks view

Accessible via the sidebar shortcut or at /bookmarks/list. This view shows every bookmark across all your circles in a single flat list.

• Search bar — type any keyword and press Search. Matches are found in titles, URLs, and descriptions. Use the Clear button to reset.
• Sort selector — switch between Newest (default) and Most Visited.
• Results count — shows "Showing X to Y of Z results" so you always know your position in the list.
• Pagination — choose 10, 20, 50, or 100 items per page.
• Each row shows: favicon, title (opens in new tab), description (when present), URL, folder name (when assigned), creation date, and last visited date.

All Folders view

Accessible via the sidebar shortcut. Shows every root-level folder alphabetically across all your circles.

• Search bar — filter folders by name.
• Pagination — navigate large collections.
• Clicking a folder row opens its content view in the main area.

Favorites view

Accessible via the sidebar shortcut. Shows all bookmarks you have starred, regardless of which folder they live in or which circle they belong to.

Each entry displays:

• Favicon and title (as a clickable link to the site).
• The favorite star icon.
• URL, description, folder badge (click to jump to the folder), and tags.
• Last visited and Updated timestamps.
• An Edit button (when you have write permission).

Bookmark form (create / edit)

The bookmark form is opened by clicking + New Bookmark or the Edit button on any bookmark. Fields:

| Field | Notes | |-------|-------| | URL | Paste the full URL or just the domain — https:// is added automatically. | | Title | Required. Up to 300 characters. | | Description | Optional. Up to 1 000 characters. | | Tags | Optional. Comma-separated, e.g. tools,design,reference. | | Folder | Optional. Type to search and select a folder by name. | | Favorite | Tick to star this bookmark. | | Circle | Pre-filled with your default circle. Locked to the folder's circle when a folder is selected. Requires ADMIN permission to change on an existing bookmark. |

The form has two action buttons at the bottom: Save Bookmark (or Update Bookmark when editing) and Cancel.

Folder form (create / edit)

The folder form is opened by clicking + New Folder or the Edit button on any folder. Fields:

| Field | Notes | |-------|-------| | Circle | Required. Searchable autocomplete. Locked when editing without ADMIN permission. | | Name | Required. Up to 200 characters. | | Parent Folder | Optional. Searchable autocomplete — type to find and select a parent. | | Description | Optional. | | Icon | Optional. Any emoji displayed next to the folder name. | | Color | Optional. A colour picker for the folder's accent color. |

Action buttons: Create Folder (or Update Folder) and Cancel.

Import modal

The Import modal opens as an overlay on top of the current view. It contains:

1. A file picker that accepts .json files only.
2. A circle selector dropdown — only circles you belong to are listed.
3. An informational note explaining the expected file structure.
4. Cancel and Import buttons.

If the file contains errors, they are all listed in a red panel above the form so you can fix them all at once. The modal stays open on error so you can try again without re-navigating.

Keyboard and interaction tips

• Clicking a bookmark title opens the URL in a new tab and records a visit automatically.
• Folder badges on the Favorites and All Bookmarks pages are clickable — they navigate directly to that folder's content view.
• Search forms submit on button click or when you change the sort dropdown (the sort change triggers an automatic form submit).
• The sidebar and main area update independently — navigating folders never reloads the full page.