Update to hightide 0.18.0 and add translations for all new languages

docker-compose.e2e.yml

@@ -33,6 +33,11 @@ services:
       POSTGRES_DB: "postgres"
       POSTGRES_USER: "postgres"
       POSTGRES_PASSWORD: "password"
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U postgres -d postgres"]
+      interval: 2s
+      timeout: 3s
+      retries: 30
 
   redis:
     image: redis:8.4
@@ -75,9 +80,12 @@ services:
     volumes:
       - "./scaffold:/scaffold:ro"
     depends_on:
-      - postgres
-      - redis
-      - influxdb
+      postgres:
+        condition: service_healthy
+      redis:
+        condition: service_started
+      influxdb:
+        condition: service_started
 
   web:
     image: ${WEB_IMAGE:-ghcr.io/helpwave/tasks-web:latest}
@@ -93,6 +101,7 @@ services:
 
   proxy:
     image: ${PROXY_IMAGE:-ghcr.io/helpwave/tasks-proxy:latest}
+    restart: on-failure
     environment:
       KEYCLOAK_HOST: keycloak:8080
       BACKEND_HOST: backend:80

nix/packages/web.nix

@@ -66,7 +66,7 @@ buildNpmPackage {
       ]);
   };
 
-  npmDepsHash = "sha256-5dIfshqcfVQk96oDRwuiqpFeKkR4Ly6L0tC8+L8Is/s=";
+  npmDepsHash = "sha256-TKOwmONZBz21BXE+lvBhON7xSxvb0AjTQmEns1ufnlk=";
 
   nodejs = nodejs_22;
 

web/components/Date/CurrentTime.tsx

@@ -1,4 +1,4 @@
-import { DateUtils, Tooltip, useLocale } from '@helpwave/hightide'
+import { DateUtils, Tooltip, useLocalization } from '@helpwave/hightide'
 import clsx from 'clsx'
 import { useEffect, useMemo, useState } from 'react'
 
@@ -7,7 +7,7 @@ type CurrentTimeProps = {
 }
 
 export const CurrentTime = ({ className }: CurrentTimeProps) => {
-  const { locale, timeZone, is24HourFormat } = useLocale()
+  const { locale, timeZone, is24HourFormat } = useLocalization()
   const [date, setDate] = useState(new Date())
 
   useEffect(() => {

web/components/Date/DueDateDisplay.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react'
-import { useLocale } from '@helpwave/hightide'
+import { useLocalization } from '@helpwave/hightide'
 import { DateDisplay } from '@/components/Date/DateDisplay'
 import { DueDateUtils } from '@/utils/dueDate'
 
@@ -10,7 +10,7 @@ type DueDateDisplayProps = {
 }
 
 export const DueDateDisplay = ({ value, className, mode = 'absolute' }: DueDateDisplayProps) => {
-  const { timeZone } = useLocale()
+  const { timeZone } = useLocalization()
   const resolved = useMemo(
     () => (timeZone ? DueDateUtils.resolveForDisplay(value, timeZone) : undefined),
     [value, timeZone]

web/components/FeedbackDialog.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef, useMemo } from 'react'
 import { Dialog, Button, Textarea, FormField, FormProvider, Checkbox, useCreateForm, useTranslatedValidators, useFormObserverKey, IconButton } from '@helpwave/hightide'
-import { useTasksTranslation, useLocale } from '@/i18n/useTasksTranslation'
+import { useLocalization } from '@helpwave/hightide'
+import { useTasksTranslation } from '@/i18n/useTasksTranslation'
 import { useTasksContext } from '@/hooks/useTasksContext'
 import { Mic, Pause } from 'lucide-react'
 
@@ -38,7 +39,7 @@ interface SpeechRecognitionInstance {
 
 export const FeedbackDialog = ({ isOpen, onClose, hideUrl = false }: FeedbackDialogProps) => {
   const translation = useTasksTranslation()
-  const { locale } = useLocale()
+  const { locale } = useLocalization()
   const { user } = useTasksContext()
   const [isRecording, setIsRecording] = useState(false)
   const [isSupported, setIsSupported] = useState(false)

web/components/locations/ScopeVisibilityField.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useState } from 'react'
-import { Button, Checkbox, Select, SelectOption } from '@helpwave/hightide'
+import { Button, Checkbox, Select } from '@helpwave/hightide'
 import { MapPin } from 'lucide-react'
 import clsx from 'clsx'
 import { ScopeVisibility } from '@/api/gql/generated'
@@ -82,9 +82,9 @@ export function ScopeVisibilityField({
             disabled={disabled}
             onValueChange={setVisibility}
           >
-            <SelectOption value={ScopeVisibility.Private} label={translation('scopePrivate')} />
-            <SelectOption value={ScopeVisibility.Shared} label={translation('scopeShared')} />
-            <SelectOption value={ScopeVisibility.Public} label={translation('scopePublic')} />
+            <Select.Option value={ScopeVisibility.Private} label={translation('scopePrivate')} />
+            <Select.Option value={ScopeVisibility.Shared} label={translation('scopeShared')} />
+            <Select.Option value={ScopeVisibility.Public} label={translation('scopePublic')} />
           </Select>
           <span className="text-description text-sm">
             {translation(visibilityDescriptionKey[value.visibility])}

web/components/patients/LoadTaskPresetDialog.tsx

@@ -5,8 +5,7 @@ import {
   Chip,
   Dialog,
   FocusTrapWrapper,
-  Select,
-  SelectOption
+  Select
 } from '@helpwave/hightide'
 import { Check, Plus, UserPlus, X } from 'lucide-react'
 import { useTasksTranslation } from '@/i18n/useTasksTranslation'
@@ -147,14 +146,14 @@ export function LoadTaskPresetDialog({
                 <Select
                   value={selectedId ?? null}
                   onValueChange={(v) => setSelectedId(v)}
-                  buttonProps={{
+                  triggerProps={{
                     className: 'w-full',
                   }}
                 >
                   {presets.map(p => (
-                    <SelectOption key={p.id} value={p.id} label={p.name}>
+                    <Select.Option key={p.id} value={p.id} label={p.name}>
                       {p.name}
-                    </SelectOption>
+                    </Select.Option>
                   ))}
                 </Select>
                 {selected && taskCount === 0 && (

web/components/patients/PatientDataEditor.tsx

@@ -1,6 +1,6 @@
 import { useState, useMemo, useEffect, useCallback } from 'react'
 import type { FormFieldDataHandling } from '@helpwave/hightide'
-import { FormProvider, Input, DateTimeInput, Select, SelectOption, Textarea, Checkbox, Button, ConfirmDialog, LoadingContainer, useCreateForm, FormField, Visibility, useFormObserverKey, IconButton } from '@helpwave/hightide'
+import { FormProvider, Input, DateTimeInput, Select, Textarea, Checkbox, Button, ConfirmDialog, LoadingContainer, useCreateForm, FormField, Visibility, useFormObserverKey, IconButton } from '@helpwave/hightide'
 import { CenteredLoadingLogo } from '@/components/CenteredLoadingLogo'
 import { useTasksTranslation } from '@/i18n/useTasksTranslation'
 import type { CreatePatientInput, LocationNodeType, UpdatePatientInput } from '@/api/gql/generated'
@@ -377,7 +377,7 @@ export const PatientDataEditor = ({
                 {...interactionStates}
               >
                 {sexOptions.map(option => (
-                  <SelectOption key={option.value} value={option.value} label={option.label} />
+                  <Select.Option key={option.value} value={option.value} label={option.label} />
                 ))}
               </Select>
             )}

web/components/patients/PatientTasksView.tsx

@@ -1,5 +1,5 @@
 import { useState, useMemo, useEffect, useCallback } from 'react'
-import { Button, Drawer, ExpandableContent, ExpandableHeader, ExpandableRoot, useLocale } from '@helpwave/hightide'
+import { Button, Drawer, ExpandableContent, ExpandableHeader, ExpandableRoot, useLocalization } from '@helpwave/hightide'
 import { useTasksTranslation } from '@/i18n/useTasksTranslation'
 import { CheckCircle2, ChevronDown, Circle, Combine, PlusIcon } from 'lucide-react'
 import { SortDirection } from '@/api/gql/generated'
@@ -93,7 +93,7 @@ export const PatientTasksView = ({
   const openTasks = useMemo(() => sortByDueDate(tasks.filter(t => !t.done)), [tasks])
   const closedTasks = useMemo(() => sortByDueDate(tasks.filter(t => t.done)), [tasks])
 
-  const { locale, timeZone } = useLocale()
+  const { locale, timeZone } = useLocalization()
   const buildExportRequest = useCallback((format: TableExportFormat): TableExportRequest => ({
     entity: 'tasks',
     format,

web/components/properties/PropertyDetailView.tsx

@@ -5,7 +5,6 @@ import {
   Checkbox,
   Input,
   Select,
-  SelectOption,
   Textarea,
   FormField,
   FormProvider,
@@ -283,7 +282,7 @@ export const PropertyDetailView = ({
                 }}
               >
                 {propertySubjectTypeList.map(v => (
-                  <SelectOption key={v} value={v} label={translation('sPropertySubjectType', { subject: v })} />
+                  <Select.Option key={v} value={v} label={translation('sPropertySubjectType', { subject: v })} />
                 ))}
               </Select>
             )}
@@ -308,7 +307,7 @@ export const PropertyDetailView = ({
                 }}
               >
                 {propertyFieldTypeList.map(v => (
-                  <SelectOption key={v} value={v} label={translation('sPropertyType', { type: v })} />
+                  <Select.Option key={v} value={v} label={translation('sPropertyType', { type: v })} />
                 ))}
               </Select>
             )}

web/components/properties/PropertyEntry.tsx

@@ -1,11 +1,11 @@
 import {
   CheckboxProperty,
   DateProperty,
-  MultiSelectOption,
+  MultiSelect,
   MultiSelectProperty,
   NumberProperty,
   PropertyBase,
-  SelectOption,
+  Select,
   SingleSelectProperty,
   TextProperty
 } from '@helpwave/hightide'
@@ -122,7 +122,7 @@ export const PropertyEntry = ({
         onEditComplete={singleSelectValue => onEditComplete({ ...value, singleSelectValue })}
       >
         {selectData?.options.map(option => (
-          <SelectOption key={option.id} value={option.id} label={option.name} />
+          <Select.Option key={option.id} value={option.id} label={option.name} />
         ))}
       </SingleSelectProperty>
     )
@@ -135,7 +135,7 @@ export const PropertyEntry = ({
         onEditComplete={multiSelectValue => onEditComplete({ ...value, multiSelectValue })}
       >
         {selectData?.options.map(option => (
-          <MultiSelectOption key={option.id} value={option.id} label={option.name} />
+          <MultiSelect.Option key={option.id} value={option.id} label={option.name} />
         ))}
       </MultiSelectProperty>
     )

web/components/tables/PatientList.tsx

@@ -1,7 +1,7 @@
 import { useMemo, useState, forwardRef, useImperativeHandle, useEffect, useCallback, useRef, type ReactNode } from 'react'
 import { useMutation } from '@apollo/client/react'
 import type { IdentifierFilterValue, FilterListItem, FilterListPopUpBuilderProps } from '@helpwave/hightide'
-import { Chip, DateUtils, FillerCell, SearchBar, ProgressIndicator, Tooltip, Drawer, TableProvider, TableDisplay, TableColumnSwitcher, IconButton, useLocale, FilterList, SortingList, Button, ExpansionIcon, Visibility, ConfirmDialog, VirtualizedCardGrid, overscanRowsForBuffer } from '@helpwave/hightide'
+import { Chip, DateUtils, FillerCell, SearchBar, ProgressIndicator, Tooltip, Drawer, TableProvider, TableDisplay, TableColumnSwitcher, IconButton, useLocalization, FilterList, SortingList, Button, ExpansionIcon, Visibility, ConfirmDialog, VirtualizedCardGrid, overscanRowsForBuffer } from '@helpwave/hightide'
 import clsx from 'clsx'
 import { LayoutGrid, PlusIcon, Table2 } from 'lucide-react'
 import type { LocationType } from '@/api/gql/generated'
@@ -177,7 +177,7 @@ export const PatientList = forwardRef<PatientListRef, PatientListProps>(({
 }, ref) => {
   const translation = useTasksTranslation()
   const isPrinting = useIsPrinting()
-  const { locale } = useLocale()
+  const { locale } = useLocalization()
   const { selectedRootLocationIds } = useTasksContext()
   const { refreshingPatientIds } = useRefreshingEntityIds()
   const { data: propertyDefinitionsData } = usePropertyDefinitions()
@@ -691,7 +691,7 @@ export const PatientList = forwardRef<PatientListRef, PatientListProps>(({
     })
   ), [patientPropertyColumns, translation, handleOpenClearProperty])
 
-  const { timeZone, is24HourFormat } = useLocale()
+  const { timeZone, is24HourFormat } = useLocalization()
   const formatBirthdate = useCallback(
     (birthdate: Date) => DateUtils.formatAbsolute(birthdate, locale, 'date', { timeZone, is24HourFormat }),
     [locale, timeZone, is24HourFormat]

web/components/tables/TaskList.tsx

@@ -1,7 +1,7 @@
 import { useMemo, useState, forwardRef, useImperativeHandle, useEffect, useRef, useCallback, type ReactNode } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
 import type { FilterListItem } from '@helpwave/hightide'
-import { Button, Checkbox, ConfirmDialog, FilterList, FillerCell, IconButton, SearchBar, TableColumnSwitcher, TableDisplay, TableProvider, SortingList, ExpansionIcon, VirtualizedCardGrid, overscanRowsForBuffer, useLocale } from '@helpwave/hightide'
+import { Button, Checkbox, ConfirmDialog, FilterList, FillerCell, IconButton, SearchBar, TableColumnSwitcher, TableDisplay, TableProvider, SortingList, ExpansionIcon, VirtualizedCardGrid, overscanRowsForBuffer, useLocalization } from '@helpwave/hightide'
 import clsx from 'clsx'
 import { Edit2, ExternalLink, LayoutGrid, PlusIcon, Table2, UserCheck } from 'lucide-react'
 import type { IdentifierFilterValue } from '@helpwave/hightide'
@@ -888,7 +888,7 @@ export const TaskList = forwardRef<TaskListRef, TaskListProps>(({ tasks: initial
     [columnOrder, knownColumnIdsOrdered]
   )
 
-  const { locale, timeZone } = useLocale()
+  const { locale, timeZone } = useLocalization()
   const buildExportRequest = useCallback((format: TableExportFormat): TableExportRequest => ({
     entity: 'tasks',
     format,

web/components/tables/in-table-edit/InTableDateTimeEditPopUp.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react'
 import { useEffect, useState, type ComponentProps } from 'react'
 import type { ButtonProps } from '@helpwave/hightide'
-import { Button, DateTimeInput, FlexibleDateTimeInput, PopUp, PopUpContext, PopUpOpener, PopUpRoot, useLocale } from '@helpwave/hightide'
+import { Button, DateTimeInput, FlexibleDateTimeInput, PopUp, PopUpContext, PopUpOpener, PopUpRoot, useLocalization } from '@helpwave/hightide'
 import { useTasksTranslation } from '@/i18n/useTasksTranslation'
 import { getTaskDueDateFlexibleInputProps, TASK_DUE_DATE_DATE_TIME_INPUT_PROPS } from '@/utils/dueDate'
 import { samePropertyDateInputValue } from '@/utils/calendarDate'
@@ -36,7 +36,7 @@ export function InTableDateTimeEditPopUp({
   options = { horizontalAlignment: 'afterStart', verticalAlignment: 'afterEnd' },
   className = 'p-2',
 }: InTableDateTimeEditPopUpProps) {
-  const { timeZone } = useLocale()
+  const { timeZone } = useLocalization()
   const [draft, setDraft] = useState<Date | null>(value)
   const translation = useTasksTranslation()
 

web/components/tables/in-table-edit/InTableSingleSelectEditPopUp.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react'
 import { useState, type ComponentProps } from 'react'
 import type { ButtonProps } from '@helpwave/hightide'
-import { Button, PopUp, PopUpContext, PopUpOpener, PopUpRoot, Select, SelectOption } from '@helpwave/hightide'
+import { Button, PopUp, PopUpContext, PopUpOpener, PopUpRoot, Select } from '@helpwave/hightide'
 import { useTasksTranslation } from '@/i18n/useTasksTranslation'
 import clsx from 'clsx'
 
@@ -62,9 +62,9 @@ export function InTableSingleSelectEditPopUp({
             setDraft(next ?? emptyTag)
           }}
         >
-          <SelectOption value={emptyTag} label={translation('none') || '—'} />
+          <Select.Option value={emptyTag} label={translation('none') || '—'} />
           {optionLabels.map((label, idx) => (
-            <SelectOption
+            <Select.Option
               key={`${definitionId}-opt-${idx}`}
               value={`${definitionId}-opt-${idx}`}
               label={label}

web/components/tasks/TaskCardView.tsx

@@ -1,4 +1,4 @@
-import { AvatarWithStatus, Button, Checkbox, Tooltip, useLocale } from '@helpwave/hightide'
+import { AvatarWithStatus, Button, Checkbox, Tooltip, useLocalization } from '@helpwave/hightide'
 import { Clock, Combine, User, Users, Flag } from 'lucide-react'
 import clsx from 'clsx'
 import { DueDateDisplay } from '@/components/Date/DueDateDisplay'
@@ -75,7 +75,7 @@ const isCloseToDueDate = (dueDate: Date | undefined, done: boolean): boolean =>
 
 export const TaskCardView = ({ task, onToggleDone: _onToggleDone, onClick, showAssignee: _showAssignee = false, showPatient = true, className, fullWidth: _fullWidth = false, extraContent }: TaskCardViewProps) => {
   const translation = useTasksTranslation()
-  const { timeZone } = useLocale()
+  const { timeZone } = useLocalization()
   const router = useRouter()
   const [presetDialogId, setPresetDialogId] = useState<string | null>(null)
   const [selectedUserId, setSelectedUserId] = useState<string | null>(null)

web/components/tasks/TaskDataEditor.tsx

@@ -12,7 +12,6 @@ import {
   Input,
   LoadingContainer,
   Select,
-  SelectOption,
   Textarea,
   useCreateForm,
   Drawer,
@@ -364,10 +363,10 @@ export const TaskDataEditor = ({
                       onEditComplete?.(nextValue)
                     }}
                   >
-                    <SelectOption value="" label={translation('none') || 'None'} />
+                    <Select.Option value="" label={translation('none') || 'None'} />
                     {patients.map(patient => {
                       return (
-                        <SelectOption key={patient.id} value={patient.id} label={patient.name} />
+                        <Select.Option key={patient.id} value={patient.id} label={patient.name} />
                       )
                     })}
                   </Select>
@@ -534,14 +533,14 @@ export const TaskDataEditor = ({
                       dataProps.onEditComplete?.(priority)
                     }}
                   >
-                    <SelectOption value="none" iconAppearance="right" label={translation('priorityNone')} />
+                    <Select.Option value="none" iconAppearance="right" label={translation('priorityNone')} />
                     {priorities.map(({ value, label }) => (
-                      <SelectOption key={value} value={value} iconAppearance="right" label={label}>
+                      <Select.Option key={value} value={value} iconAppearance="right" label={label}>
                         <div className="flex items-center gap-2">
                           <span className={`w-2 h-2 rounded-full ${PriorityUtils.toBackgroundColor(value as TaskPriority | null | undefined)}`} />
                           <span>{label}</span>
                         </div>
-                      </SelectOption>
+                      </Select.Option>
                     ))}
                   </Select>
                 )

web/components/tasks/TaskPresetTaskDataEditor.tsx

@@ -6,7 +6,6 @@ import {
   FormProvider,
   Input,
   Select,
-  SelectOption,
   Textarea,
   useCreateForm
 } from '@helpwave/hightide'
@@ -105,14 +104,14 @@ export function TaskPresetTaskDataEditor({
                     dataProps.onEditComplete?.(priority)
                   }}
                 >
-                  <SelectOption value="none" iconAppearance="right" label={translation('priorityNone')} />
+                  <Select.Option value="none" iconAppearance="right" label={translation('priorityNone')} />
                   {priorities.map(({ value, label }) => (
-                    <SelectOption key={value} value={value} iconAppearance="right" label={label}>
+                    <Select.Option key={value} value={value} iconAppearance="right" label={label}>
                       <div className="flex items-center gap-2">
                         <span className={`w-2 h-2 rounded-full ${PriorityUtils.toBackgroundColor(value as TaskPriority | null | undefined)}`} />
                         <span>{label}</span>
                       </div>
-                    </SelectOption>
+                    </Select.Option>
                   ))}
                 </Select>
               )