Frontend: Decompose Monolithic UI into a Page-Based Architecture

[surafelfikru]

this pull request represents a fundamental architectural overhaul of the frontend application. the previous implementation, which concentrated most of the application's ui and logic within two monolithic components (editor.tsx and tokens.tsx), has been completely decomposed.

it moves to a scalable, feature-centric, page-based architecture. each primary application feature (e.g., transform, upload, tokens) now resides in its own self-contained directory under pages. this new structure improves code organization, separation of concerns, and developer experience, making it much easier to maintain and extend individual features without impacting others.

key changes

1. new page-based architecture

the core of this pr is the introduction of the pages directory. each feature now follows a consistent and predictable structure:

• pages/<feature>/<featurepage>.tsx: the main component and entry point for the feature.
• pages/<feature>/components/: a directory for child components that are specific to that feature page.
• pages/<feature>/lib.ts: a dedicated file to house all business logic, state management, and api interactions for the feature, completely decoupling logic from the ui.

2. feature migration to new pages

all major application functionalities have been rebuilt as independent pages following the new architecture:

• clear: pages/clear/clear.tsx
• export: pages/export/export.tsx
• transform: pages/transform/transform.tsx
• explore/load: pages/load/load.tsx (including d3 graph visualization)
• upload: pages/upload/upload.tsx
• tokens: pages/tokens/tokens.tsx

3. new foundational component library

to support the new pages, a comprehensive and reusable component library was included.

• ui primitives (components/ui/): a rich set of basic components has been added, including button, card, dialog, select, textfield, and many more.
• common components (components/common/): application-specific shared components like commandcard and mettaeditor were created to ensure a consistent look and feel across all pages.

4. new application shell (pages/index/)

a new primary application container has been implemented in pages/index/index.tsx. this component is responsible for the main layout, including the header, sidebar, and namespace selection, and serves as the host for all the individual feature pages.

5. deprecation and removal of monolithic components

as the final step of this migration, the original, oversized components have been removed, completing the transition to the new architecture.

• deleted: frontend/src/editor.tsx
• deleted: frontend/src/tokens.tsx

[vercel]

@DagmawiKK is attempting to deploy a commit to the timverhaegen's projects Team on Vercel.

A member of the Team first needs to authorize it.