chris/musicshare
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

New look: slate-indigo panels, pink accent, Poppins, and a gradient card for your song

Browse Source 
Inspired by a dashboard design the user shared.
- App: new palette and fonts, borderless rounded panels with soft shadows, a pink-to-blue
  gradient card for your own song (text and controls switch to white on it), flat cards for
  friends, a 'Hi Chris, welcome back' header, an outline bell, and a pink pill on the active tab.
- Website: the same look, plus a wide-screen layout with a sidebar, the page in a rounded panel,
  and a right column with your profile, recent activity and recent plays. Phones keep the top
  bar and bottom tabs.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011Y2iUsKEWDuRGjK5FPmcUP
This commit is contained in:
chris
2026-10-15 15:01:20 -04:00
co-authored by Claude Opus 5.5
parent 2025225fe4
commit 864ab88627
43 changed files with 648 additions and 394 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/app/globals.css
+171 -111
View File
@@ -1,23 +1,31 @@
:root {
--bg: #07070b;
--surface: rgba(255, 255, 255, 0.045);
--surface-solid: #12121a;
--surface-2: rgba(255, 255, 255, 0.08);
--border: rgba(255, 255, 255, 0.09);
--border-strong: rgba(255, 255, 255, 0.16);
--text: #f4f3fa;
--muted: #9b99ae;
/* Brand: the logo's purple-to-blue. */
--accent: #7c4dff;
--accent-2: #2f8cff;
--grad: linear-gradient(135deg, #7b2ff7 0%, #5b4cf0 50%, #2f8cff 100%);
/* Slate-indigo layers with a pink accent. Panels are a shade apart instead of outlined. */
--bg: #2a2942;
--side: #2a2942;
--panel: #34334f;
--card: #34334f;
--surface: var(--card);
--surface-solid: #34334f;
--surface-2: #403e5e;
--border: rgba(255, 255, 255, 0.07);
--border-strong: rgba(255, 255, 255, 0.13);
--text: #f4f3fb;
--muted: #a19fbd;
--accent: #ff4f8b;
--accent-2: #8b7dff;
--accent-soft: rgba(255, 79, 139, 0.16);
--accent-line: rgba(255, 79, 139, 0.55);
--grad: linear-gradient(135deg, #ff4f8b 0%, #d14fc4 55%, #8b5cf6 100%);
/* Your own song's card: pink, lavender, sky blue, like a holographic card. */
--hero: linear-gradient(135deg, #ff4f8b 0%, #e27ad8 38%, #a99cf6 70%, #8fc8ff 100%);
--accent-text: #fff;
--live: #34d399;
--pin: #fbbf24;
--danger: #fb7185;
--radius: 20px;
--font-display: var(--font-space-grotesk), ui-sans-serif, system-ui, sans-serif;
--font-body: var(--font-inter), ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--live: #3ee0a1;
--pin: #ffc95c;
--danger: #ff6b81;
--radius: 24px;
--shadow: 0 18px 40px -22px rgba(14, 12, 32, 0.75);
--font-display: var(--font-poppins), ui-sans-serif, system-ui, sans-serif;
--font-body: var(--font-poppins), ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--spring: cubic-bezier(0.34, 1.56, 0.64, 1);
color-scheme: dark;
}
@@ -29,67 +37,57 @@ body {
min-height: 100vh;
background: var(--bg);
color: var(--text);
font: 15px/1.55 var(--font-body);
font: 14.5px/1.6 var(--font-body);
-webkit-font-smoothing: antialiased;
}
/* Slowly drifting colour behind everything, so the app never feels static. */
.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ambient::before, .ambient::after {
content: ''; position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%;
filter: blur(90px); opacity: 0.34;
}
.ambient::before { background: #6d28d9; top: -25vmax; left: -15vmax; animation: drift-a 28s ease-in-out infinite alternate; }
.ambient::after { background: #1d6fe0; bottom: -30vmax; right: -20vmax; animation: drift-b 34s ease-in-out infinite alternate; }
@keyframes drift-a { to { transform: translate(18vmax, 12vmax) scale(1.15); } }
@keyframes drift-b { to { transform: translate(-16vmax, -10vmax) scale(0.9); } }
a { color: inherit; }
h1, h2, .brand, .display { font-family: var(--font-display); letter-spacing: -0.02em; }
h1, h2, .brand, .display { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 1.85rem; margin: 0; line-height: 1.15; }
h2 { font-size: 1.1rem; margin: 0 0 0.5rem; }
input, textarea, select {
width: 100%;
padding: 0.7rem 0.85rem;
border-radius: 12px;
border: 1px solid var(--border);
border-radius: 14px;
border: 1px solid transparent;
background: var(--surface-2);
color: var(--text);
font: inherit;
transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
input:focus, textarea:focus, select:focus {
outline: none; border-color: var(--accent); background: rgba(124, 77, 255, 0.08);
box-shadow: 0 0 0 4px rgba(124, 77, 255, 0.2);
outline: none; border-color: var(--accent-line); background: #463f62;
box-shadow: 0 0 0 4px var(--accent-soft);
}
.container { max-width: 680px; margin: 0 auto; padding: 1.75rem 1rem 5rem; }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.service-name { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; margin-bottom: 0.2rem; }
.service-name { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; margin-bottom: 0.2rem; }
.service-badge { width: 1.7rem; height: 1.7rem; border-radius: 0.5rem; display: grid; place-items: center; color: #fff; font-size: 0.95rem; border: 1px solid rgba(255, 255, 255, 0.25); flex-shrink: 0; }
.chip-small { display: inline-block; margin-left: 0.5rem; padding: 0.05rem 0.5rem; border-radius: 999px; background: rgba(255, 255, 255, 0.1); font-size: 0.75rem; color: var(--text); }
.stats a { color: inherit; text-decoration: none; }
.stats a:hover strong { text-decoration: underline; }
.menu { position: relative; }
.menu-list { position: absolute; right: 0; top: calc(100% + 0.35rem); z-index: 20; min-width: 12rem; display: flex; flex-direction: column; padding: 0.35rem; border-radius: 0.8rem; background: #1a1535; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.6); }
.menu-list { position: absolute; right: 0; top: calc(100% + 0.35rem); z-index: 20; min-width: 12rem; display: flex; flex-direction: column; padding: 0.35rem; border-radius: 16px; background: var(--surface-2); box-shadow: var(--shadow); }
.menu-list button { all: unset; cursor: pointer; padding: 0.55rem 0.75rem; border-radius: 0.55rem; font-size: 0.92rem; }
.menu-list button:hover, .menu-list button:focus-visible { background: rgba(255, 255, 255, 0.08); }
.menu-list .danger { color: var(--danger); }
.modal { max-width: 26rem; width: calc(100% - 2rem); color: var(--text); background: #15112c; }
.modal::backdrop { background: rgba(5, 3, 15, 0.7); backdrop-filter: blur(4px); }
.modal { max-width: 26rem; width: calc(100% - 2rem); color: var(--text); background: var(--panel); border: 0; }
.modal::backdrop { background: rgba(20, 18, 40, 0.65); backdrop-filter: blur(4px); }
.modal p { margin-bottom: 1rem; }
.modal .form p { margin: 0; }
.pick-list { max-height: 45vh; overflow-y: auto; }
.pick-list .checkbox { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; font-weight: 500; }
.bell {
position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; margin-left: auto; margin-right: 1rem;
color: var(--muted); background: rgba(255, 255, 255, 0.06); transition: color 0.2s, background 0.2s;
color: var(--text); background: var(--surface-2); transition: color 0.2s, background 0.2s;
}
.bell:hover { color: var(--text); background: rgba(255, 255, 255, 0.12); }
.bell:hover { color: var(--accent); background: #4a4868; }
.bell-badge {
position: absolute; top: -3px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
background: var(--danger); color: #fff; font-size: 0.68rem; font-weight: 700; display: grid; place-items: center;
background: var(--accent); color: #fff; font-size: 0.68rem; font-weight: 600; display: grid; place-items: center;
}
.notifications { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.notification { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 0.8rem; border-radius: 14px; text-decoration: none; color: var(--text); }
@@ -103,12 +101,12 @@ input:focus, textarea:focus, select:focus {
.people .user-chip { min-width: 0; }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.75rem; }
.admin-stat { text-align: center; padding: 1rem; }
.admin-stat-value { font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; }
.admin-stat-value { font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; }
.reports { list-style: none; padding: 0; margin: 0.75rem 0 0; display: flex; flex-direction: column; gap: 0.75rem; }
.report { padding: 0.85rem; border-radius: 0.8rem; background: rgba(255, 255, 255, 0.04); display: flex; flex-direction: column; gap: 0.5rem; }
.report { padding: 0.85rem; border-radius: 16px; background: var(--surface-2); display: flex; flex-direction: column; gap: 0.5rem; }
.report p { margin: 0; }
.chip-small.danger { background: rgba(251, 113, 133, 0.18); color: var(--danger); }
.banner { max-width: 680px; margin: 0 auto 0.5rem; padding: 0.6rem 1rem; border-radius: 0.8rem; background: rgba(123, 47, 247, 0.16); border: 1px solid rgba(123, 47, 247, 0.35); font-size: 0.9rem; }
.banner { max-width: 680px; margin: 0 auto 0.5rem; padding: 0.6rem 1rem; border-radius: 0.8rem; background: var(--accent-soft); border: 1px solid var(--accent-line); font-size: 0.9rem; }
.banner .link-button { font-size: inherit; color: var(--text); text-decoration: underline; }
.footer { max-width: 680px; margin: 0 auto; padding: 0 1rem 2.5rem; display: flex; gap: 1.25rem; justify-content: center; font-size: 0.85rem; }
.footer a { color: var(--muted); text-decoration: none; }
@@ -122,11 +120,11 @@ input:focus, textarea:focus, select:focus {
.song-art { width: 100%; max-width: 360px; aspect-ratio: 1; object-fit: cover; border-radius: 1.1rem; align-self: center; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8); }
.reactions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.7rem; position: relative; }
.recent .reactions { margin: 0.25rem 0 0.4rem 3.4rem; }
.reaction { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.55rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.07); color: var(--text); font: inherit; font-size: 0.9rem; cursor: pointer; transition: transform 0.15s, background 0.2s; }
.reaction:hover:not(:disabled) { transform: translateY(-1px); background: rgba(255, 255, 255, 0.13); }
.reaction { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.6rem; border-radius: 999px; border: 1px solid transparent; background: rgba(255, 255, 255, 0.1); color: var(--text); font: inherit; font-size: 0.9rem; cursor: pointer; transition: transform 0.15s, background 0.2s; }
.reaction:hover:not(:disabled) { transform: translateY(-1px); background: rgba(255, 255, 255, 0.16); }
.reaction:active:not(:disabled) { transform: scale(0.9); }
.reaction:disabled { cursor: default; }
.reaction.mine { border-color: rgba(123, 47, 247, 0.7); background: rgba(123, 47, 247, 0.28); }
.reaction.mine { border-color: var(--accent-line); background: var(--accent-soft); }
.reaction-emoji { font-size: 1.05rem; line-height: 1.3; }
.reaction-count { font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.reaction-add { color: var(--muted); font-size: 1rem; }
@@ -150,10 +148,10 @@ a.reaction { text-decoration: none; }
@media (max-width: 520px) { .comment-actions { opacity: 1; } }
.reaction-add span { font-size: 0.75rem; margin-left: -0.15rem; }
.reaction-add-wrap { position: static; } /* the quick menu anchors to the row, so it never runs off the card */
.reaction-quick { position: absolute; bottom: calc(100% + 0.4rem); left: 0; z-index: 30; display: flex; align-items: center; gap: 0.15rem; padding: 0.3rem; border-radius: 999px; background: #1a1535; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.7); animation: pop 0.18s ease-out; white-space: nowrap; }
.reaction-quick { position: absolute; bottom: calc(100% + 0.4rem); left: 0; z-index: 30; display: flex; align-items: center; gap: 0.15rem; padding: 0.3rem; border-radius: 999px; background: var(--surface-2); box-shadow: var(--shadow); animation: pop 0.18s ease-out; white-space: nowrap; }
.reaction-quick button { all: unset; cursor: pointer; font-size: 1.45rem; padding: 0.2rem 0.3rem; border-radius: 999px; transition: transform 0.15s; }
.reaction-quick button:hover { transform: scale(1.25); }
.reaction-quick button.mine { background: rgba(123, 47, 247, 0.35); }
.reaction-quick button.mine { background: var(--accent-soft); }
.reaction-quick .reaction-more { font-size: 0.85rem; color: var(--muted); padding: 0.3rem 0.6rem; }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(0.92); } to { opacity: 1; transform: none; } }
.emoji-search { width: 100%; margin-bottom: 0.6rem; }
@@ -167,8 +165,8 @@ a.reaction { text-decoration: none; }
.list { display: flex; flex-direction: column; margin: 0.25rem -0.4rem 0; }
.list-row { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 0.75rem; padding: 0.8rem 0.4rem; border-top: 1px solid var(--border); cursor: pointer; border-radius: 0.5rem; transition: background 0.15s; }
.list-row:first-child { border-top: 0; }
.list-row:hover, .list-row:focus-visible { background: rgba(255, 255, 255, 0.05); }
.list-label { font-weight: 600; flex-shrink: 0; }
.list-row:hover, .list-row:focus-visible { background: rgba(255, 255, 255, 0.04); }
.list-label { font-weight: 500; flex-shrink: 0; }
.list-value { flex: 1; min-width: 0; text-align: right; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-chevron { color: var(--muted); font-size: 1.2rem; line-height: 1; transition: transform 0.2s; margin-left: auto; }
.list-value + .list-chevron { margin-left: 0; }
@@ -186,25 +184,22 @@ a.reaction { text-decoration: none; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--muted); }
.error { color: var(--danger); margin: 0; }
.notice {
background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 0.85rem 1rem; margin: 0;
backdrop-filter: blur(16px);
}
.section-label { margin: 0; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-weight: 700; }
.notice { background: var(--card); border-radius: 18px; padding: 0.9rem 1.1rem; margin: 0; box-shadow: var(--shadow); }
.section-label { margin: 0; font-size: 0.85rem; color: var(--muted); font-weight: 500; }
.narrow { max-width: 420px; margin: 2.5rem auto; }
.nav {
display: flex; justify-content: space-between; align-items: center;
padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--border);
position: sticky; top: 0; background: rgba(7, 7, 11, 0.65); backdrop-filter: blur(18px) saturate(1.4); z-index: 10;
position: sticky; top: 0; background: rgba(42, 41, 66, 0.85); backdrop-filter: blur(18px) saturate(1.4); z-index: 10;
}
.brand { font-weight: 700; text-decoration: none; font-size: 1.2rem; display: inline-flex; align-items: center; gap: 0.5rem; }
.brand-logo { width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 4px 14px -4px rgba(47, 140, 255, 0.6); }
.brand-logo { width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 4px 14px -4px rgba(255, 79, 139, 0.6); }
.nav-links { display: flex; gap: 1.1rem; align-items: center; }
.nav-links a { text-decoration: none; color: var(--muted); transition: color 0.2s; }
.nav-links a:hover { color: var(--text); }
.nav-links a.btn-primary { color: var(--accent-text); }
.nav-links a.active { color: var(--text); font-weight: 600; }
.nav-links a.active { color: var(--accent); font-weight: 500; }
/* Phones: main places live in a bottom tab bar, like a native app. */
.tabbar { display: none; }
@media (max-width: 640px) {
@@ -215,41 +210,40 @@ a.reaction { text-decoration: none; }
.tabbar {
display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
padding: 0.35rem 0.5rem calc(0.35rem + env(safe-area-inset-bottom));
background: rgba(7, 7, 11, 0.82); backdrop-filter: blur(18px) saturate(1.4); border-top: 1px solid var(--border);
background: rgba(42, 41, 66, 0.92); backdrop-filter: blur(18px) saturate(1.4); border-top: 1px solid var(--border);
}
.tabbar a {
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.35rem 0;
color: var(--muted); text-decoration: none; font-size: 0.7rem; font-weight: 600; transition: color 0.2s;
}
.tabbar a.active { color: var(--text); }
.tabbar a.active svg { color: #8b9dff; }
.tabbar a.active { color: var(--accent); }
body:has(.tabbar) .container { padding-bottom: 6.5rem; }
body:has(.tabbar) .footer { padding-bottom: 6rem; }
}
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
padding: 0.55rem 1.05rem; border-radius: 999px; border: 1px solid var(--border-strong);
background: var(--surface-2); color: var(--text); font: inherit; font-weight: 600;
padding: 0.55rem 1.1rem; border-radius: 999px; border: 1px solid transparent;
background: var(--surface-2); color: var(--text); font: inherit; font-weight: 500;
text-decoration: none; cursor: pointer; white-space: nowrap;
transition: transform 0.25s var(--spring), border-color 0.2s, background 0.2s, box-shadow 0.25s, filter 0.2s;
}
.btn:hover { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.12); transform: translateY(-1px); }
.btn:hover { background: #4a4868; transform: translateY(-1px); }
.btn:active { transform: scale(0.96); }
.btn:disabled { opacity: 0.55; cursor: default; transform: none; }
.btn-primary {
background: var(--grad); border-color: transparent; color: var(--accent-text);
box-shadow: 0 6px 22px -6px rgba(91, 76, 240, 0.6);
box-shadow: 0 8px 22px -8px rgba(255, 79, 139, 0.7);
}
.btn-primary:hover { background: var(--grad); filter: brightness(1.08); box-shadow: 0 10px 28px -6px rgba(47, 140, 255, 0.65); }
.btn-primary:hover { background: var(--grad); filter: brightness(1.08); box-shadow: 0 12px 28px -8px rgba(255, 79, 139, 0.75); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-small { padding: 0.3rem 0.75rem; font-size: 0.82rem; }
.link-button { background: none; border: 0; color: var(--muted); font: inherit; cursor: pointer; padding: 0; transition: color 0.2s; }
.link-button:hover { color: var(--text); }
.card {
position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
padding: 1.1rem; backdrop-filter: blur(20px) saturate(1.3); overflow: hidden;
position: relative; background: var(--card); border-radius: var(--radius);
padding: 1.25rem; box-shadow: var(--shadow);
}
.card-header { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.85rem; }
.card-header .user-chip { flex-shrink: 0; }
@@ -263,45 +257,46 @@ a.reaction { text-decoration: none; }
.services-picker legend { font-weight: 600; font-size: 0.9rem; padding: 0; margin-bottom: 0.35rem; }
.form label.checkbox { flex-direction: row; align-items: center; gap: 0.5rem; font-weight: 500; }
/* Now-playing cards take their colour from the album art. */
.np-card { border-color: rgba(255, 255, 255, 0.11); padding: 0.9rem 1rem; }
.np-card .card-header { margin-bottom: 0.65rem; }
.np-card .reactions { margin-top: 0.55rem; }
.np-card.pinned { border-color: rgba(251, 191, 36, 0.45); box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.15), 0 18px 40px -20px rgba(251, 191, 36, 0.35); }
.np-backdrop {
position: absolute; inset: -40%; z-index: 0; background-size: cover; background-position: center;
filter: blur(40px) saturate(2.2) brightness(1.1); opacity: 0.6; transform: scale(1.1); transition: opacity 0.6s;
}
.np-card.playing .np-backdrop { animation: breathe 9s ease-in-out infinite alternate; }
@keyframes breathe { to { transform: scale(1.3) rotate(8deg); opacity: 0.75; } }
.np-card::after {
content: ''; position: absolute; inset: 0; z-index: 0;
background: linear-gradient(180deg, rgba(7, 7, 11, 0.05), rgba(7, 7, 11, 0.45));
}
.np-card > *:not(.np-backdrop) { position: relative; z-index: 1; }
.np-card { padding: 1rem 1.15rem; border: 1px solid transparent; }
.np-card .card-header { margin-bottom: 0.7rem; }
.np-card .reactions { margin-top: 0.6rem; }
.np-card.pinned { border-color: var(--accent-line); }
/* Your own song: the gradient "hero" card, with everything on it in white. */
.np-hero { background: var(--hero); overflow: hidden; box-shadow: 0 24px 50px -24px rgba(255, 79, 139, 0.75); color: #fff; }
.np-hero .muted, .np-hero .status, .np-hero .status-live, .np-hero .progress-times, .np-hero .lyrics-note, .np-hero .lyrics-source { color: rgba(255, 255, 255, 0.85); }
.np-hero .status-live { font-weight: 600; color: #fff; }
.np-hero .progress-track { background: rgba(255, 255, 255, 0.3); }
.np-hero .progress-fill { background: #fff; }
.np-hero .btn-primary { background: #fff; color: var(--accent); box-shadow: 0 8px 20px -10px rgba(122, 30, 74, 0.5); }
.np-hero .btn-primary:hover { background: #fff; filter: none; }
.np-hero .btn, .np-hero .service-link, .np-hero .chevron, .np-hero .reaction { background: rgba(255, 255, 255, 0.24); color: #fff; }
.np-hero .chevron:hover, .np-hero .service-link:hover, .np-hero .reaction:hover:not(:disabled) { background: rgba(255, 255, 255, 0.36); color: #fff; }
.np-hero .track-artist, .np-hero a { color: #fff; }
.np-hero .artwork { box-shadow: 0 12px 26px -12px rgba(80, 20, 70, 0.6); }
.pin {
background: none; border: 0; cursor: pointer; font-size: 1.25rem; line-height: 1; color: var(--muted);
padding: 0.15rem 0.25rem; transition: color 0.2s;
}
.pin:hover, .pin.pinned { color: var(--pin); }
.pin.pinned { text-shadow: 0 0 14px rgba(251, 191, 36, 0.6); }
.pin:hover, .pin.pinned { color: var(--accent); }
.pin.pinned { text-shadow: 0 0 14px rgba(255, 79, 139, 0.6); }
.user-chip { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; font-weight: 600; }
.user-chip { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; font-weight: 500; }
.user-chip:hover .user-name { text-decoration: underline; }
.avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; display: block; }
.avatar-empty { display: grid; place-items: center; background: linear-gradient(135deg, #4a1278, #1872cf); color: #fff; font-weight: 700; font-family: var(--font-display); }
.avatar-empty { display: grid; place-items: center; background: linear-gradient(135deg, #ff4f8b, #8b5cf6); color: #fff; font-weight: 600; font-family: var(--font-display); }
/* A spinning gradient ring while someone is listening. */
.avatar-ring { position: relative; display: inline-grid; place-items: center; border-radius: 50%; padding: 2px; flex-shrink: 0; }
.avatar-ring.live::before {
content: ''; position: absolute; inset: 0; border-radius: 50%;
background: conic-gradient(from 0deg, #7b2ff7, #2f8cff, #34d399, #7b2ff7); animation: spin 3.5s linear infinite;
background: conic-gradient(from 0deg, #ff4f8b, #8b7dff, #3ee0a1, #ff4f8b); animation: spin 3.5s linear infinite;
}
.avatar-ring > * { position: relative; border: 2px solid var(--bg); border-radius: 50%; }
.avatar-ring > * { position: relative; border: 2px solid var(--card); border-radius: 50%; }
@keyframes spin { to { transform: rotate(360deg); } }
.status { font-size: 0.85rem; color: var(--muted); display: inline-flex; align-items: center; gap: 0.45rem; }
.status-live { color: var(--live); font-weight: 600; }
.status-live { color: var(--live); font-weight: 500; }
/* Equalizer bars: dancing while playing, resting when paused. */
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
@@ -314,15 +309,15 @@ a.reaction { text-decoration: none; }
.track { display: flex; gap: 1rem; align-items: flex-start; }
.artwork {
width: 112px; height: 112px; border-radius: 14px; object-fit: cover; flex-shrink: 0; background: var(--surface-2);
box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.08);
width: 112px; height: 112px; border-radius: 16px; object-fit: cover; flex-shrink: 0; background: var(--surface-2);
box-shadow: 0 14px 30px -14px rgba(10, 8, 30, 0.8);
transition: transform 0.4s var(--spring);
}
.track:hover .artwork { transform: scale(1.04) rotate(-1deg); }
.artwork-empty { display: grid; place-items: center; font-size: 2rem; color: rgba(255, 255, 255, 0.85); background: linear-gradient(135deg, #4a1278, #1872cf); }
.artwork-empty { display: grid; place-items: center; font-size: 2rem; color: rgba(255, 255, 255, 0.85); background: linear-gradient(135deg, #4b3f78, #6a4c9c); }
.artwork-sm { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; flex-shrink: 0; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.8); }
.track-body { min-width: 0; flex: 1; }
.track-title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-title { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-artist { color: var(--text); opacity: 0.82; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.progress { margin-top: 0.85rem; }
.track-row { display: flex; align-items: center; gap: 0.6rem; }
@@ -336,9 +331,9 @@ a.reaction { text-decoration: none; }
.track-row:hover .artwork { transform: scale(1.04) rotate(-1deg); }
.chevron {
display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 999px; border: 0; cursor: pointer;
background: rgba(255, 255, 255, 0.06); color: var(--muted); transition: transform 0.3s var(--spring), color 0.2s, background 0.2s;
background: var(--surface-2); color: var(--muted); transition: transform 0.3s var(--spring), color 0.2s, background 0.2s;
}
.chevron:hover { color: var(--text); background: rgba(255, 255, 255, 0.12); }
.chevron:hover { color: var(--text); background: #4a4868; }
.chevron.open { transform: rotate(180deg); }
.np-card .progress { margin-top: 0.65rem; }
.np-details { overflow: hidden; }
@@ -348,37 +343,37 @@ a.reaction { text-decoration: none; }
.lyric { margin: 0; line-height: 1.45; transition: opacity 0.3s, font-size 0.3s; }
.lyric-past { opacity: 0.4; }
.lyric-next { opacity: 0.65; }
.lyric-now { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; }
.lyric-now { font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; }
.lyrics-note { margin: 0.9rem 0 0; font-size: 0.85rem; }
.lyrics-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 0.5rem; font-size: 0.82rem; }
.lyrics-source { margin-left: auto; font-size: 0.72rem; }
.progress-track { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.progress-track { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.progress-fill { height: 100%; border-radius: inherit; background: var(--grad); transition: width 1s linear; }
.progress-times { display: flex; justify-content: space-between; margin-top: 0.3rem; font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .progress-fill { transition: none; } }
.track-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.8rem; }
.service-link {
font-size: 0.76rem; color: var(--text); text-decoration: none; padding: 0.2rem 0.55rem; border-radius: 999px;
background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.08); transition: background 0.2s, transform 0.25s var(--spring);
font-size: 0.76rem; color: var(--text); text-decoration: none; padding: 0.25rem 0.7rem; border-radius: 999px;
background: var(--surface-2); transition: background 0.2s, transform 0.25s var(--spring);
}
.service-link:hover { background: rgba(255, 255, 255, 0.16); transform: translateY(-1px); }
.service-link:hover { background: #4a4868; transform: translateY(-1px); }
.service-link.inexact { opacity: 0.55; }
.profile-header { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; padding: 0.5rem 0 0.75rem; }
.profile-header h1 { font-size: 2.1rem; }
.profile-header .bio { margin: 0; max-width: 30rem; }
.stats { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.stats span { padding: 0.3rem 0.8rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); font-size: 0.88rem; }
.stats span { padding: 0.3rem 0.9rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 0.88rem; }
.stats strong { color: var(--text); font-family: var(--font-display); }
.featured blockquote {
margin: 0.9rem 0 0; padding: 0.6rem 0.9rem; border-left: 3px solid transparent; font-style: italic;
border-image: var(--grad) 1; background: rgba(255, 255, 255, 0.04);
border-image: var(--grad) 1; background: var(--surface-2);
}
.search { position: relative; }
.search-results { list-style: none; margin: 0.5rem 0 0; padding: 0.4rem; background: var(--surface-solid); border: 1px solid var(--border); border-radius: 14px; }
.search-results { list-style: none; margin: 0.5rem 0 0; padding: 0.4rem; background: var(--surface-2); border-radius: 16px; box-shadow: var(--shadow); position: absolute; left: 0; right: 0; z-index: 25; }
.search-results li { padding: 0.4rem 0.45rem; border-radius: 10px; transition: background 0.15s; }
.search-results li:hover { background: var(--surface-2); }
.search-results li:hover { background: #4a4868; }
.result { display: flex; gap: 0.6rem; align-items: center; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; width: 100%; text-align: left; padding: 0; }
.recent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.recent-row { display: flex; align-items: center; gap: 0.8rem; padding: 0.5rem 0.4rem; text-decoration: none; border-radius: 12px; transition: background 0.15s, transform 0.25s var(--spring); }
@@ -386,11 +381,11 @@ a.recent-row:hover { background: var(--surface-2); transform: translateX(3px); }
.recent li + li { border-top: 1px solid var(--border); }
.recent-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.recent-text > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-title { font-weight: 600; }
.recent-title { font-weight: 500; }
.recent-time { font-size: 0.8rem; white-space: nowrap; }
.artwork-sm.artwork-empty { display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.qr-card { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; }
.qr { border-radius: 14px; box-shadow: 0 20px 50px -20px rgba(47, 140, 255, 0.6); }
.qr { border-radius: 16px; box-shadow: 0 20px 50px -20px rgba(255, 79, 139, 0.6); }
.credit { margin: 0.6rem 0 0; font-size: 0.8rem; }
.picked { display: flex; gap: 0.75rem; align-items: center; }
@@ -411,12 +406,12 @@ a.recent-row:hover { background: var(--surface-2); transform: translateX(3px); }
.hero { padding: 4.5rem 0 3rem; display: flex; flex-direction: column; gap: 1.25rem; }
.hero h1 { font-size: 3.2rem; letter-spacing: -0.04em; line-height: 1.02; }
.gradient-text {
background: linear-gradient(90deg, #a78bfa, #7dd3fc, #60a5fa, #a78bfa); background-size: 300% 100%;
background: linear-gradient(90deg, #ff4f8b, #e27ad8, #8fc8ff, #ff4f8b); background-size: 300% 100%;
-webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 8s linear infinite;
}
@keyframes shimmer { to { background-position: 300% 0; } }
.hero p { color: var(--muted); font-size: 1.15rem; margin: 0; max-width: 34rem; }
.hero .eq { height: 42px; gap: 5px; color: #8b9dff; }
.hero .eq { height: 42px; gap: 5px; color: var(--accent); }
.hero .eq span { width: 8px; border-radius: 4px; }
@media (max-width: 480px) {
@@ -428,3 +423,68 @@ a.recent-row:hover { background: var(--surface-2); transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
/* Signed in on wide screens: sidebar | page in a rounded panel | your column (components/Shell.tsx). */
.sidebar, .rail { display: none; }
@media (min-width: 900px) {
body:has(.shell) .nav, body:has(.shell) .tabbar { display: none; }
.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.shell-main { min-width: 0; padding: 1rem 1rem 0 0; display: flex; flex-direction: column; }
/* The page sits in a lighter panel; cards inside it are a shade darker, like the reference. */
.main-panel { --card: #2c2b45; --surface-2: #3b395a; flex: 1; background: var(--panel); border-radius: 36px; padding: 0.5rem 0; }
.main-panel .container { max-width: 760px; padding: 2rem 2rem 3rem; }
.shell .footer { padding: 1.25rem 1rem 1.5rem; }
.sidebar { display: flex; flex-direction: column; gap: 2rem; position: sticky; top: 0; height: 100vh; padding: 2.2rem 1.1rem 1.6rem; }
.sidebar-brand { font-family: var(--font-display); font-weight: 600; font-size: 1.45rem; text-decoration: none; color: #b7b4ff; padding-left: 0.9rem; letter-spacing: -0.01em; }
.sidebar-brand span { color: var(--accent); }
.sidebar-nav { display: flex; flex-direction: column; gap: 0.3rem; }
.sidebar-nav a, .sidebar-logout {
display: flex; align-items: center; gap: 0.85rem; padding: 0.75rem 0.95rem; border-radius: 16px; text-decoration: none;
color: var(--muted); font-weight: 400; transition: background 0.2s, color 0.2s;
}
.sidebar-nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.sidebar-nav a.active { color: var(--accent); background: var(--panel); font-weight: 500; }
.sidebar-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 0.7rem; font-weight: 600; display: grid; place-items: center; }
.sidebar-logout { margin-top: auto; background: none; border: 0; font: inherit; font-size: 0.88rem; cursor: pointer; }
.sidebar-logout:hover { color: var(--text); }
}
@media (min-width: 1240px) {
.shell { grid-template-columns: 232px minmax(0, 1fr) 330px; }
.shell-main { padding-right: 0; }
.rail { display: flex; flex-direction: column; gap: 1.6rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 2rem 1.6rem; }
.rail-me { display: flex; align-items: center; gap: 0.75rem; padding-bottom: 1.3rem; border-bottom: 1px solid var(--border); }
.rail-me .bell { margin: 0 0 0 auto; }
.rail-me-link { display: flex; align-items: center; gap: 0.75rem; min-width: 0; text-decoration: none; }
.rail-me-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.rail-me-text strong { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-me-text .muted { font-size: 0.8rem; }
.rail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
.rail-head h2 { margin: 0; font-size: 1.1rem; }
.pill-link { font-size: 0.78rem; color: var(--muted); text-decoration: none; padding: 0.3rem 0.8rem; border-radius: 999px; background: var(--panel); }
.pill-link:hover { color: var(--text); }
.rail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rail-list li + li { border-top: 1px solid var(--border); }
.rail-row { display: flex; align-items: center; gap: 0.8rem; padding: 0.75rem 0.2rem; text-decoration: none; border-radius: 12px; transition: background 0.15s; }
.rail-row:hover { background: rgba(255, 255, 255, 0.03); }
.rail-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.rail-row-text > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-row-title { font-size: 0.88rem; }
.rail-row-text .muted { font-size: 0.74rem; }
.rail-list li.unread .rail-row-title { font-weight: 500; }
.rail-row-end { font-size: 0.8rem; color: var(--muted); white-space: nowrap; }
.rail-art { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--panel); }
.rail-art-empty { display: grid; place-items: center; color: var(--muted); }
}
/* The feed's greeting and search ("Hi Chris, welcome back"). */
.page-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.page-head-text { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; flex: 1; min-width: 0; }
.page-head h1 { font-size: 1.45rem; }
.page-head .muted { font-size: 1rem; }
.page-head .search { flex: 0 1 280px; min-width: 200px; }
.page-head .search input { border-radius: 999px; padding-left: 1.1rem; }
@media (max-width: 640px) { .page-head .search { flex-basis: 100%; } }
.page-section { font-size: 1.15rem; margin: 0.5rem 0 0; }
input[type='checkbox'], input[type='radio'] { width: auto; padding: 0; accent-color: var(--accent); box-shadow: none; }
.services-picker label.checkbox { white-space: nowrap; }
apps/web/src/app/layout.tsx
+16 -14
View File
@@ -1,12 +1,11 @@
import type { Metadata, Viewport } from 'next';
import { Inter, Space_Grotesk } from 'next/font/google';
import { Poppins } from 'next/font/google';
import Link from 'next/link';
import { Nav } from '@/components/Nav';
import { Shell } from '@/components/Shell';
import { Providers } from '@/components/Providers';
import './globals.css';
const inter = Inter({ subsets: ['latin'], variable: '--font-inter', display: 'swap' });
const spaceGrotesk = Space_Grotesk({ subsets: ['latin'], variable: '--font-space-grotesk', display: 'swap' });
const poppins = Poppins({ subsets: ['latin'], weight: ['400', '500', '600', '700'], variable: '--font-poppins', display: 'swap' });
// Previews need absolute image URLs. In production the API lives at <site>/api, so its origin is the site's.
const siteUrl = process.env.SITE_URL ?? new URL(process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:3737').origin;
@@ -21,23 +20,26 @@ export const metadata: Metadata = {
};
export const viewport: Viewport = {
themeColor: '#07070b',
themeColor: '#2a2942',
viewportFit: 'cover',
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" className={`${inter.variable} ${spaceGrotesk.variable}`}>
<html lang="en" className={poppins.variable}>
<body>
<div className="ambient" aria-hidden />
<Providers>
<Nav />
<main className="container">{children}</main>
<footer className="footer">
<Link href="/privacy">Privacy</Link>
<Link href="/terms">Terms</Link>
<a href="mailto:app@musicshare.binarygnome.com">Contact</a>
</footer>
<Shell
footer={
<footer className="footer">
<Link href="/privacy">Privacy</Link>
<Link href="/terms">Terms</Link>
<a href="mailto:app@musicshare.binarygnome.com">Contact</a>
</footer>
}
>
{children}
</Shell>
</Providers>
</body>
</html>
apps/web/src/app/manifest.ts
+2 -2
View File
@@ -10,8 +10,8 @@ export default function manifest(): MetadataRoute.Manifest {
scope: '/',
display: 'standalone',
orientation: 'portrait',
background_color: '#07070b',
theme_color: '#07070b',
background_color: '#2a2942',
theme_color: '#2a2942',
categories: ['music', 'social'],
icons: [
{ src: '/icon-192.png', sizes: '192x192', type: 'image/png', purpose: 'any' },
apps/web/src/app/page.tsx
+16 -8
View File
@@ -8,6 +8,7 @@ import { Avatar } from '@/components/Avatar';
import { Equalizer } from '@/components/Equalizer';
import { NowPlayingCard } from '@/components/NowPlayingCard';
import { SharingControls } from '@/components/SharingControls';
import { UserSearch } from '@/components/UserSearch';
import { api, fetcher, useMe } from '@/lib/api';
import { useRealtime } from '@/lib/useRealtime';
@@ -63,14 +64,21 @@ function Feed() {
return (
<div className="stack">
<header className="page-head">
<div className="page-head-text">
<h1>Hi {me?.displayName ?? me?.username},</h1>
<span className="muted">Welcome back</span>
</div>
<UserSearch placeholder="Search friends" />
</header>
<SharingControls compact />
{mine?.nowPlaying && (
<section className="stack">
<h2 className="section-label">You</h2>
<h2 className="section-label">Your song</h2>
<NowPlayingCard np={mine.nowPlaying} preferred={me?.preferredService} showUser={false} />
</section>
)}
<h1>Friends listening</h1>
<h2 className="page-section">Friends listening</h2>
{!me?.preferredService && (
<p className="notice">
Pick your streaming service in <Link href="/settings">Settings</Link> so songs open in the right app.
@@ -82,16 +90,16 @@ function Feed() {
) : (
<p className="muted">Nothing yet. <Link href="/friends">Find friends</Link>, and their music will show up here live.</p>
))}
{/* Cards rise in on load and glide to new positions when someone pins or starts playing. */}
{/* Cards fade in and glide to new positions when someone pins or starts playing. */}
<AnimatePresence initial={true}>
{feed?.map((np, i) => (
{feed?.map((np) => (
<motion.div
key={np.user.id}
layout
initial={{ opacity: 0, y: 24, scale: 0.98 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
exit={{ opacity: 0, scale: 0.96 }}
transition={{ type: 'spring', stiffness: 380, damping: 32, delay: Math.min(i, 8) * 0.05 }}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.2, layout: { duration: 0.25, ease: 'easeOut' } }}
>
<NowPlayingCard
np={np}
apps/web/src/components/Nav.tsx
+5 -5
View File
@@ -6,7 +6,7 @@ import { useState } from 'react';
import { client, useMe } from '@/lib/api';
import { ActivityBell } from './ActivityBell';
/** Top bar: logo and the four main places. On phones those move to a bottom tab bar. */
/** Top bar: logo and the four main places. On phones those move to a bottom tab bar; wide screens use Shell's sidebar. */
export function Nav() {
const { me } = useMe();
const path = usePathname();
@@ -85,14 +85,14 @@ function VerifyBanner({ email }: { email: string }) {
}
const icon = { width: 22, height: 22, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round' } as const;
const FeedIcon = () => (
export const FeedIcon = () => (
<svg {...icon} aria-hidden>
<path d="M9 18V5l12-2v13" />
<circle cx="6" cy="18" r="3" />
<circle cx="18" cy="16" r="3" />
</svg>
);
const FriendsIcon = () => (
export const FriendsIcon = () => (
<svg {...icon} aria-hidden>
<circle cx="9" cy="8" r="3.5" />
<path d="M2 20c0-3.6 3.1-6 7-6s7 2.4 7 6" />
@@ -100,13 +100,13 @@ const FriendsIcon = () => (
<path d="M18 14c2.4.6 4 2.6 4 6" />
</svg>
);
const ProfileIcon = () => (
export const ProfileIcon = () => (
<svg {...icon} aria-hidden>
<circle cx="12" cy="8" r="4" />
<path d="M4 21c0-4 3.6-7 8-7s8 3 8 7" />
</svg>
);
const SettingsIcon = () => (
export const SettingsIcon = () => (
<svg {...icon} aria-hidden>
<circle cx="12" cy="12" r="3" />
<path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z" />
apps/web/src/components/NowPlayingCard.tsx
+2 -15
View File
@@ -26,22 +26,9 @@ export function NowPlayingCard({
}) {
const sourceLabel = np.sourceApp ?? SERVICE_LABELS[np.source];
const [expanded, setExpanded] = useState(false);
// Your own song gets the gradient "hero" card; friends' songs sit on plain panels.
return (
<article className={`card np-card ${pinned ? 'pinned' : ''} ${np.isPlaying ? 'playing' : ''}`}>
{/* The card glows with its album art; crossfades when the song changes. */}
<AnimatePresence initial={false}>
{np.track.artworkUrl && (
<motion.div
key={np.track.artworkUrl}
className="np-backdrop"
style={{ backgroundImage: `url("${np.track.artworkUrl}")` }}
initial={{ opacity: 0 }}
animate={{ opacity: 0.6 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.8 }}
/>
)}
</AnimatePresence>
<article className={`card np-card ${showUser ? '' : 'np-hero'} ${pinned ? 'pinned' : ''} ${np.isPlaying ? 'playing' : ''}`}>
<header className="card-header">
{showUser && (
<Link href={`/u/${np.user.username}`} className="user-chip">
apps/web/src/components/Shell.tsx
+160
View File
@@ -0,0 +1,160 @@
'use client';
import Link from 'next/link';
import { usePathname, useRouter } from 'next/navigation';
import useSWR from 'swr';
import { notificationPath, notificationText, timeAgo, type MeDTO, type NotificationListDTO, type ProfileDTO } from '@musicshare/shared';
import { client, fetcher, useMe } from '@/lib/api';
import { ActivityBell } from './ActivityBell';
import { Avatar } from './Avatar';
import { FeedIcon, FriendsIcon, Nav, ProfileIcon, SettingsIcon } from './Nav';
/**
* Signed in on a wide screen: a sidebar on the left, the page in a rounded panel in the middle, and your
* profile, recent activity and recent plays on the right. Narrower screens drop the right column, then
* fall back to the top bar and bottom tabs (Nav).
*/
export function Shell({ children, footer }: { children: React.ReactNode; footer: React.ReactNode }) {
const { me } = useMe();
return (
<>
<Nav />
<div className={me ? 'shell' : undefined}>
{me && <Sidebar me={me} />}
<div className="shell-main">
<main className={me ? 'main-panel' : 'container'}>{me ? <div className="container">{children}</div> : children}</main>
{footer}
</div>
{me && <RightRail me={me} />}
</div>
</>
);
}
function Sidebar({ me }: { me: MeDTO }) {
const path = usePathname();
const router = useRouter();
const { data } = useSWR<NotificationListDTO>('/notifications', fetcher, { refreshInterval: 60_000 });
const unread = data?.unread ?? 0;
const items = [
{ href: '/', label: 'Feed', icon: <FeedIcon />, active: path === '/' },
{ href: '/friends', label: 'Friends', icon: <FriendsIcon />, active: path.startsWith('/friends') },
{ href: '/notifications', label: 'Activity', icon: <BellIcon />, active: path.startsWith('/notifications'), badge: unread },
{ href: `/u/${me.username}`, label: 'Profile', icon: <ProfileIcon />, active: path.startsWith(`/u/${me.username}`) },
{ href: '/settings', label: 'Settings', icon: <SettingsIcon />, active: path.startsWith('/settings') || path === '/admin' },
];
const { mutate } = useMe();
const logOut = async () => {
await client.logout();
await mutate(undefined, { revalidate: true });
router.push('/');
};
return (
<aside className="sidebar" aria-label="Main">
<Link href="/" className="sidebar-brand">
musicshare<span>.</span>
</Link>
<nav className="sidebar-nav">
{items.map((i) => (
<Link key={i.href} href={i.href} className={i.active ? 'active' : ''} aria-current={i.active ? 'page' : undefined}>
{i.icon}
<span>{i.label}</span>
{i.badge ? <span className="sidebar-badge">{i.badge > 99 ? '99+' : i.badge}</span> : null}
</Link>
))}
</nav>
<button type="button" className="sidebar-logout" onClick={logOut}>
<LogOutIcon />
Log out
</button>
</aside>
);
}
function RightRail({ me }: { me: MeDTO }) {
const { data: activity } = useSWR<NotificationListDTO>('/notifications', fetcher, { refreshInterval: 60_000 });
const { data: profile } = useSWR<ProfileDTO>(`/users/${me.username}`, fetcher);
const name = me.displayName ?? me.username;
return (
<aside className="rail" aria-label="You">
<div className="rail-me">
<Link href={`/u/${me.username}`} className="rail-me-link">
<Avatar user={me} size={46} />
<span className="rail-me-text">
<strong>{name}</strong>
<span className="muted">@{me.username}</span>
</span>
</Link>
<ActivityBell />
</div>
<section className="rail-section">
<header className="rail-head">
<h2>Activity</h2>
<Link href="/notifications" className="pill-link">
See all
</Link>
</header>
{activity?.notifications.length === 0 && <p className="muted small">Reactions, comments and new followers show up here.</p>}
<ul className="rail-list">
{activity?.notifications.slice(0, 5).map((n) => {
const { title, body } = notificationText(n);
return (
<li key={n.id} className={n.read ? '' : 'unread'}>
<Link href={notificationPath(n)} className="rail-row">
<Avatar user={n.actor} size={38} />
<span className="rail-row-text">
<span className="rail-row-title">{title}</span>
<span className="muted">{body || timeAgo(n.createdAt)}</span>
</span>
<span className="rail-row-end">{n.emoji ?? (n.type === 'comment' || n.type === 'reply' ? '💬' : timeAgo(n.createdAt))}</span>
</Link>
</li>
);
})}
</ul>
</section>
{profile && profile.recent.length > 0 && (
<section className="rail-section">
<header className="rail-head">
<h2>Your recent plays</h2>
</header>
<ul className="rail-list">
{profile.recent.slice(0, 5).map((p) => (
<li key={p.listenId}>
<Link href={`/play/${p.listenId}`} className="rail-row">
{p.track.artworkUrl ? (
<img className="rail-art" src={p.track.artworkUrl} alt="" />
) : (
<span className="rail-art rail-art-empty">♪</span>
)}
<span className="rail-row-text">
<span className="rail-row-title">{p.track.title}</span>
<span className="muted">{p.track.artist}</span>
</span>
<span className="rail-row-end">{timeAgo(p.playedAt)}</span>
</Link>
</li>
))}
</ul>
</section>
)}
</aside>
);
}
const icon = { width: 20, height: 20, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round' } as const;
const BellIcon = () => (
<svg {...icon} aria-hidden>
<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
<path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
</svg>
);
const LogOutIcon = () => (
<svg {...icon} aria-hidden>
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
<path d="M16 17l5-5-5-5" />
<path d="M21 12H9" />
</svg>
);
apps/web/src/components/UserSearch.tsx
+2 -2
View File
@@ -8,7 +8,7 @@ import { fetcher } from '@/lib/api';
import { useDebounced } from '@/lib/useDebounced';
import { Avatar } from './Avatar';
export function UserSearch() {
export function UserSearch({ placeholder = 'Find friends by username' }: { placeholder?: string }) {
const [q, setQ] = useState('');
const debounced = useDebounced(q.trim(), 250);
const { data } = useSWR<UserSummaryDTO[]>(
@@ -17,7 +17,7 @@ export function UserSearch() {
);
return (
<div className="search">
<input placeholder="Find friends by username" value={q} onChange={(e) => setQ(e.target.value)} />
<input placeholder={placeholder} aria-label="Search people" value={q} onChange={(e) => setQ(e.target.value)} />
{data && debounced.length >= 2 && (
<ul className="search-results">
{data.length === 0 && <li className="muted">No one found</li>}