Repository navigation
feat(frontend): landing page and demo sign-in (stacked on #4) - #5
Open
OfficialAbhinavSingh wants to merge 20 commits into
Open
OfficialAbhinavSingh wants to merge 20 commits into
OfficialAbhinavSingh wants to merge 20 commits into
Conversation
Adds the frontend workspace for the Porcelain dashboard (mergit-io#2): Vite, React 19, React Router and strict TypeScript, with node_modules and build output ignored.
Ports the colour, type and shape tokens from the approved Figma files (Porcelain and Porcelain Night) to CSS variables keyed on data-theme, plus the shared component styles. Every colour a component uses is a token, so switching theme is one attribute change.
- First visit follows the OS; a choice is saved, and picking the OS theme again clears it so the app follows the OS from then on. - An inline script sets the theme before first paint, so no flash. - Open tabs stay in sync through the storage event, and OS changes apply live while nothing is saved. - The toggle reveals the new theme in a circle from the button via the View Transitions API, with a colour cross-fade fallback. Reduced motion switches instantly.
Floating pill nav with a sliding active tab, the theme toggle beside notifications, shared components (badges, avatars, segmented control, sparkline, toast), typed demo data and the Overview screen. Run filters and approvals work locally; no number in the demo data is measured.
The run workspace draws the task graph from the design; selecting a node updates the side panel, and the canvas zooms and pans on small screens. New run has the prompt composer, draft plan and ask-before switches.
Copy follows the current design rather than v0.2: identities are ERC-8004, the receipt contract is ReceiptRegistry, the chain is an unnamed L2 testnet, and ranking reads as value density.
Wallet shows ETH on the L2 testnet and the Identity, ReceiptRegistry and ReputationAnchor contracts. Sign-in carries its own theme toggle.
Checks first paint follows the OS before React mounts, a saved choice beats the OS, the toggle persists across reloads, a switch in one tab reaches the others, the OS is followed live until a choice is saved, and reduced motion skips the view transition. Every route renders in both themes with the right tab active and no stale v0.2 terms.
How to run, build and test it, the route list, and how light and dark mode work.
- Overview badge said "Proof of work", a superseded v0.2 term; it now reads "Verified receipts". The stale-term test checks for it. - Spark divided by zero on a single point and crashed on none. - Buttons with no backend behind them now say so instead of doing nothing. - Segmented controls follow the radio-group keyboard pattern: arrow keys move the selection and focus, one tab stop per group. - Reduced motion turns animations off rather than shortening them, so content never waits on a frame tick to fade in.
settle() polled running animations, which can pass in the frame before the reveal starts, so a test could read the theme before the switch applied. :active-view-transition is true from the moment a transition is requested.
Controls that looked interactive but did nothing, or did the wrong thing: - Run rows opened RUN-2048 whatever row you clicked; each row now opens its own run. Runs without a demo trace say so, unknown ids are a 404. - Proof pages showed proof 1840 for any id; unknown ids are a 404, and the breadcrumb no longer links back to itself. - The leaderboard range switch changed nothing; each range has its own ranking now. - "Two actions are waiting" and the nav badge never changed. Approvals live in one provider: they count down, expire, and update both. - Agent sort is a real select and sorts; "Verified only" reads a verified field. - Wallet copy copied a literal with an ellipsis; it copies the address. - Sign-in accepted an empty email; it is required. - Buttons whose action needs a backend now say so instead of nothing. Structure: - One file per shared component instead of a grab-bag ui.tsx. - Toast, theme and approvals split into context and provider files so fast refresh works; useCopy, useNotWired and useSlidingThumb are hooks. - Run workspace split into the page, the flow graph and the task panel. - Every displayed number and string comes from mock/data.ts, typed. - Inline style objects replaced by named classes; only data-driven values (sizes, positions) stay inline. Also fixes two regressions found by diffing against the design: graph edges were invisible with reduced motion, and the proof facts lost the rule under the last row.
New behaviour tests: approving updates the header count and nav badge, asks expire on the clock, each run row opens its own run, unknown run and proof ids are a 404, the timeline selects tasks, the leaderboard range changes the ranking, agent sort, search and category work, sign in requires an email, and the composer refuses an empty prompt.
- ESLint 10 with typescript-eslint strictTypeChecked, React hooks, react-refresh and jsx-a11y-x (the maintained fork that supports ESLint 10). - Prettier at 120 columns, and an EditorConfig. - noUncheckedIndexedAccess, so array and record lookups must handle a missing entry. - lint and format scripts, Node 22.12 in engines, README updated.
Runs lint, format check, type-check and build, then the Playwright suite, on any pull request that touches frontend/. Uploads the test results when something fails.
Member
Author
|
@Viscous106 @Divii220 @Aspirant200715 This is the landing page for mergit which was decided from the video, some elements are boken in this we have to fix those |
This was referenced Oct 14, 2026
Open
OfficialAbhinavSingh
force-pushed
the
feat/frontend-landing
branch
from
October 14, 2026 16:31
a46f547 to
00e2b12
Compare
- Overview: on a phone ", 17m ago" wraps together with its block number instead of landing on a line of its own, and "View all" no longer breaks onto two lines. Desktop is unchanged from the design. - Integrations: one card per row on phones, and permission rows put the scope above its purpose so the access badge has its own column. - Wallet: the settlement lag chart fills its card once the layout drops to one column. - Proof diff: long lines scroll sideways instead of being cut off. - Run: the zoom control no longer covers the proof node on phones. - New run: the send button keeps its size at 320px. Adds checks that no page scrolls sideways at 320 and 390px and that integration cards keep their contents inside.
The landing page will own `/`, so the dashboard moves under `/app`. Every route now comes from one paths module instead of string literals. Signed out, a dashboard route shows the dashboard blurred and inert behind a "Connect to Mergit" window, as in the landing design video: pick a wallet, sign, connected, and the dashboard comes into focus. There is no auth backend yet, so the wallet is simulated behind one `connectWallet` function, and the session is a localStorage record. The sign-in page's account options sign in to the demo account and its wallet option opens the same Connect window. An account menu on the avatar holds Sign out, which clears the session and returns to `/`. Tests move to `/app` and start signed in through a shared fixture.
Built section by section from the 98-second landing design recording, measured at the video's 1920px width and scaled with the viewport: - Intro: points gather into a dotted globe with glowing nodes, arcs and hash labels, then the globe flies into the hero. Plays once a session, skips on click or key, never with reduced motion. - Hero: word-by-word headline, a scripted agent card (prompt types, results land, run completes, replays), a proof-block chain that moves as blocks settle, floating tool tiles and a handwritten note. - 01 How it works, 02 the team, 03 connected work, 04 a working approval demo, 05 the credential boundary, 06 verified receipts with a settling timeline, 07 FAQ, 08 call to action, and the footer. "Try the demo" opens the Connect window. Manrope, JetBrains Mono and Caveat match the video's type; light and dark both work. Copy follows the current paper rather than the video: an Ethereum L2 testnet instead of Monad, ERC-8004 identities instead of soulbound passports, value density instead of a reputation score, and receipts instead of proof of work.
The intro hands over and can be skipped, reduced motion shows the page at once, the section demos respond, and both themes render without errors or stale terms. Try the demo connects and unlocks the dashboard, Escape backs out, Sign out locks it again, and the sign-in page's account and wallet options both work.
- The landing page's own `.landing a { color: inherit }` outranked
`.l-btn`, so once signed in the nav's Open dashboard pill painted its
label in the pill's colour and looked empty. The global link reset
already does this at lower specificity, so the rule is gone.
- The Connect window sized itself against its backdrop's grid track,
which grew to 420px, so on a 390px screen its right edge and close
button were cut off. It now caps against the viewport.
Tests check the label colour differs from the pill and that the window
fits a phone screen.
OfficialAbhinavSingh
force-pushed
the
feat/frontend-landing
branch
from
October 14, 2026 17:01
00e2b12 to
0423c01
Compare
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
Adds the landing page from the team's landing design video, and a demo sign-in that connects it to the dashboard from #4. Frontend only, no backend.
Stacked on #4. This branch contains #4's commits, so review only the last 4 commits here (
0844d03,d165ad3,383ed97,0423c01). Once #4 merges, this diff shrinks to just those.What it does:
/, built section by section from the video:/app. Signed out, it shows blurred behind a "Connect to Mergit" window: pick a wallet, sign, connected, and the dashboard comes into focus. The wallet is simulated behind oneconnectWalletfunction so the real one can replace it later.Copy follows the current paper, not the video, the same as #4: an Ethereum L2 testnet instead of Monad, ERC-8004 identity instead of soulbound passport, value density instead of a reputation score, receipts instead of proof of work.
Part of #2.
Type of change
paper— correction, derivation, or new section in the researchdocs— requirements, README, or other prosefeat— new functionalityfix— bug fixcontracts— Soliditychore— dependencies, tooling, CIWhat I verified
npm ci, lint, format check, build, and 55 Playwright tests pass, 5 runs in a row. New tests cover the intro hand-off and skip, reduced motion, the section demos, both themes with no stale terms, the whole sign-in flow (connect, Escape, sign out, sign-in page), the Open dashboard label being visible, and the Connect window fitting a phone.Checklist
.envfiles, mnemonics)Evidence
Landing page to dashboard, start to finish:
Connect window, then signing:
Video (left) and build (right):
Fixed in the last commit (
0423c01): signed in, the nav's Open dashboard label took the pill's own colour and looked empty, and the Connect window was wider than a phone screen.To run it:
cd frontend && npm install && npm run dev, open/, thennpm run test:e2e.Breaking changes / follow-ups
/to/app.