Small changes to frontend timeline view and sidebar

apps/web/components/dashboard/sidebar/Sidebar.tsx

@@ -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 (
+  const FullView = () => {
-    <aside className="flex h-[calc(100vh-64px)] w-60 flex-col gap-5 border-r p-4 ">
+    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 />
   );
 }

apps/web/components/dashboard/timeline/TimelineView.tsx

@@ -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}