Custom app launcher, browser home page, and service monitor.
cute.haus
homelab
react
typescript
make pretty
Aly Raffauf
(Jan 29, 2026, 8:18 PM EST)
85daaa37
b14ac97b
+21
-13
+5
-5
src/App.tsx
+5
-5
src/App.tsx
···
17
17
<div className="grid gap-4 md:grid-cols-2">
18
18
<div>
19
19
{" "}
20
-
<h2 className="text-2xl font-semibold text-zinc-400 mb-4">Weather</h2>
20
+
<h2 className="text-2xl font-semibold text-white/70 mb-4">Weather</h2>
21
21
<Weather />
22
22
</div>
23
23
24
24
<div>
25
-
<h2 className="text-2xl font-semibold text-zinc-400 mb-4">
25
+
<h2 className="text-2xl font-semibold text-white/70 mb-4">
26
26
Hacker News
27
27
</h2>
28
28
<HackerNews />
29
29
</div>
30
30
</div>
31
-
<h2 className="text-2xl font-semibold text-zinc-400 mt-8 mb-4">
31
+
<h2 className="text-2xl font-semibold text-white/70 mt-8 mb-4">
32
32
Websites
33
33
</h2>
34
34
<ServiceGrid services={websites} columns={2} />
35
-
<h2 className="text-2xl font-semibold text-zinc-400 mt-8 mb-4">
35
+
<h2 className="text-2xl font-semibold text-white/70 mt-8 mb-4">
36
36
Public Apps
37
37
</h2>
38
38
<ServiceGrid services={apps} columns={4} />
39
-
<h2 className="text-2xl font-semibold text-zinc-400 mt-8 mb-4">
39
+
<h2 className="text-2xl font-semibold text-white/70 mt-8 mb-4">
40
40
Tailnet Apps
41
41
</h2>
42
42
<ServiceGrid services={privateApps} columns={4} />
+1
-1
src/Layout.tsx
+1
-1
src/Layout.tsx
···
2
2
3
3
export default function Layout({ children }: { children: React.ReactNode }) {
4
4
return (
5
-
<main className="min-h-screen p-8 max-w-6xl mx-auto">
5
+
<main className="min-h-screen p-8 max-w-6xl mx-auto bg-zinc-900">
6
6
{/*<header className="mb-12">
7
7
<h1 className="text-4xl font-bold">cute.haus</h1>
8
8
</header>*/}
+1
-1
src/components/HackerNews.tsx
+1
-1
src/components/HackerNews.tsx
···
20
20
}
21
21
22
22
return (
23
-
<div className="p-4 bg-zinc-800 border border-zinc-700 rounded-lg">
23
+
<div className="p-4 rounded-xl bg-white/5 border border-rose-400/20">
24
24
<ul className="space-y-2">
25
25
{stories.map((story) => (
26
26
<li key={story.id} className="flex gap-3 text-sm">
+8
-4
src/components/SearchBar.tsx
+8
-4
src/components/SearchBar.tsx
···
14
14
15
15
return (
16
16
<form
17
-
className="p-4 bg-zinc-800 border border-zinc-700 rounded-lg"
17
+
className="p-4 rounded-xl bg-white/5 border border-rose-400/20"
18
18
onSubmit={(e) => {
19
19
e.preventDefault();
20
20
if (query.trim()) {
···
28
28
onChange={(e) =>
29
29
setEngine(engines.find((eng) => eng.name === e.target.value)!)
30
30
}
31
-
className="px-3 py-2 bg-zinc-900 border border-zinc-600 rounded text-white focus:outline-none focus:border-zinc-500"
31
+
className="px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-white/40"
32
32
>
33
33
{engines.map((eng) => (
34
-
<option key={eng.name} value={eng.name}>
34
+
<option
35
+
key={eng.name}
36
+
value={eng.name}
37
+
className="bg-zinc-900 text-white"
38
+
>
35
39
{eng.name}
36
40
</option>
37
41
))}
···
41
45
value={query}
42
46
onChange={(e) => setQuery(e.target.value)}
43
47
placeholder="Search..."
44
-
className="flex-1 px-3 py-2 bg-zinc-900 border border-zinc-600 rounded text-white placeholder-zinc-500 focus:outline-none focus:border-zinc-500"
48
+
className="flex-1 px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:border-white/40"
45
49
/>
46
50
</div>
47
51
</form>
+1
-1
src/components/ServiceGrid.tsx
+1
-1
src/components/ServiceGrid.tsx
···
49
49
<a
50
50
key={service.name}
51
51
href={service.url}
52
-
className="block p-4 bg-zinc-800 border border-zinc-700 rounded-lg hover:bg-zinc-750 hover:border-zinc-600 hover:scale-105 transition-all"
52
+
className="block p-4 rounded-xl bg-white/5 border border-rose-400/20 hover:border-rose-400/40 hover:scale-105 transition-all"
53
53
>
54
54
<div className="flex items-center gap-3">
55
55
{service.icon && (
+1
-1
src/components/Weather.tsx
+1
-1
src/components/Weather.tsx
···
65
65
}
66
66
67
67
return (
68
-
<div className="p-4 bg-zinc-800 border border-zinc-700 rounded-lg">
68
+
<div className="p-4 rounded-xl bg-white/5 border border-rose-400/20">
69
69
<div className="flex items-center gap-4">
70
70
{getWeatherIcon(weather.shortForecast, "w-12 h-12 text-zinc-300")}
71
71
<div>