feat: improve mobile UI and navigation#203
Conversation
Refactor RAG status badges to use the shared Badge component with colored backgrounds and dots for better visual consistency with the rest of the UI. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Introduces AdaptiveHeaderProvider and related components that display page titles in the mobile header slot, improving navigation on small screens. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Remove fixed min-width from date range picker - Add whitespace-nowrap to table date cells and document size column - Add focus-visible ring and z-index fix to navigation menu Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
📝 WalkthroughWalkthroughThis PR introduces a new adaptive header system with context-based state management across the platform. It replaces the previous PageHeader component with AdaptiveHeaderRoot/AdaptiveHeaderTitle in multiple layout files and adds a new adaptive-header.tsx component providing AdaptiveHeaderProvider, AdaptiveHeaderSlot, and supporting hooks. It refactors the RagStatusBadge to use Badge components instead of individual icons, updates document table presentation with whitespace handling and column sizing, enhances automation components with responsive design improvements and minimap resizing logic, and applies minor styling adjustments including focus-visible ring styling to navigation and spacing reductions across data tables. New translation keys are added for sidebar panel actions. Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Possibly related PRs
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
services/platform/app/(app)/dashboard/[id]/automations/layout.tsx (1)
99-109: Missing keyboard handler for interactive element.The "Automations" prefix span has
role="button"andtabIndex={0}but lacks anonKeyDownhandler. Keyboard users cannot activate this control. Compare with lines 116-121 which properly handle keyboard interaction.♿ Proposed fix
<span role="button" tabIndex={0} onClick={handleClickAutomation} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + handleClickAutomation(); + } + }} className={cn( 'hidden md:inline text-foreground', automation?.name && 'text-muted-foreground cursor-pointer', )} >Alternatively, as the static analysis suggests, consider using a semantic
<button>element styled to appear inline.
🤖 Fix all issues with AI agents
In @.claude/CLAUDE.md:
- Line 3: The line incorrectly advises "USE turbo" but shows npm workspace
syntax and wrong workspace names; update it to show correct Turborepo usage and
workspace naming by replacing the example with either: use "turbo run <script>"
or "turbo run <script> --filter=services/<workspace>" (example: turbo run lint
--filter=services/platform), or if you prefer npm workspaces note that ad-hoc
npm commands use "npm run <script> --workspace=services/<workspace>" and replace
all occurrences of @tale/<workspace> with services/<workspace>.
In
@services/platform/app/(app)/dashboard/[id]/(knowledge)/documents/components/rag-status-badge.tsx:
- Around line 105-121: The JSX assigned to the RetryButton variable should be
extracted into a proper React component to avoid reconcilation issues—create a
functional component named RetryButton (accepting no props or props for
isRetrying, documentId, handleRetry if needed) that returns the Button JSX using
the existing symbols (handleRetry, isRetrying, documentId, t, Loader2,
RotateCw), then replace every usage of the variable {RetryButton} with the
component invocation <RetryButton /> so React treats it as a normal element and
updates properly.
In
@services/platform/app/(app)/dashboard/[id]/automations/components/automation-steps.tsx:
- Around line 123-127: Remove the dead state by deleting the useState call that
declares showActiveBanner and setShowActiveBanner (i.e., remove "const
[showActiveBanner, setShowActiveBanner] = useState(true);") and any references
to those identifiers; keep the minimapDimensions state intact and ensure imports
remain correct (no other changes needed if only those identifiers were unused).
In @services/platform/components/ui/navigation/navigation-menu.tsx:
- Around line 39-41: Update the class list passed to the cva call in
navigationMenuTriggerStyle to include the focus-visible:ring-offset-background
utility so the focus ring offset color follows the theme; locate the cva
invocation named navigationMenuTriggerStyle and append
"focus-visible:ring-offset-background" to its existing class string (preserving
the other utilities and spacing).
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro (Legacy)
📒 Files selected for processing (19)
.claude/CLAUDE.mdservices/platform/app/(app)/dashboard/[id]/(knowledge)/documents/components/document-table.tsxservices/platform/app/(app)/dashboard/[id]/(knowledge)/documents/components/rag-status-badge.tsxservices/platform/app/(app)/dashboard/[id]/(knowledge)/layout.tsxservices/platform/app/(app)/dashboard/[id]/approvals/layout.tsxservices/platform/app/(app)/dashboard/[id]/automations/components/automation-navigation.tsxservices/platform/app/(app)/dashboard/[id]/automations/components/automation-sidepanel.tsxservices/platform/app/(app)/dashboard/[id]/automations/components/automation-steps.tsxservices/platform/app/(app)/dashboard/[id]/automations/layout.tsxservices/platform/app/(app)/dashboard/[id]/conversations/layout.tsxservices/platform/app/(app)/dashboard/[id]/layout.tsxservices/platform/app/(app)/dashboard/[id]/settings/layout.tsxservices/platform/components/layout/adaptive-header.tsxservices/platform/components/ui/data-table/data-table-skeleton.tsxservices/platform/components/ui/data-table/data-table.tsxservices/platform/components/ui/date-range-picker.tsxservices/platform/components/ui/navigation/navigation-menu.tsxservices/platform/components/ui/table-date-cell.tsxservices/platform/messages/en.json
🧰 Additional context used
🧠 Learnings (41)
📓 Common learnings
Learnt from: larryro
Repo: tale-project/tale PR: 26
File: services/platform/app/(app)/dashboard/[id]/(knowledge)/documents/components/rag-status-badge.tsx:82-92
Timestamp: 2025-12-19T04:29:09.246Z
Learning: In services/platform/app/(app)/dashboard/[id]/(knowledge)/documents/components/rag-status-badge.tsx, the team prefers using router.refresh() for polling in-progress RAG statuses over targeted status fetching, prioritizing simplicity and state consistency given the expected low number of concurrent indexing jobs (1-3 documents).
Learnt from: CR
Repo: tale-project/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-11-25T04:37:44.394Z
Learning: Applies to **/*.{tsx,jsx} : ALWAYS use the Table component (`Table`, `TableHeader`, `TableBody`, `TableRow`, `TableHead`, `TableCell`) instead of custom flex layouts; apply proper column widths using rem units and use semantic colors for all text and backgrounds
Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-10-01T17:12:39.508Z
Learning: Applies to **/*.tsx : Use Table, TableHeader, TableBody, TableRow, TableHead, and TableCell components for tables
📚 Learning: 2025-07-19T15:30:00.886Z
Learnt from: CR
Repo: talecorp/poc PR: 0
File: .cursor/rules/core-rules.mdc:0-0
Timestamp: 2025-07-19T15:30:00.886Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Extract reusable functions, add comprehensive error handling, improve naming and documentation, and remove temporary debug code during optimization
Applied to files:
.claude/CLAUDE.mdservices/platform/app/(app)/dashboard/[id]/automations/components/automation-steps.tsx
📚 Learning: 2025-07-19T15:29:09.401Z
Learnt from: CR
Repo: talecorp/poc PR: 0
File: .cursorrules:0-0
Timestamp: 2025-07-19T15:29:09.401Z
Learning: Applies to app/components/**/*.{js,jsx,ts,tsx} : Follow the required component structure: 'use client' only when needed, import hooks at the top, define Props interface, use hooks first, effects second, event handlers third, and render last.
Applied to files:
.claude/CLAUDE.mdservices/platform/app/(app)/dashboard/[id]/automations/layout.tsxservices/platform/app/(app)/dashboard/[id]/(knowledge)/documents/components/rag-status-badge.tsxservices/platform/components/layout/adaptive-header.tsx
📚 Learning: 2025-11-25T04:37:44.394Z
Learnt from: CR
Repo: tale-project/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-11-25T04:37:44.394Z
Learning: Applies to **/*.{tsx,jsx} : ALWAYS use the Table component (`Table`, `TableHeader`, `TableBody`, `TableRow`, `TableHead`, `TableCell`) instead of custom flex layouts; apply proper column widths using rem units and use semantic colors for all text and backgrounds
Applied to files:
.claude/CLAUDE.mdservices/platform/components/ui/table-date-cell.tsxservices/platform/components/ui/data-table/data-table.tsxservices/platform/app/(app)/dashboard/[id]/(knowledge)/documents/components/document-table.tsx
📚 Learning: 2025-11-25T04:37:44.394Z
Learnt from: CR
Repo: tale-project/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-11-25T04:37:44.394Z
Learning: Applies to **/*.{tsx,jsx} : NEVER use hardcoded colors like `text-gray-500`, `bg-gray-100`, `border-gray-200`; ALWAYS use design system semantic colors: `text-foreground` for primary text, `text-muted-foreground` for secondary text, `bg-background` for main backgrounds, `bg-muted` for subtle backgrounds and hover states, `border-border` for borders
Applied to files:
.claude/CLAUDE.md
📚 Learning: 2025-10-11T11:46:02.452Z
Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursorrules:0-0
Timestamp: 2025-10-11T11:46:02.452Z
Learning: Applies to **/*.tsx : Follow the required client component structure: imports, Props interface, hooks, effects, handlers, and render order; include 'use client' only when needed
Applied to files:
.claude/CLAUDE.mdservices/platform/app/(app)/dashboard/[id]/automations/layout.tsxservices/platform/app/(app)/dashboard/[id]/(knowledge)/documents/components/rag-status-badge.tsxservices/platform/components/layout/adaptive-header.tsx
📚 Learning: 2025-07-19T15:29:09.401Z
Learnt from: CR
Repo: talecorp/poc PR: 0
File: .cursorrules:0-0
Timestamp: 2025-07-19T15:29:09.401Z
Learning: Applies to **/*.{js,jsx,ts,tsx,md,mdx,json} : All user-facing content must be in English only, including UI components, labels, buttons, dialogs, forms, toast messages, error messages, success messages, comments, documentation, README files, variable names, function names, and type names. Only use other languages when explicitly requested for translation content.
Applied to files:
.claude/CLAUDE.md
📚 Learning: 2025-12-26T02:23:20.245Z
Learnt from: larryro
Repo: tale-project/tale PR: 35
File: services/platform/app/(app)/dashboard/[id]/chat/components/integration-approval-card.tsx:58-90
Timestamp: 2025-12-26T02:23:20.245Z
Learning: In services/platform/app/(app)/dashboard/[id]/chat/components/integration-approval-card.tsx, prefer reading the approving user from the authenticated session context rather than passing a userId from the frontend. The hardcoded 'user' string can be acceptable only as a temporary placeholder during the initial implementation until a user profile feature is added; plan to replace with proper user identity via session context or user service once backend supports it.
Applied to files:
services/platform/app/(app)/dashboard/[id]/layout.tsxservices/platform/components/ui/table-date-cell.tsxservices/platform/app/(app)/dashboard/[id]/automations/components/automation-navigation.tsxservices/platform/app/(app)/dashboard/[id]/automations/layout.tsxservices/platform/components/ui/data-table/data-table.tsxservices/platform/components/ui/date-range-picker.tsxservices/platform/app/(app)/dashboard/[id]/automations/components/automation-sidepanel.tsxservices/platform/app/(app)/dashboard/[id]/automations/components/automation-steps.tsxservices/platform/app/(app)/dashboard/[id]/(knowledge)/layout.tsxservices/platform/app/(app)/dashboard/[id]/(knowledge)/documents/components/rag-status-badge.tsxservices/platform/app/(app)/dashboard/[id]/settings/layout.tsxservices/platform/components/ui/navigation/navigation-menu.tsxservices/platform/components/layout/adaptive-header.tsxservices/platform/components/ui/data-table/data-table-skeleton.tsxservices/platform/app/(app)/dashboard/[id]/(knowledge)/documents/components/document-table.tsxservices/platform/app/(app)/dashboard/[id]/conversations/layout.tsxservices/platform/app/(app)/dashboard/[id]/approvals/layout.tsx
📚 Learning: 2025-10-01T17:12:39.508Z
Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-10-01T17:12:39.508Z
Learning: Applies to **/*.tsx : Always use the Table component instead of custom flex layouts for tabular data
Applied to files:
services/platform/components/ui/table-date-cell.tsxservices/platform/components/ui/data-table/data-table.tsxservices/platform/app/(app)/dashboard/[id]/(knowledge)/documents/components/document-table.tsx
📚 Learning: 2025-10-01T17:12:39.508Z
Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-10-01T17:12:39.508Z
Learning: Applies to **/*.tsx : Apply column widths in tables using rem units
Applied to files:
services/platform/components/ui/table-date-cell.tsxservices/platform/app/(app)/dashboard/[id]/(knowledge)/documents/components/document-table.tsx
📚 Learning: 2025-10-01T17:12:39.508Z
Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-10-01T17:12:39.508Z
Learning: Applies to **/*.tsx : Use semantic design-system colors for all text and backgrounds within tables
Applied to files:
services/platform/components/ui/table-date-cell.tsx
📚 Learning: 2025-10-01T17:12:39.508Z
Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-10-01T17:12:39.508Z
Learning: Applies to **/*.tsx : Use Table, TableHeader, TableBody, TableRow, TableHead, and TableCell components for tables
Applied to files:
services/platform/components/ui/table-date-cell.tsxservices/platform/app/(app)/dashboard/[id]/(knowledge)/layout.tsxservices/platform/app/(app)/dashboard/[id]/(knowledge)/documents/components/document-table.tsx
📚 Learning: 2025-11-25T04:37:44.394Z
Learnt from: CR
Repo: tale-project/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-11-25T04:37:44.394Z
Learning: Applies to **/*.{tsx,jsx} : Use semantic spacing classes when available: `p-1` for 4px, `p-2` for 8px, `m-1` for 4px, `m-2` for 8px
Applied to files:
services/platform/components/ui/table-date-cell.tsxservices/platform/components/ui/data-table/data-table.tsxservices/platform/components/ui/date-range-picker.tsxservices/platform/components/ui/data-table/data-table-skeleton.tsx
📚 Learning: 2025-11-25T04:37:44.394Z
Learnt from: CR
Repo: tale-project/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-11-25T04:37:44.394Z
Learning: Applies to **/*.{tsx,jsx} : Use `leading-normal` instead of `leading-[normal]` in Tailwind classes
Applied to files:
services/platform/components/ui/table-date-cell.tsx
📚 Learning: 2025-10-01T17:12:39.508Z
Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-10-01T17:12:39.508Z
Learning: Applies to **/*.tsx : Use text-muted-foreground for secondary text instead of text-gray-500 or text-gray-600
Applied to files:
services/platform/components/ui/table-date-cell.tsx
📚 Learning: 2025-12-19T04:29:09.246Z
Learnt from: larryro
Repo: tale-project/tale PR: 26
File: services/platform/app/(app)/dashboard/[id]/(knowledge)/documents/components/rag-status-badge.tsx:82-92
Timestamp: 2025-12-19T04:29:09.246Z
Learning: In services/platform/app/(app)/dashboard/[id]/(knowledge)/documents/components/rag-status-badge.tsx, the team prefers using router.refresh() for polling in-progress RAG statuses over targeted status fetching, prioritizing simplicity and state consistency given the expected low number of concurrent indexing jobs (1-3 documents).
Applied to files:
services/platform/app/(app)/dashboard/[id]/automations/components/automation-navigation.tsxservices/platform/app/(app)/dashboard/[id]/(knowledge)/layout.tsxservices/platform/app/(app)/dashboard/[id]/(knowledge)/documents/components/rag-status-badge.tsxservices/platform/app/(app)/dashboard/[id]/(knowledge)/documents/components/document-table.tsx
📚 Learning: 2025-07-03T08:43:49.346Z
Learnt from: CR
Repo: talecorp/poc PR: 0
File: .cursor/rules/next-best-practice.mdc:0-0
Timestamp: 2025-07-03T08:43:49.346Z
Learning: Applies to **/*.{tsx,jsx} : Use proper navigation with `useRouter` and `Link` components
Applied to files:
services/platform/app/(app)/dashboard/[id]/automations/components/automation-navigation.tsxservices/platform/app/(app)/dashboard/[id]/automations/layout.tsxservices/platform/app/(app)/dashboard/[id]/(knowledge)/layout.tsx
📚 Learning: 2025-11-25T04:37:44.394Z
Learnt from: CR
Repo: tale-project/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-11-25T04:37:44.394Z
Learning: Applies to **/*.{tsx,jsx} : Use standard font size classes instead of arbitrary values: `text-xs` for 12px, `text-sm` for 14px, `text-base` for 16px, `text-lg` for 18px, `text-xl` for 20px, `text-2xl` for 24px
Applied to files:
services/platform/components/ui/date-range-picker.tsx
📚 Learning: 2025-10-01T17:12:39.508Z
Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-10-01T17:12:39.508Z
Learning: Applies to **/*.tsx : Convert pixel-based width/height utilities to rem using a 16px base (e.g., w-[278px] → w-[17.375rem])
Applied to files:
services/platform/components/ui/date-range-picker.tsx
📚 Learning: 2025-10-01T17:12:39.508Z
Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-10-01T17:12:39.508Z
Learning: Applies to **/*.tsx : Replace m-[8px] with m-2
Applied to files:
services/platform/components/ui/date-range-picker.tsx
📚 Learning: 2025-10-01T17:12:39.508Z
Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-10-01T17:12:39.508Z
Learning: Applies to **/*.tsx : Replace text-[14px] with text-sm
Applied to files:
services/platform/components/ui/date-range-picker.tsx
📚 Learning: 2025-10-01T17:12:39.508Z
Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-10-01T17:12:39.508Z
Learning: Applies to **/*.tsx : Replace m-[4px] with m-1
Applied to files:
services/platform/components/ui/date-range-picker.tsxservices/platform/components/ui/data-table/data-table-skeleton.tsx
📚 Learning: 2025-10-01T17:12:39.508Z
Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-10-01T17:12:39.508Z
Learning: Applies to **/*.tsx : Replace text-[12px] with text-xs
Applied to files:
services/platform/components/ui/date-range-picker.tsx
📚 Learning: 2025-11-25T04:37:44.394Z
Learnt from: CR
Repo: tale-project/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-11-25T04:37:44.394Z
Learning: Applies to **/*.{tsx,jsx} : Convert pixel values to rem using the 16px base for width and height measurements (e.g., `w-[278px]` → `w-[17.375rem]`, `h-[48px]` → `h-[3rem]`, `min-w-[120px]` → `min-w-[7.5rem]`, `max-w-[400px]` → `max-w-[25rem]`)
Applied to files:
services/platform/components/ui/date-range-picker.tsx
📚 Learning: 2025-08-21T14:59:36.874Z
Learnt from: CR
Repo: talecorp/lanserhof PR: 0
File: .cursorrules:0-0
Timestamp: 2025-08-21T14:59:36.874Z
Learning: Applies to {app,components}/**/*.{tsx,jsx} : Use 'use client' only when needed for interactions/state (client components)
Applied to files:
services/platform/app/(app)/dashboard/[id]/(knowledge)/documents/components/rag-status-badge.tsx
📚 Learning: 2025-10-11T11:46:02.452Z
Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursorrules:0-0
Timestamp: 2025-10-11T11:46:02.452Z
Learning: Applies to **/*.{tsx,jsx} : Use 'use client' only for components that need interactions or state
Applied to files:
services/platform/app/(app)/dashboard/[id]/(knowledge)/documents/components/rag-status-badge.tsx
📚 Learning: 2025-07-03T08:43:49.346Z
Learnt from: CR
Repo: talecorp/poc PR: 0
File: .cursor/rules/next-best-practice.mdc:0-0
Timestamp: 2025-07-03T08:43:49.346Z
Learning: Applies to app/**/*.tsx : Use client components only for user interactions, browser APIs, and state management
Applied to files:
services/platform/app/(app)/dashboard/[id]/(knowledge)/documents/components/rag-status-badge.tsx
📚 Learning: 2025-11-30T12:29:39.745Z
Learnt from: CR
Repo: tale-project/poc2 PR: 0
File: .cursor/rules/workspace_rules.mdc:0-0
Timestamp: 2025-11-30T12:29:39.745Z
Learning: Applies to **/*.{tsx,jsx} : Use `'use client'` directive only for components that require interactions or state management
Applied to files:
services/platform/app/(app)/dashboard/[id]/(knowledge)/documents/components/rag-status-badge.tsx
📚 Learning: 2025-08-21T15:01:09.405Z
Learnt from: CR
Repo: talecorp/lanserhof PR: 0
File: .cursor/rules/core-rules.mdc:0-0
Timestamp: 2025-08-21T15:01:09.405Z
Learning: Applies to **/*.{tsx,jsx} : 'use client' directive only when needed at the top of client components
Applied to files:
services/platform/app/(app)/dashboard/[id]/(knowledge)/documents/components/rag-status-badge.tsx
📚 Learning: 2025-07-19T15:29:09.401Z
Learnt from: CR
Repo: talecorp/poc PR: 0
File: .cursorrules:0-0
Timestamp: 2025-07-19T15:29:09.401Z
Learning: Applies to app/**/*.{js,jsx,ts,tsx} : Use 'use client' directive only for components that require interactions or state (client components).
Applied to files:
services/platform/app/(app)/dashboard/[id]/(knowledge)/documents/components/rag-status-badge.tsx
📚 Learning: 2025-07-19T15:30:00.886Z
Learnt from: CR
Repo: talecorp/poc PR: 0
File: .cursor/rules/core-rules.mdc:0-0
Timestamp: 2025-07-19T15:30:00.886Z
Learning: Applies to **/*.{tsx,jsx} : Follow the required React component structure: 'use client' (when needed), imports, Props interface, function definition, hooks, effects, event handlers, and render in order
Applied to files:
services/platform/app/(app)/dashboard/[id]/(knowledge)/documents/components/rag-status-badge.tsxservices/platform/components/layout/adaptive-header.tsx
📚 Learning: 2025-08-21T14:59:36.874Z
Learnt from: CR
Repo: talecorp/lanserhof PR: 0
File: .cursorrules:0-0
Timestamp: 2025-08-21T14:59:36.874Z
Learning: Applies to app/**/page.tsx : Next.js App Router pages (page.tsx) are server components by default
Applied to files:
services/platform/app/(app)/dashboard/[id]/settings/layout.tsxservices/platform/app/(app)/dashboard/[id]/approvals/layout.tsx
📚 Learning: 2025-11-30T12:29:39.745Z
Learnt from: CR
Repo: tale-project/poc2 PR: 0
File: .cursor/rules/workspace_rules.mdc:0-0
Timestamp: 2025-11-30T12:29:39.745Z
Learning: Applies to **/app/**/page.tsx : Use `page.tsx` for server components by default in Next.js App Router
Applied to files:
services/platform/app/(app)/dashboard/[id]/settings/layout.tsxservices/platform/app/(app)/dashboard/[id]/approvals/layout.tsx
📚 Learning: 2025-10-11T11:46:02.452Z
Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursorrules:0-0
Timestamp: 2025-10-11T11:46:02.452Z
Learning: Applies to app/**/page.tsx : In App Router, page.tsx components are server components by default
Applied to files:
services/platform/app/(app)/dashboard/[id]/settings/layout.tsxservices/platform/app/(app)/dashboard/[id]/approvals/layout.tsx
📚 Learning: 2025-07-19T15:29:09.401Z
Learnt from: CR
Repo: talecorp/poc PR: 0
File: .cursorrules:0-0
Timestamp: 2025-07-19T15:29:09.401Z
Learning: Applies to **/page.tsx : In Next.js App Router, `page.tsx` files must be server components by default.
Applied to files:
services/platform/app/(app)/dashboard/[id]/settings/layout.tsxservices/platform/app/(app)/dashboard/[id]/approvals/layout.tsx
📚 Learning: 2025-07-03T08:43:49.346Z
Learnt from: CR
Repo: talecorp/poc PR: 0
File: .cursor/rules/next-best-practice.mdc:0-0
Timestamp: 2025-07-03T08:43:49.346Z
Learning: Update `getServerSideProps` to server components
Applied to files:
services/platform/app/(app)/dashboard/[id]/settings/layout.tsx
📚 Learning: 2025-10-01T17:12:39.508Z
Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-10-01T17:12:39.508Z
Learning: Applies to **/*.tsx : Replace p-[4px] with p-1
Applied to files:
services/platform/components/ui/data-table/data-table-skeleton.tsx
📚 Learning: 2025-10-01T17:12:39.508Z
Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-10-01T17:12:39.508Z
Learning: Applies to **/*.tsx : Replace p-[8px] with p-2
Applied to files:
services/platform/components/ui/data-table/data-table-skeleton.tsx
📚 Learning: 2026-01-07T04:56:52.766Z
Learnt from: larryro
Repo: tale-project/tale PR: 96
File: services/platform/convex/lib/query_builder/build_query.ts:154-160
Timestamp: 2026-01-07T04:56:52.766Z
Learning: In Convex query builder code (services/platform/convex/lib/query_builder/build_query.ts), when iterating over results from dynamic queries (e.g., `(ctx.db as any).query(table)`), use `as T & DocumentWithSystemFields` to restore type information for system fields (_id, _creationTime) that TypeScript's flow analysis loses through the `for await` loop. This assertion is safe because Convex guarantees all query results include these fields at runtime. Avoid changing the generic constraint to `T extends DocumentWithSystemFields`, as it would force callers to explicitly type their documents and create a breaking API change without practical benefit.
</add_learning>
Applied to files:
services/platform/app/(app)/dashboard/[id]/(knowledge)/documents/components/document-table.tsx
📚 Learning: 2025-11-30T03:53:00.316Z
Learnt from: CR
Repo: tale-project/poc2 PR: 0
File: .cursor/rules/convex_rules.mdc:0-0
Timestamp: 2025-11-30T03:53:00.316Z
Learning: Applies to convex/**/*.ts : Define pagination using `paginationOptsValidator` with `numItems` and `cursor` properties, and use `.paginate()` on queries which returns objects with `page`, `isDone`, and `continueCursor` properties
Applied to files:
services/platform/app/(app)/dashboard/[id]/(knowledge)/documents/components/document-table.tsx
📚 Learning: 2025-07-03T08:43:49.346Z
Learnt from: CR
Repo: talecorp/poc PR: 0
File: .cursor/rules/next-best-practice.mdc:0-0
Timestamp: 2025-07-03T08:43:49.346Z
Learning: Applies to app/**/*.tsx : Use server components for data fetching, database queries, and server-side logic
Applied to files:
services/platform/app/(app)/dashboard/[id]/approvals/layout.tsx
🧬 Code graph analysis (9)
services/platform/app/(app)/dashboard/[id]/automations/components/automation-navigation.tsx (1)
services/platform/components/ui/navigation/navigation-menu.tsx (1)
NavigationMenuTrigger(116-116)
services/platform/app/(app)/dashboard/[id]/automations/layout.tsx (2)
services/platform/components/layout/adaptive-header.tsx (1)
AdaptiveHeaderRoot(101-128)services/platform/components/ui/badge.tsx (1)
Badge(42-67)
services/platform/app/(app)/dashboard/[id]/automations/components/automation-sidepanel.tsx (1)
services/platform/components/ui/button.tsx (1)
Button(56-95)
services/platform/app/(app)/dashboard/[id]/(knowledge)/layout.tsx (1)
services/platform/components/layout/adaptive-header.tsx (2)
AdaptiveHeaderRoot(101-128)AdaptiveHeaderTitle(139-153)
services/platform/app/(app)/dashboard/[id]/settings/layout.tsx (1)
services/platform/components/layout/adaptive-header.tsx (2)
AdaptiveHeaderRoot(101-128)AdaptiveHeaderTitle(139-153)
services/platform/components/layout/adaptive-header.tsx (1)
services/platform/components/ui/layout.tsx (1)
HStack(154-166)
services/platform/app/(app)/dashboard/[id]/(knowledge)/documents/components/document-table.tsx (3)
services/platform/hooks/use-cursor-paginated-query.ts (1)
useCursorPaginatedQuery(68-227)services/platform/types/documents.ts (1)
DocumentItem(4-20)services/platform/lib/utils/format/number.ts (1)
formatBytes(92-105)
services/platform/app/(app)/dashboard/[id]/conversations/layout.tsx (1)
services/platform/components/layout/adaptive-header.tsx (2)
AdaptiveHeaderRoot(101-128)AdaptiveHeaderTitle(139-153)
services/platform/app/(app)/dashboard/[id]/approvals/layout.tsx (1)
services/platform/components/layout/adaptive-header.tsx (2)
AdaptiveHeaderRoot(101-128)AdaptiveHeaderTitle(139-153)
🪛 Biome (2.1.2)
services/platform/app/(app)/dashboard/[id]/automations/layout.tsx
[error] 100-100: The elements with this role can be changed to the following elements:
For examples and more information, see WAI-ARIA Roles
(lint/a11y/useSemanticElements)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Build Docker Image
🔇 Additional comments (36)
services/platform/components/ui/date-range-picker.tsx (1)
188-192: LGTM! Good mobile responsiveness improvement.Removing the fixed
min-w-[15.75rem]allows the date picker trigger to adapt naturally to its content and container width, which aligns well with the mobile UI improvements in this PR. Thew-autowithjustify-startwill properly size the button based on the displayed date value or placeholder.services/platform/components/ui/table-date-cell.tsx (3)
46-58: LGTM!The
whitespace-nowrapaddition correctly prevents the empty placeholder text from wrapping. The semantic colortext-muted-foregroundaligns with the project's design system conventions.
60-80: LGTM!The date handling logic is correct, covering all input types (number, string, Date). The
whitespace-nowrapprevents dates from wrapping mid-value, which is appropriate for table cells. Thetitleattribute with the full formatted date provides good accessibility for users who want to see the complete date on hover.
102-116: LGTM!TableTimestampCell correctly delegates to TableDateCell, inheriting the whitespace-nowrap behavior. The default
alignRight = trueis sensible for timestamp columns in tables.services/platform/app/(app)/dashboard/[id]/automations/components/automation-navigation.tsx (3)
140-142: LGTM!Formatting change only; the navigation logic and URL construction remain correct.
186-192: LGTM!The added styling classes (
border border-input bg-background hover:bg-accent hover:text-accent-foreground) provide consistent visual treatment for the version selector trigger, aligning with the PR's UI improvement goals. Per the relevant context, NavigationMenuTrigger properly composes className strings with its internal styles.
204-212: LGTM!Removing the dash prefix from status labels results in cleaner, more concise version dropdown text. The translation keys remain consistent (
tCommon('status.draft'),tCommon('status.active'),t('navigation.archived')).services/platform/components/ui/data-table/data-table-skeleton.tsx (1)
185-188: LGTM!The padding reduction to
py-3is consistent with the corresponding change indata-table.tsx, ensuring the skeleton matches the actual component layout and prevents cumulative layout shift during loading transitions.services/platform/components/ui/data-table/data-table.tsx (1)
434-451: LGTM!The padding adjustment to
py-3is consistent with the skeleton component, maintaining visual alignment between loading and loaded states for infinite scroll tables.services/platform/components/ui/navigation/navigation-menu.tsx (1)
78-78: LGTM!Adding
z-50to the viewport wrapper ensures the navigation dropdown renders above other page content. This is an appropriate z-index value for navigation menus.services/platform/app/(app)/dashboard/[id]/automations/components/automation-steps.tsx (4)
146-175: Well-implemented responsive minimap sizing.The ResizeObserver approach for dynamic minimap dimensions is clean and correctly handles:
- Proper cleanup via
resizeObserver.disconnect()- Guard against zero dimensions
- Mobile/desktop breakpoint with appropriate base widths
- Height clamping between reasonable bounds (80-200px)
One minor observation: the mobile detection uses
window.innerWidthinside the observer callback, which works because container resizes typically follow window resizes. If you need stricter behavior, consider also listening to a window resize event, but this is likely fine for the current use case.
1077-1107: LGTM on MiniMap configuration.The dynamic dimensions are correctly applied via the
styleprop, andinversePan={false}is a valid ReactFlow MiniMap prop that disables inverted pan direction. Theoverflow-hiddenclass complements the CSS styles added earlier.
1148-1158: Banner simplification looks correct.Removing the dismissible behavior for the active automation banner makes sense—users should always see the warning that the automation cannot be modified while active. Just ensure the unused
showActiveBannerstate is cleaned up as noted above.
1008-1008: Layout wrapper changes are appropriate.The
relativeclass on the outer container and theref={containerRef}on the inner container correctly support the ResizeObserver-based minimap sizing. The flex layout withflex-[1_1_0] min-h-0ensures proper sizing within the parent.Also applies to: 1044-1044
services/platform/app/(app)/dashboard/[id]/(knowledge)/documents/components/document-table.tsx (4)
64-76: LGTM!The destructuring reformatting improves readability without changing functionality. The hook usage correctly leverages cursor-based pagination with SSR preloading.
92-95: LGTM!The type assertion
items as DocumentItem[]is safe here sinceuseCursorPaginatedQuerywithapi.documents.getDocumentsCursorreturnsDocumentItem[]. The null-coalescing fallback is correct.
204-210: Good mobile UX fix.Wrapping the formatted size in a
whitespace-nowrapspan prevents awkward line breaks like"1.2\nMB"on narrow viewports, which aligns with the PR's mobile UI improvements.
238-238: LGTM!The column width increase from 128 to 160 accommodates the refactored badge-based
RagStatusBadgerendering introduced in this PR.services/platform/components/layout/adaptive-header.tsx (5)
17-34: Well-structured context with proper error boundary.The
useAdaptiveHeaderhook correctly throws when used outside the provider, which catches integration errors early. TheuseAdaptiveHeaderContentgracefully returns null for optional consumers likeAdaptiveHeaderSlot.
49-59: LGTM!Simple and effective provider implementation. State management is straightforward for the use case.
69-79: LGTM!The slot correctly guards against null content and uses
min-w-0to allow text truncation within flex children.
101-128: Consider memoizing children if re-render frequency becomes problematic.The
useEffectruns wheneverchildrenchanges. Sincechildrenis a ReactNode, new JSX elements create new references on each parent render, potentially causing unnecessary context updates. This is likely acceptable for header content that changes infrequently, but worth monitoring.The
hidden md:flexclass correctly hides the desktop header on mobile while the context propagates content toAdaptiveHeaderSlotfor mobile rendering.
139-153: LGTM!Clean title component with appropriate styling. The
truncateclass ensures long titles don't break layout.services/platform/app/(app)/dashboard/[id]/layout.tsx (2)
8-11: LGTM!Correct imports for the new adaptive header system.
68-91: Clean integration of adaptive header system.The
AdaptiveHeaderProviderwrapping the entire dashboard layout enables nested layouts (knowledge, approvals, etc.) to register their titles viaAdaptiveHeaderRoot, which then renders in the mobile header viaAdaptiveHeaderSlot. Thegap-2provides appropriate spacing between the hamburger menu and the dynamic header content.This architecture cleanly separates concerns: child layouts define their header content, and the root layout decides where to render it based on viewport.
services/platform/app/(app)/dashboard/[id]/(knowledge)/layout.tsx (2)
5-8: LGTM!Import migration from
page-headertoadaptive-headercomponents aligns with the PR's header system refactor.
34-38: Correct usage withstandalone={false}.Since this header is nested inside
StickyHeader, settingstandalone={false}correctly disables the duplicate sticky/blur behavior fromAdaptiveHeaderRoot. The title content will propagate to the mobile header slot whileKnowledgeNavigationremains desktop-only (outside theAdaptiveHeaderRoot).services/platform/app/(app)/dashboard/[id]/approvals/layout.tsx (2)
5-8: LGTM!Consistent import migration matching other layouts in this PR.
28-32: LGTM!Consistent usage pattern with
standalone={false}insideStickyHeader. The refactor maintains the same visual behavior while enabling mobile header slot integration.services/platform/app/(app)/dashboard/[id]/conversations/layout.tsx (1)
5-8: LGTM!Clean migration to the adaptive header system. The
standalone={false}prop correctly indicates this header is nested within aStickyHeader, consistent with other layout files in this PR.Also applies to: 27-29
services/platform/app/(app)/dashboard/[id]/automations/layout.tsx (1)
146-160: LGTM!Badge components for status display are clean and consistent. The
ml-2spacing keeps badges visually separated from the title.services/platform/app/(app)/dashboard/[id]/settings/layout.tsx (1)
9-12: LGTM!Consistent migration to adaptive header components. Server component pattern and auth flow remain intact.
Also applies to: 54-56
services/platform/app/(app)/dashboard/[id]/(knowledge)/documents/components/rag-status-badge.tsx (1)
26-34: LGTM!Clean refactor to Badge components with consistent variant mapping. The
dotprop provides visual status indication, andaria-labelattributes improve accessibility for the clickable status buttons.Also applies to: 138-140, 171-173
services/platform/messages/en.json (1)
908-910: LGTM!The new translation keys
closeandviewAutomationare properly structured under theautomations.sidePanelnamespace, with clear and concise user-facing text.services/platform/app/(app)/dashboard/[id]/automations/components/automation-sidepanel.tsx (2)
200-208: LGTM!The mobile-only "View automation" button is well-implemented:
- Correctly uses
md:hiddenfor mobile-only visibility- Uses
shrink-0to maintain button size in the flex container- Properly invokes
onCloseto return to the automation canvas- Leverages the new localized translation key
134-134: Z-index change is appropriate and safe.The z-index reduction from 20 to 10 for the mobile panel overlay does not create stacking conflicts. The codebase shows z-50 is reserved for modal/dialog overlays and fixed elements, while z-10 is used throughout for regular overlay elements. No competing mobile-specific overlays (max-md:z-*) exist with higher z-index values, so the panel will render correctly beneath modals and at the appropriate layer in the mobile UI hierarchy.
- Update automation navigation version selector styling - Add responsive minimap sizing based on container dimensions - Add view automation button on mobile sidepanel - Simplify active automation banner (remove dismiss button) - Improve header truncation and hide prefix on mobile - Add translations for close and view automation Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Israeltheminer
force-pushed
the
update-ui
branch
from
c671392 to
f92a7ff
Compare
- Extract RetryButton JSX variable into proper functional component - Remove unused showActiveBanner state from automation-steps - Add focus-visible:ring-offset-background to navigation menu trigger Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Israeltheminer
force-pushed
the
update-ui
branch
from
0d89c77 to
2a79dbd
Compare
Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
1 participant
Summary
Test plan
🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
UI/UX Improvements
Localization
✏️ Tip: You can customize this high-level summary in your review settings.