Cete/sipher
1
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

refactor: update global styles and enhance DM channel UI

Browse source 
- Updated color variables in globals.css for improved accessibility and visual consistency.
- Adjusted font styles and shadow properties for better readability and aesthetics.
- Enhanced DMChannelContent component with new button for sending messages and improved layout for message display.
This commit is contained in:
Nixyan 2026-01-13 14:30:54 -03:00
parent af7142d3d0
commit 666e3d6cae
3 changed files with 123 additions and 156 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

243
src/app/globals.css
View file

@ -4,118 +4,111 @@
@custom-variant dark (&:is(.dark *)); @custom-variant dark (&:is(.dark *));
:root { :root {
--background: oklch(1.0000 0 0); --background: oklch(0.1467 0.0041 49.3141);
--foreground: oklch(0.2686 0 0); --foreground: oklch(0.8848 0.0037 56.3763);
--card: oklch(1.0000 0 0); --card: oklch(0.1588 0.0050 48.3894);
--card-foreground: oklch(0.2686 0 0); --card-foreground: oklch(0.8848 0.0037 56.3763);
--popover: oklch(1.0000 0 0); --popover: oklch(0.1588 0.0050 48.3894);
--popover-foreground: oklch(0.2686 0 0); --popover-foreground: oklch(0.8848 0.0037 56.3763);
--primary: oklch(0.7686 0.1647 70.0804); --primary: oklch(0.7065 0.1860 48.1293);
--primary-foreground: oklch(0 0 0); --primary-foreground: oklch(0.9620 0.0012 56.4186);
--secondary: oklch(0.9670 0.0029 264.5419); --secondary: oklch(0.2698 0.0089 52.1501);
--secondary-foreground: oklch(0.4461 0.0263 256.8018); --secondary-foreground: oklch(0.8848 0.0037 56.3763);
--muted: oklch(0.9846 0.0017 247.8389); --muted: oklch(0.2698 0.0089 52.1501);
--muted-foreground: oklch(0.5510 0.0234 264.3637); --muted-foreground: oklch(0.7250 0.0092 56.2587);
--accent: oklch(0.9869 0.0214 95.2774); --accent: oklch(0.2698 0.0089 52.1501);
--accent-foreground: oklch(0.4732 0.1247 46.2007); --accent-foreground: oklch(0.8848 0.0037 56.3763);
--destructive: oklch(0.6368 0.2078 25.3313); --destructive: oklch(0.5714 0.2121 27.2502);
--destructive-foreground: oklch(1.0000 0 0); --destructive-foreground: oklch(0.9620 0.0012 56.4186);
--border: oklch(0.9276 0.0058 264.5313); --border: oklch(0.2371 0.0107 48.2489);
--input: oklch(0.9276 0.0058 264.5313); --input: oklch(0.2371 0.0107 48.2489);
--ring: oklch(0.7686 0.1647 70.0804); --ring: oklch(0.7065 0.1860 48.1293);
--chart-1: oklch(0.7686 0.1647 70.0804); --chart-1: oklch(0.7065 0.1860 48.1293);
--chart-2: oklch(0.6658 0.1574 58.3183); --chart-2: oklch(0.6356 0.1398 156.1492);
--chart-3: oklch(0.5553 0.1455 48.9975); --chart-3: oklch(0.6296 0.1443 251.2286);
--chart-4: oklch(0.4732 0.1247 46.2007); --chart-4: oklch(0.6665 0.1797 327.3573);
--chart-5: oklch(0.4137 0.1054 45.9038); --chart-5: oklch(0.9204 0.1621 109.2030);
--sidebar: oklch(0.9846 0.0017 247.8389); --sidebar: oklch(0.1154 0.0031 50.5978);
--sidebar-foreground: oklch(0.2686 0 0); --sidebar-foreground: oklch(0.9081 0.0030 56.3898);
--sidebar-primary: oklch(0.7686 0.1647 70.0804); --sidebar-primary: oklch(0.7065 0.1860 48.1293);
--sidebar-primary-foreground: oklch(1.0000 0 0); --sidebar-primary-foreground: oklch(0.9620 0.0012 56.4186);
--sidebar-accent: oklch(0.9869 0.0214 95.2774); --sidebar-accent: oklch(0.1931 0.0052 52.2293);
--sidebar-accent-foreground: oklch(0.4732 0.1247 46.2007); --sidebar-accent-foreground: oklch(0.9081 0.0030 56.3898);
--sidebar-border: oklch(0.9276 0.0058 264.5313); --sidebar-border: oklch(0.2151 0.0091 48.2763);
--sidebar-ring: oklch(0.7686 0.1647 70.0804); --sidebar-ring: oklch(0.7065 0.1860 48.1293);
--font-sans: Inter, sans-serif; --font-sans: "Inter", sans-serif;
--font-serif: Source Serif 4, serif; --font-serif: "Lora", serif;
--font-mono: JetBrains Mono, monospace; --font-mono: "Fira Mono", monospace;
--radius: 0.375rem; --radius: 0.5rem;
--shadow-x: 1px; --shadow-x: 0px;
--shadow-y: 2px; --shadow-y: 4px;
--shadow-blur: 8px; --shadow-blur: 10px;
--shadow-spread: -1px; --shadow-spread: -2px;
--shadow-opacity: 0.1; --shadow-opacity: 0.3;
--shadow-color: hsl(0 0% 0%); --shadow-color: hsl(20, 14.3%, 2%);
--shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05); --shadow-2xs: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.15);
--shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05); --shadow-xs: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.15);
--shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10); --shadow-sm: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.30), 0px 1px 2px -3px hsl(20 14.3000% 2% / 0.30);
--shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10); --shadow: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.30), 0px 1px 2px -3px hsl(20 14.3000% 2% / 0.30);
--shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10); --shadow-md: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.30), 0px 2px 4px -3px hsl(20 14.3000% 2% / 0.30);
--shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10); --shadow-lg: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.30), 0px 4px 6px -3px hsl(20 14.3000% 2% / 0.30);
--shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10); --shadow-xl: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.30), 0px 8px 10px -3px hsl(20 14.3000% 2% / 0.30);
--shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25); --shadow-2xl: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.75);
--tracking-normal: 0em; --tracking-normal: 0em;
--spacing: 0.25rem; --spacing: 0.25rem;
--shadow-offset-x: 0px;
--shadow-offset-y: 4px;
--letter-spacing: 0em;
} }
.dark { .dark {
--background: oklch(0.2046 0 0); --background: oklch(0.1467 0.0041 49.3141);
--foreground: oklch(0.9219 0 0); --foreground: oklch(0.8848 0.0037 56.3763);
--card: oklch(0.2686 0 0); --card: oklch(0.1588 0.0050 48.3894);
--card-foreground: oklch(0.9219 0 0); --card-foreground: oklch(0.8848 0.0037 56.3763);
--popover: oklch(0.2686 0 0); --popover: oklch(0.1588 0.0050 48.3894);
--popover-foreground: oklch(0.9219 0 0); --popover-foreground: oklch(0.8848 0.0037 56.3763);
--primary: oklch(0.7686 0.1647 70.0804); --primary: oklch(0.7065 0.1860 48.1293);
--primary-foreground: oklch(0 0 0); --primary-foreground: oklch(0.9620 0.0012 56.4186);
--secondary: oklch(0.2686 0 0); --secondary: oklch(0.2698 0.0089 52.1501);
--secondary-foreground: oklch(0.9219 0 0); --secondary-foreground: oklch(0.8848 0.0037 56.3763);
--muted: oklch(0.2393 0 0); --muted: oklch(0.2698 0.0089 52.1501);
--muted-foreground: oklch(0.7155 0 0); --muted-foreground: oklch(0.7250 0.0092 56.2587);
--accent: oklch(0.4732 0.1247 46.2007); --accent: oklch(0.2698 0.0089 52.1501);
--accent-foreground: oklch(0.9243 0.1151 95.7459); --accent-foreground: oklch(0.8848 0.0037 56.3763);
--destructive: oklch(0.6368 0.2078 25.3313); --destructive: oklch(0.5714 0.2121 27.2502);
--destructive-foreground: oklch(1.0000 0 0); --destructive-foreground: oklch(0.9620 0.0012 56.4186);
--border: oklch(0.3715 0 0); --border: oklch(0.2371 0.0107 48.2489);
--input: oklch(0.3715 0 0); --input: oklch(0.2371 0.0107 48.2489);
--ring: oklch(0.7686 0.1647 70.0804); --ring: oklch(0.7065 0.1860 48.1293);
--chart-1: oklch(0.8369 0.1644 84.4286); --chart-1: oklch(0.7065 0.1860 48.1293);
--chart-2: oklch(0.6658 0.1574 58.3183); --chart-2: oklch(0.6356 0.1398 156.1492);
--chart-3: oklch(0.4732 0.1247 46.2007); --chart-3: oklch(0.6296 0.1443 251.2286);
--chart-4: oklch(0.5553 0.1455 48.9975); --chart-4: oklch(0.6665 0.1797 327.3573);
--chart-5: oklch(0.4732 0.1247 46.2007); --chart-5: oklch(0.9204 0.1621 109.2030);
--sidebar: oklch(0.1684 0 0); --sidebar: oklch(0.1154 0.0031 50.5978);
--sidebar-foreground: oklch(0.9219 0 0); --sidebar-foreground: oklch(0.9081 0.0030 56.3898);
--sidebar-primary: oklch(0.7686 0.1647 70.0804); --sidebar-primary: oklch(0.7065 0.1860 48.1293);
--sidebar-primary-foreground: oklch(1.0000 0 0); --sidebar-primary-foreground: oklch(0.9620 0.0012 56.4186);
--sidebar-accent: oklch(0.4732 0.1247 46.2007); --sidebar-accent: oklch(0.1931 0.0052 52.2293);
--sidebar-accent-foreground: oklch(0.9243 0.1151 95.7459); --sidebar-accent-foreground: oklch(0.9081 0.0030 56.3898);
--sidebar-border: oklch(0.3715 0 0); --sidebar-border: oklch(0.2151 0.0091 48.2763);
--sidebar-ring: oklch(0.7686 0.1647 70.0804); --sidebar-ring: oklch(0.7065 0.1860 48.1293);
--font-sans: Inter, sans-serif; --font-sans: "Inter", sans-serif;
--font-serif: Source Serif 4, serif; --font-serif: "Lora", serif;
--font-mono: JetBrains Mono, monospace; --font-mono: "Fira Mono", monospace;
--radius: 0.375rem; --radius: 0.5rem;
--shadow-x: 1px; --shadow-x: 0px;
--shadow-y: 2px; --shadow-y: 4px;
--shadow-blur: 8px; --shadow-blur: 10px;
--shadow-spread: -1px; --shadow-spread: -2px;
--shadow-opacity: 0.1; --shadow-opacity: 0.3;
--shadow-color: hsl(0 0% 0%); --shadow-color: hsl(20, 14.3%, 2%);
--shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05); --shadow-2xs: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.15);
--shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05); --shadow-xs: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.15);
--shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10); --shadow-sm: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.30), 0px 1px 2px -3px hsl(20 14.3000% 2% / 0.30);
--shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10); --shadow: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.30), 0px 1px 2px -3px hsl(20 14.3000% 2% / 0.30);
--shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10); --shadow-md: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.30), 0px 2px 4px -3px hsl(20 14.3000% 2% / 0.30);
--shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10); --shadow-lg: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.30), 0px 4px 6px -3px hsl(20 14.3000% 2% / 0.30);
--shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10); --shadow-xl: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.30), 0px 8px 10px -3px hsl(20 14.3000% 2% / 0.30);
--shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25); --shadow-2xl: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.75);
--shadow-offset-x: 0px;
--shadow-offset-y: 4px;
--letter-spacing: 0em;
--spacing: 0.25rem;
} }
@theme inline { @theme inline {
@ -152,9 +145,9 @@
--color-sidebar-border: var(--sidebar-border); --color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring); --color-sidebar-ring: var(--sidebar-ring);
--font-sans: Inter, sans-serif; --font-sans: var(--font-sans);
--font-mono: JetBrains Mono, monospace; --font-mono: var(--font-mono);
--font-serif: Source Serif 4, serif; --font-serif: var(--font-serif);
--radius-sm: calc(var(--radius) - 4px); --radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px); --radius-md: calc(var(--radius) - 2px);
@ -169,34 +162,4 @@
--shadow-lg: var(--shadow-lg); --shadow-lg: var(--shadow-lg);
--shadow-xl: var(--shadow-xl); --shadow-xl: var(--shadow-xl);
--shadow-2xl: var(--shadow-2xl); --shadow-2xl: var(--shadow-2xl);
--tracking-tighter: calc(var(--tracking-normal) - 0.05em);
--tracking-tight: calc(var(--tracking-normal) - 0.025em);
--tracking-normal: var(--tracking-normal);
--tracking-wide: calc(var(--tracking-normal) + 0.025em);
--tracking-wider: calc(var(--tracking-normal) + 0.05em);
--tracking-widest: calc(var(--tracking-normal) + 0.1em);
--radius: 0.375rem;
--spacing: var(--spacing);
--letter-spacing: var(--letter-spacing);
--shadow-offset-y: var(--shadow-offset-y);
--shadow-offset-x: var(--shadow-offset-x);
--shadow-spread: var(--shadow-spread);
--shadow-blur: var(--shadow-blur);
--shadow-opacity: var(--shadow-opacity);
--color-shadow-color: var(--shadow-color);
}
body {
letter-spacing: var(--tracking-normal);
}
@layer base {
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
letter-spacing: var(--tracking-normal);
}
} }

14
src/components/ui/dm/DmChannelContent.tsx
View file

@ -2,11 +2,12 @@ import { useOlmContext } from "@/contexts/olm-context";
import { useSocketContext } from "@/contexts/socket-context"; import { useSocketContext } from "@/contexts/socket-context";
import { clearUnread, db, sendMessage } from "@/lib/db"; import { clearUnread, db, sendMessage } from "@/lib/db";
import { useLiveQuery } from "dexie-react-hooks"; import { useLiveQuery } from "dexie-react-hooks";
import { KeyRound } from "lucide-react"; import { KeyRound, SendIcon } from "lucide-react";
import moment from "moment"; import moment from "moment";
import React, { useEffect, useMemo, useState } from "react"; import React, { useEffect, useMemo, useState } from "react";
import { toast } from "sonner"; import { toast } from "sonner";
import { Avatar, AvatarFallback, AvatarImage } from "../avatar"; import { Avatar, AvatarFallback, AvatarImage } from "../avatar";
import { Button } from "../button";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "../dialog"; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "../dialog";
import { Input } from "../input"; import { Input } from "../input";
@ -294,14 +295,14 @@ export default function DMChannelContent(
{timeLabel} {timeLabel}
</span> </span>
</div> </div>
<div className="text-sm md:text-[15px] leading-[1.375rem] text-foreground mt-0.5 wrap-break-word"> <div className="text-sm md:text-[15px] leading-5.5 text-foreground mt-0.5 wrap-break-word">
{msg.content} {msg.content}
</div> </div>
</div> </div>
</div> </div>
) : ( ) : (
// Compact message without avatar (grouped) // Compact message without avatar (grouped)
<div className="flex gap-2 md:gap-4 leading-[1.375rem]"> <div className="flex gap-2 md:gap-4 leading-5.5">
<div className="w-8 md:w-10 shrink-0 flex items-start justify-end pt-0.5"> <div className="w-8 md:w-10 shrink-0 flex items-start justify-end pt-0.5">
<span className="text-[10px] text-transparent group-hover:text-muted-foreground transition-colors duration-100 font-medium"> <span className="text-[10px] text-transparent group-hover:text-muted-foreground transition-colors duration-100 font-medium">
{ {
@ -309,7 +310,7 @@ export default function DMChannelContent(
} }
</span> </span>
</div> </div>
<div className="flex-1 min-w-0 text-sm md:text-[15px] leading-[1.375rem] text-foreground wrap-break-word"> <div className="flex-1 min-w-0 text-sm md:text-[15px] leading-5.5 text-foreground wrap-break-word">
{msg.content} {msg.content}
</div> </div>
</div> </div>
@ -324,7 +325,7 @@ export default function DMChannelContent(
</div> </div>
{/* Message input */} {/* Message input */}
<div className="shrink-0 px-2 md:px-4 pb-4 md:pb-6 pt-2"> <div className="flex items-center gap-2 shrink-0 px-2 md:px-4 pb-4 md:pb-6 pt-2">
<Input <Input
className="h-10 md:h-11 rounded-lg bg-muted border-0 focus-visible:ring-0 focus-visible:ring-offset-0 px-3 md:px-4 text-sm md:text-[15px]" className="h-10 md:h-11 rounded-lg bg-muted border-0 focus-visible:ring-0 focus-visible:ring-offset-0 px-3 md:px-4 text-sm md:text-[15px]"
placeholder={ placeholder={
@ -362,6 +363,9 @@ export default function DMChannelContent(
} }
}} }}
/> />
<Button className="flex md:hidden items-center justify-center h-10 md:h-11 w-10 md:w-11" variant="outline" size="icon">
<SendIcon className="size-4" />
</Button>
</div> </div>
</div> </div>
); );

22
src/components/ui/layout/channel-list.tsx
View file

@ -2,9 +2,10 @@
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
import { clearUnread, db } from "@/lib/db" import { clearUnread, db } from "@/lib/db"
import { QuestionMarkIcon } from "@phosphor-icons/react"
import { formatDistanceToNow } from "date-fns" import { formatDistanceToNow } from "date-fns"
import { useLiveQuery } from "dexie-react-hooks" import { useLiveQuery } from "dexie-react-hooks"
import { MessageSquarePlusIcon, SettingsIcon, Sparkles, UsersIcon, XIcon } from "lucide-react" import { MessageSquarePlusIcon, SettingsIcon, UsersIcon, XIcon } from "lucide-react"
import { useRouter } from "next/navigation" import { useRouter } from "next/navigation"
import UserCard from "../user/user-card" import UserCard from "../user/user-card"
@ -61,8 +62,8 @@ export function ChannelList({
<Button <Button
variant="ghost" variant="ghost"
className={`w-full justify-start gap-3 h-11 px-3 rounded-lg transition-all ${page === "friends" className={`w-full justify-start gap-3 h-11 px-3 rounded-lg transition-all ${page === "friends"
? "bg-primary/10 text-primary hover:bg-primary/15 ring-1 ring-primary/20" ? "bg-primary/10 text-primary hover:bg-primary/15 ring-1 ring-primary/20"
: "hover:bg-accent/60" : "hover:bg-accent/60"
}`} }`}
onClick={() => { onClick={() => {
onPageChange("friends") onPageChange("friends")
@ -70,8 +71,8 @@ export function ChannelList({
}} }}
> >
<div className={`flex items-center justify-center w-8 h-8 rounded-lg ${page === "friends" <div className={`flex items-center justify-center w-8 h-8 rounded-lg ${page === "friends"
? "bg-primary/20" ? "bg-primary/20"
: "bg-muted/50" : "bg-muted/50"
}`}> }`}>
<UsersIcon className="size-4" /> <UsersIcon className="size-4" />
</div> </div>
@ -80,8 +81,8 @@ export function ChannelList({
<Button <Button
variant="ghost" variant="ghost"
className={`w-full justify-start gap-3 h-11 px-3 rounded-lg transition-all ${page === "support" className={`w-full justify-start gap-3 h-11 px-3 rounded-lg transition-all ${page === "support"
? "bg-primary/10 text-primary hover:bg-primary/15 ring-1 ring-primary/20" ? "bg-primary/10 text-primary hover:bg-primary/15 ring-1 ring-primary/20"
: "hover:bg-accent/60" : "hover:bg-accent/60"
}`} }`}
onClick={() => { onClick={() => {
onPageChange("support") onPageChange("support")
@ -89,8 +90,8 @@ export function ChannelList({
}} }}
> >
<div className={`flex items-center justify-center w-8 h-8 rounded-lg ${page === "support" <div className={`flex items-center justify-center w-8 h-8 rounded-lg ${page === "support"
? "bg-primary/20" ? "bg-primary/20"
: "bg-muted/50" : "bg-muted/50"
}`}> }`}>
<SettingsIcon className="size-4" /> <SettingsIcon className="size-4" />
</div> </div>
@ -157,7 +158,6 @@ export function ChannelList({
{openDmChannels.length > 0 ? ( {openDmChannels.length > 0 ? (
<div className="flex flex-col gap-0.5"> <div className="flex flex-col gap-0.5">
{openDmChannels.map((channel) => { {openDmChannels.map((channel) => {
const participantDetails = dmChannel?.participantDetails.find((p) => p.id === channel.participants[0])
const isActive = dmChannel?.id === channel.id const isActive = dmChannel?.id === channel.id
const lastMessage = channel.times?.lastMessage const lastMessage = channel.times?.lastMessage
const lastMessageTime = channel.times?.lastMessageAt const lastMessageTime = channel.times?.lastMessageAt
@ -239,7 +239,7 @@ export function ChannelList({
) : ( ) : (
<div className="flex flex-col items-center justify-center py-8 px-4 text-center"> <div className="flex flex-col items-center justify-center py-8 px-4 text-center">
<div className="flex items-center justify-center w-12 h-12 rounded-full bg-muted/50 mb-3"> <div className="flex items-center justify-center w-12 h-12 rounded-full bg-muted/50 mb-3">
<Sparkles className="size-5 text-muted-foreground/50" /> <QuestionMarkIcon size={20} className="text-muted-foreground/50" />
</div> </div>
<span className="text-xs font-medium text-muted-foreground/70 leading-relaxed"> <span className="text-xs font-medium text-muted-foreground/70 leading-relaxed">
{emptyMessage} {emptyMessage}