feat: implement relative time feedback and improve tooltip customization

web/src/lib/components/SimpleTooltip.svelte

@@ -1,30 +1,41 @@
 <script lang="ts">
 import { Tooltip } from "bits-ui";
 import type { Snippet } from "svelte";
+import { cn } from "$lib/utils";
 
 let {
   text,
   delay = 150,
   side = "top",
   passthrough = false,
+  triggerClass = "",
+  contentClass = "",
+  sideOffset = 6,
   children,
 }: {
   text: string;
   delay?: number;
   side?: "top" | "bottom" | "left" | "right";
   passthrough?: boolean;
+  triggerClass?: string;
+  contentClass?: string;
+  sideOffset?: number;
   children: Snippet;
 } = $props();
 </script>
 
 <Tooltip.Root delayDuration={delay} disableHoverableContent={passthrough}>
   <Tooltip.Trigger>
-    {@render children()}
+    {#snippet child({ props })}
+      <span class={triggerClass} {...props}>
+        {@render children()}
+      </span>
+    {/snippet}
   </Tooltip.Trigger>
   <Tooltip.Content
     {side}
-    sideOffset={6}
-    class="z-50 bg-card text-card-foreground text-xs border border-border rounded-md px-2.5 py-1.5 shadow-md whitespace-pre-line max-w-max"
+    {sideOffset}
+    class={cn("z-50 bg-card text-card-foreground text-xs border border-border rounded-md px-2.5 py-1.5 shadow-sm whitespace-pre-line max-w-max text-left", contentClass)}
   >
     {text}
   </Tooltip.Content>