Skip to content

Comments

UI updates#441

Merged
Blaumaus merged 8 commits intoswetrix-revampfrom
ui-updates
Dec 6, 2025
Merged

UI updates#441
Blaumaus merged 8 commits intoswetrix-revampfrom
ui-updates

Conversation

@Blaumaus
Copy link
Member

@Blaumaus Blaumaus commented Dec 5, 2025

Changes

Community Edition support

  • Your feature is implemented for the Swetrix Community Edition
  • This PR only updates the Cloud (Enterprise) Edition code (e.g. Paddle webhooks, blog, payouts, etc.)

Database migrations

  • Clickhouse / MySQL migrations added for this PR
  • No table schemas changed in this PR

Documentation

  • You have updated the documentation according to your PR
  • This PR did not change any publicly documented endpoints

Summary by CodeRabbit

  • New Features

    • Added project creation modal in the dashboard with name validation and organization selection
    • Introduced desktop sidebar for project navigation with collapsible tab groups
  • Refactor

    • Improved UI consistency with standardized text component styling across dashboard and project pages
    • Simplified project creation flow and navigation interactions

✏️ Tip: You can customize this high-level summary in your review settings.

@Blaumaus Blaumaus self-assigned this Dec 5, 2025
@coderabbitai
Copy link

coderabbitai bot commented Dec 5, 2025

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

This PR consolidates project creation into a modal-driven flow within the Dashboard component, removing the dedicated /projects/new route. It introduces a new Text UI component for consistent typography rendering across the codebase, replacing raw HTML elements. Additionally, a new ProjectSidebar component organizes project navigation tabs into collapsible groups.

Changes

Cohort / File(s) Summary
Text Component Introduction and Migration
web/app/ui/Text.tsx, web/app/modals/NewFunnel.tsx, web/app/pages/Dashboard/ProjectCard.tsx, web/app/pages/NotFound/index.tsx, web/app/pages/Organisations/NoOrganisations.tsx, web/app/pages/Organisations/OrganisationCard.tsx, web/app/pages/Organisations/Organisations.tsx, web/app/pages/Project/View/Panels.tsx, web/app/pages/Project/View/components/CurrentTime.tsx, web/app/pages/Project/View/components/Errors.tsx, web/app/pages/Project/View/components/FunnelsList.tsx, web/app/pages/Project/View/components/MetricCards.tsx, web/app/pages/Project/View/components/NoErrorDetails.tsx, web/app/pages/Project/View/components/NoEvents.tsx, web/app/pages/Project/View/components/NoSessionDetails.tsx, web/app/pages/Project/View/components/WaitingForAnEvent.tsx, web/app/pages/UserSettings/UserSettings.tsx, web/app/pages/UserSettings/components/NoOrganisations.tsx, web/app/pages/UserSettings/components/NoSharedProjects.tsx
Introduces new reusable Text component for configurable typography (size, weight, colour, truncate). Replaces raw HTML elements (p, h1-h3) with Text components across 19 files for consistent styling and semantic markup.
Project Creation Modal in Dashboard
web/app/pages/Dashboard/Dashboard.tsx, web/app/pages/Dashboard/AddProject.tsx, web/app/pages/Dashboard/NoProjects.tsx
Adds new project creation modal to Dashboard with name validation, organisation selection, loading state, error handling, and toast notifications. Updates AddProject and NoProjects components to use button-based onClick callback instead of Link-based navigation.
Project Creation Route Removal
web/app/pages/Project/New/index.tsx, web/app/routes/projects.new.tsx, web/app/utils/routes.ts, web/app/utils/server.ts
Removes dedicated /projects/new route file, its sitemap export, route constant, and page meta configuration. Project creation now handled exclusively via Dashboard modal.
Project Sidebar Component
web/app/pages/Project/View/components/ProjectSidebar.tsx
New component implementing collapsible grouped navigation for project tabs (Web Analytics, Product Analytics), managing active tab state, disabled state during loading, and settings link access control.
Project View Layout Update
web/app/pages/Project/View/ViewProject.tsx
Introduces ProjectSidebar into desktop layout as persistent left sidebar; replaces TabSelector with MobileTabSelector for mobile view. Adds Text component usage for dynamic titles and labels.
Constants and Configuration
web/app/pages/Onboarding/Onboarding.tsx, web/app/ui/Input.tsx, web/public/locales/en.json
Replaces imported MAX_PROJECT_NAME_LENGTH with local constant (50); adds ring-inset to Input focus styling; adds three new translation keys (webAnalytics, productAnalytics, revenueAnalytics).

Sequence Diagram

sequenceDiagram
    actor User
    participant Dashboard
    participant Modal as Project Modal
    participant API
    participant DB
    participant Toast

    User->>Dashboard: Click "New Project" button
    Dashboard->>Modal: Open modal (newProjectModalOpen = true)
    User->>Modal: Enter project name & organisation
    User->>Modal: Click Create button
    Modal->>Dashboard: Trigger onCreateProject()
    Dashboard->>Dashboard: Validate project name
    Dashboard->>Dashboard: Set loading state
    Dashboard->>API: POST createProject(name, organisationId)
    API->>DB: Insert new project
    DB-->>API: Project created
    API-->>Dashboard: Return success
    Dashboard->>API: Refetch projects list
    API->>DB: Query projects
    DB-->>API: Projects list
    API-->>Dashboard: Updated projects
    Dashboard->>Toast: Show success message
    Dashboard->>Dashboard: Track analytics (trackCustom)
    Dashboard->>Dashboard: Reset modal state & close
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

  • High-density logic in Dashboard.tsx: New project creation flow with validation, API integration, error handling, analytics tracking, and modal state management requires careful review of the submission logic and error boundaries.
  • Broad scope of Text component migration: 19 files undergo typography refactoring; while changes are repetitive and low-risk individually, the sheer number warrants verification that all replacements are correct and no edge cases are missed.
  • New ProjectSidebar component: Introduces collapsible groups and tab routing logic with conditional rendering based on user permissions and data loading states; requires validation of active tab highlighting and navigation behavior.
  • Route consolidation: Removal of /projects/new route and relocation of creation logic to Dashboard modal requires ensuring no broken references and that the modal properly handles all edge cases (e.g., multiple organisations, permissions).
  • Files warranting extra attention:
    • web/app/pages/Dashboard/Dashboard.tsx — Complex modal logic, API interaction, error handling
    • web/app/pages/Project/View/components/ProjectSidebar.tsx — New component with collapsible state and conditional routing
    • web/app/pages/Onboarding/Onboarding.tsx — Verify constant value (50) aligns with server-side validation

Poem

🐰 A modal springs forth where routes once grew,

Text components bloom, replacing old hue,

ProjectSidebar groups tabs with care,

Creation flows smooth through dashboard's lair,

Consolidated paths, analytics true!

Pre-merge checks and finishing touches

❌ Failed checks (1 warning, 1 inconclusive)
Check name Status Explanation Resolution
Description check ⚠️ Warning The pull request description is incomplete. While it references issue #436 and addresses the database/documentation checkboxes, it lacks a detailed explanation of what changes were made and why. Expand the 'Changes' section to describe the major modifications: Text component migration across pages, new project creation modal in dashboard, removal of /projects/new route, and other structural changes.
Title check ❓ Inconclusive The title 'UI updates' is vague and generic, using a non-descriptive term that fails to convey the specific nature of the changes made in this comprehensive pull request. Replace with a more specific title that reflects the main changes, such as 'Refactor dashboard and project pages to use Text component and move new project creation to dashboard modal' or similar.
✅ Passed checks (1 passed)
Check name Status Explanation
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@Blaumaus Blaumaus changed the title Move horizontal tabs to a vertical sidebar UI updates Dec 5, 2025
@Blaumaus Blaumaus marked this pull request as ready for review December 6, 2025 00:15
@Blaumaus
Copy link
Member Author

Blaumaus commented Dec 6, 2025

@coderabbitai review

@coderabbitai
Copy link

coderabbitai bot commented Dec 6, 2025

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (15)
web/app/pages/Onboarding/Onboarding.tsx (1)

27-27: Project name length handling is consistent but now locally defined

Using MAX_PROJECT_NAME_LENGTH for both validation and maxLength keeps this form self-consistent, but defining the limit locally risks divergence from any shared project-name constraints used elsewhere.

Consider reusing a shared constant (or adding a small comment here referencing the canonical limit) so onboarding and project settings stay in sync if the allowed length ever changes.

Also applies to: 151-165, 389-399

web/app/pages/UserSettings/UserSettings.tsx (1)

41-41: Headings migrated to Text correctly; consider future alignment for remaining headers

The new Text usages for the main title and shared-projects heading look correct and preserve the existing semantics. For longer-term consistency, you might eventually migrate the remaining <h3> headings in this file to Text as well, but this is not blocking.

Also applies to: 385-388, 432-434

web/app/pages/UserSettings/components/NoOrganisations.tsx (1)

3-4: Adjust heading level to avoid nested h2 under an h3

This message is rendered inside the “Organisations” section, which already has an <h3> heading in UserSettings.tsx. Using Text as='h2' here creates a heading level jump. Consider using a less prominent level or body text, e.g.:

-        <Text as='h2' size='2xl' className='mb-4 text-center leading-snug'>
+        <Text as='p' size='lg' className='mb-4 text-center leading-snug'>

(or as='h4' if you still want it treated as a subheading).

Also applies to: 10-13

web/app/pages/Project/View/Panels.tsx (2)

35-36: Error boundary text migrated to Text component; consider i18n later

Using Text for the error copy in ExtensionErrorBoundary standardizes styling and keeps semantics (as='p', colour='error'). When you revisit this area, consider moving the hard‑coded English strings into the i18n layer to align with the rest of the UI.

Also applies to: 94-105


755-773: Good use of Text in metadata tab; consider tooltip for truncated values

The switch to Text for the “no param data” message, column headers, and row labels looks consistent and non‑breaking. For the event/property label:

<Text size='sm' truncate>
  {ev}
</Text>

users may lose access to long names once truncated. Adding a tooltip via title would preserve readability:

-                    <Text size='sm' truncate>
-                      {ev}
-                    </Text>
+                    <Text size='sm' truncate title={ev}>
+                      {ev}
+                    </Text>

Also applies to: 805-823

web/app/pages/Project/View/components/Errors.tsx (1)

12-13: Typography refactor looks good; remove redundant font weight on wrapper

Migrating the error name, filename, message, and count to Text standardizes styling and keeps semantics. The wrapper <p> around the name still has font-semibold while the inner <Text> uses weight='bold', so the wrapper weight class is redundant. You can safely drop it:

-            <p className='flex items-center gap-x-2 leading-6 font-semibold'>
+            <p className='flex items-center gap-x-2 leading-6'>

Also applies to: 75-83, 88-91, 106-110

web/app/ui/Text.tsx (1)

1-66: Text implementation is solid; consider a generic polymorphic typing for better DX

The component correctly centralizes typography concerns (size/weight/colour/truncation) and forwards arbitrary props to the rendered element. From a type-safety/ergonomics perspective, you might want to evolve this to a generic polymorphic component so DOM props are inferred from as, e.g.:

type TextElement = keyof JSX.IntrinsicElements

type TextOwnProps<C extends TextElement> = {
  as?: C
  size?: TextSize
  weight?: TextWeight
  colour?: TextColour
  truncate?: boolean
  className?: string
  children: React.ReactNode
}

type TextProps<C extends TextElement = 'span'> = TextOwnProps<C> &
  Omit<React.ComponentPropsWithoutRef<C>, keyof TextOwnProps<C>>

export const Text = <C extends TextElement = 'span'>({
  as,
  children,
  size = 'base',
  weight = 'normal',
  colour = 'primary',
  truncate,
  className,
  ...props
}: TextProps<C>) => {
  const Component = as || 'span'
  return (
    <Component
      className={cn(sizeClasses[size], weightClasses[weight], colourClasses[colour], { truncate }, className)}
      {...props}
    >
      {children}
    </Component>
  )
}

This keeps the current runtime behavior but gives consumers proper IntelliSense and type‑checked attributes for the chosen element.

web/app/pages/Project/View/components/MetricCards.tsx (1)

13-14: Metric cards typography refactor is fine; consider label colour and a11y tweak

The move to Text for metric values and labels (including the select dropdown) is consistent and keeps layout intact. Two optional refinements:

  1. Label colour parity – if the previous labels were using a more muted grey, you might want to explicitly set:

    <Text size='sm' weight='bold' colour='secondary'>

    (or colour='muted') to preserve that visual hierarchy instead of defaulting to the primary colour.

  2. Clickable select label – the select trigger is still a <span> with onClick. For keyboard/a11y, consider making it a <button> with appropriate focus styles and aria-expanded instead of a plain span.

Also applies to: 76-82, 88-91, 121-127, 139-140, 147-149, 165-169

web/app/pages/Project/View/ViewProject.tsx (2)

3230-3250: MobileTabSelector tab switching logic looks sound, but consider undefined active label edge case

The selector correctly special‑cases the settings pseudo‑tab and delegates the rest to setDashboardTab, so navigation stays in sync with URL state. One minor edge case: when projectQueryTabs filters out the current activeTab, activeTabLabel and selectedItem will be undefined, so the dropdown renders without a selected value until the user picks a tab. That’s acceptable, but if you want a slightly smoother UX you could default title/selectedItem back to the first available tab when no match is found.


3274-3297: Sidebar + main-content layout is duplicated across several branches

The new desktop ProjectSidebar + main content structure is repeated in the locked, “no data yet”, “no error data”, and main render branches. This works functionally, but it will be easy to miss one branch when tweaking layout or padding later.

Consider extracting a small wrapper (e.g. ProjectLayout) that takes children for the main content and reuses the sidebar wiring (tabs, activeTab, setDashboardTab, etc.). That keeps all layout changes in one place without altering behavior.

Also applies to: 3308-3331, 3346-3368, 3410-3425

web/app/pages/Project/View/components/ProjectSidebar.tsx (3)

70-79: Simplify the expand-on-active effect to avoid disabling exhaustive-deps

The useEffect currently depends only on hasActiveTab and suppresses the exhaustive‑deps rule, even though it reads isExpanded:

React.useEffect(() => {
  if (hasActiveTab && !isExpanded) {
    setIsExpanded(true)
  }
}, [hasActiveTab]) // eslint-disable-line react-hooks/exhaustive-deps

You can drop the !isExpanded check and rely on React’s no‑op state update behavior, which lets you remove the lint disable entirely:

- React.useEffect(() => {
-   if (hasActiveTab && !isExpanded) {
-     setIsExpanded(true)
-   }
- }, [hasActiveTab]) // eslint-disable-line react-hooks/exhaustive-deps
+ React.useEffect(() => {
+   if (hasActiveTab) {
+     setIsExpanded(true)
+   }
+ }, [hasActiveTab])

This keeps the intent (“ensure the active group is open”) while staying hook‑lint‑clean.


114-157: Link handling and loading state in CollapsibleGroup are correct; consider small a11y enhancements

The pattern of:

  • Building tabUrl from searchParams for analytics tabs,
  • Letting the settings tab navigate directly to routes.project_settings,
  • Short‑circuiting onTabChange when dataLoading is true,

all looks consistent and should avoid accidental tab switches mid‑load.

Two optional improvements:

  1. Add aria-expanded to the group toggle button and aria-controls linking it to the collapsible <nav> for better screen‑reader support.
  2. Since settings is not currently in any TabGroup, the special‑case logic for tab.id === 'settings' inside CollapsibleGroup is unused; you can either keep it as future‑proofing or remove it until a group actually includes that tab.

176-209: Grouping tabs into web/product analytics is straightforward but tightly coupled to PROJECT_TABS

The grouping logic correctly partitions the incoming tabs into webAnalytics and productAnalytics using PROJECT_TABS.* values. This works with the current tab set, but it does mean any new tab IDs will be invisible in the sidebar until this switch is updated.

If you expect more categories later, consider encoding the group ID alongside each tab in the calling code and building tabGroups from that metadata instead of hard‑coding membership here. For now, behavior is fine as‑is.

web/app/pages/Dashboard/Dashboard.tsx (2)

47-49: Project name validation mostly mirrors settings, but consider trimming and aligning with DEFAULT_PROJECT_NAME behavior

The new constants and validateProjectName cover “required” and max‑length constraints, which is good. A couple of minor inconsistencies to watch:

  • submitDisabled={!newProjectName} means the user can’t submit when the input is empty, so the DEFAULT_PROJECT_NAME fallback is effectively unreachable. Either drop the fallback or relax submitDisabled if you genuinely want unnamed projects to default to “Untitled Project”.
  • validateProjectName checks _isEmpty(newProjectName) and _size(newProjectName) without trimming. A name of just spaces will pass validation and bypass the fallback. Trimming before validation and before passing the value to createProject would give cleaner data.

Both are easy to adjust and keep the dashboard modal behavior in line with project settings.

Also applies to: 111-131


643-685: New project Modal wiring is solid; consider clearing errors on input change

The modal is wired correctly:

  • isLoading/onSubmit/submitDisabled all point at the new creation flow.
  • Input shows validation/server errors only after the first submit via newProjectBeenSubmitted.
  • Organisation Select is shown only when there are multiple eligible orgs, with a “not set” option.

One small UX improvement: clear newProjectError when the user edits newProjectName or changes organisation, so stale server errors disappear as soon as they adjust the form:

onChange={(e) => {
-  setNewProjectName(e.target.value)
+  setNewProjectName(e.target.value)
+  if (newProjectError) setNewProjectError(null)
}}

Not required for correctness but makes the form feel less “stuck” after a failed attempt.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 86409d9 and c0abe2b.

📒 Files selected for processing (31)
  • web/app/modals/NewFunnel.tsx (2 hunks)
  • web/app/pages/Dashboard/AddProject.tsx (3 hunks)
  • web/app/pages/Dashboard/Dashboard.tsx (9 hunks)
  • web/app/pages/Dashboard/NoProjects.tsx (2 hunks)
  • web/app/pages/Dashboard/ProjectCard.tsx (3 hunks)
  • web/app/pages/NotFound/index.tsx (2 hunks)
  • web/app/pages/Onboarding/Onboarding.tsx (1 hunks)
  • web/app/pages/Organisations/NoOrganisations.tsx (2 hunks)
  • web/app/pages/Organisations/OrganisationCard.tsx (2 hunks)
  • web/app/pages/Organisations/Organisations.tsx (4 hunks)
  • web/app/pages/Project/New/index.tsx (0 hunks)
  • web/app/pages/Project/View/Panels.tsx (6 hunks)
  • web/app/pages/Project/View/ViewProject.tsx (9 hunks)
  • web/app/pages/Project/View/components/CurrentTime.tsx (3 hunks)
  • web/app/pages/Project/View/components/Errors.tsx (3 hunks)
  • web/app/pages/Project/View/components/FunnelsList.tsx (3 hunks)
  • web/app/pages/Project/View/components/MetricCards.tsx (4 hunks)
  • web/app/pages/Project/View/components/NoErrorDetails.tsx (2 hunks)
  • web/app/pages/Project/View/components/NoEvents.tsx (3 hunks)
  • web/app/pages/Project/View/components/NoSessionDetails.tsx (2 hunks)
  • web/app/pages/Project/View/components/ProjectSidebar.tsx (1 hunks)
  • web/app/pages/Project/View/components/WaitingForAnEvent.tsx (3 hunks)
  • web/app/pages/UserSettings/UserSettings.tsx (3 hunks)
  • web/app/pages/UserSettings/components/NoOrganisations.tsx (1 hunks)
  • web/app/pages/UserSettings/components/NoSharedProjects.tsx (1 hunks)
  • web/app/routes/projects.new.tsx (0 hunks)
  • web/app/ui/Input.tsx (1 hunks)
  • web/app/ui/Text.tsx (1 hunks)
  • web/app/utils/routes.ts (0 hunks)
  • web/app/utils/server.ts (0 hunks)
  • web/public/locales/en.json (1 hunks)
💤 Files with no reviewable changes (4)
  • web/app/routes/projects.new.tsx
  • web/app/utils/server.ts
  • web/app/utils/routes.ts
  • web/app/pages/Project/New/index.tsx
🧰 Additional context used
🧬 Code graph analysis (23)
web/app/pages/Project/View/components/NoSessionDetails.tsx (1)
web/app/ui/Text.tsx (1)
  • Text (50-66)
web/app/pages/Project/View/components/NoErrorDetails.tsx (1)
web/app/ui/Text.tsx (1)
  • Text (50-66)
web/app/pages/UserSettings/components/NoOrganisations.tsx (2)
web/app/pages/Organisations/NoOrganisations.tsx (1)
  • NoOrganisations (10-33)
web/app/ui/Text.tsx (1)
  • Text (50-66)
web/app/pages/Dashboard/ProjectCard.tsx (2)
web/app/ui/Text.tsx (1)
  • Text (50-66)
web/app/utils/generic.ts (1)
  • nFormatter (20-24)
web/app/modals/NewFunnel.tsx (1)
web/app/ui/Text.tsx (1)
  • Text (50-66)
web/app/pages/Organisations/NoOrganisations.tsx (1)
web/app/ui/Text.tsx (1)
  • Text (50-66)
web/app/pages/Dashboard/NoProjects.tsx (1)
web/app/ui/Text.tsx (1)
  • Text (50-66)
web/app/pages/Project/View/components/WaitingForAnEvent.tsx (1)
web/app/ui/Text.tsx (1)
  • Text (50-66)
web/app/pages/Project/View/components/Errors.tsx (1)
web/app/ui/Text.tsx (1)
  • Text (50-66)
web/app/pages/Project/View/components/NoEvents.tsx (1)
web/app/ui/Text.tsx (1)
  • Text (50-66)
web/app/ui/Text.tsx (1)
web/app/utils/generic.ts (1)
  • cn (150-152)
web/app/pages/Project/View/components/CurrentTime.tsx (1)
web/app/ui/Text.tsx (1)
  • Text (50-66)
web/app/pages/UserSettings/components/NoSharedProjects.tsx (1)
web/app/ui/Text.tsx (1)
  • Text (50-66)
web/app/pages/NotFound/index.tsx (1)
web/app/ui/Text.tsx (1)
  • Text (50-66)
web/app/pages/Project/View/components/FunnelsList.tsx (1)
web/app/ui/Text.tsx (1)
  • Text (50-66)
web/app/pages/Organisations/Organisations.tsx (1)
web/app/ui/Text.tsx (1)
  • Text (50-66)
web/app/pages/UserSettings/UserSettings.tsx (1)
web/app/ui/Text.tsx (1)
  • Text (50-66)
web/app/pages/Project/View/components/MetricCards.tsx (1)
web/app/ui/Text.tsx (1)
  • Text (50-66)
web/app/pages/Project/View/ViewProject.tsx (2)
web/app/lib/constants/index.ts (1)
  • PROJECT_TABS (490-492)
web/app/ui/Text.tsx (1)
  • Text (50-66)
web/app/pages/Dashboard/Dashboard.tsx (4)
web/app/lib/constants/index.ts (1)
  • isSelfhosted (399-399)
web/app/api/index.ts (1)
  • createProject (410-416)
web/app/utils/analytics.ts (1)
  • trackCustom (181-190)
web/app/ui/Text.tsx (1)
  • Text (50-66)
web/app/pages/Project/View/components/ProjectSidebar.tsx (2)
web/app/lib/constants/index.ts (1)
  • PROJECT_TABS (490-492)
web/app/ui/Text.tsx (1)
  • Text (50-66)
web/app/pages/Organisations/OrganisationCard.tsx (1)
web/app/ui/Text.tsx (1)
  • Text (50-66)
web/app/pages/Project/View/Panels.tsx (1)
web/app/ui/Text.tsx (1)
  • Text (50-66)
🔇 Additional comments (25)
web/app/ui/Input.tsx (1)

39-49: Input ring styling change looks good

Adding ring-inset is a safe, purely visual tweak and keeps the rest of the input behavior unchanged.

web/public/locales/en.json (1)

840-842: New analytics dashboard labels are well-placed

The added webAnalytics, productAnalytics, and revenueAnalytics keys are consistent with existing dashboard copy and JSON structure.

web/app/pages/Project/View/components/NoSessionDetails.tsx (1)

4-5: Typography migration to Text is clean

Replacing the raw h1/p with Text keeps semantics and styles aligned while standardising typography on the shared component.

Also applies to: 16-21

web/app/modals/NewFunnel.tsx (1)

13-14: Funnel steps label now uses shared Text component

Using Text here aligns the modal’s steps label with the new typography system without affecting validation or submit logic.

Also applies to: 92-94

web/app/pages/Dashboard/ProjectCard.tsx (1)

23-24: Dashboard card typography refactor is safe and consistent

Using Text for metric labels, totals, and project name centralises styling while preserving truncation and layout; the surrounding logic and data handling remain unchanged.

Also applies to: 51-63, 229-232

web/app/pages/Organisations/OrganisationCard.tsx (1)

17-18: Organisation name rendering updated to Text

Switching the organisation name to Text maintains truncation and semantics while aligning with the shared typography component used elsewhere.

Also applies to: 130-132

web/app/pages/Organisations/NoOrganisations.tsx (1)

4-5: Empty state now uses shared Text component

The NoOrganisations empty state correctly delegates heading and body styling to Text, keeping layout intact and centralising typography.

Also applies to: 14-23

web/app/pages/Project/View/components/NoErrorDetails.tsx (1)

4-5: Typography refactor is semantically safe and consistent

Using Text with as='h1'/as='p', explicit size/weight and colour='secondary' preserves heading semantics and improves consistency without changing behavior.

Also applies to: 16-21

web/app/pages/Project/View/components/NoEvents.tsx (1)

5-5: No-events layout now uses Text consistently; behavior unchanged

Title and body copy are correctly migrated to Text with appropriate as, size, and weight props in both branches, and the shared max-w-7xl wrapper keeps the two states visually aligned. Looks good from a semantics and layout perspective.

Also applies to: 23-29, 41-47

web/app/pages/Project/View/components/WaitingForAnEvent.tsx (1)

7-7: Waiting-for-event copy migrated cleanly to Text

The refactor to Text for the title and description keeps the structure and Trans behavior intact while delegating typography and theming to the shared component. No functional or accessibility regressions spotted.

Also applies to: 17-25

web/app/pages/Project/View/components/FunnelsList.tsx (1)

10-10: Funnel labels now use Text with correct semantics and truncation

Using Text for funnel.name (with as='p', weight='semibold', truncate) and for the “New Funnel” label (as a span) preserves previous behavior while centralizing typography. The surrounding navigation and click handlers remain unchanged.

Also applies to: 51-53, 110-112

web/app/pages/NotFound/index.tsx (1)

5-5: 404 page typography refactor keeps semantics and layout intact

The 404 label, title, and description are correctly migrated to Text with appropriate as, size, and weight values. Using colour='muted' for the description is a good fit, assuming it’s wired in colourClasses/TextProps; otherwise no behavioral changes are introduced.

Also applies to: 17-27

web/app/pages/Project/View/components/CurrentTime.tsx (1)

10-10: Current-time tooltip now leverages Text without altering logic

Wrapping the timezone line, helper hint, and trigger text in Text components (with appropriate size, weight, and colour) keeps the tooltip behavior and Trans markup intact while standardizing typography.

Also applies to: 31-36, 40-62

web/app/pages/UserSettings/components/NoSharedProjects.tsx (1)

3-13: Consistent adoption of Text for the empty‑state heading

Using <Text as='h2' size='2xl'> here keeps the semantic heading while centralizing typography in the shared component; layout and i18n usage remain unchanged.

web/app/pages/Organisations/Organisations.tsx (2)

24-25: Title rewritten to use Text without changing behavior

The main organisations heading now uses <Text as='h2' size='3xl' weight='bold'>, which matches the previous semantics while routing typography through the shared component; surrounding search toggle logic and layout remain intact.

Also applies to: 184-219


344-347: Error message uses Text with the correct semantic and colour

Rendering newOrganisationError via <Text as='p' size='sm' weight='medium' colour='error'> cleanly replaces the previous styled paragraph while preserving spacing and clearly signalling the error state.

web/app/pages/Project/View/Panels.tsx (2)

179-183: Panel header correctly uses Text for semantics and style

<Text as='h3' size='lg' weight='semibold'> preserves the heading level and prior visual weight while delegating colours and font sizing to the shared typography system; the icon and name composition is unchanged.


439-444: KV table “no data” message now uses shared typography

Returning a <Text as='p' size='base' colour='secondary'> for the empty state keeps the same UX while aligning with the new text system.

web/app/pages/Dashboard/AddProject.tsx (1)

7-8: Button-based trigger is appropriate; verify Tailwind class and call sites

Switching AddProject to a <button type='button'> with onClick: () => void matches the new modal‑driven flow and improves semantics over a link.

Two things to double‑check:

  1. Call sites – ensure all usages of AddProject have been updated to pass a zero‑arg callback (no longer rely on the click event).
  2. Tailwind classlg:min-h-auto isn’t part of core Tailwind; if you don’t have a custom utility for it, consider reverting to min-h-[auto] or another supported value to avoid the class being dropped at build time.

Also applies to: 16-18, 24-25, 39-39

web/app/pages/Dashboard/NoProjects.tsx (1)

6-7: Empty-state text and create-project trigger align with new patterns; confirm onClick usage

Both branches now render their copy via Text (as='h3' / as='p' with appropriate sizes/colours), and the “create project” action uses a semantic <button type='button'>, which fits the modal-based flow.

As with AddProject, please just confirm:

  • All NoProjects consumers have been updated to pass a zero‑argument onClick handler.
  • Any navigation previously handled via routing is now correctly wired in that handler.

Also applies to: 23-25, 32-41, 43-45, 50-50

web/app/pages/Project/View/ViewProject.tsx (1)

3447-3453: Text component usage for funnel heading and “no segments” label is consistent

Using Text as='h2' for the active funnel name and Text colour='secondary' for the non‑clickable “no segments yet” entry aligns with the new typography system and preserves semantics. Just ensure colour='secondary' is covered by colourClasses in ~/ui/Text (it appears to be, based on other usages in the PR).

Also applies to: 3517-3518

web/app/pages/Project/View/components/ProjectSidebar.tsx (1)

212-259: Project header and bottom settings link are wired correctly

Using Tooltip + Text as='h2' for the project name header and a separate sticky bottom Settings link (guarded by allowedToManage) keeps the sidebar focused and avoids mixing settings into the analytics groups. The icon color mapping via ICON_COLORS.settings is also consistent.

No functional issues spotted here.

web/app/pages/Dashboard/Dashboard.tsx (3)

189-211: New project trigger preserves email-activation gate and cleanly opens the modal

onNewProject still blocks inactive cloud users via showActivateEmailModal and otherwise only toggles newProjectModalOpen. This reuses the existing activation flow and avoids route-based navigation, which is exactly what you want with the new modal approach.

No issues here.


248-258: closeNewProjectModal correctly guards against closing mid-submit and resets state

The close handler’s early return when isNewProjectLoading is true plus the full reset of name, organisation, error, and “beenSubmitted” flag should prevent mid-flight closures and stale errors in subsequent opens.

This looks good.


425-461: Dashboard title refactor to Text is consistent with the new typography system

Replacing the raw <h2> with Text as='h2' size='3xl' weight='bold' keeps existing semantics while aligning this header with the shared typography component used elsewhere in the PR. The surrounding search-toggle controls are unchanged functionally.

No further changes needed here.

@Blaumaus Blaumaus merged commit 318761b into swetrix-revamp Dec 6, 2025
2 checks passed
This was referenced Dec 6, 2025
@coderabbitai coderabbitai bot mentioned this pull request Dec 14, 2025
6 tasks
This was referenced Feb 7, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant