daonanchao/vibe-kanban
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cleanup

Browse Source
This commit is contained in:
Louis Knight-Webb
2025-06-17 20:36:25 -04:00
parent 81c78fa072
commit 6c402d6e46
11 changed files with 44 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/index.html
View File

@@ -1,10 +1,10 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bloop</title>
<title>vibe-kanban</title>
</head>
<body>
<div id="root"></div>

2
frontend/package.json
View File

@@ -1,5 +1,5 @@
{
"name": "bloop-frontend",
"name": "vibe-kanban",
"private": true,
"version": "0.1.0",
"type": "module",

5
frontend/src/App.tsx
View File

@@ -1,6 +1,5 @@
import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom'
import { Navbar } from '@/components/layout/navbar'
import { HomePage } from '@/pages/home'
import { Projects } from '@/pages/projects'
import { ProjectTasks } from '@/pages/project-tasks'
import { TaskDetailsPage } from '@/pages/task-details'
@@ -14,9 +13,9 @@ function AppContent() {
return (
<div className="min-h-screen bg-background">
{showNavbar && <Navbar />}
<div className={showNavbar && location.pathname !== '/' ? "max-w-7xl mx-auto p-6 sm:p-8" : ""}>
<div className={showNavbar ? "max-w-7xl mx-auto p-6 sm:p-8" : ""}>
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/" element={<Projects />} />
<Route path="/projects" element={<Projects />} />
<Route path="/projects/:projectId" element={<Projects />} />
<Route path="/projects/:projectId/tasks" element={<ProjectTasks />} />

19
frontend/src/components/layout/navbar.tsx
View File

@@ -1,21 +1,23 @@
import { Link, useLocation } from 'react-router-dom'
import { Button } from '@/components/ui/button'
import { ArrowLeft, FolderOpen } from 'lucide-react'
import { Link, useLocation } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { ArrowLeft, FolderOpen } from "lucide-react";
export function Navbar() {
const location = useLocation()
const isHome = location.pathname === '/'
const location = useLocation();
const isHome = location.pathname === "/";
return (
<div className="border-b">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16">
<div className="flex items-center space-x-6">
<h2 className="text-lg font-semibold">Bloop</h2>
<h2 className="text-lg font-semibold">vibe-kanban</h2>
<div className="flex items-center space-x-1">
<Button
asChild
variant={location.pathname === '/projects' ? 'default' : 'ghost'}
variant={
location.pathname === "/projects" ? "default" : "ghost"
}
size="sm"
>
<Link to="/projects">
@@ -23,7 +25,6 @@ export function Navbar() {
Projects
</Link>
</Button>
</div>
</div>
<div className="flex items-center space-x-4">
@@ -39,5 +40,5 @@ export function Navbar() {
</div>
</div>
</div>
)
);
}

191
frontend/src/pages/home.tsx
View File

@@ -1,191 +0,0 @@
import { useState } from "react";
import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Badge } from "@/components/ui/badge";
import { ApiResponse } from "shared/types";
import { makeRequest } from "@/lib/api";
import {
Heart,
Activity,
FolderOpen,
Users,
CheckCircle,
AlertCircle,
Zap,
} from "lucide-react";
export function HomePage() {
const [message, setMessage] = useState<string>("");
const [messageType, setMessageType] = useState<"success" | "error">(
"success"
);
const [loading, setLoading] = useState(false);
// Single user app, no need for user data
const checkHealth = async () => {
setLoading(true);
try {
const response = await makeRequest("/api/health");
const data: ApiResponse<string> = await response.json();
setMessage(data.message || "Health check completed");
setMessageType("success");
} catch (error) {
setMessage("Backend health check failed");
setMessageType("error");
} finally {
setLoading(false);
}
};
return (
<div className="min-h-screen bg-gradient-to-br from-background to-muted/20">
<div className="container mx-auto px-4 py-12">
<div className="max-w-6xl mx-auto">
{/* Hero Section */}
<div className="text-center mb-12">
<div className="flex items-center justify-center mb-6">
<div className="relative">
<div className="absolute inset-0 rounded-full bg-primary/20 blur-xl"></div>
<div className="relative rounded-full bg-primary/10 p-4 border">
<Heart className="h-8 w-8 text-primary" />
</div>
</div>
</div>
<Badge variant="secondary" className="mb-4">
<Zap className="mr-1 h-3 w-3" />
Mission Control Dashboard
</Badge>
<h1 className="text-4xl font-bold tracking-tight mb-4 bg-gradient-to-r from-foreground to-foreground/80 bg-clip-text">
Welcome to Bloop
</h1>
</div>
{/* Feature Cards */}
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3 mb-8">
<Card className="group hover:shadow-lg transition-all duration-200 border-muted/50 hover:border-muted">
<CardHeader className="pb-4">
<div className="flex items-center justify-between">
<div className="flex items-center">
<div className="rounded-lg bg-emerald-500/10 p-2 mr-3 group-hover:bg-emerald-500/20 transition-colors">
<Activity className="h-5 w-5 text-emerald-600" />
</div>
<CardTitle className="text-lg">Health Check</CardTitle>
</div>
<Badge variant="secondary" className="text-xs">
Monitor
</Badge>
</div>
<CardDescription>
Monitor the health status of your backend services
</CardDescription>
</CardHeader>
<CardContent>
<Button
onClick={checkHealth}
variant="outline"
disabled={loading}
className="w-full group-hover:shadow-sm transition-shadow"
size="sm"
>
<Activity className="mr-2 h-4 w-4" />
{loading ? "Checking..." : "Check Health"}
</Button>
</CardContent>
</Card>
<Card className="group hover:shadow-lg transition-all duration-200 border-muted/50 hover:border-muted">
<CardHeader className="pb-4">
<div className="flex items-center justify-between">
<div className="flex items-center">
<div className="rounded-lg bg-violet-500/10 p-2 mr-3 group-hover:bg-violet-500/20 transition-colors">
<FolderOpen className="h-5 w-5 text-violet-600" />
</div>
<CardTitle className="text-lg">Projects</CardTitle>
</div>
<Badge variant="secondary" className="text-xs">
CRUD
</Badge>
</div>
<CardDescription>
Manage your projects with full CRUD operations
</CardDescription>
</CardHeader>
<CardContent>
<Button
asChild
className="w-full group-hover:shadow-sm transition-shadow"
size="sm"
>
<Link to="/projects">
<FolderOpen className="mr-2 h-4 w-4" />
View Projects
</Link>
</Button>
</CardContent>
</Card>
<Card className="group hover:shadow-lg transition-all duration-200 border-muted/50 hover:border-muted">
<CardHeader className="pb-4">
<div className="flex items-center justify-between">
<div className="flex items-center">
<div className="rounded-lg bg-amber-500/10 p-2 mr-3 group-hover:bg-amber-500/20 transition-colors">
<Users className="h-5 w-5 text-amber-600" />
</div>
<div>
<CardTitle className="text-lg flex items-center gap-2">
Users
</CardTitle>
<CardDescription className="mt-1">
Manage user accounts and permissions
</CardDescription>
</div>
</div>
</div>
</CardHeader>
<CardContent>
<Button
asChild
className="group-hover:shadow-sm transition-shadow"
size="sm"
>
<Link to="/users">
<Users className="mr-2 h-4 w-4" />
Manage Users
</Link>
</Button>
</CardContent>
</Card>
</div>
{/* Status Alert */}
{message && (
<div className="max-w-2xl mx-auto mb-8">
<Alert
variant={messageType === "error" ? "destructive" : "default"}
className="border-muted/50"
>
{messageType === "error" ? (
<AlertCircle className="h-4 w-4" />
) : (
<CheckCircle className="h-4 w-4" />
)}
<AlertDescription className="font-medium">
{message}
</AlertDescription>
</Alert>
</div>
)}
</div>
</div>
</div>
);
}