fix: UI refactor

[SyedHannanMehdi]

Automated fix for #10 — implemented by CashClaw agent.

Closes #10

[vercel]

@SyedHannanMehdi is attempting to deploy a commit to the m0hn-z's projects Team on Vercel.

A member of the Team first needs to authorize it.

[Copilot]

Pull request overview

Adds a new set of reusable UI primitives intended to support a broader UI refactor (Issue #10).

Changes:

• Introduces new UI components: Button, Input, Select, Modal, Toast, Skeleton, Card, and Badge
• Adds a toast provider + viewport pattern for notifications
• Adds skeleton loading presets and card layout helpers

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 20 comments.

Show a summary per file

File	Description
src/components/ui/Toast.tsx	Adds toast context/provider and toast viewport rendering
src/components/ui/Skeleton.tsx	Adds skeleton loader component plus text/card presets
src/components/ui/Select.tsx	Adds labeled select with hint/error UI and sizing
src/components/ui/Modal.tsx	Adds modal dialog with backdrop, Escape handling, and scroll lock
src/components/ui/Input.tsx	Adds labeled input with hint/error UI, sizing, and addons
src/components/ui/Card.tsx	Adds card container plus header/body/footer helpers
src/components/ui/Button.tsx	Adds button variants/sizes and loading spinner
src/components/ui/Badge.tsx	Adds badge variants and optional dot indicator

---

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

[Copilot]

If neither id nor label is provided, inputId is undefined, but aria-describedby is still built from it, producing values like "undefined-error"/"undefined-hint". Use React.useId() (or require id when hint/error are present) to ensure a stable, unique ID.

[Copilot]

cn is imported from ../../lib/utils, but there is no src/lib/utils (or any lib/utils) in the repository, so this file will fail to compile as-is. Add the missing utility (and its exports) or update the import to the correct existing helper module.

Suggested change

	import { cn } from "../../lib/utils";
	export function cn(...classes: Array<string | false | null | undefined>): string {
	return classes.filter(Boolean).join(" ");
	}

[Copilot]

cn is imported from ../../lib/utils, but there is no src/lib/utils (or any lib/utils) in the repository, so this file will fail to compile as-is. Add the missing utility (and its exports) or update the import to the correct existing helper module.

Suggested change

	import { cn } from "../../lib/utils";
	function cn(...classes: Array<string | null | undefined | false>) {
	return classes.filter(Boolean).join(" ");
	}

[Copilot]

These UI components are added under the top-level src/ tree, but the React app appears to live under client/src/ (and there are no imports referencing src/components/ui anywhere in the repo). If the intent is to refactor the client UI (Issue #10), consider moving these components into client/src/components/ (and updating imports) so they’re actually used by the app.

[Copilot]

cn is imported from ../../lib/utils, but there is no src/lib/utils (or any lib/utils) in the repository, so this file will fail to compile as-is. Add the missing utility (and its exports) or update the import to the correct existing helper module.

Suggested change

	import { cn } from "../../lib/utils";
	function cn(...classes: Array<string | false | null | undefined>): string {
	return classes.filter(Boolean).join(" ");
	}

[Copilot]

cn is imported from ../../lib/utils, but there is no src/lib/utils (or any lib/utils) in the repository, so this file will fail to compile as-is. Add the missing utility (and its exports) or update the import to the correct existing helper module.

Suggested change

	import { cn } from "../../lib/utils";
	function cn(...classes: Array<string | false | null | undefined>): string {
	return classes.filter(Boolean).join(" ");
	}

[Copilot]

cn is imported from ../../lib/utils, but there is no src/lib/utils (or any lib/utils) in the repository, so this file will fail to compile as-is. Add the missing utility (and its exports) or update the import to the correct existing helper module.

Suggested change

	import { cn } from "../../lib/utils";
	function cn(...classes: Array<string | false | null | undefined>): string {
	return classes.filter(Boolean).join(" ");
	}

[Copilot]

cn is imported from ../../lib/utils, but there is no src/lib/utils (or any lib/utils) in the repository, so this file will fail to compile as-is. Add the missing utility (and its exports) or update the import to the correct existing helper module.

Suggested change

	import { cn } from "../../lib/utils";
	function cn(...classes: Array<string | false | null | undefined>): string {
	return classes.filter(Boolean).join(" ");
	}

[Copilot]

cn is imported from ../../lib/utils, but there is no src/lib/utils (or any lib/utils) in the repository, so this file will fail to compile as-is. Add the missing utility (and its exports) or update the import to the correct existing helper module.

Suggested change

	import { cn } from "../../lib/utils";
	import cn from "classnames";

[Copilot]

When a toast is dismissed manually via remove, any previously scheduled auto-remove timer for that toast will still fire later (extra dispatch work). If you store timeout IDs per toast, clear the corresponding timer when removing early.