unified date formatting, and use tooltips for dates, use default sidebar styles, mobile responsive, add favicon

[alvinsjoy]

No description provided.

[Copilot]

Pull request overview

This PR updates the chat UI to use a unified, timezone-stable date formatting utility, shifts chat list dates into tooltips, and adjusts the sidebar/layout behavior for improved mobile responsiveness while also standardizing the app icon usage.

Changes:

• Introduces shared date utilities (lib/date-format.ts) and switches chat timestamps to ISO strings for consistent parsing/formatting.
• Updates chat sidebar and chat area UI for tooltip-based dates and mobile sidebar toggling.
• Replaces icon/favicons to use a single public/icon.png and updates layout providers accordingly.

Reviewed changes

Copilot reviewed 10 out of 12 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
public/icon.png	Adds new app icon asset (used in sidebar + metadata).
package.json	Minor dependency ordering change.
lib/date-format.ts	New shared formatting/parsing utilities (locale + timezone stable).
lib/data/chat.ts	Changes chat timestamps to ISO strings to support stable formatting/parsing.
components/ui/tooltip.tsx	Minor tooltip arrow styling tweak.
components/ui/dropdown-menu.tsx	Refactors Tailwind class variants for dropdown items/labels/sub-triggers.
components/chat-sidebar.tsx	Uses icon image, adds tooltip date display, updates sidebar collapsible mode, tweaks dropdown alignment.
components/chat-area.tsx	Uses shared date formatting utilities and adds mobile sidebar trigger.
app/layout.tsx	Updates metadata icons to /icon.png and wraps app in TooltipProvider.
app/chat/loading.tsx	Updates loading skeleton layout to match new chat area structure.
app/chat/layout.tsx	Removes custom sidebar width override and relies on sidebar defaults.

Comments suppressed due to low confidence (1)

components/ui/dropdown-menu.tsx:162

• data-inset:pl-8 is likely not a valid Tailwind data-attribute variant; the usual form is data-[inset]:pl-8 (matching the data-inset attribute that Radix/shadcn patterns emit). If this doesn’t compile, inset labels won’t indent as intended.

 <DropdownMenuPrimitive.Label
data-slot="dropdown-menu-label"
data-inset={inset}
className={cn(
"px-2 py-1.5 text-sm font-medium data-inset:pl-8",
className,
)}
{...props}
/>

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[coderabbitai]

Warning

Rate limit exceeded

@alvinsjoy has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 10 minutes and 18 seconds before requesting another review.

Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 10 minutes and 18 seconds.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: c6ebf4a5-e3f2-474d-90e3-261b0d8d8103

📥 Commits

Reviewing files that changed from the base of the PR and between 7805fb2 and 7296863.

📒 Files selected for processing (1)

• app/chat/loading.tsx

📝 Walkthrough

Walkthrough

Refactors chat layout and sidebar sizing, centralizes date/time formatting into a new utility module, converts stored timestamps to ISO strings, adds global TooltipProvider, updates loading skeletons and chat/sidebar UI (offcanvas sidebar, logo image, timestamp tooltips), and adjusts several UI utility components.

Changes

Cohort / File(s)	Summary
Chat layout app/chat/layout.tsx, app/chat/loading.tsx	Removed explicit sidebar width and wrapper div; sidebar sizing now relies on provider defaults. Loading UI changed from two-column shell to single-column chat with redesigned header, message stack, and sticky composer.
Global providers & metadata app/layout.tsx	Wrapped app children with TooltipProvider. Simplified metadata icon entries to a single /icon.png.
Chat UI components components/chat-area.tsx, components/chat-sidebar.tsx	Moved date/time formatting to shared utilities; added mobile SidebarTrigger in header. Sidebar: collapsible="offcanvas", replaced icon with /icon.png, added per-item timestamp tooltips, adjusted dropdown alignment and delete styling.
Date utilities & data lib/date-format.ts, lib/data/chat.ts	Added lib/date-format.ts exports for parsing/formatting (locale/timezone-aware). Chat data now emits ISO timestamps via toISOString().
UI primitives components/ui/dropdown-menu.tsx, components/ui/tooltip.tsx	Updated Tailwind data-attribute selector patterns in dropdown menu items; tweaked tooltip arrow translation and border radius.
Package manifest package.json	Reordered @prisma/client dependency entry (no version change).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• Dev #3 — Overlaps chat layout and sidebar width handling changes affecting SidebarProvider and chat layout.
• Sou #4 — Related adjustments to message divider/timestamp rendering and bottom input/toolbar UI in chat-area/loading.
• Dev #5 — Modifies chat UI components and timestamp/layout rendering in components/chat-area.tsx.

Suggested reviewers

• Arjunpanicker2005

Poem

🐰 The sidebar hops and softly slides away,
Times now speak the same, in one bright way,
Tooltips peek like whiskers, quick and keen,
Skeletons rest where chats once leaned,
A little rabbit cheers this tidy play. 🌿✨

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	No pull request description was provided by the author, making it impossible to evaluate whether it relates to the changeset.	Add a descriptive pull request description explaining the motivation, changes, and impact of this pull request for better context and review clarity.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main changes: unified date formatting, tooltips for dates, default sidebar styles, mobile responsiveness, and favicon addition are all reflected in the changeset.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch dev

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (1)

app/chat/loading.tsx (1)

20-35: Consider data-driven rendering for repeated message skeleton rows

The four repeated blocks are structurally similar; mapping from a small config array will reduce duplication and simplify future tweaks.

Refactor sketch

+ {[+ { reverse: true, bubble: "h-12 w-[60%]" },+ { reverse: false, bubble: "h-16 w-[80%]" },+ { reverse: true, bubble: "h-12 w-[60%]" },+ { reverse: false, bubble: "h-16 w-[80%]" },+ ].map((row, i) => (+ <div key={i} className={`flex gap-4 ${row.reverse ? "flex-row-reverse" : ""}`}>+ <Skeleton className="size-8 shrink-0 rounded-sm" />+ <Skeleton className={`${row.bubble} rounded-lg`} />+ </div>+ ))}- <div className="flex flex-row-reverse gap-4">- <Skeleton className="size-8 shrink-0 rounded-sm" />- <Skeleton className="h-12 w-[60%] rounded-lg" />- </div>- <div className="flex gap-4">- <Skeleton className="size-8 shrink-0 rounded-sm" />- <Skeleton className="h-16 w-[80%] rounded-lg" />- </div>- <div className="flex flex-row-reverse gap-4">- <Skeleton className="size-8 shrink-0 rounded-sm" />- <Skeleton className="h-12 w-[60%] rounded-lg" />- </div>- <div className="flex gap-4">- <Skeleton className="size-8 shrink-0 rounded-sm" />- <Skeleton className="h-16 w-[80%] rounded-lg" />- </div>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.
In `@app/chat/loading.tsx` around lines 20 - 35, The four repeated Skeleton
message blocks in app/chat/loading.tsx are duplicated; refactor the Loading
component (or the function rendering these rows) to use a small config array
(e.g., objects describing alignment and height/width classes) and map over it to
render each row instead of repeating JSX. Use unique identifiers like the
Skeleton elements and class combos ("flex flex-row-reverse gap-4", "flex gap-4",
"size-8", "h-12 w-[60%]", "h-16 w-[80%]") in the config so the mapped render
preserves alignment and sizes, making future changes easier and removing
duplication. Ensure keys for mapped items are stable (index or a small id in
config) and keep existing classNames unchanged.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@app/chat/loading.tsx`:
- Around line 18-19: The scrollable container div with className "min-h-0 flex-1
overflow-y-auto px-4 pb-28 md:px-6" has insufficient bottom padding so the last
message skeleton can sit under the sticky composer; update that div to increase
the bottom padding to match the sticky composer height (e.g., change pb-28 to
pb-44 and add a responsive rule like md:pb-44 or appropriate value), and apply
the same padding alignment to the sticky composer/footer block so both elements
use the same bottom spacing convention.
- Around line 9-15: The header skeletons use fixed classes "w-56" and "w-40"
which cause overflow on narrow viewports; update the layout so the left skeleton
group can shrink and the right skeleton can size responsively: add a shrinking
container (e.g., apply "min-w-0" to the parent flex or the left <div
className="space-y-1">) and replace the fixed widths on the Skeleton components
with responsive sizing (e.g., use "w-full max-w-[14rem]" / "w-full
max-w-[10rem]" or give the left group "flex-1" and the Skeletons "w-full
max-w-...") so the elements wrap/shrink instead of causing horizontal scroll
while preserving gap and alignment.
---
Nitpick comments:
In `@app/chat/loading.tsx`:
- Around line 20-35: The four repeated Skeleton message blocks in
app/chat/loading.tsx are duplicated; refactor the Loading component (or the
function rendering these rows) to use a small config array (e.g., objects
describing alignment and height/width classes) and map over it to render each
row instead of repeating JSX. Use unique identifiers like the Skeleton elements
and class combos ("flex flex-row-reverse gap-4", "flex gap-4", "size-8", "h-12
w-[60%]", "h-16 w-[80%]") in the config so the mapped render preserves alignment
and sizes, making future changes easier and removing duplication. Ensure keys
for mapped items are stable (index or a small id in config) and keep existing
classNames unchanged.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 9046d320-a7cb-419d-9947-c86bdc27bb2e

📥 Commits

Reviewing files that changed from the base of the PR and between a898792 and 4c4ad6c.

⛔ Files ignored due to path filters (2)

• app/favicon.ico is excluded by !**/*.ico
• public/icon.png is excluded by !**/*.png

📒 Files selected for processing (10)

• app/chat/layout.tsx
• app/chat/loading.tsx
• app/layout.tsx
• components/chat-area.tsx
• components/chat-sidebar.tsx
• components/ui/dropdown-menu.tsx
• components/ui/tooltip.tsx
• lib/data/chat.ts
• lib/date-format.ts
• package.json

👮 Files not reviewed due to content moderation or server errors (8)

• lib/data/chat.ts
• components/ui/dropdown-menu.tsx
• lib/date-format.ts
• components/ui/tooltip.tsx
• app/layout.tsx
• app/chat/layout.tsx
• components/chat-area.tsx
• components/chat-sidebar.tsx

[Copilot]

Pull request overview

Copilot reviewed 10 out of 12 changed files in this pull request and generated 3 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.