Add tooltip to metric icons

apps/web/components/dashboard/hours/EditableHour.tsx

@@ -185,7 +185,10 @@ export default function EditableHour({
                                     <div key={`${m.id}-${index}`} className="hover:cursor-no-drop" onClick={(e) => {
                                         decrementCount({ metricId: m.metricId, hourId: hour.id });
                                     }}>
-                                        <Icon name={titleCase(m.icon)} size={24} color={hour.foreground} />
+                                        <Icon name={titleCase(m.icon)} size={24}
+                                            color={hour.foreground}
+                                            tooltip={m.metricName}
+                                        />
                                     </div>
                                 )
                             )}

apps/web/components/dashboard/hours/EditableHourComment.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { set } from "date-fns";
-import { MessageCircle } from "lucide-react";
+import { BookOpen, Info, MessageCircle, NotebookPen, Quote } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 
 function selectHourCode(time: number) {
@@ -56,7 +56,7 @@ export function EditableHourComment({
     return (
         <div className="flex">
             {hour.comment ?
-                <MessageCircle className="mr-4" />
+                <NotebookPen className="mr-4" />
                 : ""}
             <input
                 className="w-full text-left edit-hour-comment hover:border-b hover:border-dashed"

apps/web/components/ui/icon.tsx

@@ -2,13 +2,26 @@
 "use client";
 
 import { icons } from 'lucide-react';
+import { Tooltip, TooltipContent, TooltipPortal, TooltipTrigger } from "./tooltip";
 
-export const Icon = ({ name = "FileQuestion", color = "white", size = 16, ...props }) => {
+export const Icon = ({ name = "FileQuestion", color = "white", size = 16, tooltip = null, ...props }) => {
     const icon = Object.keys(icons).find((i) => i.toLowerCase() == (name.toLowerCase()));
-    if (!icon) {
+    if (icon) {
-        return null;
+        const LucideIcon = icons[icon as keyof typeof icons]; // Add an index signature to allow indexing with a string
-    }
+        const ret = <LucideIcon color={color} size={size} {...props} />;
-    const LucideIcon = icons[name as keyof typeof icons]; // Add an index signature to allow indexing with a string
 
-    return <LucideIcon color={color} size={size} {...props} />;
+        if (tooltip) {
+            return (<Tooltip delayDuration={200}>
+                <TooltipTrigger asChild>
+                    {ret}
+                </TooltipTrigger>
+                <TooltipPortal>
+                    <TooltipContent>{tooltip}</TooltipContent>
+                </TooltipPortal>
+            </Tooltip>);
+        }
+        else {
+            return ret;
+        }
+    }
 };

packages/shared/types/metrics.ts

@@ -3,6 +3,7 @@ import { z } from "zod";
 export const zMeasurementSchema = z.object({
     id: z.string().optional(),
     metricId: z.string(),
+    metricName: z.string().optional(),
     hourId: z.string().optional(),
     dayId: z.string().optional(),
     value: z.coerce.number(),

packages/trpc/routers/hours.ts

@@ -65,6 +65,7 @@ export async function hourJoinsQuery(
         metricId: measurements.metricId,
         value: measurements.value,
         icon: metrics.icon,
+        metricName: metrics.name,
     })
         .from(measurements)
         .leftJoin(metrics, eq(metrics.id, measurements.metricId))

packages/trpc/routers/measurements.ts

@@ -60,6 +60,7 @@ export const measurementsAppRouter = router({
                 return {
                     ...newMeasurement[0],
                     icon: metric[0].icon,
+                    metricName: metric[0].name,
                 };
             }
         }),