feat: enhance MessagesPanel with improved UI components and functionality
Deploy to VPS / deploy (push) Successful in 2m13s
Deploy to VPS / deploy (push) Successful in 2m13s
- Refactored MessagesPanel to utilize new UI components such as Avatar, Badge, Button, Card, Dialog, Input, Progress, ScrollArea, Select, Skeleton, and Tabs. - Improved error handling and loading states with enhanced user feedback. - Updated message rendering logic to support new design patterns and animations. - Added support for image previews and improved layout for message details. - Enhanced mobile responsiveness with useIsMobile hook adjustments. - Cleaned up utility functions for better readability and consistency.
This commit is contained in:
asepharyana
@@ -46,6 +46,15 @@
|
||||
--radius-2xl: calc(var(--radius) * 1.8);
|
||||
--radius-3xl: calc(var(--radius) * 2.2);
|
||||
--radius-4xl: calc(var(--radius) * 2.6);
|
||||
|
||||
/* Sky blue accent gradient */
|
||||
--accent-gradient: linear-gradient(135deg, oklch(0.65 0.18 240), oklch(0.65 0.15 200), oklch(0.65 0.12 180));
|
||||
--accent-gradient-subtle: linear-gradient(135deg, oklch(0.65 0.18 240 / 0.15), oklch(0.65 0.12 180 / 0.05));
|
||||
|
||||
/* Glass morphism */
|
||||
--glass-bg: oklch(1 0 0 / 0.05);
|
||||
--glass-border: oklch(1 0 0 / 0.1);
|
||||
--glass-shadow: 0 8px 32px oklch(0 0 0 / 0.3);
|
||||
}
|
||||
|
||||
:root {
|
||||
@@ -53,68 +62,88 @@
|
||||
--card-foreground: oklch(0.145 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.145 0 0);
|
||||
--primary: oklch(0.205 0 0);
|
||||
--primary: oklch(0.55 0.18 240);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.97 0 0);
|
||||
--secondary-foreground: oklch(0.205 0 0);
|
||||
--muted: oklch(0.97 0 0);
|
||||
--muted: oklch(0.95 0 0);
|
||||
--muted-foreground: oklch(0.556 0 0);
|
||||
--accent: oklch(0.97 0 0);
|
||||
--accent: oklch(0.65 0.15 220);
|
||||
--accent-foreground: oklch(0.205 0 0);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.922 0 0);
|
||||
--input: oklch(0.922 0 0);
|
||||
--ring: oklch(0.708 0 0);
|
||||
--chart-1: oklch(0.87 0 0);
|
||||
--chart-2: oklch(0.556 0 0);
|
||||
--chart-3: oklch(0.439 0 0);
|
||||
--chart-4: oklch(0.371 0 0);
|
||||
--chart-5: oklch(0.269 0 0);
|
||||
--ring: oklch(0.65 0.18 240);
|
||||
--chart-1: oklch(0.55 0.18 240);
|
||||
--chart-2: oklch(0.55 0.15 200);
|
||||
--chart-3: oklch(0.55 0.12 180);
|
||||
--chart-4: oklch(0.55 0.2 260);
|
||||
--chart-5: oklch(0.55 0.15 280);
|
||||
--radius: 0.625rem;
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.145 0 0);
|
||||
--sidebar-primary: oklch(0.205 0 0);
|
||||
--sidebar-primary: oklch(0.55 0.18 240);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.97 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||
--sidebar-accent: oklch(0.95 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.145 0 0);
|
||||
--sidebar-border: oklch(0.922 0 0);
|
||||
--sidebar-ring: oklch(0.708 0 0);
|
||||
--sidebar-ring: oklch(0.65 0.18 240);
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.145 0 0);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.145 0 0);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.205 0 0);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.205 0 0);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.922 0 0);
|
||||
--primary-foreground: oklch(0.205 0 0);
|
||||
--secondary: oklch(0.269 0 0);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.269 0 0);
|
||||
--muted-foreground: oklch(0.708 0 0);
|
||||
--accent: oklch(0.269 0 0);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--ring: oklch(0.556 0 0);
|
||||
--chart-1: oklch(0.87 0 0);
|
||||
--chart-2: oklch(0.556 0 0);
|
||||
--chart-3: oklch(0.439 0 0);
|
||||
--chart-4: oklch(0.371 0 0);
|
||||
--chart-5: oklch(0.269 0 0);
|
||||
--sidebar: oklch(0.205 0 0);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.269 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-ring: oklch(0.556 0 0);
|
||||
/* Deep navy-slate base */
|
||||
--background: oklch(0.12 0.02 240);
|
||||
--foreground: oklch(0.92 0.01 240);
|
||||
|
||||
/* Slightly lighter card */
|
||||
--card: oklch(0.16 0.025 240);
|
||||
--card-foreground: oklch(0.92 0.01 240);
|
||||
|
||||
--popover: oklch(0.16 0.025 240);
|
||||
--popover-foreground: oklch(0.92 0.01 240);
|
||||
|
||||
/* Sky blue primary */
|
||||
--primary: oklch(0.65 0.18 240);
|
||||
--primary-foreground: oklch(0.98 0 0);
|
||||
|
||||
--secondary: oklch(0.22 0.02 240);
|
||||
--secondary-foreground: oklch(0.92 0.01 240);
|
||||
|
||||
--muted: oklch(0.2 0.015 240);
|
||||
--muted-foreground: oklch(0.6 0.02 240);
|
||||
|
||||
--accent: oklch(0.7 0.15 220);
|
||||
--accent-foreground: oklch(0.98 0 0);
|
||||
|
||||
--destructive: oklch(0.6 0.22 25);
|
||||
|
||||
--border: oklch(1 0 0 / 0.08);
|
||||
--input: oklch(1 0 0 / 0.12);
|
||||
|
||||
--ring: oklch(0.65 0.18 240);
|
||||
|
||||
/* Blue-teal-cyan chart palette */
|
||||
--chart-1: oklch(0.65 0.18 240);
|
||||
--chart-2: oklch(0.6 0.15 200);
|
||||
--chart-3: oklch(0.6 0.12 180);
|
||||
--chart-4: oklch(0.7 0.15 220);
|
||||
--chart-5: oklch(0.55 0.15 260);
|
||||
|
||||
/* Deeper sidebar */
|
||||
--sidebar: oklch(0.1 0.015 240);
|
||||
--sidebar-foreground: oklch(0.92 0.01 240);
|
||||
--sidebar-primary: oklch(0.65 0.18 240);
|
||||
--sidebar-primary-foreground: oklch(0.98 0 0);
|
||||
--sidebar-accent: oklch(0.2 0.02 240);
|
||||
--sidebar-accent-foreground: oklch(0.92 0.01 240);
|
||||
--sidebar-border: oklch(1 0 0 / 0.06);
|
||||
--sidebar-ring: oklch(0.65 0.18 240);
|
||||
|
||||
/* Glass overrides for dark */
|
||||
--glass-bg: oklch(1 0 0 / 0.05);
|
||||
--glass-border: oklch(1 0 0 / 0.1);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
@@ -125,6 +154,122 @@
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
html {
|
||||
@apply font-sans;
|
||||
@apply font-sans scroll-smooth;
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom selection color */
|
||||
::selection {
|
||||
background: oklch(0.65 0.18 240 / 0.3);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.dark ::selection {
|
||||
background: oklch(0.65 0.18 240 / 0.4);
|
||||
}
|
||||
|
||||
/* Scrollbar styling */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: oklch(1 0 0 / 0.1);
|
||||
border-radius: 999px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: oklch(1 0 0 / 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Utility classes ─────────────────────────── */
|
||||
|
||||
/* Glass card effect */
|
||||
.glass {
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid var(--glass-border);
|
||||
box-shadow: var(--glass-shadow);
|
||||
}
|
||||
|
||||
/* Gradient text */
|
||||
.text-gradient {
|
||||
background: var(--accent-gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Gradient border (via pseudo-element trick) */
|
||||
.gradient-border {
|
||||
position: relative;
|
||||
}
|
||||
.gradient-border::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
padding: 1px;
|
||||
background: var(--accent-gradient);
|
||||
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
}
|
||||
|
||||
/* Animated background */
|
||||
@keyframes gradient-shift {
|
||||
0%,
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-gradient {
|
||||
background: linear-gradient(
|
||||
-45deg,
|
||||
oklch(0.65 0.18 240 / 0.1),
|
||||
oklch(0.6 0.15 200 / 0.05),
|
||||
oklch(0.12 0.02 240 / 1),
|
||||
oklch(0.65 0.12 180 / 0.08)
|
||||
);
|
||||
background-size: 400% 400%;
|
||||
animation: gradient-shift 15s ease infinite;
|
||||
}
|
||||
|
||||
/* Counter animation placeholder - will be done in JS */
|
||||
@keyframes fade-in-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-in-up {
|
||||
animation: fade-in-up 0.3s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Pulse ring for live indicators */
|
||||
@keyframes pulse-ring {
|
||||
0% {
|
||||
transform: scale(0.8);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: scale(2.5);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.live-pulse-ring {
|
||||
animation: pulse-ring 1.5s ease-out infinite;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user