From 15e6047708551869be5dd4e42f4e1f788b755f2d Mon Sep 17 00:00:00 2001
From: Daniel Pupius <dan@pupi.us>
Date: Mon, 5 May 2025 09:12:51 -0700
Subject: [PATCH] Color and layout tweaks

---
 web/src/components/Nav.tsx                    |  2 +-
 web/src/components/PacketList.tsx             | 52 +++++++++++++++++--
 web/src/components/PageWrapper.tsx            |  2 +-
 .../components/dashboard/ChannelDetail.tsx    |  6 +--
 web/src/components/dashboard/NodeDetail.tsx   |  3 +-
 web/src/routes/__root.tsx                     |  2 +-
 6 files changed, 53 insertions(+), 14 deletions(-)

diff --git a/web/src/components/Nav.tsx b/web/src/components/Nav.tsx
index c12d02e..2c7d456 100644
--- a/web/src/components/Nav.tsx
+++ b/web/src/components/Nav.tsx
@@ -85,7 +85,7 @@ export const Nav: React.FC<NavProps> = ({ connectionStatus }) => {
     return () => window.removeEventListener("resize", handleResize);
   }, []);
 
-  // Navigation links component to avoid duplication
+  // Navigation links component to avoid duplication across desktop and mobile
   const NavLinks = () => (
     <ul className="space-y-1">
       {navigationItems.map((item) => (
diff --git a/web/src/components/PacketList.tsx b/web/src/components/PacketList.tsx
index e9e7994..0346f53 100644
--- a/web/src/components/PacketList.tsx
+++ b/web/src/components/PacketList.tsx
@@ -51,7 +51,7 @@ export const PacketList: React.FC = () => {
     [hashString]
   );
 
-  // Get the earliest reception time from the packets
+  // Get the earliest reception time from the packets with date context
   const getEarliestTime = useCallback((): string => {
     if (packets.length === 0) return "";
 
@@ -72,12 +72,54 @@ export const PacketList: React.FC = () => {
       return "unknown time";
     }
 
-    // Format the time in a nice way
-    const date = new Date(earliestTime * 1000);
-    return date.toLocaleTimeString([], {
+    // Create date objects for comparison
+    const packetDate = new Date(earliestTime * 1000);
+    const today = new Date();
+    const yesterday = new Date();
+    yesterday.setDate(today.getDate() - 1);
+    
+    // Format the time component
+    const timeStr = packetDate.toLocaleTimeString([], {
       hour: "2-digit",
       minute: "2-digit",
     });
+    
+    // Check if the packet is from today
+    if (
+      packetDate.getDate() === today.getDate() &&
+      packetDate.getMonth() === today.getMonth() &&
+      packetDate.getFullYear() === today.getFullYear()
+    ) {
+      return timeStr; // Just show the time for today
+    }
+    
+    // Check if the packet is from yesterday
+    if (
+      packetDate.getDate() === yesterday.getDate() &&
+      packetDate.getMonth() === yesterday.getMonth() &&
+      packetDate.getFullYear() === yesterday.getFullYear()
+    ) {
+      return `${timeStr} yesterday`;
+    }
+    
+    // If it's earlier than yesterday, show the day name
+    const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+    
+    // Within the last week, show day name
+    const lastWeek = new Date();
+    lastWeek.setDate(today.getDate() - 6); // 6 days ago plus today = 7 days total
+    
+    if (packetDate >= lastWeek) {
+      const dayName = daysOfWeek[packetDate.getDay()];
+      return `${timeStr} ${dayName}`;
+    }
+    
+    // For older dates, show the full date
+    return packetDate.toLocaleDateString([], {
+      month: 'short',
+      day: 'numeric',
+      year: packetDate.getFullYear() !== today.getFullYear() ? 'numeric' : undefined
+    });
   }, [packets]);
 
   // We don't need to track packet keys in state anymore since we use data.id
@@ -110,7 +152,7 @@ export const PacketList: React.FC = () => {
   };
 
   return (
-    <div className="flex flex-col h-full max-w-4xl ">
+    <div className="flex flex-col h-full">
       <div className="sticky top-0 z-10">
         <div className="flex justify-between items-center mb-2">
           <div className="flex items-center space-x-3">
diff --git a/web/src/components/PageWrapper.tsx b/web/src/components/PageWrapper.tsx
index 9d8245b..33d0689 100644
--- a/web/src/components/PageWrapper.tsx
+++ b/web/src/components/PageWrapper.tsx
@@ -9,7 +9,7 @@ interface PageWrapperProps {
  */
 export const PageWrapper: React.FC<PageWrapperProps> = ({ children }) => {
   return (
-    <div className="flex-1 h-[calc(100vh-6rem)] md:h-[calc(100vh-3rem)] overflow-y-auto md:rounded-tl-3xl md:rounded-bl-3xl p-4 shadow-md">
+    <div className="bg-neutral-50/5 flex-1 h-[calc(100vh-6rem)] md:h-[calc(100vh-3rem)] overflow-y-auto md:rounded-tl-3xl md:rounded-bl-3xl p-4 shadow-md">
       {children}
     </div>
   );
diff --git a/web/src/components/dashboard/ChannelDetail.tsx b/web/src/components/dashboard/ChannelDetail.tsx
index ce09ae0..d00adf3 100644
--- a/web/src/components/dashboard/ChannelDetail.tsx
+++ b/web/src/components/dashboard/ChannelDetail.tsx
@@ -76,8 +76,7 @@ export const ChannelDetail: React.FC<ChannelDetailProps> = ({ channelId }) => {
 
   return (
     <div className="max-w-4xl h-full flex flex-col">
-      {/* Header with back button and channel info */}
-      <div className="flex items-center px-4 bg-neutral-800/50 rounded-lg">
+      <div className="flex items-center bg-neutral-800/50 rounded-lg effect-inset p-4">
         <button
           onClick={handleBack}
           className="flex items-center mr-4 p-2 text-neutral-400 hover:text-neutral-200 hover:bg-neutral-700 rounded-full transition-colors effect-outset"
@@ -114,8 +113,7 @@ export const ChannelDetail: React.FC<ChannelDetailProps> = ({ channelId }) => {
 
       <Separator />
 
-      {/* Message List - Chat style without title */}
-      <div className="flex-1 overflow-y-auto pb-4 mt-4">
+      <div className="flex-1 overflow-y-auto pb-4">
         {channelMessages.length === 0 ? (
           <div className="bg-neutral-800/50 rounded-lg p-6 text-center text-neutral-400 effect-inset">
             <p>No messages in this channel yet.</p>
diff --git a/web/src/components/dashboard/NodeDetail.tsx b/web/src/components/dashboard/NodeDetail.tsx
index 99b9d16..aa29e46 100644
--- a/web/src/components/dashboard/NodeDetail.tsx
+++ b/web/src/components/dashboard/NodeDetail.tsx
@@ -164,8 +164,7 @@ export const NodeDetail: React.FC<NodeDetailProps> = ({ nodeId }) => {
 
   return (
     <div className="max-w-4xl">
-      {/* Header with back button and basic node info */}
-      <div className="flex items-center px-4 bg-neutral-800/50 rounded-lg">
+      <div className="flex items-center p-4 bg-neutral-800/50 rounded-lg effect-inset">
         <button
           onClick={handleBack}
           className="flex items-center mr-4 p-2 text-neutral-400 hover:text-neutral-200 hover:bg-neutral-700 rounded-full transition-colors effect-outset"
diff --git a/web/src/routes/__root.tsx b/web/src/routes/__root.tsx
index be1bb3d..780e181 100644
--- a/web/src/routes/__root.tsx
+++ b/web/src/routes/__root.tsx
@@ -84,7 +84,7 @@ function RootLayout() {
   return (
     <div className="flex h-screen overflow-hidden bg-neutral-800">
       <Nav connectionStatus={connectionStatus} />
-      <main className="md:ml-64 flex-1 pt-16 md:pt-6 pb-2 md:py-6 overflow-hidden flex flex-col bg-neutral-50/5">
+      <main className="md:ml-64 flex-1 pt-16 md:pt-6 pb-2 md:py-6 overflow-hidden flex flex-col bg-neutral-800">
         <Outlet />
       </main>
     </div>