From 4fd89e755bc61bcec22770e0b390a1f9de581512 Mon Sep 17 00:00:00 2001
From: pablodanswer <pablo@danswer.ai>
Date: Sat, 23 Nov 2024 13:01:05 -0800
Subject: [PATCH] minor calendar cleanup (#3219)

---
 .../components/search/filtering/Filters.tsx   | 34 +++++++++++++------
 web/src/components/ui/calendar.tsx            | 19 ++++++-----
 web/src/lib/dateUtils.ts                      | 23 +++++++++++++
 web/tailwind-themes/tailwind.config.js        | 29 ++++++++++++++++
 4 files changed, 86 insertions(+), 19 deletions(-)

diff --git a/web/src/components/search/filtering/Filters.tsx b/web/src/components/search/filtering/Filters.tsx
index bdeb1d8523a..c72cbdd15ef 100644
--- a/web/src/components/search/filtering/Filters.tsx
+++ b/web/src/components/search/filtering/Filters.tsx
@@ -28,7 +28,11 @@ import { Calendar } from "@/components/ui/calendar";
 import { Popover, PopoverTrigger } from "@/components/ui/popover";
 import { PopoverContent } from "@radix-ui/react-popover";
 import { CalendarIcon } from "lucide-react";
-import { buildDateString, getTimeAgoString } from "@/lib/dateUtils";
+import {
+  buildDateString,
+  getDateRangeString,
+  getTimeAgoString,
+} from "@/lib/dateUtils";
 
 const SectionTitle = ({ children }: { children: string }) => (
   <div className="font-bold text-xs mt-2 flex">{children}</div>
@@ -116,7 +120,9 @@ export function SourceSelector({
           <div className="cursor-pointer">
             <SectionTitle>Time Range</SectionTitle>
             <p className="text-sm text-default mt-2">
-              {getTimeAgoString(timeRange?.from!) || "Select a time range"}
+              {timeRange?.from
+                ? getDateRangeString(timeRange.from, timeRange.to)
+                : "Since"}
             </p>
           </div>
         </PopoverTrigger>
@@ -463,7 +469,7 @@ export function HorizontalSourceSelector({
           <div
             className={`
               border 
-              max-w-36
+              max-w-64
               border-border 
               rounded-lg 
               bg-background
@@ -486,7 +492,9 @@ export function HorizontalSourceSelector({
           >
             <CalendarIcon className="h-4 w-4" />
 
-            {timeRange?.from ? getTimeAgoString(timeRange.from) : "Since"}
+            {timeRange?.from
+              ? getDateRangeString(timeRange.from, timeRange.to)
+              : "Since"}
           </div>
         </PopoverTrigger>
         <PopoverContent
@@ -494,14 +502,18 @@ export function HorizontalSourceSelector({
           align="start"
         >
           <Calendar
-            mode="single"
-            selected={timeRange ? new Date(timeRange.from) : undefined}
-            onSelect={(date) => {
-              const selectedDate = date || new Date();
-              const today = new Date();
+            mode="range"
+            selected={
+              timeRange
+                ? { from: new Date(timeRange.from), to: new Date(timeRange.to) }
+                : undefined
+            }
+            onSelect={(daterange) => {
+              const initialDate = daterange?.from || new Date();
+              const endDate = daterange?.to || new Date();
               setTimeRange({
-                from: selectedDate > today ? today : selectedDate,
-                to: today,
+                from: initialDate,
+                to: endDate,
                 selectValue: timeRange?.selectValue || "",
               });
             }}
diff --git a/web/src/components/ui/calendar.tsx b/web/src/components/ui/calendar.tsx
index fe751d4a072..8f3b7967750 100644
--- a/web/src/components/ui/calendar.tsx
+++ b/web/src/components/ui/calendar.tsx
@@ -34,24 +34,27 @@ function Calendar({
         table: "w-full border-collapse space-y-1",
         head_row: "flex",
         head_cell:
-          "text-neutral-500 rounded-md w-9 font-normal text-[0.8rem] dark:text-neutral-400",
+          "text-calendar-text-muted rounded-md w-9 font-normal text-[0.8rem] dark:text-calendar-text-muted-dark",
         row: "flex w-full mt-2",
-        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-neutral-100/50 [&:has([aria-selected])]:bg-neutral-100 first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20 dark:[&:has([aria-selected].day-outside)]:bg-neutral-800/50 dark:[&:has([aria-selected])]:bg-neutral-800",
+        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-calendar-bg-outside-selected [&:has([aria-selected])]:bg-calendar-bg-selected first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20 dark:[&:has([aria-selected].day-outside)]:bg-calendar-bg-outside-selected-dark dark:[&:has([aria-selected])]:bg-calendar-bg-selected-dark",
         day: cn(
           buttonVariants({ variant: "ghost" }),
           "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
         ),
-        day_range_end: "day-range-end !text-neutral-200",
+        day_range_end:
+          "day-range-end bg-calendar-range-end !text-calendar-text-end",
         day_selected:
-          "bg-neutral-900 text-neutral-50 hover:bg-neutral-900 hover:text-neutral-50 focus:bg-neutral-900 focus:text-neutral-50 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50 dark:hover:text-neutral-900 dark:focus:bg-neutral-50 dark:focus:text-neutral-900",
+          "bg text-calendar-text-selected hover:bg-calendar-bg-selected hover:text-calendar-text-selected  dark:bg-calendar-bg-selected-dark dark:text-calendar-text-selected-dark dark:hover:bg-calendar-bg-selected-dark dark:hover:text-calendar-text-selected-dark ",
         day_today:
-          "bg-neutral-100 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-50",
+          "bg-calendar-today-bg text-calendar-today-text dark:bg-calendar-today-bg-dark dark:text-calendar-today-text-dark",
         day_outside:
-          "day-outside text-neutral-500 opacity-50 aria-selected:bg-neutral-100/50 aria-selected:text-neutral-500 aria-selected:opacity-30 dark:text-neutral-400 dark:aria-selected:bg-neutral-800/50 dark:aria-selected:text-neutral-400",
-        day_disabled: "text-neutral-500 opacity-50 dark:text-neutral-400",
+          "day-outside text-calendar-text-muted opacity-50 aria-selected:bg-calendar-bg-outside-selected aria-selected:text-calendar-text-muted aria-selected:opacity-30 dark:text-calendar-text-muted-dark dark:aria-selected:bg-calendar-bg-outside-selected-dark dark:aria-selected:text-calendar-text-muted-dark",
+        day_disabled:
+          "text-calendar-text-muted opacity-50 dark:text-calendar-text-muted-dark",
         day_range_middle:
-          "aria-selected:bg-neutral-100 aria-selected:text-neutral-900 dark:aria-selected:bg-neutral-800 dark:aria-selected:text-neutral-50",
+          "aria-selected:bg-calendar-range-middle aria-selected:text-calendar-text-in-range dark:aria-selected:bg-calendar-range-middle-dark dark:aria-selected:text-calendar-text-in-range-dark",
         day_hidden: "invisible",
+        day_range_start: "bg-white text-text-900",
         ...classNames,
       }}
       components={{
diff --git a/web/src/lib/dateUtils.ts b/web/src/lib/dateUtils.ts
index aea571e9dc1..57ea060e0a2 100644
--- a/web/src/lib/dateUtils.ts
+++ b/web/src/lib/dateUtils.ts
@@ -56,6 +56,29 @@ export const buildDateString = (date: Date | null) => {
       )} days ago`
     : "Select a time range";
 };
+
+export const getDateRangeString = (from: Date | null, to: Date | null) => {
+  if (!from || !to) return null;
+
+  const now = new Date();
+  const fromDiffMs = now.getTime() - from.getTime();
+  const toDiffMs = now.getTime() - to.getTime();
+
+  const fromDiffDays = Math.floor(fromDiffMs / (1000 * 60 * 60 * 24));
+  const toDiffDays = Math.floor(toDiffMs / (1000 * 60 * 60 * 24));
+
+  const fromString = getTimeAgoString(from);
+  const toString = getTimeAgoString(to);
+
+  if (fromString === toString) return fromString;
+
+  if (toDiffDays === 0) {
+    return `${fromString} - Today`;
+  }
+
+  return `${fromString} - ${toString}`;
+};
+
 export const getTimeAgoString = (date: Date | null) => {
   if (!date) return null;
 
diff --git a/web/tailwind-themes/tailwind.config.js b/web/tailwind-themes/tailwind.config.js
index 4f33de65946..664971481a4 100644
--- a/web/tailwind-themes/tailwind.config.js
+++ b/web/tailwind-themes/tailwind.config.js
@@ -171,6 +171,35 @@ module.exports = {
         "text-800": "var(--text-800)",
         "text-900": "var(--text-900)",
         "text-950": "var(--text-950)",
+        // Light mode
+        // Light mode
+        "calendar-bg-selected": "var(--background-800)",
+        "calendar-bg-outside-selected": "var(--background-200)",
+        "calendar-text-muted": "var(--text-400)",
+        "calendar-text-selected": "var(--white)",
+        "calendar-range-middle": "var(--neutral-800)",
+        "calendar-range-end": "var(--white)",
+        "calendar-text-in-range": "var(--text-200)",
+        "calendar-text-end": "var(--text-900)",
+
+        // Dark mode
+        "calendar-bg-outside-selected-dark": "var(--background-700)",
+        "calendar-text-muted-dark": "var(--text-500)",
+        "calendar-text-selected-dark": "var(--white)",
+        "calendar-range-middle-dark": "var(--background-800)",
+        "calendar-text-in-range-dark": "var(--text-200)",
+
+        // Hover effects
+        "calendar-hover-bg": "var(--background-200)",
+        "calendar-hover-bg-dark": "var(--background-700)",
+        "calendar-hover-text": "var(--text-800)",
+        "calendar-hover-text-dark": "var(--text-200)",
+
+        // Today's date
+        "calendar-today-bg": "var(--background-100)",
+        "calendar-today-bg-dark": "var(--background-800)",
+        "calendar-today-text": "var(--text-800)",
+        "calendar-today-text-dark": "var(--text-200)",
 
         "user-text": "var(--text-800)",