feat(shortcuts): redesign new-tab shortcuts hub#5903
Open
tsahimatsliah wants to merge 10 commits intomainfrom
Open
feat(shortcuts): redesign new-tab shortcuts hub#5903tsahimatsliah wants to merge 10 commits intomainfrom
tsahimatsliah wants to merge 10 commits intomainfrom
Conversation
Replaces the "My shortcuts vs Most visited" toggle with a hybrid hub where users can add, edit, remove and reorder shortcuts directly, enrich them with custom names/icons/accent colors, and import from browser top sites or the bookmarks bar on demand. The hub ships behind the `shortcuts_hub` GrowthBook flag. Legacy code paths and tests are preserved; the spec mocks the flag to false to keep the existing UI covered. Made-with: Cursor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Adds an ImageInput uploader to the shortcut edit modal so users can pick or
drag & drop an image file instead of hunting for an icon URL. The file is
uploaded via uploadContentImage and the returned CDN URL is stored in
shortcutMeta.iconUrl, keeping the persistence model unchanged.
The URL input is kept as a secondary fallback ("Or paste an image URL
instead") for power users. Save is disabled while an upload is in flight,
and the live tile preview shows the base64 preview immediately for
instant feedback.
Made-with: Cursor
The color was only visible in two edge cases (hover glow + letter chip fallback when no favicon loads), which rarely surfaced in practice. The picker added cognitive load to the edit form for negligible UX benefit. Tiles still receive a deterministic color derived from the URL in ShortcutTile, so the letter-chip fallback keeps its polish. Legacy shortcutMeta.color values continue to be respected. Made-with: Cursor
Previously the hub rendered every entry in customLinks, so legacy data, cross-device sync, or a direct settings mutation holding > 12 links would spill tiles across multiple rows and push the feed down. Mirror Chrome's fixed-cap behaviour: slice the rendered list to MAX_SHORTCUTS, append overflow during reorder so we never drop links silently, and surface a "+N more" affordance that opens the Manage modal where the user can see and remove the excess. Made-with: Cursor
Replaces the rotated hamburger affordance on shortcut tiles and manage-
modal rows with a proper 6-dot grip icon, matching the daily.dev Figma
design system ("Shapes/<Drag>"). The new icon follows the standard
filled/outlined pattern used by every other icon in the library.
Made-with: Cursor
Introduces an explicit "My shortcuts" vs "Most visited sites" mode
(persisted as shortcutsMode in SettingsFlags) so users stop guessing
whether the hub is showing a live browser feed or their curated list:
- Hub renders topSites read-only in auto mode, customLinks editable in
manual mode; switching lives in the overflow menu and in a Chrome-
style radio group inside Manage.
- Auto mode with no topSites permission asks for access directly rather
than piggy-backing on the import flow.
- Drop the prominent red "Revoke top sites access" buttons from Manage;
revocation is now a quiet menu entry, gated on actually-granted
permissions (topSites/bookmarks !== undefined) instead of "checked".
- Move the header "+ Add" into a dashed row at the top of the list so
the add affordance sits next to the shortcuts it creates.
- Import flow is now self-describing: always opens the picker (no more
silent imports), entries show counts and grant-access hints, and the
picker explains which source it came from.
- Rename labels across the hub menu and CTAs to match Chrome vocabulary
("Most visited sites", "Bookmarks bar", "My shortcuts").
Made-with: Cursor
The old modal led with a boxed preview of a ShortcutTile on a gradient
backdrop, which duplicated the form inputs and looked odd when the URL
was still the placeholder. Replace it with an icon-first layout:
- Single 96px avatar at the top. Defaults to the live favicon derived
from the URL field as the user types; falls back to EarthIcon when
the URL is empty or invalid. Click opens the file picker; hover
reveals an Upload/Replace band.
- Custom icon uploads use useFileInput + uploadContentImage directly
(replacing ImageInput, which couldn't react to URL-driven favicon
changes because of its internal state).
- Helper line under the avatar explains the current state in plain
language ("Using site favicon — click to upload your own." /
"Remove custom icon" / "Uploading…").
- Reorder fields to Image → Name → URL per design feedback. The
"Or paste an image URL instead" escape hatch stays but moves below
the main fields.
Made-with: Cursor
- Simplify overflow menu to 4 stable items with an inline mode toggle so it no longer reshuffles when the source flips. - Move import, revoke, and restore-hidden actions into the Manage modal under a new Browser connections section. - Add tile/icon/chip appearance modes with a live-preview picker in the Manage modal, wired through SettingsContext. - Refactor Import picker to a tap-to-select list with favicon fallbacks, segmented capacity pips, and domain-only labels. - Polish ShortcutTile, AddShortcutTile, and Edit modal for a calmer, higher-contrast visual language across themes. Made-with: Cursor
The source-mode toggle row was taller and typographically different from the other items, making the menu look uneven. Rebuild it on the same primitives PostOptionButton uses (h-7, typo-footnote, MenuIcon wrapper) and drop it into the standard DropdownMenuOptions list. Reuse the native Switch with pointer-events-none so clicks fall through to the menu item, keeping menu-open-after-toggle behavior. Remove the custom min-width so the content uses the default DropdownMenuContentAction width. Made-with: Cursor
…ngs style Hub dropdown - Hide "Add shortcut" in auto mode so the menu carries only relevant rows. - Add a hairline separator below the source-mode toggle to signal it's a setting, not a quick action. Manage modal - Drop the header Import button; move import actions into Browser connections alongside revoke/restore so every browser-sourced concern lives in one place. - Replace the heavy bordered mode cards with lean settings-style radio rows (ring-only selection, quiet hover). - Use Subhead + Caption1 section titles and gap-5 spacing to mirror the Settings page rhythm; remove HorizontalSeparators between sections. - Move "Your shortcuts" list under a proper Subhead and only render it in manual mode since auto mode is browser-populated. Appearance picker - Stronger selected state: cabbage border + corner check badge + bold label (felt like hover before). - Fix illustration shapes: chip becomes rounded-rectangle instead of full pill, tile label becomes rounded-rectangle instead of oval. - Remove long descriptions — titles carry enough meaning. Edit modal - Shrink the title from typo-title3 to Body+bold to match the Manage modal (was dominating the form). - Compact avatar (size-16 + rounded-16), tighter gaps, terser helper copy. Made-with: Cursor
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Replaces the legacy "My shortcuts vs Most visited" toggle with a unified hub where users can add, edit, remove and reorder their shortcuts directly on the new tab — and import from browser top sites or the bookmarks bar on demand.
ShortcutLinksHub) with draggable tiles, per-tile menu (edit/remove), dashed+add-tile, and a toolbar overflow menu (Add / Import from browser / Import from bookmarks / Hide / Manage).SettingsFlags.shortcutMeta).N/12), inline reorder, edit/remove, empty state with three CTAs (Add / Most visited / Bookmarks), and revoke-permission buttons.ShortcutImportFlow) that coordinates permission prompts, silent imports when capacity fits, and a picker modal (ImportPickerModal) when the list exceeds free slots.useShortcutsMigration) seeds existing top-sites users so they don't land on an empty hub.bookmarksadded to manifestoptional_permissions(Chrome/Edge/Opera + Firefox).Rollout
Ships behind the
shortcuts_hubGrowthBook feature flag (featureShortcutsHub). Legacy code path is untouched and kept as the fallback. ExistingShortcutLinks.spec.tsxpinsuseConditionalFeaturetofalseso the legacy UI stays covered.Notable fixes (late in the branch)
useBrowserBookmarksnow initialisesbookmarkstoundefinedand only promotes to[]when the permission is actually granted, so the manage modal no longer falsely shows "Revoke bookmarks access" and the import flow correctly surfaces the permission prompt.ShortcutImportFlowwas rewritten as a small state machine: it distinguishes "no permission", "permission granted but empty", "fits capacity → silent import", and "exceeds capacity → picker". Permission modals are rendered inline so cancel/close actually resetsshowImportSource.PointerSensoractivationConstraint: { distance: 5 }, a toolbar-levelonClickCapturewith ajustDraggedRef, and a per-tileisDraggingcheck so dragging never navigates.Test plan
pnpm test -- --testPathPattern='ShortcutLinks'passes (10/10).newtab.daily.devand extension new tab.topSitespermission; granting imports up to 12 sites (picker shown if > free slots); denying closes cleanly.bookmarkspermission; granting imports bookmarks bar (picker if > free slots); empty bookmarks bar shows a toast.customLinkssee them preserved; existing top-sites-only users get a one-time migration intocustomLinks.Made with Cursor
Preview domain
https://feat-shortcuts-hub-redesign.preview.app.daily.dev