WIP. A little custom music server
fix: shadcn
+130
-3
+3
bun.lock
+3
bun.lock
···
64
64
"react-dom": "19.1.1",
65
65
"react-server-dom-webpack": "19.1.1",
66
66
"tailwind-merge": "^3.3.1",
67
+
"tw-animate-css": "^1.4.0",
67
68
"vite-tsconfig-paths": "^5.1.4",
68
69
"waku": "0.26.1",
69
70
},
···
980
981
"tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
981
982
982
983
"turbo-stream": ["turbo-stream@3.1.0", "", {}, "sha512-tVI25WEXl4fckNEmrq70xU1XumxUwEx/FZD5AgEcV8ri7Wvrg2o7GEq8U7htrNx3CajciGm+kDyhRf5JB6t7/A=="],
984
+
985
+
"tw-animate-css": ["tw-animate-css@1.4.0", "", {}, "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ=="],
983
986
984
987
"typescript": ["typescript@5.9.2", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A=="],
985
988
+5
-3
web/components.json
+5
-3
web/components.json
···
2
2
"$schema": "https://ui.shadcn.com/schema.json",
3
3
"style": "default",
4
4
"tailwind": {
5
-
"config": "tailwind.config.js",
6
-
"css": "styles/styles.css",
5
+
"config": "tailwind.config.ts",
6
+
"css": "src/styles.css",
7
7
"baseColor": "slate",
8
8
"cssVariables": true,
9
9
"prefix": ""
···
13
13
"aliases": {
14
14
"components": "@/components",
15
15
"utils": "@/lib/utils",
16
-
"ui": "@/components/ui"
16
+
"ui": "@/components/ui",
17
+
"lib": "@/lib",
18
+
"hooks": "@/hooks"
17
19
}
18
20
}
+1
web/package.json
+1
web/package.json
+121
web/src/styles.css
+121
web/src/styles.css
···
1
1
@import "tailwindcss";
2
+
@import "tw-animate-css";
2
3
4
+
@custom-variant dark (&:is(.dark *));
5
+
6
+
:root {
7
+
--background: oklch(1 0 0);
8
+
--foreground: oklch(0.145 0 0);
9
+
--card: oklch(1 0 0);
10
+
--card-foreground: oklch(0.145 0 0);
11
+
--popover: oklch(1 0 0);
12
+
--popover-foreground: oklch(0.145 0 0);
13
+
--primary: oklch(0.205 0 0);
14
+
--primary-foreground: oklch(0.985 0 0);
15
+
--secondary: oklch(0.97 0 0);
16
+
--secondary-foreground: oklch(0.205 0 0);
17
+
--muted: oklch(0.97 0 0);
18
+
--muted-foreground: oklch(0.556 0 0);
19
+
--accent: oklch(0.97 0 0);
20
+
--accent-foreground: oklch(0.205 0 0);
21
+
--destructive: oklch(0.577 0.245 27.325);
22
+
--destructive-foreground: oklch(0.577 0.245 27.325);
23
+
--border: oklch(0.922 0 0);
24
+
--input: oklch(0.922 0 0);
25
+
--ring: oklch(0.708 0 0);
26
+
--chart-1: oklch(0.646 0.222 41.116);
27
+
--chart-2: oklch(0.6 0.118 184.704);
28
+
--chart-3: oklch(0.398 0.07 227.392);
29
+
--chart-4: oklch(0.828 0.189 84.429);
30
+
--chart-5: oklch(0.769 0.188 70.08);
31
+
--radius: 0.625rem;
32
+
--sidebar: oklch(0.985 0 0);
33
+
--sidebar-foreground: oklch(0.145 0 0);
34
+
--sidebar-primary: oklch(0.205 0 0);
35
+
--sidebar-primary-foreground: oklch(0.985 0 0);
36
+
--sidebar-accent: oklch(0.97 0 0);
37
+
--sidebar-accent-foreground: oklch(0.205 0 0);
38
+
--sidebar-border: oklch(0.922 0 0);
39
+
--sidebar-ring: oklch(0.708 0 0);
40
+
}
41
+
42
+
.dark {
43
+
--background: oklch(0.145 0 0);
44
+
--foreground: oklch(0.985 0 0);
45
+
--card: oklch(0.145 0 0);
46
+
--card-foreground: oklch(0.985 0 0);
47
+
--popover: oklch(0.145 0 0);
48
+
--popover-foreground: oklch(0.985 0 0);
49
+
--primary: oklch(0.985 0 0);
50
+
--primary-foreground: oklch(0.205 0 0);
51
+
--secondary: oklch(0.269 0 0);
52
+
--secondary-foreground: oklch(0.985 0 0);
53
+
--muted: oklch(0.269 0 0);
54
+
--muted-foreground: oklch(0.708 0 0);
55
+
--accent: oklch(0.269 0 0);
56
+
--accent-foreground: oklch(0.985 0 0);
57
+
--destructive: oklch(0.396 0.141 25.723);
58
+
--destructive-foreground: oklch(0.637 0.237 25.331);
59
+
--border: oklch(0.269 0 0);
60
+
--input: oklch(0.269 0 0);
61
+
--ring: oklch(0.439 0 0);
62
+
--chart-1: oklch(0.488 0.243 264.376);
63
+
--chart-2: oklch(0.696 0.17 162.48);
64
+
--chart-3: oklch(0.769 0.188 70.08);
65
+
--chart-4: oklch(0.627 0.265 303.9);
66
+
--chart-5: oklch(0.645 0.246 16.439);
67
+
--sidebar: oklch(0.205 0 0);
68
+
--sidebar-foreground: oklch(0.985 0 0);
69
+
--sidebar-primary: oklch(0.488 0.243 264.376);
70
+
--sidebar-primary-foreground: oklch(0.985 0 0);
71
+
--sidebar-accent: oklch(0.269 0 0);
72
+
--sidebar-accent-foreground: oklch(0.985 0 0);
73
+
--sidebar-border: oklch(0.269 0 0);
74
+
--sidebar-ring: oklch(0.439 0 0);
75
+
}
76
+
77
+
@theme inline {
78
+
--color-background: var(--background);
79
+
--color-foreground: var(--foreground);
80
+
--color-card: var(--card);
81
+
--color-card-foreground: var(--card-foreground);
82
+
--color-popover: var(--popover);
83
+
--color-popover-foreground: var(--popover-foreground);
84
+
--color-primary: var(--primary);
85
+
--color-primary-foreground: var(--primary-foreground);
86
+
--color-secondary: var(--secondary);
87
+
--color-secondary-foreground: var(--secondary-foreground);
88
+
--color-muted: var(--muted);
89
+
--color-muted-foreground: var(--muted-foreground);
90
+
--color-accent: var(--accent);
91
+
--color-accent-foreground: var(--accent-foreground);
92
+
--color-destructive: var(--destructive);
93
+
--color-destructive-foreground: var(--destructive-foreground);
94
+
--color-border: var(--border);
95
+
--color-input: var(--input);
96
+
--color-ring: var(--ring);
97
+
--color-chart-1: var(--chart-1);
98
+
--color-chart-2: var(--chart-2);
99
+
--color-chart-3: var(--chart-3);
100
+
--color-chart-4: var(--chart-4);
101
+
--color-chart-5: var(--chart-5);
102
+
--radius-sm: calc(var(--radius) - 4px);
103
+
--radius-md: calc(var(--radius) - 2px);
104
+
--radius-lg: var(--radius);
105
+
--radius-xl: calc(var(--radius) + 4px);
106
+
--color-sidebar: var(--sidebar);
107
+
--color-sidebar-foreground: var(--sidebar-foreground);
108
+
--color-sidebar-primary: var(--sidebar-primary);
109
+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
110
+
--color-sidebar-accent: var(--sidebar-accent);
111
+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
112
+
--color-sidebar-border: var(--sidebar-border);
113
+
--color-sidebar-ring: var(--sidebar-ring);
114
+
}
115
+
116
+
@layer base {
117
+
* {
118
+
@apply border-border outline-ring/50;
119
+
}
120
+
body {
121
+
@apply bg-background text-foreground;
122
+
}
123
+
}
3
124
@font-face {
4
125
font-family: "Geist";
5
126
src: url("/fonts/Geist[wght].woff2") format("woff2");