refactor: rename frontend/ to web-player/ and format with prettier

Updates the compose build context, the Dockerfile header, the package name and the docs. The compose service and container keep the name frontend/musify-frontend, since nginx routes to http://frontend:3000. The source files also carry the first prettier pass, so the rename and the reformat land together for them.
2026-07-20 07:35:01 +02:00
parent 05514a1c6e
commit 97daa13ebd
104 changed files with 134 additions and 2457 deletions
@@ -0,0 +1,181 @@
+@import 'tailwindcss';
+
+@theme {
+	--font-sans: 'Inter Variable', ui-sans-serif, system-ui, sans-serif;
+	--color-neutral-950: #08080a;
+
+	--color-bg: var(--mf-bg);
+	--color-elevated: var(--mf-elevated);
+	--color-surface: var(--mf-surface);
+	--color-surface-2: var(--mf-surface-2);
+	--color-surface-hover: var(--mf-surface-hover);
+	--color-hover: rgba(255, 255, 255, 0.05);
+	--color-line: var(--mf-border);
+	--color-line-strong: var(--mf-border-strong);
+	--color-track: var(--mf-track);
+	--color-fg: var(--mf-text);
+	--color-fg-2: var(--mf-text-2);
+	--color-fg-3: var(--mf-text-3);
+	--color-muted: var(--mf-text-4);
+	--color-accent: var(--mf-accent);
+	--color-accent-soft: var(--mf-accent-60);
+	--color-on-accent: #ffffff;
+	--color-danger: oklch(63.7% 0.237 25.331);
+	--color-danger-fg: oklch(88.5% 0.062 18.334);
+
+	--radius-control: 0.625rem;
+	--radius-panel: 1rem;
+	--radius-art: 0.75rem;
+	--radius-art-lg: 1rem;
+
+	--shadow-art: 0 12px 28px -10px rgba(0, 0, 0, 0.6);
+	--shadow-art-lg: 0 20px 45px -15px rgba(0, 0, 0, 0.7);
+	--shadow-menu: 0 12px 28px -10px rgba(0, 0, 0, 0.6);
+}
+
+@utility page-x {
+	padding-inline: --spacing(8);
+}
+
+@utility scrollbar-stable {
+	scrollbar-gutter: stable;
+}
+
+:root {
+	color-scheme: dark;
+}
+
+button:not(:disabled),
+[role='button'],
+label:has(input[type='file']),
+summary {
+	cursor: pointer;
+}
+
+button:disabled {
+	cursor: not-allowed;
+}
+
+@keyframes fade-up {
+	from {
+		opacity: 0;
+		transform: translateY(0.75rem);
+	}
+	to {
+		opacity: 1;
+		transform: none;
+	}
+}
+
+@keyframes fade-in {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes pop-in {
+	from {
+		opacity: 0;
+		transform: scale(0.96) translateY(0.5rem);
+	}
+	to {
+		opacity: 1;
+		transform: none;
+	}
+}
+
+@keyframes slide-in-left {
+	from {
+		transform: translateX(-100%);
+	}
+	to {
+		transform: translateX(0);
+	}
+}
+
+@keyframes equalize {
+	0%,
+	100% {
+		transform: scaleY(0.35);
+	}
+	50% {
+		transform: scaleY(1);
+	}
+}
+
+@keyframes breathe {
+	0%,
+	100% {
+		opacity: 0.55;
+		transform: scale(1.2);
+	}
+	50% {
+		opacity: 0.78;
+		transform: scale(1.32);
+	}
+}
+
+@keyframes sheen {
+	from {
+		background-position: 200% 0;
+	}
+	to {
+		background-position: -200% 0;
+	}
+}
+
+.animate-enter {
+	animation: fade-up 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+.animate-pop {
+	animation: pop-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+.animate-fade {
+	animation: fade-in 0.4s ease both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	*,
+	*::before,
+	*::after {
+		animation-duration: 0.001ms !important;
+		animation-delay: 0ms !important;
+		transition-duration: 0.001ms !important;
+		scroll-behavior: auto !important;
+	}
+}
+
+html {
+	scroll-behavior: smooth;
+	scrollbar-width: thin;
+	scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
+	background-color: var(--mf-bg);
+}
+
+html.home {
+	background-image: linear-gradient(to bottom, var(--mf-accent), transparent 340px);
+	background-repeat: no-repeat;
+}
+
+::-webkit-scrollbar {
+	width: 8px;
+	height: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+	background-color: rgba(255, 255, 255, 0.18);
+	border-radius: 9999px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+	background-color: rgba(255, 255, 255, 0.32);
+}
+
+::-webkit-scrollbar-track {
+	background: transparent;
+}