adopt hightide 0.8.x

web/components/AuditLogTimeline.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useMemo, useEffect } from 'react'
 import { useQuery } from '@tanstack/react-query'
-import { SmartDate } from '@/utils/date'
+import { DateDisplay } from '@/components/Date/DateDisplay'
 import clsx from 'clsx'
 import { fetcher } from '@/api/gql/fetcher'
 import { UserInfoPopup } from '@/components/UserInfoPopup'
@@ -152,9 +152,6 @@ export const AuditLogTimeline: React.FC<AuditLogTimelineProps> = ({ caseId, clas
 
   return (
     <div className={clsx('flex-col-2', className)}>
-      <div className="text-sm font-semibold mb-4">
-        Audit Log
-      </div>
       {isLoading && (
         <div className="flex items-center justify-center py-12">
           <HelpwaveLogo className="w-16 h-16" animate="loading" />
@@ -213,7 +210,7 @@ export const AuditLogTimeline: React.FC<AuditLogTimelineProps> = ({ caseId, clas
                       )}
                     </div>
                     <div className="text-xs text-gray-600 dark:text-gray-400 mt-1">
-                      <SmartDate date={new Date(entry.timestamp)} />
+                      <DateDisplay date={new Date(entry.timestamp)} />
                     </div>
                   </div>
                   {hasDetails && (

web/components/Date/CurrentTime.tsx

@@ -0,0 +1,47 @@
+import { Tooltip, useLocale } from '@helpwave/hightide'
+import clsx from 'clsx'
+import { useEffect, useState } from 'react'
+
+type CurrentTimeProps = {
+    className?: string,
+}
+
+export const CurrentTime = ({ className }: CurrentTimeProps) => {
+  const { locale } = useLocale()
+  const [date, setDate] = useState(new Date())
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setDate(new Date())
+    }, 500)
+
+    return () => clearInterval(intervalId)
+  })
+
+  const dateFormatFull = Intl.DateTimeFormat(locale, {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit'
+  })
+
+  const fullDate = dateFormatFull.format(date)
+
+  const timeFormat = Intl.DateTimeFormat(locale, {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit'
+  })
+
+  const time = timeFormat.format(date)
+
+  return (
+    <Tooltip tooltip={fullDate} alignment="top">
+      <span className={clsx('tabular-nums cursor-default', className)}>
+        {time}
+      </span>
+    </Tooltip>
+  )
+}

web/components/Date/DateDisplay.tsx

@@ -0,0 +1,28 @@
+import { Tooltip, useUpdatingDateString } from '@helpwave/hightide'
+import clsx from 'clsx'
+
+type DateDisplayProps = {
+  date: Date,
+  className?: string,
+  showTime?: boolean,
+  mode?: 'relative' | 'absolute',
+}
+
+export const DateDisplay = ({ date, className, showTime = true, mode = 'relative' }: DateDisplayProps) => {
+  const { absolute, relative } = useUpdatingDateString({
+    date: date ?? new Date(),
+    absoluteFormat: showTime ? 'dateTime' : 'date',
+  })
+  if (!date) return null
+
+  const displayString = mode === 'relative' ? relative : absolute
+  const tooltipString = mode === 'relative' ? absolute : relative
+
+  return (
+    <Tooltip tooltip={tooltipString} alignment="top" containerClassName="w-fit">
+      <span className={clsx('cursor-help underline decoration-dotted decoration-neutral-300 underline-offset-2', className)}>
+        {displayString}
+      </span>
+    </Tooltip>
+  )
+}

web/components/FeedbackDialog.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef, useMemo } from 'react'
-import { Dialog, Button, Textarea, FormField, FormProvider, Checkbox, useCreateForm, useTranslatedValidators, useFormObserverKey } from '@helpwave/hightide'
+import { Dialog, Button, Textarea, FormField, FormProvider, Checkbox, useCreateForm, useTranslatedValidators, useFormObserverKey, IconButton } from '@helpwave/hightide'
 import { useTasksTranslation, useLocale } from '@/i18n/useTasksTranslation'
 import { useTasksContext } from '@/hooks/useTasksContext'
 import { Mic, Pause } from 'lucide-react'
@@ -89,11 +89,6 @@ export const FeedbackDialog = ({ isOpen, onClose, hideUrl = false }: FeedbackDia
         })
 
         if (response.ok) {
-          form.update(prev => ({
-            ...prev,
-            feedback: '',
-            isAnonymous: false,
-          }))
           onClose()
         }
       } catch {
@@ -212,10 +207,7 @@ export const FeedbackDialog = ({ isOpen, onClose, hideUrl = false }: FeedbackDia
 
   useEffect(() => {
     if (!isOpen) {
-      updateForm(prev => ({
-        ...prev,
-        feedback: '',
-      }))
+      form.reset()
       finalTranscriptRef.current = ''
       lastFinalLengthRef.current = 0
       if (recognitionRef.current && isRecording) {
@@ -224,7 +216,7 @@ export const FeedbackDialog = ({ isOpen, onClose, hideUrl = false }: FeedbackDia
         setIsRecording(false)
       }
     }
-  }, [isOpen, isRecording, updateForm])
+  }, [form, isOpen, isRecording, updateForm])
 
   useEffect(() => {
     if (isOpen && user) {
@@ -297,21 +289,21 @@ export const FeedbackDialog = ({ isOpen, onClose, hideUrl = false }: FeedbackDia
                     className="pr-12 pb-3"
                   />
                   {isSupported && (
-                    <Button
+                    <IconButton
+                      tooltip={isRecording ? translation('stopRecording') : translation('startRecording')}
                       color={isRecording ? 'negative' : 'primary'}
                       coloringStyle={isRecording ? 'solid' : 'tonal'}
                       onClick={handleToggleRecording}
                       className="absolute bottom-3 right-3 rounded-full"
-                      title={isRecording ? translation('stopRecording') : translation('startRecording')}
                     >
                       {isRecording ? <Pause className="size-4" /> : <Mic className="size-4" />}
-                    </Button>
+                    </IconButton>
                   )}
                 </div>
               )}
             </FormField>
 
-            <div className="flex-row-2 justify-end gap-2">
+            <div className="flex-row-2 justify-end gap-2 mt-4">
               <Button
                 color="neutral"
                 coloringStyle="outline"

web/components/Notifications.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useMemo } from 'react'
-import { Button, Chip, PopUp, PopUpContext, PopUpOpener, PopUpRoot, Tooltip, useLocalStorage, Visibility } from '@helpwave/hightide'
+import { Button, Chip, IconButton, PopUp, PopUpContext, PopUpOpener, PopUpRoot, useStorage, Visibility } from '@helpwave/hightide'
 import { Bell } from 'lucide-react'
 import { useOverviewData } from '@/data'
 import { useTasksTranslation } from '@/i18n/useTasksTranslation'
-import { SmartDate } from '@/utils/date'
+import { DateDisplay } from '@/components/Date/DateDisplay'
 import { useRouter } from 'next/router'
 import { useTasksContext } from '@/hooks/useTasksContext'
 
@@ -26,12 +26,12 @@ export const Notifications = () => {
   const {
     value: readNotificationsRaw,
     setValue: setReadNotificationsRaw
-  } = useLocalStorage<string[]>('read-notifications', [])
+  } = useStorage<string[]>({ key: 'read-notifications', defaultValue: [] })
 
   const {
     value: dismissedNotificationsRaw,
     setValue: setDismissedNotificationsRaw
-  } = useLocalStorage<string[]>('dismissed-notifications', [])
+  } = useStorage<string[]>({ key: 'dismissed-notifications', defaultValue: [] })
 
   const readNotifications = useMemo(() => {
     return new Set(readNotificationsRaw || [])
@@ -131,29 +131,23 @@ export const Notifications = () => {
 
   return (
     <PopUpRoot>
-      <PopUpContext.Consumer>
-        {({ isOpen }) => (
-          <Tooltip tooltip={translation('notifications')} disabled={isOpen}>
-            <PopUpOpener>
-              {({ props }) => (
-                <Button
-                  {...props}
-                  coloringStyle="text"
-                  layout="icon"
-                  color="neutral"
-                >
-                  <Bell className="size-5" />
-                  {unreadCount > 0 && (
-                    <span className="absolute -top-0.5 -right-0.5 flex-row-0 min-w-4.5 h-4.5 items-center justify-center rounded-full bg-primary text-on-primary text-xs font-bold leading-none">
-                      {unreadCount > 9 ? '9+' : unreadCount}
-                    </span>
-                  )}
-                </Button>
-              )}
-            </PopUpOpener>
-          </Tooltip>
+      <PopUpOpener>
+        {({ props }) => (
+          <IconButton
+            {...props}
+            tooltip={translation('notifications')}
+            coloringStyle="text"
+            color="neutral"
+          >
+            <Bell className="size-5" />
+            {unreadCount > 0 && (
+              <span className="absolute -top-0.5 -right-0.5 flex-row-0 min-w-4.5 h-4.5 items-center justify-center rounded-full bg-primary text-on-primary text-xs font-bold leading-none">
+                {unreadCount > 9 ? '9+' : unreadCount}
+              </span>
+            )}
+          </IconButton>
         )}
-      </PopUpContext.Consumer>
+      </PopUpOpener>
       <PopUp
         options={{
           horizontalAlignment: 'center'
@@ -209,7 +203,7 @@ export const Notifications = () => {
                         <span className="typography-body-xs text-description truncate">
                           {notification.subtitle}
                           {notification.date && (
-                            <> • <SmartDate date={notification.date} showTime={true} /></>
+                            <> • <DateDisplay date={notification.date} showTime={true} /></>
                           )}
                         </span>
                       </div>

web/components/UserInfoPopup.tsx

@@ -5,7 +5,7 @@ import { fetcher } from '@/api/gql/fetcher'
 import clsx from 'clsx'
 import { AvatarStatusComponent } from '@/components/AvatarStatusComponent'
 import { useTasksTranslation } from '@/i18n/useTasksTranslation'
-import { SmartDate } from '@/utils/date'
+import { DateDisplay } from '@/components/Date/DateDisplay'
 
 const GET_USER_QUERY = `
   query GetUser($id: ID!) {
@@ -115,7 +115,7 @@ export const UserInfoPopup: React.FC<UserInfoPopupProps> = ({ userId, isOpen, on
                 </div>
                 {user.lastOnline && (
                   <div className="text-xs text-description mt-1">
-                    <SmartDate date={new Date(user.lastOnline)} />
+                    <DateDisplay date={new Date(user.lastOnline)} />
                   </div>
                 )}
               </div>