🎨 Lenster redesign

[bigint]

Migration Basics

Beta Give feedback

1. Remove Storybook lensterxyz/lenster#2897
   Chore Documentation +2
   
2. Create /design page similar to bluesky has just for simplicity lensterxyz/lenster#2899
   +0
   
3. Add all UI components to /design page lensterxyz/lenster#2900
   +0
   
4. Create icons package and move from figma lensterxyz/lenster#2901
   +0
   

Components

Beta Give feedback

1. Create new Button component lensterxyz/lenster#2902
   +0
   
2. Create new Dropdown component lensterxyz/lenster#2903
   +0
   
3. Create new Input component lensterxyz/lenster#2904
   +0
   
4. Create new Select component lensterxyz/lenster#2930
   +0
   
5. Create new TextArea component lensterxyz/lenster#2905
   +0
   
6. Create new Tab component lensterxyz/lenster#2906
   +0
   
7. Create new Card component lensterxyz/lenster#2907
   +0
   
8. Create new Modal component lensterxyz/lenster#2908
   +0
   
9. Create new Alert component lensterxyz/lenster#2917
   +0
   
10. Create new EmptyState component lensterxyz/lenster#2931
    +0
    
11. Create new Toggle component lensterxyz/lenster#2932
    +0
    
12. Create new Checkbox component lensterxyz/lenster#2933
    +0
    

Publication Component

Beta Give feedback

1. Migrate basic publication component layout to new design lensterxyz/lenster#2909
   +0
   
2. Redesign threads in publication component lensterxyz/lenster#2910
   +0
   
3. Show collect details outside in main area lensterxyz/lenster#2911
   +0
   

Layouts

Beta Give feedback

1. Migrate to three column layout in home page lensterxyz/lenster#2912
   +0
   
2. Migrate to three column layout in profile page lensterxyz/lenster#2913
   +0
   
3. Migrate to three column layout in settings page lensterxyz/lenster#2914
   +0
   
4. Migrate to three column layout in explore page lensterxyz/lenster#2915
   +0
   
5. Add gradient on top in explore page lensterxyz/lenster#2916
   +0
   
6. Migrate to three column layout in notifications page lensterxyz/lenster#2918
   +0
   
7. Migrate to three column layout in DMs page lensterxyz/lenster#2919
   +0
   
8. Migrate to three column layout in search page lensterxyz/lenster#2920
   +0
   

Search

Beta Give feedback

1. Add search and filter by content types lensterxyz/lenster#2922
   +0
   

Discoverability

Beta Give feedback

1. Create staff-picked topics from airtable and make workers for it lensterxyz/lenster#2921
   +0
   

[vinliao]

Figma (or screenshot) required, or just PR?

[bigint]

@vinliao we dont have Figma yet, but its good to have 🙇🏼

[thethemit]

what do you think, do you agree if the lens adds an auto translate feature on post or comment?

mybe and i think can help for user if problem to meaning someone say post or comment

[GrgW]

Just a comment:

Would be nice if this Discoverability project could split the work into [1] spec'ing out an interface and [2] providing an (initial) implementation. This would lay some groundwork for Lens client apps to support pluggable modules. It doesen't matter if the interface [1] still moves around a bit, objective it to set a precedent.

Lenster could then move towards supporting an ecosystem of modules from which users can self-assemble these components e.g. feed that excludes 'gm' posts, a feed that uses AI to exclude repetitive GIFs posts, recommend users that comment more than they post,....

[vinliao]

Agree with @GrgW on separating design spec (Figma, or at least screenshot) with implementation. I've seen front-end projects where randos create a PR with bad design and the the maintainer merged it because: "Well, this person has worked hard, and rejecting the PR wouldn't be a polite move." I don't think that's a good position to be in.

[GrgW]

@vinliao agree re UI design spec.

Just to clarify - my comment was about splitting the module code i/f and the code implementation of that i/f. This allows for future implementations of that interface to be developed and then integrated into Lenster with minimal effort.

[elie222]

Agree with @GrgW on separating design spec (Figma, or at least screenshot) with implementation. I've seen front-end projects where randos create a PR with bad design and the the maintainer merged it because: "Well, this person has worked hard, and rejecting the PR wouldn't be a polite move." I don't think that's a good position to be in.

Agreed. Would be a lot better to split this task into design and development. They're usually done by two different sets of people.
The design for Lenster looks pretty good already so it should be definitely be approved as a design first, and only passed off to devs after the Figma has been okayed.

[bigint]

Agreed @elie222, I'll update the issue description and split both task and have subtasks for it 🙇🏼

[theolawalemi]

@bigint I know this would be so challenging but at the same time, it’s going to be fun to participate.
Time to give it a shot. ❤️

[bigint]

Creating new issue for this

[github-actions]

This issue has been locked since it has been closed for more than 10 days.

If you found a concrete bug or regression related to it, please open a new bug report.

[github-actions]

This issue has been locked since it has been closed for more than 10 days.

If you found a concrete bug or regression related to it, please open a new bug report.