feat(app): integrate Jamendo API and enhance UI components
- Added Jamendo API client ID to the environment configuration for music search. - Updated pnpm lock file to include new dependencies for enhanced functionality. - Integrated Plyr library for improved media playback experience. - Refactored ChatHeader, ChatInput, and ChatMessage components to utilize new styles and improve user interaction. - Enhanced CSS styles for path-glass elements to align with the new design system. Made-with: Cursor
This commit is contained in:
Dorian
@@ -148,6 +148,171 @@ body {
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
|
||||
/* ===== PATH GLASS — from Archy OnboardingPath (Choose Your Path) ===== */
|
||||
.path-glass-container {
|
||||
background: rgba(0, 0, 0, 0.65);
|
||||
backdrop-filter: blur(40px);
|
||||
-webkit-backdrop-filter: blur(40px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 24px;
|
||||
box-shadow:
|
||||
0 20px 60px rgba(0, 0, 0, 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.path-glass-card {
|
||||
background: rgba(0, 0, 0, 0.65);
|
||||
backdrop-filter: blur(40px);
|
||||
-webkit-backdrop-filter: blur(40px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 24px;
|
||||
box-shadow:
|
||||
0 20px 60px rgba(0, 0, 0, 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
overflow-x: hidden;
|
||||
overflow-y: visible;
|
||||
}
|
||||
|
||||
/* Chat bubbles / option cards — path-option-card style */
|
||||
.path-glass-bubble {
|
||||
position: relative;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
box-shadow:
|
||||
0 8px 24px rgba(0, 0, 0, 0.45),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.22);
|
||||
border-radius: 16px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.path-glass-bubble::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
padding: 2px;
|
||||
background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), transparent);
|
||||
-webkit-mask:
|
||||
linear-gradient(#fff 0 0) content-box,
|
||||
linear-gradient(#fff 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.path-glass-bubble-user {
|
||||
position: relative;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
box-shadow:
|
||||
0 8px 24px rgba(0, 0, 0, 0.45),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.25);
|
||||
border-radius: 16px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.path-glass-bubble-user::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
padding: 2px;
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
|
||||
-webkit-mask:
|
||||
linear-gradient(#fff 0 0) content-box,
|
||||
linear-gradient(#fff 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Buttons — path-action-button style */
|
||||
.path-glass-button {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 48px;
|
||||
min-height: 48px;
|
||||
padding-block: 0 !important;
|
||||
line-height: 48px;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
color: rgba(255, 255, 255, 0.96);
|
||||
box-shadow:
|
||||
0 8px 24px rgba(0, 0, 0, 0.45),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.22);
|
||||
border-radius: 16px;
|
||||
border: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.path-glass-button::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
padding: 2px;
|
||||
background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), transparent);
|
||||
-webkit-mask:
|
||||
linear-gradient(#fff 0 0) content-box,
|
||||
linear-gradient(#fff 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.path-glass-button-sm {
|
||||
min-height: 0 !important;
|
||||
height: auto !important;
|
||||
line-height: inherit;
|
||||
padding-block: 0.375rem !important;
|
||||
padding-inline: 0.75rem;
|
||||
}
|
||||
|
||||
.path-glass-button:hover {
|
||||
transform: translateY(-2px);
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
box-shadow:
|
||||
0 12px 32px rgba(0, 0, 0, 0.6),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.path-glass-button:hover::before {
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent);
|
||||
}
|
||||
|
||||
/* Play icon / option-card style — no border-radius so rounded-full works for circles */
|
||||
.path-glass-icon {
|
||||
position: relative;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
box-shadow:
|
||||
0 8px 24px rgba(0, 0, 0, 0.45),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.22);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.path-glass-icon::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
padding: 2px;
|
||||
background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), transparent);
|
||||
-webkit-mask:
|
||||
linear-gradient(#fff 0 0) content-box,
|
||||
linear-gradient(#fff 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.nav-tab-active {
|
||||
position: relative;
|
||||
background: rgba(0, 0, 0, 0.35) !important;
|
||||
@@ -251,6 +416,64 @@ body {
|
||||
.light .nav-tab-active::before {
|
||||
background: linear-gradient(135deg, rgba(0, 0, 0, 0.08), transparent);
|
||||
}
|
||||
|
||||
/* Path glass — light mode (lighter variant) */
|
||||
.light .path-glass-container,
|
||||
.light .path-glass-card {
|
||||
background: rgba(255, 255, 255, 0.75);
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
box-shadow:
|
||||
0 20px 60px rgba(0, 0, 0, 0.08),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.light .path-glass-bubble {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
box-shadow:
|
||||
0 8px 24px rgba(0, 0, 0, 0.08),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.light .path-glass-bubble::before {
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), transparent);
|
||||
}
|
||||
|
||||
.light .path-glass-bubble-user {
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
box-shadow:
|
||||
0 8px 24px rgba(0, 0, 0, 0.06),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.light .path-glass-bubble-user::before {
|
||||
background: linear-gradient(135deg, rgba(0, 0, 0, 0.08), transparent);
|
||||
}
|
||||
|
||||
.light .path-glass-button {
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
color: #fafafa;
|
||||
box-shadow:
|
||||
0 8px 24px rgba(0, 0, 0, 0.15),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.light .path-glass-button:hover {
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
box-shadow:
|
||||
0 12px 32px rgba(0, 0, 0, 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.light .path-glass-icon {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
box-shadow:
|
||||
0 8px 24px rgba(0, 0, 0, 0.08),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.light .path-glass-icon::before {
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), transparent);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== FOCUS STATES — gamepad/keyboard glow ===== */
|
||||
@@ -354,75 +577,71 @@ input:focus-visible {
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
|
||||
/* ===== POSTER CARD — Indeehub-style gradient border ===== */
|
||||
/* ===== POSTER CARD — path-glass border ===== */
|
||||
|
||||
.poster-card {
|
||||
margin: 2px;
|
||||
padding: 2px;
|
||||
border-radius: 0.75rem;
|
||||
background: linear-gradient(127deg, var(--color-accent) 0%, var(--color-info) 100%);
|
||||
transition: margin 0.2s ease, padding 0.2s ease;
|
||||
}
|
||||
|
||||
.poster-card:hover {
|
||||
margin: 0;
|
||||
padding: 4px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
box-shadow:
|
||||
0 4px 16px rgba(0, 0, 0, 0.25),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.light .poster-card {
|
||||
background: linear-gradient(127deg, rgba(247, 147, 26, 0.4) 0%, rgba(59, 130, 246, 0.35) 100%);
|
||||
border-color: rgba(0, 0, 0, 0.08);
|
||||
box-shadow:
|
||||
0 4px 16px rgba(0, 0, 0, 0.06),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.poster-card-sm {
|
||||
margin: 1px;
|
||||
padding: 1px;
|
||||
border-radius: 0.5rem;
|
||||
background: linear-gradient(127deg, var(--color-accent) 0%, var(--color-info) 100%);
|
||||
transition: margin 0.2s ease, padding 0.2s ease;
|
||||
}
|
||||
|
||||
.poster-card-sm:hover {
|
||||
margin: 0;
|
||||
padding: 2px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
box-shadow:
|
||||
0 2px 8px rgba(0, 0, 0, 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.light .poster-card-sm {
|
||||
background: linear-gradient(127deg, rgba(247, 147, 26, 0.35) 0%, rgba(59, 130, 246, 0.3) 100%);
|
||||
border-color: rgba(0, 0, 0, 0.08);
|
||||
box-shadow:
|
||||
0 2px 8px rgba(0, 0, 0, 0.06),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
/* Cover card — same as poster-card, for square album art */
|
||||
/* Cover card — path-glass border, square album art */
|
||||
.cover-card {
|
||||
margin: 2px;
|
||||
padding: 2px;
|
||||
border-radius: 0.75rem;
|
||||
background: linear-gradient(127deg, var(--color-accent) 0%, var(--color-info) 100%);
|
||||
transition: margin 0.2s ease, padding 0.2s ease;
|
||||
}
|
||||
|
||||
.cover-card:hover {
|
||||
margin: 0;
|
||||
padding: 4px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
box-shadow:
|
||||
0 4px 16px rgba(0, 0, 0, 0.25),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.light .cover-card {
|
||||
background: linear-gradient(127deg, rgba(247, 147, 26, 0.4) 0%, rgba(59, 130, 246, 0.35) 100%);
|
||||
border-color: rgba(0, 0, 0, 0.08);
|
||||
box-shadow:
|
||||
0 4px 16px rgba(0, 0, 0, 0.06),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.cover-card-sm {
|
||||
margin: 1px;
|
||||
padding: 1px;
|
||||
border-radius: 0.5rem;
|
||||
background: linear-gradient(127deg, var(--color-accent) 0%, var(--color-info) 100%);
|
||||
transition: margin 0.2s ease, padding 0.2s ease;
|
||||
}
|
||||
|
||||
.cover-card-sm:hover {
|
||||
margin: 0;
|
||||
padding: 2px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
box-shadow:
|
||||
0 2px 8px rgba(0, 0, 0, 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.light .cover-card-sm {
|
||||
background: linear-gradient(127deg, rgba(247, 147, 26, 0.35) 0%, rgba(59, 130, 246, 0.3) 100%);
|
||||
border-color: rgba(0, 0, 0, 0.08);
|
||||
box-shadow:
|
||||
0 2px 8px rgba(0, 0, 0, 0.06),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.animate-fade-up {
|
||||
|
||||
Reference in New Issue
Block a user