UI update with sidebar and settings tabs (#3288)

Co-authored-by: Nahiyan Khan <nahiyan@squareup.com>
Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Co-authored-by: Lily Delalande <119957291+lily-de@users.noreply.github.com>
Co-authored-by: Spence <spencrmartin@gmail.com>
Co-authored-by: spencrmartin <spencermartin@squareup.com>
Co-authored-by: Judson Stephenson <Jud@users.noreply.github.com>
Co-authored-by: Max Novich <mnovich@squareup.com>
Co-authored-by: Best Codes <106822363+The-Best-Codes@users.noreply.github.com>
Co-authored-by: caroline-a-mckenzie <cmckenzie@squareup.com>
Co-authored-by: Michael Neale <michael.neale@gmail.com>

ui/desktop/src/utils/date.ts

@@ -15,6 +15,22 @@ export const formatToLocalDateTime = (dateString?: string | null): string => {
   }
 };
 
+export const formatDate = (dateString?: string | null): string => {
+  if (!dateString) {
+    return 'N/A';
+  }
+  try {
+    const date = new Date(dateString);
+    if (isNaN(date.getTime())) {
+      return 'Invalid Date';
+    }
+    return date.toLocaleDateString(); // Uses user's locale
+  } catch (e) {
+    console.error('Error formatting date:', e);
+    return 'Invalid Date';
+  }
+};
+
 export const formatToLocalDateWithTimezone = (dateString?: string | null): string => {
   if (!dateString) {
     return 'N/A';

ui/desktop/src/utils/dateUtils.ts

@@ -0,0 +1,66 @@
+import { Session } from '../sessions';
+
+export interface DateGroup {
+  label: string;
+  sessions: Session[];
+  date: Date;
+}
+
+export function groupSessionsByDate(sessions: Session[]): DateGroup[] {
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+
+  const yesterday = new Date(today);
+  yesterday.setDate(yesterday.getDate() - 1);
+
+  const groups: { [key: string]: DateGroup } = {};
+
+  sessions.forEach((session) => {
+    const sessionDate = new Date(session.modified);
+    const sessionDateStart = new Date(sessionDate);
+    sessionDateStart.setHours(0, 0, 0, 0);
+
+    let label: string;
+    let groupKey: string;
+
+    if (sessionDateStart.getTime() === today.getTime()) {
+      label = 'Today';
+      groupKey = 'today';
+    } else if (sessionDateStart.getTime() === yesterday.getTime()) {
+      label = 'Yesterday';
+      groupKey = 'yesterday';
+    } else {
+      // Format as "Monday, January 1" or "January 1" if it's not this year
+      const currentYear = today.getFullYear();
+      const sessionYear = sessionDateStart.getFullYear();
+
+      if (sessionYear === currentYear) {
+        label = sessionDateStart.toLocaleDateString('en-US', {
+          weekday: 'long',
+          month: 'long',
+          day: 'numeric',
+        });
+      } else {
+        label = sessionDateStart.toLocaleDateString('en-US', {
+          month: 'long',
+          day: 'numeric',
+          year: 'numeric',
+        });
+      }
+      groupKey = sessionDateStart.toISOString().split('T')[0];
+    }
+
+    if (!groups[groupKey]) {
+      groups[groupKey] = {
+        label,
+        sessions: [],
+        date: sessionDateStart,
+      };
+    }
+
+    groups[groupKey].sessions.push(session);
+  });
+
+  // Convert to array and sort by date (newest first)
+  return Object.values(groups).sort((a, b) => b.date.getTime() - a.date.getTime());
+}

ui/desktop/src/utils/searchHighlighter.ts

@@ -29,7 +29,7 @@ export class SearchHighlighter {
       left: 0;
       right: 0;
       bottom: 0;
-      z-index: 1;
+      z-index: 9999;
     `;
 
     // Find scroll container (look for our custom data attribute first, then fallback to radix)
@@ -151,8 +151,9 @@ export class SearchHighlighter {
         const scrollLeft = this.scrollContainer?.scrollLeft || 0;
 
         // Calculate the highlight position relative to the scroll container
-        const top = rect.top + scrollTop - containerRect.top;
-        const left = rect.left + scrollLeft - containerRect.left;
+        // rect.top/left are already relative to viewport, so we need to adjust for scroll container position
+        const top = rect.top - containerRect.top + scrollTop;
+        const left = rect.left - containerRect.left + scrollLeft;
 
         highlightRect.style.cssText = `
           position: absolute;