feat(storybook): squad page redesign and Verified Squad page mock-ups by tsahimatsliah · Pull Request #6721 · dailydotdev/apps

tsahimatsliah · 2026-09-24T17:03:32Z

What this is

Design handoff for the squad page redesign and the Verified squad page: a squad run for a company, with CodeRabbit as the example.

Every component, state and breakpoint is drawn in Storybook so engineering can implement from it. This PR only adds Storybook files. It changes nothing in webapp, shared or extension: 33 story files under packages/storybook/stories/squad-page/, 3 images in packages/storybook/public/squad-page/, and the Squad Page folder order in packages/storybook/.storybook/preview.tsx.

Where to look

Storybook path	What it shows
Squad Page / 1. Direction / Playground	The chosen design at desktop width. Controls switch the viewer (anonymous, visitor, member, moderator, admin, blocked), the page and the use case.
Squad Page / 1. Direction / Mobile	The same page in a real 375px phone frame, with viewer and page controls.
Squad Page / 2. Use cases / Overview	Summary of squads today versus the new design, plus the permissions, per-viewer, breakpoint and fed-vs-plain tables.
Squad Page / 2. Use cases / Viewers, Posting, Content source, States, Production parity	Each case at desktop and in a real 375px phone frame.
Squad Page / 2. Use cases / Breakpoints	375, 768, 1280 and 1600px for a member and an admin.
Squad Page / 2. Use cases / Manage	The admin settings area (Edit page), laid out like profile settings.
Squad Page / 3. Verified badge	The Verified squad page card. On phones only the verified badge beside the name.
Squad Page / 4. Research	How other platforms solve the same problems, with links. Reference only.
Squad Page / Archive	Earlier explorations (the Workspace direction, the Navigation picks, and the feed chips with their Releases and Polls pages). Not for implementation.

Folder layout

stories/squad-page/ holds the live design: direction.tsx, home.tsx, manage.tsx, productForm.tsx, pins.tsx, composer.tsx, squadSpotlight.tsx, owner.tsx, rail.tsx, and workspace.tsx (the sub-pages).
use-cases/ holds the cases and summary tables.
archive/ holds everything the chosen direction no longer uses. None of the live files import from it.

What the design covers

Header: cover, round Squad image, name with the verified badge, meta line, stats. The actions are Edit page (a pen icon), the bell, Share, Search and one options menu as Subtle buttons, then Join Squad (Joined once in) last. Admins get Boost in that seat as the Primary button. On phones, Join Squad is full width under the stats; admins get Boost and Share page there instead. Share opens the native share sheet on phones.
Home: Products shelf, the composer that opens the new composer, then one infinite-scroll feed: pinned posts in Reddit's highlights style, posts and polls. Below laptop width, Posts and About tabs sit above the composer; About holds every right-column widget.
Search: the header's search icon (and ⌘K) opens Spotlight with the Squad as a filter pill, backed by the existing SEARCH_SOURCE_POSTS_QUERY. Backspace widens it to all of daily.dev. Enter opens a results page with a back button, the query as a chip and the count.
Right column: Verified squad page card, View as a visitor and the share card for staff, Rules, Team, Stack & Tools, Analytics (admins only) and Links.
Sub-pages: Rules, FAQ, Products, Add product, Members, Pending posts, Invite, Not found and the private squad screen.
Manage area: a sidebar with Page, Community and Tools groups, in the profile settings style. Sections: Details (with cover and image upload), Rules, FAQ, Products, Links, Members, Moderation, Posting and invitations, Content feed, Analytics, Integrations and Danger zone. Moderators only see Rules, FAQ, Members and Moderation.
Responsive: the classic sidebar at laptop width, the 64px sidebar on tablets, the floating tab bar on phones. Below 1020px the right column becomes the About tab.

Built from existing components

Where production already has the piece, the mock-ups render the real component, unchanged:

DataTile, CombinedImpressionsChart, AnalyticsNumbersList
Radio, Dropdown, TextField, Textarea, SearchField
UserBadge, SquadEmptyScreen, BlockedMembersPlaceholder
SquadDirectoryNavbar, HorizontalSeparator, Typography, Button, PollList
useShareOrCopyLink, and Spotlight's scopeMeta / scopeIcons

Profile settings patterns are mirrored: ProfileSettingsMenuDesktop, ControlledCoverUpload / ControlledAvatarUpload, the work experience list and form, and SocialLinksInput. Anything new is marked as new in the Production parity table.

Not in scope

No production code, flags or queries. The mock data lives in data.ts and roles and states in state.ts, so another company can be swapped in through data.ts alone.

🤖 Generated with Claude Code

Preview domain

https://claude-squad-page-redesign-3f05c.preview.app.daily.dev

Four structural directions for the squad / verified company page, rebuilt on the real daily.dev Changelog squad with production feed cards: Channel (YouTube/LinkedIn), Community (Reddit rail), Publication (changelog timeline) and Hub (GitHub org). Overview story carries the rationale, comparison and recommendation; each direction also renders on its own with viewer (visitor/member/admin) controls. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Five variants on the feedback to round one: no banner, one-row identity, cover as ambient glow, uniform owner-arranged tiles (WHOOP), nothing behind a tab. Modules (right tile column), Bento (tiles as header), Focus (X-style column + sticky identity), Shelf (one tile row above a full-width feed), Console (data-first left panel). Admin viewer shows the customise state. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Whop's model applied to squads: the v2 rail stays, a second column holds owner-composed pages (feed, restricted feed, chat, document, link, bounties, jobs, leaderboard, members, stack, admin tools) in sections with counts, hide and reorder, and the main area renders the selected page type. Interactive shell with visitor/member/admin and an Add-a-page catalogue; overview carries the Whop-to-daily.dev mapping and a build order. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

The workspace Home now mirrors the user profile page: same card, cover height and avatar seat, same name / meta / actions / stats stack, the same divided sections (About with links and readme, Stack, Activity with tabs and a card rail, Open roles where experiences sit) and the same widget column (Squad overview, Team, Awards and milestones). The overview story shows the live profile beside it with a field-by-field mapping. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

The shared Home frame gets page-level tabs under the stats: Posts is the default and fills the card (sort chips, pinned row, two-up production cards, load more); the readme, stack, roles and CV move under one About tab. ProfileHome rebuilds Tsahi's profile on the same frame so the parity section compares two live components instead of a screenshot. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Join moves from the sidebar foot into the squad header block, so it sits with the name and icon on every page. The Posts / About tabs on Home are gone: About becomes a sidebar page, and the feed controls follow Reddit's shape (one sort menu, the grid / list toggle the product already has, search) with the pinned post as a highlight card. The profile keeps its single pair of tabs because it has no sidebar. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Sidebar model rebuilt on how developer communities actually organise: channels (the feed filtered to one flair, each with its own posting rule), read-first pages (Start here, Rules, FAQ, Roadmap), recurring threads (Who's hiring, easy questions, Showoff Saturday), links and people. Bounties and the leaderboard are gone. Two presets show a company squad and a topic squad composed from the same page types; the overview carries the Reddit / GitHub Discussions / Discord mapping. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

A Products page under a new Company section: every product the company makes, imported from a Product Hunt, G2, Trustpilot, GitHub or website link with the source's rating and synced weekly. Each card is a tool a member can add to their stack, and says how many already have. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Rows instead of cards: rank, logo, name and tagline on one line, rating and chips under, and the tall box on the right that counts stacks and is the add button, where Product Hunt counts upvotes. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Audit-driven pass over every surface of the squad workspace. Trust cues are one mark everywhere (shield in the sidebar, the name and the company line; members stat drops the borrowed reputation icon). The sidebar header becomes the squad's identity block: logo, name, verified domain, members and online, then Join for a visitor, alerts / invite / share for a member, preview-as for an admin. Home gets the social-proof line, a Share action so a visitor's row is no longer an orphan, the composer for members, and a cover fade under the logo seat. About drops the duplicated roles and gains company facts and the team. Channels share Home's sort / view / search row; the page bar no longer repeats search. Members gets a count, online, search and newest members. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

…count The verified mark becomes a check in a filled circle, the glyph every network uses; the shield read as daily.dev's clickbait shield. Products and Open roles join Home and About above the channels, so the Company section goes. The People section goes too: the member count in the sidebar header opens the Members page. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

Six stacked rows become four. The logo and the actions share one baseline at the cover's foot, so the identity column below is text only: name and tagline, one meta line, then one stats strip under a hairline with the member faces folded into the Members figure. The members bar leaves the sidebar header; the Members stat and its faces open the Members page instead. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

The verified mark becomes the scalloped seal with a check that every network uses for verified accounts. daily.dev has no glyph for it: the profile's company badge is a text pill, the shields mean clickbait shield and the medals mean awards, so the seal is drawn on the 24 grid in the kit and takes currentColor. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

Home and the profile's activity render the production list cards in a single column instead of the two-up grid, and the layout toggle reports list as the active mode. Channels already did. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

Read first becomes Documentation and keeps Rules and FAQ; Start here and Roadmap leave the presets (a page stays addable from the catalogue). The rules move to data.ts so the Rules page and a new Rules widget on Home read the same list; each widget row opens the page. About takes the info glyph. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

Q&A folds into Discussions; Ideas and feedback, Bugs and Show and tell leave the company preset. Two channels take their place: Reviews (a post with a rating, the team replies) and Quiz (a poll with a right answer, weekly). The community preset keeps Links and Polls and gains the quiz; recurring threads point at the channels that remain. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

Reviews is no longer a feed: members pick stars and write, the team replies in line, and the top of the page pulls every rating the company has on the web (Trustpilot, G2, Chrome Web Store, App Store, Product Hunt) into one score beside the squad's own. Releases is a new page in the top group: every release post as a log grouped by month, newest first, filterable by kind, in GitHub Releases' shape. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

Quiz is its own page type: a set of poll-style cards, one question each, answered in place. The right option turns green with a check, a wrong pick turns red, the squad's split shows on every bar, and a score banner lands once every card is answered. Questions are generated from the company's own posts, so each card cites the release it came from; admins get Generate a quiz. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

Each question is a real poll post rendered by PollList, unchanged. The page owns the answer: an option click is caught in the capture phase so the card's vote mutation never fires, the card re-renders in its own results state, and a line under it says whether the pick was right, what the right answer was, and which release the question came from. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

A third sidebar composition: Home, Releases and Products up top, only Discussions and Polls as channels, the documentation, and a links section that carries the company's X, YouTube, LinkedIn and Discord with brand glyphs beside its docs and GitHub. Announcements, Reviews, Quiz, Open roles and About are out. Polls is its own page on the production poll card, votes owned by the page so the story stays offline. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

The verified seal gets a card of its own at the top of Home's widget column: what verified means here, the domain, since when, and how many admins are verified employees. Accent border, no fill, so it reads as a badge and not a banner. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

The official company page card shrinks to one row on a soft brand glow: seal, label, 'Verified by daily.dev', nothing to read past it. Rules gets All rules and FAQ as two float buttons under the list, the profile's Show all seat twice. Milestones leaves the column and a Links widget takes its place, drawn from one company-links list that the Lean sidebar now reads too, with the brand glyph map moved into the kit. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

Eight ways to mark the official company page at the top of Home's column, each at the column's width above a Rules card: glow, pill, hairline, foil, stamp, laurel, strip, glass. The live badge on Home drops its subline to the four words. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

Round two of the badge sheet, between Foil and Glass: foil glass, holographic, hallmark with a serial, wax seal with the company's mark, ribbon, partner, faces, gold edge, swing tag, presence. References are the marks developers meet outside the big networks: Docker's Verified Publisher, the VS Code marketplace tick, Hugging Face, Stack Overflow Collectives, Twitch and Discord partners, Spotify's Verified Artist, Airbnb's Superhost, and the physical seals and tags. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

Round three of the badge sheet: Foil glass and Holographic held ten ways in cabbage. What moves is where the light sits (haze, aurora orbs, sheen, spotlight), how the edge is drawn (hairline, gradient frame, none) and the second line (publisher, serial, the company's domain, or nothing). Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

The chosen badge, 21: two orbs of brand light under frosted glass, a cabbage hairline, the seal in the brightest spot, four words. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

One sidebar, the one that was chosen: Home, Releases, Products; Discussions and Polls; Rules and FAQ; the company's links with brand glyphs; Manage for admins. The presets, Announcements, Reviews, Quiz, Open roles, About, Chat and Recurring threads leave the shell, the catalogue and the overview, which now walks the nine pages that remain. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

Viewer grows to five roles (anonymous, logged-in visitor, member, moderator, admin) with helpers the shell reads instead of comparing enum values. The workspace gains a content source (fed by the company's RSS, or hand-written), an empty state and a private wall, a Moderation queue, and a Content feed page under Manage that shows the managed arrangement: source health, where it publishes, recent imports, and the daily.dev manager to contact. A use-cases folder covers it: Viewers, Posting, Content source, States, and an Overview with permission and fed-vs-plain matrices and an index of every case. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

…0' into claude/squad-page-redesign-3f05c0

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

- The kind chips move to the Archive with the Releases and Polls pages (archive/chipPages.tsx). Home is one feed under a Posts heading with production's search; polls sit in it on the production poll card. - Below laptop, About in the feed heading swaps the feed for the right column's widgets, as the About chip did. - Squad terminology from production: Join Squad / Joined, Leave Squad, members instead of followers, Join the Squad to create new posts. - Delete Squad leaves the options menu (it stays in Manage, Danger zone). - The Team widget drops the Top followers row. - Verified company page becomes Verified squad page. - Use cases and tables follow: chip cases redrawn on the home feed, the fed-page note moves to the Content feed page. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Code identifiers, URLs (/squads/...) and comments keep lowercase. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

The feed heading's search (and ⌘K) opens production's Spotlight layout with a CodeRabbit pill in the field, like the palette's Posts or Tags scopes: pinned and latest posts before typing, Squad matches after, See all or Enter lists every match in the feed with a clear button. Backspace or the pill widens to all of daily.dev, where a Search in CodeRabbit row and chip narrow it again. Phones get the bottom sheet. Load more is gone; the feed is infinite scroll. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

At rest the feed heading is a search bar (⌘K hint on laptop) with About beside it below laptop. After See all the row becomes the query as one chip (text reopens Spotlight to edit, the cross clears the search) and a result count, sticks to the top with the Squad's logo, and scrolls into view. The redundant "in CodeRabbit" title is gone. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

X's pattern: a search icon beside the options menu (and ⌘K) opens Spotlight filtered to the Squad; Enter opens a results page like the other sub-pages, with a back button, the query as a chip with the Squad's logo (text edits it, the cross ends it) and the count. The feed loses its search bar; below laptop its row is Posts and About only. Adds the Searching inside the Squad case. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Below 1020px the feed opens with two tabs in the tags-directory style, above the composer: Posts, and About with every right-column widget (the share card included for the team). The composer shows on Posts only. From laptop up the right column sits beside the page and the tabs are hidden. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Matches the post page's NewComment trigger: a rounded, bordered float card with the page gutter on every size, not an edge-to-edge band. The locked Join the Squad card follows. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Matches ProfileHeader: a 144px cover at every size (rounded top from laptop), the 120px image absolutely placed 64px down and 24px in (a circle for a Squad, no ring), actions right-aligned 8px under the cover with 16px below, 24px side padding. The page's phone gutter follows the profile's p-6: shelf, tabs, composer, pinned and About sit at 24px; feed cards stay edge to edge. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Storybook's canvas is desktop-wide, so the Playground never showed the phone layout. Direction / Mobile renders the page in a real 375px frame with viewer and page controls. The seal beside the Squad name grows from 16px to 20px next to the Title2 name. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

…tter The profile-geometry header (144px cover, 120px image, 24px padding) read too large, and the 24px phone gutter pushed the tagline to three lines. Restores the earlier cover (112px phones, 144px up), the 80px / 104px ringed image and the 16px phone gutter; keeps the 20px seal by the name. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

…esign-3f05c0

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

tsahimatsliah and others added 30 commits September 15, 2026 10:42

feat(storybook): team above activity on squad Home

ddcbe38

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

fix(storybook): hallmark badge edge and swing tag hole

e2506a8

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

feat(storybook): aurora official badge on Home

96f65cc

The chosen badge, 21: two orbs of brand light under frosted glass, a cabbage hairline, the seal in the brightest spot, four words. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

Merge remote-tracking branch 'origin/claude/squad-page-redesign-3f05c…

039a16e

…0' into claude/squad-page-redesign-3f05c0

vercel Bot deployed to Preview September 25, 2026 13:07 View deployment

chore(storybook): order the Squad Page folders in the sidebar

07ff02e

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

vercel Bot deployed to Preview September 27, 2026 07:23 View deployment

vercel Bot deployed to Preview September 27, 2026 11:17 View deployment

chore(storybook): Squad with a capital S in all page copy

2b9b03f

Code identifiers, URLs (/squads/...) and comments keep lowercase. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

vercel Bot deployed to Preview September 27, 2026 11:22 View deployment

vercel Bot deployed to Preview September 27, 2026 11:27 View deployment

vercel Bot deployed to Preview September 27, 2026 11:34 View deployment

vercel Bot deployed to Preview September 27, 2026 11:39 View deployment

vercel Bot deployed to Preview September 27, 2026 11:53 View deployment

tsahimatsliah and others added 3 commits September 27, 2026 15:05

vercel Bot deployed to Preview September 27, 2026 12:15 View deployment

tsahimatsliah changed the title ~~feat(storybook): squad page redesign and verified company page mock-ups~~ feat(storybook): squad page redesign and Verified Squad page mock-ups Sep 27, 2026

Merge remote-tracking branch 'origin/main' into claude/squad-page-red…

4f232cb

…esign-3f05c0

vercel Bot deployed to Preview September 27, 2026 12:39 View deployment

chore(storybook): rem instead of a raw px value in the rail

1f77d92

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

vercel Bot deployed to Preview September 27, 2026 12:47 View deployment

tsahimatsliah marked this pull request as ready for review September 27, 2026 12:58

tsahimatsliah merged commit 1ef0743 into main Sep 27, 2026
12 checks passed

tsahimatsliah deleted the claude/squad-page-redesign-3f05c0 branch September 27, 2026 13:01

idoshamun mentioned this pull request Sep 27, 2026

feat(squads): redesign the squad page and add Verified Company Squad features #6732

Open

5 tasks

Navigation Menu

feat(storybook): squad page redesign and Verified Squad page mock-ups - #6721

feat(storybook): squad page redesign and Verified Squad page mock-ups#6721
tsahimatsliah merged 92 commits into
mainfrom
claude/squad-page-redesign-3f05c0

tsahimatsliah commented Sep 24, 2026 •

edited

Loading

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

tsahimatsliah commented Sep 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What this is

Where to look

Folder layout

What the design covers

Built from existing components

Not in scope

Preview domain

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

tsahimatsliah commented Sep 24, 2026 •

edited

Loading