feat: custom feed icons & different edit interaction

[Nirzhuk]

resolves #1898
resolves #1897

Description

Added Custom Icons following Lucide react library to Custom Feeds, added custom dialog to decide icons.
Modified different edit interaction of custom feeds

Demo video

Screen.Recording.2026-08-03.at.11.06.18.mov

[greptile-apps]

Greptile Summary

Adds selectable custom Lucide icons to custom feeds.

• Upgrades pubky-app-specs and extends feed normalization, persistence, and bootstrap compatibility with icon metadata.
• Adds a searchable, virtualized icon picker and dynamic icon renderer.
• Refactors custom-feed create/edit handling into a React Hook Form hook and displays selected icons in feed navigation.

Confidence Score: 4/5

The unknown-icon overwrite should be fixed before merging because an unrelated feed edit can silently destroy icon metadata created by another client.

The edit form replaces unrecognized stored icons with the default and submits all fields, defeating the lower-layer preservation behavior and persisting the replacement locally and remotely.

Files Needing Attention: src/hooks/useCustomFeedForm/useCustomFeedForm.types.ts, src/hooks/useCustomFeedForm/useCustomFeedForm.ts

Important Files Changed

Filename	Overview
src/hooks/useCustomFeedForm/useCustomFeedForm.types.ts	Defines form validation and stored-feed mapping, but converting unknown icons to the default causes destructive round trips.
src/hooks/useCustomFeedForm/useCustomFeedForm.ts	Centralizes create, update, delete, navigation, and toast behavior; full-form update submission contributes to overwriting unknown icons.
src/core/application/feed/feed.ts	Persists icon metadata and provides legacy defaults while preserving the existing local/homeserver migration flow.
src/components/organisms/IconPickerDialog/IconPickerDialog.tsx	Adds a searchable and virtualized responsive Lucide icon picker.
src/components/organisms/FeedNavigation/FeedNavigation.tsx	Displays custom icons and exposes separate accessible edit actions for every saved feed.
src/components/organisms/CustomFeedDialog/CustomFeedDialog.tsx	Integrates the icon picker and refactored form controls into create and edit dialogs.
src/core/pipes/feed/feed.validators.ts	Sanitizes missing or oversized icons while deliberately preserving valid names unknown to this client.

Sequence Diagram

sequenceDiagram
  participant User
  participant Dialog as CustomFeedDialog
  participant Form as useCustomFeedForm
  participant Controller as FeedController
  participant App as FeedApplication
  participant Local as IndexedDB
  participant HS as Homeserver
  User->>Dialog: Select icon and save
  Dialog->>Form: submit()
  Form->>Controller: commitCreate/commitUpdate
  Controller->>App: persist normalized feed
  App->>Local: write feed with icon
  App->>HS: PUT feed JSON with icon

Loading

_{Reviews (1): Last reviewed commit: "test: refactor CustomFeedDialog tests fo..." | Re-trigger Greptile}

[github-actions]

🚀 Preview Deployment

URL: https://pubky-app-pr-2284-fzxmjul7ya-oa.a.run.app

pubky-app-pr-2284 • f0a577e

[secondl1ght]

This is a nice improvement, a few things:

1. The new dropdown picker to view hidden feeds doesn't match the design (using the video @olivert2025 shared in Slack as an example).
2. On initial load the icons in the picker are fairly laggy, consider preloading these for a better UX. It's not critical because once they are cached they load faster, but is quite noticeable on first render.
3. The close (X) button in the search input looks out of place with our app theme, it is blue but I've never seen this style anywhere else. It's also missing the pointer cursor on hover indicating it's clickable. We should use the standard white or grey colors to match. (Or even the primary brand green color would look better.)
4. There is a visible flicker on page refresh where the default icons are shown temporarily before the real icons are used, we should fix that so the correct icons are always displayed.

And then there are a few comments from Claude that will follow.

[secondl1ght]

From Claude:

1. Editing a feed silently overwrites a foreign client's icon.
FeedValidators.sanitizeIcon deliberately passes unknown-but-valid icon names through, and its docstring promises: "Names that are merely unknown to us pass through untouched so a round-trip through this app does not overwrite them." But the edit dialog breaks that promise: customFeedFormValuesFromFeed (useCustomFeedForm.types.ts:82) coerces any non-Lucide name to DEFAULT_CUSTOM_FEED_ICON, and submit always sends changes.icon, so renaming a feed authored by another client permanently replaces its custom icon with 'activity'. Since DynamicLucideIcon already renders the Activity fallback for unresolvable names, the form could keep the raw stored value instead of coercing it — the trigger button would still render something, the zod z.string().min(1) check still passes, and an untouched icon field would round-trip intact. The picker would simply show no selection, which is arguably more honest.

2. useCustomFeedMutation is now dead code.
Its only consumer (CustomFeedDialog) migrated to useCustomFeedForm, yet the hook and its test remain — the test was even edited in this PR (adding icon: 'activity') just to keep it compiling. Suggest deleting the folder, or stating why it's being kept.

3. Virtualization constants are silently coupled to Tailwind classes.
In IconPickerDialog, ICON_ROW_HEIGHT_PX = 52 is size-9 (36px) + gap-y-4 (16px), the - 16 in virtualGridHeight trims the trailing gap, and MOBILE_COLUMN_COUNT/DESKTOP_COLUMN_COUNT must match grid-cols-6 sm:grid-cols-11 and the useIsMobile({ breakpoint: 'sm' }) query. None of this is stated in the file — a future styling tweak will desync scroll math from layout with no type error. A short comment tying the constants to the class names would cover it. (Hand-rolling the virtualization itself is fine — there's no virtualization library in the dependency tree, and the scale doesn't justify adding one.)

[Nirzhuk]

@matthew

• On initial load the icons in the picker are fairly laggy, consider preloading these for a better UX. It's not critical because once they are cached they load faster, but is quite noticeable on first render.
• There is a visible flicker on page refresh where the default icons are shown temporarily before the real icons are used, we should fix that so the correct icons are always displayed.

Both are coming from the same problem we're using dynamic which imports dynamic the specific icon without adding them directly to our bundle and makes an independent module in build time.
more info: https://lucide.dev/guide/react/advanced/dynamic-icon-component

The close (X) button in the search input looks out of place with our app theme, it is blue but I've never seen this style anywhere else. It's also missing the pointer cursor on hover indicating it's clickable. We should use the standard white or grey colors to match. (Or even the primary brand green color would look better.)

✅

The new dropdown picker to view hidden feeds doesn't match the design (using the video @olivert2025 shared in Slack as an example).

Updated and Oliver give the okey

[Nirzhuk]

1. Editing a feed silently overwrites a foreign client's icon.
   FeedValidators.sanitizeIcon deliberately passes unknown-but-valid icon names through, and its docstring promises: "Names that are merely unknown to us pass through untouched so a round-trip through this app does not overwrite them." But the edit dialog breaks that promise: customFeedFormValuesFromFeed (useCustomFeedForm.types.ts:82) coerces any non-Lucide name to DEFAULT_CUSTOM_FEED_ICON, and submit always sends changes.icon, so renaming a feed authored by another client permanently replaces its custom icon with 'activity'. Since DynamicLucideIcon already renders the Activity fallback for unresolvable names, the form could keep the raw stored value instead of coercing it — the trigger button would still render something, the zod z.string().min(1) check still passes, and an untouched icon field would round-trip intact. The picker would simply show no selection, which is arguably more honest.

This is okey, if is not from Lucide lets rewrite it, it's a more strong guard but I believe it's a good thing. This could change if we stop supporting lucide but I believe it's change in the paradigm of our code in that moment

[infin1t3]

Closing this PR in favor of #2353 and other PRs that are yet to come.