this repo has no description
Tighten UI whitespace across components
- Reduce padding and margins in DayView, Layout, ProjectCard, SessionItem
- Add react-grab script to index.html for dev HMR
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
+32
-30
+5
-5
src/web/app/components/DayView.tsx
+5
-5
src/web/app/components/DayView.tsx
···
21
21
22
22
return (
23
23
<div>
24
-
<div className="mb-8">
25
-
<Link to="/" className="inline-flex items-center text-sm text-slate-500 hover:text-blue-600 mb-4 transition-colors">
24
+
<div className="mb-4">
25
+
<Link to="/" className="inline-flex items-center text-sm text-slate-500 hover:text-blue-600 mb-2 transition-colors">
26
26
<ArrowLeft size={16} className="mr-1" />
27
-
Back to History
27
+
Back
28
28
</Link>
29
-
<h1 className="text-3xl font-bold text-slate-900">{formattedDate}</h1>
29
+
<h1 className="text-2xl font-bold text-slate-900">{formattedDate}</h1>
30
30
</div>
31
31
32
32
{day.bragSummary && <BragSummary summary={day.bragSummary} />}
33
33
34
-
<div className="space-y-8">
34
+
<div className="space-y-3">
35
35
{day.projects.map((project) => (
36
36
<ProjectCard key={project.path} project={project} />
37
37
))}
+1
-1
src/web/app/components/Layout.tsx
+1
-1
src/web/app/components/Layout.tsx
+11
-12
src/web/app/components/ProjectCard.tsx
+11
-12
src/web/app/components/ProjectCard.tsx
···
26
26
const [expanded, setExpanded] = useState(true);
27
27
28
28
return (
29
-
<div className="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden mb-6">
29
+
<div className="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
30
30
<button
31
31
onClick={() => setExpanded(!expanded)}
32
-
className="w-full flex items-center justify-between p-6 bg-gray-50/50 hover:bg-gray-50 transition-colors text-left"
32
+
className="w-full flex items-center justify-between p-3 bg-gray-50/50 hover:bg-gray-50 transition-colors text-left"
33
33
>
34
-
<div className="flex items-center gap-3">
35
-
<div className="p-2 bg-blue-100 text-blue-600 rounded-lg">
36
-
<Folder size={20} />
34
+
<div className="flex items-center gap-2">
35
+
<div className="p-1.5 bg-blue-100 text-blue-600 rounded">
36
+
<Folder size={16} />
37
37
</div>
38
38
<div>
39
-
<h3 className="text-lg font-bold text-slate-800">{project.name}</h3>
40
-
<p className="text-xs text-slate-500 font-mono mt-0.5">{project.path}</p>
39
+
<h3 className="text-sm font-bold text-slate-800">{project.name}</h3>
41
40
</div>
42
41
</div>
43
-
<div className="flex items-center gap-4 text-slate-500">
44
-
<span className="text-sm font-medium">{project.sessions.length} sessions</span>
45
-
{expanded ? <ChevronUp size={20} /> : <ChevronDown size={20} />}
42
+
<div className="flex items-center gap-3 text-slate-500">
43
+
<span className="text-xs font-medium">{project.sessions.length} sessions</span>
44
+
{expanded ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
46
45
</div>
47
46
</button>
48
47
49
48
{expanded && (
50
-
<div className="p-6 pt-2">
51
-
<div className="mt-6 ml-2">
49
+
<div className="px-3 pb-3">
50
+
<div className="mt-2 ml-1">
52
51
{project.sessions.map((session) => (
53
52
<SessionItem key={session.sessionId} session={session} />
54
53
))}
+12
-12
src/web/app/components/SessionItem.tsx
+12
-12
src/web/app/components/SessionItem.tsx
···
22
22
const duration = Math.round((new Date(session.endTime).getTime() - new Date(session.startTime).getTime()) / 60000);
23
23
24
24
return (
25
-
<div className="pl-6 border-l-2 border-gray-100 pb-8 last:pb-0 relative">
26
-
<div className="absolute -left-[9px] top-0 w-4 h-4 rounded-full bg-white border-2 border-blue-200" />
25
+
<div className="pl-4 border-l-2 border-gray-100 pb-3 last:pb-0 relative">
26
+
<div className="absolute -left-[5px] top-0 w-2 h-2 rounded-full bg-blue-300" />
27
27
28
-
<div className="flex flex-col sm:flex-row sm:items-baseline gap-2 mb-3">
29
-
<div className="flex items-center gap-2 text-sm text-slate-500 font-medium">
30
-
<Clock size={14} />
28
+
<div className="flex items-center gap-2 mb-1">
29
+
<div className="flex items-center gap-1.5 text-xs text-slate-500">
30
+
<Clock size={12} />
31
31
<span>{start} - {end}</span>
32
-
<span className="px-1.5 py-0.5 rounded-full bg-gray-100 text-xs text-gray-600">{duration} min</span>
32
+
<span className="px-1 py-0.5 rounded bg-gray-100 text-xs text-gray-600">{duration}m</span>
33
33
</div>
34
34
</div>
35
35
36
-
<div className="bg-white rounded-xl border border-gray-100 p-5 shadow-sm hover:shadow-md transition-shadow">
37
-
<p className="text-slate-800 font-medium text-lg mb-3">{session.shortSummary}</p>
36
+
<div className="bg-white rounded-lg border border-gray-100 p-3 shadow-sm">
37
+
<p className="text-slate-800 font-medium text-sm mb-2">{session.shortSummary}</p>
38
38
39
39
{session.accomplishments.length > 0 && (
40
-
<ul className="space-y-2 mb-4">
40
+
<ul className="space-y-1 mb-2">
41
41
{session.accomplishments.map((acc, i) => (
42
-
<li key={i} className="flex items-start gap-2 text-slate-600 text-sm">
43
-
<span className="mt-1.5 w-1.5 h-1.5 rounded-full bg-blue-400 shrink-0" />
42
+
<li key={i} className="flex items-start gap-1.5 text-slate-600 text-xs">
43
+
<span className="mt-1 w-1 h-1 rounded-full bg-blue-400 shrink-0" />
44
44
<span>{acc}</span>
45
45
</li>
46
46
))}
47
47
</ul>
48
48
)}
49
49
50
-
<div className="flex flex-wrap gap-4 mt-4 pt-4 border-t border-gray-50">
50
+
<div className="flex flex-wrap gap-3 mt-2 pt-2 border-t border-gray-50">
51
51
{session.filesChanged.length > 0 && (
52
52
<div className="flex flex-col gap-1.5">
53
53
<span className="text-xs font-semibold text-slate-400 uppercase tracking-wider flex items-center gap-1">
+3
src/web/app/index.html
+3
src/web/app/index.html
···
5
5
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
6
<title>Worklog</title>
7
7
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📋</text></svg>" />
8
+
<!-- react-grab for development -->
9
+
<script src="//unpkg.com/react-grab/dist/index.global.js"></script>
10
+
<script src="//unpkg.com/@react-grab/claude-code/dist/client.global.js"></script>
8
11
</head>
9
12
<body>
10
13
<div id="root"></div>