Small changes to frontend timeline view and sidebar

This commit is contained in:
Ryan Pandya 2024-12-15 15:02:46 -08:00
parent 2f7e2046e6
commit a6b52aa5ff
3 changed files with 14506 additions and 1514 deletions

File diff suppressed because one or more lines are too long

View File

@ -3,11 +3,12 @@ import SidebarItem from "@/components/shared/sidebar/SidebarItem";
import { Separator } from "@/components/ui/separator";
import { api } from "@/server/api/client";
import { getServerAuthSession } from "@/server/auth";
import { Archive, Calendar, CheckCheck, Gauge, Home, LineChart, Ruler, Search, SunMoon, Tag } from "lucide-react";
import { Archive, ArrowRightFromLine, Calendar, CheckCheck, Gauge, Home, LineChart, PanelLeftOpen, Ruler, Search, SunMoon, Tag } from "lucide-react";
import serverConfig from "@lifetracker/shared/config";
import AllLists from "./AllLists";
import TimezoneDisplay from "./TimezoneDisplay";
import { ActionButtonWithTooltip } from "@/components/ui/action-button";
export default async function Sidebar() {
@ -55,8 +56,8 @@ export default async function Sidebar() {
},
];
return (
<aside className="flex h-[calc(100vh-64px)] w-60 flex-col gap-5 border-r p-4 ">
const FullView = () => {
return <aside className="flex h-[calc(100vh-64px)] w-60 flex-col gap-5 border-r p-4 ">
<div>
<ul className="space-y-2 text-sm font-medium">
{menu.map((item) => (
@ -74,5 +75,34 @@ export default async function Sidebar() {
<TimezoneDisplay />
</div>
</aside>
}
const CollapsedView = () => {
return (
<div className="flex flex-col">
<ul className="space-y-2 text-sm font-medium">
<SidebarItem
key={0}
logo={<PanelLeftOpen size="18" />}
name={""}
path={""}
/>
<Separator />
{menu.map((item) => (
<SidebarItem
key={item.name}
logo={item.icon}
path={item.path}
name={""}
/>
))}
</ul>
</div>
)
}
return (
<CollapsedView />
);
}

View File

@ -39,7 +39,7 @@ export default function TimelineView({
return (
<>
<div className="grid font-mono border-b-2" style={{ gridTemplateColumns: "repeat(26, 1fr)", borderColor: "white" }}>
<div className="grid font-mono border-b-2 text-sm" style={{ gridTemplateColumns: "repeat(26, 1fr)", borderColor: "white" }}>
<div className="flex text-center justify-center">DATE</div>
<div className="flex text-center justify-center border-r-2 border-inherit">DAY</div>
{Array.from({ length: 24 }, (_, i) => (
@ -69,7 +69,7 @@ export default function TimelineView({
</div>
{day.hours.map((hour, i) => (
<EditableHourCode
className="w-full h-full hover:cursor-default"
className="w-full h-full hover:cursor-default text-xs"
key={i}
originalText={hour.categoryCode}
hour={hour}