802184a487
- Convert sidebar <aside> to flex column container (flex flex-col overflow-hidden min-h-0) - Remove sidebar-level scroll (overflow-y-auto → overflow-hidden) - Add min-h-0 to parent flex containers in both layout paths for proper height containment - Reorder sidebar sections: Clock → Projects → Drones → Recent Chats - Add shrink-0 to Clock component to keep it at intrinsic content size - Convert Projects, Drones, and Recent Chats sections to flex-1 min-h-0 flex-col with scrollable inner content - Pin section headers with shrink-0; list content scrolls independently via overflow-y-auto - Pin Recent Chats hint/footer with shrink-0 below its scrollable list - No logic changes — purely CSS/flexbox layout correction
43 lines
973 B
TypeScript
43 lines
973 B
TypeScript
import { useState, useEffect } from 'react';
|
|
|
|
function formatTime(date: Date): string {
|
|
return date.toLocaleTimeString('en-US', {
|
|
hour: 'numeric',
|
|
minute: '2-digit',
|
|
hour12: true,
|
|
});
|
|
}
|
|
|
|
function formatDate(date: Date): string {
|
|
return date.toLocaleDateString('en-US', {
|
|
weekday: 'short',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
});
|
|
}
|
|
|
|
export default function Clock() {
|
|
const [time, setTime] = useState(new Date());
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setTime(new Date());
|
|
}, 1000);
|
|
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="p-3 shrink-0">
|
|
<div className="text-xs font-semibold text-text-muted uppercase tracking-wider mb-2">
|
|
Clock
|
|
</div>
|
|
<div className="font-mono text-lg text-text-primary">
|
|
{formatTime(time)}
|
|
</div>
|
|
<div className="text-sm text-text-secondary">
|
|
{formatDate(time)}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |