@agentprojectcontext/apx 1.81.0 → 1.89.1

package/src/interfaces/web/src/components/ui/chat-input.tsx

@@ -1,13 +1,18 @@
 "use client"
 
 import * as React from "react"
-import { ArrowUp, Square } from "lucide-react"
+import { ArrowUp, Plus, Square } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { Tip } from "./tip"
 import { t } from "@/i18n"
 
+/** What a caller-supplied attach menu can do to the hidden file input. */
+export interface FilePicker {
+  open: (accept?: string) => void
+}
+
 interface ChatInputProps {
   value: string
   onValueChange: (value: string) => void
@@ -21,6 +26,31 @@ interface ChatInputProps {
   maxRows?: number
   /** Optional content rendered on the left of the action row (e.g. a model badge or hint). */
   footer?: React.ReactNode
+  /** Enables attaching: the + button, Cmd/Ctrl+V of an image, and drag-and-drop.
+   *  Receives every file the user handed over, in the order they came. */
+  onFiles?: (files: File[]) => void
+  /** `accept` for the file picker. Only meaningful alongside onFiles. */
+  accept?: string
+  /** Rendered inside the field, above the textarea: the pending attachments. */
+  above?: React.ReactNode
+  /** Full-bleed strip welded to the top edge of the card — the conversation's
+   *  context summary. It cancels the card padding itself, so it reads as the
+   *  field's own top edge rather than as a separate bar hovering above it. */
+  header?: React.ReactNode
+  /** Handle onto the hidden file input, so a caller-supplied menu can open it
+   *  with its own `accept` filter. */
+  pickerRef?: React.Ref<FilePicker>
+  /** Replaces the default "+" button on the action row. Pass a menu when there
+   *  is more than one way to attach (photo, file, camera). */
+  leading?: React.ReactNode
+  /** Sits between the footer and send: the mic, on surfaces that record. */
+  trailing?: React.ReactNode
+  /** Send with no text. An attachment on its own is a turn — the daemon builds
+   *  the marker that stands in for the words. */
+  allowEmpty?: boolean
+  /** Extra key handling (e.g. ↑/↓/Enter for an @mention picker). Return true
+   *  to consume the event so Enter does not also send. */
+  onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => boolean | void
   className?: string
 }
 
@@ -39,11 +69,38 @@ export function ChatInput({
   placeholder,
   autoFocus,
   minRows = 2,
-  maxRows = 8,
+  maxRows = 12,
   footer,
+  onFiles,
+  accept,
+  above,
+  header,
+  pickerRef,
+  leading,
+  trailing,
+  allowEmpty = false,
+  onKeyDown,
   className,
 }: ChatInputProps) {
   const ref = React.useRef<HTMLTextAreaElement>(null)
+  const fileRef = React.useRef<HTMLInputElement>(null)
+  React.useImperativeHandle(pickerRef, () => ({
+    open: (override?: string) => {
+      const el = fileRef.current
+      if (!el) return
+      // The menu picks the filter per entry ("photo or video" vs "file"); it is
+      // restored right after so the next open is not stuck on the last choice.
+      if (override !== undefined) el.setAttribute("accept", override)
+      el.click()
+      if (override !== undefined) setTimeout(() => el.setAttribute("accept", accept || ""), 0)
+    },
+  }))
+  const [dropping, setDropping] = React.useState(false)
+
+  const takeFiles = (list: FileList | null | undefined) => {
+    const files = Array.from(list || [])
+    if (files.length && onFiles) onFiles(files)
+  }
 
   // Grow the textarea with its content, clamped between minRows and maxRows.
   // The min keeps a comfortable multi-line height so you can see what you're
@@ -58,7 +115,11 @@ export function ChatInput({
       void el.offsetHeight
       const lineHeight = parseFloat(getComputedStyle(el).lineHeight) || 20
       const min = lineHeight * minRows
-      const max = lineHeight * maxRows
+      // Two ceilings, and the lower one wins: maxRows for the shape of the
+      // field, and 40% of the window so a long draft on a phone can never grow
+      // over the conversation it is about. Without the second one, maxRows big
+      // enough to be comfortable on a desktop swallows a 812px screen.
+      const max = Math.min(lineHeight * maxRows, Math.round(window.innerHeight * 0.4))
       el.style.height = `${Math.min(Math.max(el.scrollHeight, min), max)}px`
       el.style.overflowY = el.scrollHeight > max ? "auto" : "hidden"
     }
@@ -67,23 +128,40 @@ export function ChatInput({
     // wasn't ready on the initial sync pass (e.g. inside a resizable panel
     // that's just been mounted).
     const raf = requestAnimationFrame(resize)
-    return () => cancelAnimationFrame(raf)
+    // The viewport ceiling above moves: rotating the phone, or the on-screen
+    // keyboard opening, changes what 40% is.
+    window.addEventListener("resize", resize)
+    return () => {
+      cancelAnimationFrame(raf)
+      window.removeEventListener("resize", resize)
+    }
   }, [value, minRows, maxRows])
 
-  const canSend = value.trim().length > 0 && !disabled
+  // Note what this does NOT read: `busy`. A draft in the field is a turn to
+  // send, and the agent already working is no reason to refuse it — the caller
+  // queues it onto the thread. Being busy only decides what the button becomes
+  // once there is nothing left to send.
+  const canSend = (value.trim().length > 0 || allowEmpty) && !disabled
 
   return (
     <div
+      onDragOver={onFiles ? (e) => { e.preventDefault(); setDropping(true) } : undefined}
+      onDragLeave={onFiles ? () => setDropping(false) : undefined}
+      onDrop={onFiles ? (e) => { e.preventDefault(); setDropping(false); takeFiles(e.dataTransfer?.files) } : undefined}
       className={cn(
-        // Surface sits a touch above the page/sheet (not the darkest token) so
-        // the input reads as a distinct field; focus is a subtle neutral lift,
-        // not a loud blue ring.
-        "flex flex-col gap-1.5 rounded-2xl border border-border bg-muted/60 p-2 shadow-sm transition-colors",
-        "focus-within:border-foreground/25 focus-within:bg-muted",
+        // The field is a CARD, not a muted slab: on the light theme a grey fill
+        // at this size reads as "disabled" — nobody types into something the
+        // rest of the app uses to mean "you can't". Focus is a neutral lift, no
+        // loud blue ring; a file being dragged over it is the brand green.
+        "flex flex-col gap-1.5 rounded-2xl border border-border bg-card p-2 shadow-sm transition-colors",
+        "focus-within:border-foreground/25",
+        dropping && "border-primary/60 bg-primary/5",
         disabled && "opacity-60",
         className,
       )}
     >
+      {header}
+      {above}
       <textarea
         ref={ref}
         rows={minRows}
@@ -92,10 +170,18 @@ export function ChatInput({
         disabled={disabled}
         placeholder={placeholder}
         onChange={(e) => onValueChange(e.target.value)}
+        onPaste={onFiles ? (e) => {
+          // A screenshot on the clipboard arrives as a file, not as text: take
+          // it and let the caption keep being typed.
+          if (!e.clipboardData?.files?.length) return
+          e.preventDefault()
+          takeFiles(e.clipboardData.files)
+        } : undefined}
         onKeyDown={(e) => {
+          if (onKeyDown?.(e)) return
           if (e.key === "Enter" && !e.shiftKey) {
             e.preventDefault()
-            if (busy || !canSend) return
+            if (!canSend) return
             onSubmit()
           }
         }}
@@ -103,9 +189,46 @@ export function ChatInput({
       />
       <div className="flex items-center justify-between gap-2 pl-1">
         <div className="flex min-w-0 items-center gap-2 text-[11px] text-muted-foreground">
+          {onFiles && (
+            <>
+              <input
+                ref={fileRef}
+                type="file"
+                accept={accept}
+                multiple
+                className="hidden"
+                onChange={(e) => {
+                  takeFiles(e.target.files)
+                  e.target.value = "" // so picking the same file twice fires again
+                }}
+              />
+              {/* A caller with more than one way to attach supplies its own
+                  trigger (a menu); everything else keeps the plain button. */}
+              {leading ?? (
+                <Tip content={t("chat_ui.attach")}>
+                  <Button
+                    type="button"
+                    size="icon-sm"
+                    variant="ghost"
+                    disabled={disabled}
+                    onClick={() => fileRef.current?.click()}
+                    aria-label={t("chat_ui.attach")}
+                  >
+                    <Plus className="size-4" />
+                  </Button>
+                </Tip>
+              )}
+            </>
+          )}
           {footer}
         </div>
-        {busy && onStop ? (
+        <div className="flex shrink-0 items-center gap-1">
+        {trailing}
+        {/* Stop is what the button becomes when the field is EMPTY. With a
+            draft in it, the only thing that button can mean is "send this" —
+            swapping it for a stop the moment the agent starts working turned
+            every message typed mid-run into a killed run. */}
+        {busy && onStop && !canSend ? (
           <Tip content={t("chat_ui.stop")}>
             <Button
               type="button"
@@ -131,6 +254,7 @@ export function ChatInput({
             </Button>
           </Tip>
         )}
+        </div>
       </div>
     </div>
   )

package/src/interfaces/web/src/components/ui/context-menu.tsx

@@ -1,58 +1,30 @@
-"use client"
-
-import * as React from "react"
+// Right-click / long-press menu. Same popup skin as the dropdown menu — the
+// only real difference is the anchor: a context menu hangs off the pointer, so
+// there is no trigger width to inherit (`w-(--anchor-width)` would collapse it
+// to zero) and the popup sizes itself from its items.
 import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu"
 
 import { cn } from "@/lib/utils"
-import { ChevronRightIcon, CheckIcon } from "lucide-react"
 
 function ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {
   return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
 }
 
-function ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {
-  return (
-    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
-  )
-}
-
-function ContextMenuTrigger({
-  className,
-  ...props
-}: ContextMenuPrimitive.Trigger.Props) {
-  return (
-    <ContextMenuPrimitive.Trigger
-      data-slot="context-menu-trigger"
-      className={cn("select-none", className)}
-      {...props}
-    />
-  )
+/** The area you right-click. Renders a `<div>`. */
+function ContextMenuTrigger({ ...props }: ContextMenuPrimitive.Trigger.Props) {
+  return <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
 }
 
 function ContextMenuContent({
   className,
-  align = "start",
-  alignOffset = 4,
-  side = "right",
-  sideOffset = 0,
   ...props
-}: ContextMenuPrimitive.Popup.Props &
-  Pick<
-    ContextMenuPrimitive.Positioner.Props,
-    "align" | "alignOffset" | "side" | "sideOffset"
-  >) {
+}: ContextMenuPrimitive.Popup.Props) {
   return (
     <ContextMenuPrimitive.Portal>
-      <ContextMenuPrimitive.Positioner
-        className="isolate z-50 outline-none"
-        align={align}
-        alignOffset={alignOffset}
-        side={side}
-        sideOffset={sideOffset}
-      >
+      <ContextMenuPrimitive.Positioner className="isolate z-50 outline-none">
         <ContextMenuPrimitive.Popup
           data-slot="context-menu-content"
-          className={cn("z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+          className={cn("z-50 max-h-(--available-height) min-w-40 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className)}
           {...props}
         />
       </ContextMenuPrimitive.Positioner>
@@ -60,27 +32,14 @@ function ContextMenuContent({
   )
 }
 
-function ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {
-  return (
-    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
-  )
-}
-
-function ContextMenuLabel({
+function ContextMenuGroupLabel({
   className,
-  inset,
   ...props
-}: ContextMenuPrimitive.GroupLabel.Props & {
-  inset?: boolean
-}) {
+}: ContextMenuPrimitive.GroupLabel.Props) {
   return (
     <ContextMenuPrimitive.GroupLabel
       data-slot="context-menu-label"
-      data-inset={inset}
-      className={cn(
-        "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
-        className
-      )}
+      className={cn("px-1.5 py-1 text-xs font-medium text-muted-foreground", className)}
       {...props}
     />
   )
@@ -88,20 +47,17 @@ function ContextMenuLabel({
 
 function ContextMenuItem({
   className,
-  inset,
   variant = "default",
   ...props
 }: ContextMenuPrimitive.Item.Props & {
-  inset?: boolean
   variant?: "default" | "destructive"
 }) {
   return (
     <ContextMenuPrimitive.Item
       data-slot="context-menu-item"
-      data-inset={inset}
       data-variant={variant}
       className={cn(
-        "group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive",
+        "group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
         className
       )}
       {...props}
@@ -109,120 +65,6 @@ function ContextMenuItem({
   )
 }
 
-function ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {
-  return (
-    <ContextMenuPrimitive.SubmenuRoot data-slot="context-menu-sub" {...props} />
-  )
-}
-
-function ContextMenuSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}: ContextMenuPrimitive.SubmenuTrigger.Props & {
-  inset?: boolean
-}) {
-  return (
-    <ContextMenuPrimitive.SubmenuTrigger
-      data-slot="context-menu-sub-trigger"
-      data-inset={inset}
-      className={cn(
-        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon className="ml-auto" />
-    </ContextMenuPrimitive.SubmenuTrigger>
-  )
-}
-
-function ContextMenuSubContent({
-  ...props
-}: React.ComponentProps<typeof ContextMenuContent>) {
-  return (
-    <ContextMenuContent
-      data-slot="context-menu-sub-content"
-      className="shadow-lg"
-      side="right"
-      {...props}
-    />
-  )
-}
-
-function ContextMenuCheckboxItem({
-  className,
-  children,
-  checked,
-  inset,
-  ...props
-}: ContextMenuPrimitive.CheckboxItem.Props & {
-  inset?: boolean
-}) {
-  return (
-    <ContextMenuPrimitive.CheckboxItem
-      data-slot="context-menu-checkbox-item"
-      data-inset={inset}
-      className={cn(
-        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      checked={checked}
-      {...props}
-    >
-      <span className="pointer-events-none absolute right-2">
-        <ContextMenuPrimitive.CheckboxItemIndicator>
-          <CheckIcon
-          />
-        </ContextMenuPrimitive.CheckboxItemIndicator>
-      </span>
-      {children}
-    </ContextMenuPrimitive.CheckboxItem>
-  )
-}
-
-function ContextMenuRadioGroup({
-  ...props
-}: ContextMenuPrimitive.RadioGroup.Props) {
-  return (
-    <ContextMenuPrimitive.RadioGroup
-      data-slot="context-menu-radio-group"
-      {...props}
-    />
-  )
-}
-
-function ContextMenuRadioItem({
-  className,
-  children,
-  inset,
-  ...props
-}: ContextMenuPrimitive.RadioItem.Props & {
-  inset?: boolean
-}) {
-  return (
-    <ContextMenuPrimitive.RadioItem
-      data-slot="context-menu-radio-item"
-      data-inset={inset}
-      className={cn(
-        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      <span className="pointer-events-none absolute right-2">
-        <ContextMenuPrimitive.RadioItemIndicator>
-          <CheckIcon
-          />
-        </ContextMenuPrimitive.RadioItemIndicator>
-      </span>
-      {children}
-    </ContextMenuPrimitive.RadioItem>
-  )
-}
-
 function ContextMenuSeparator({
   className,
   ...props
@@ -236,36 +78,11 @@ function ContextMenuSeparator({
   )
 }
 
-function ContextMenuShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="context-menu-shortcut"
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
 export {
   ContextMenu,
   ContextMenuTrigger,
   ContextMenuContent,
+  ContextMenuGroupLabel,
   ContextMenuItem,
-  ContextMenuCheckboxItem,
-  ContextMenuRadioItem,
-  ContextMenuLabel,
   ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuGroup,
-  ContextMenuPortal,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuRadioGroup,
 }

package/src/interfaces/web/src/components/ui/dialog.tsx

@@ -2,6 +2,7 @@ import * as React from "react"
 import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
 
 import { cn } from "@/lib/utils"
+import { t } from "@/i18n"
 import { Button } from "@/components/ui/button"
 import { XIcon } from "lucide-react"
 
@@ -70,7 +71,7 @@ function DialogContent({
           >
             <XIcon
             />
-            <span className="sr-only">Close</span>
+            <span className="sr-only">{t("common.close")}</span>
           </DialogPrimitive.Close>
         )}
       </DialogPrimitive.Popup>
@@ -108,7 +109,7 @@ function DialogFooter({
       {children}
       {showCloseButton && (
         <DialogPrimitive.Close render={<Button variant="outline" />}>
-          Close
+          {t("common.close")}
         </DialogPrimitive.Close>
       )}
     </div>

package/src/interfaces/web/src/components/ui/filter-chips.tsx

@@ -13,11 +13,14 @@ export function FilterChips<T extends string>({
   options,
   onChange,
   label,
+  testIdPrefix,
 }: {
   value: T;
   options: { value: T; label: string }[];
   onChange: (v: T) => void;
   label?: string;
+  /** Stamps `<prefix>-<value>` on each chip, for e2e. */
+  testIdPrefix?: string;
 }) {
   return (
     <div className="flex flex-wrap items-center gap-1" role="group" aria-label={label}>
@@ -25,6 +28,7 @@ export function FilterChips<T extends string>({
         <button
           key={o.value}
           type="button"
+          data-testid={testIdPrefix ? `${testIdPrefix}-${o.value}` : undefined}
           aria-pressed={value === o.value}
           onClick={() => onChange(o.value)}
           className={cn(

package/src/interfaces/web/src/components/ui/popover.tsx

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { Popover as PopoverPrimitive } from "@base-ui/react/popover"
 
 import { cn } from "@/lib/utils"
@@ -11,12 +10,18 @@ function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {
   return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
 }
 
+function PopoverClose({ ...props }: PopoverPrimitive.Close.Props) {
+  return <PopoverPrimitive.Close data-slot="popover-close" {...props} />
+}
+
+// Unlike the dropdown menu, the popup does NOT take the anchor's width: a
+// badge is a few characters wide and the card it opens is a paragraph.
 function PopoverContent({
-  className,
-  align = "center",
+  align = "start",
   alignOffset = 0,
-  side = "bottom",
-  sideOffset = 4,
+  side = "top",
+  sideOffset = 6,
+  className,
   ...props
 }: PopoverPrimitive.Popup.Props &
   Pick<
@@ -26,17 +31,17 @@ function PopoverContent({
   return (
     <PopoverPrimitive.Portal>
       <PopoverPrimitive.Positioner
+        className="isolate z-50 outline-none"
         align={align}
         alignOffset={alignOffset}
         side={side}
         sideOffset={sideOffset}
-        className="isolate z-50"
       >
         <PopoverPrimitive.Popup
           data-slot="popover-content"
           className={cn(
-            "z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-            className
+            "z-50 max-h-(--available-height) w-72 max-w-[min(20rem,calc(100vw-2rem))] origin-(--transform-origin) overflow-y-auto rounded-xl bg-popover p-3 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className,
           )}
           {...props}
         />
@@ -45,44 +50,4 @@ function PopoverContent({
   )
 }
 
-function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="popover-header"
-      className={cn("flex flex-col gap-0.5 text-sm", className)}
-      {...props}
-    />
-  )
-}
-
-function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {
-  return (
-    <PopoverPrimitive.Title
-      data-slot="popover-title"
-      className={cn("font-medium", className)}
-      {...props}
-    />
-  )
-}
-
-function PopoverDescription({
-  className,
-  ...props
-}: PopoverPrimitive.Description.Props) {
-  return (
-    <PopoverPrimitive.Description
-      data-slot="popover-description"
-      className={cn("text-muted-foreground", className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Popover,
-  PopoverContent,
-  PopoverDescription,
-  PopoverHeader,
-  PopoverTitle,
-  PopoverTrigger,
-}
+export { Popover, PopoverTrigger, PopoverContent, PopoverClose }

package/src/interfaces/web/src/components/ui/sheet.tsx

@@ -4,6 +4,7 @@ import * as React from "react"
 import { Dialog as SheetPrimitive } from "@base-ui/react/dialog"
 
 import { cn } from "@/lib/utils"
+import { t } from "@/i18n"
 import { Button } from "@/components/ui/button"
 import { XIcon } from "lucide-react"
 
@@ -72,7 +73,7 @@ function SheetContent({
           >
             <XIcon
             />
-            <span className="sr-only">Close</span>
+            <span className="sr-only">{t("common.close")}</span>
           </SheetPrimitive.Close>
         )}
       </SheetPrimitive.Popup>

package/src/interfaces/web/src/components/ui/spinner.tsx

@@ -1,9 +1,10 @@
 import { cn } from "@/lib/utils"
 import { Loader2Icon } from "lucide-react"
+import { t } from "@/i18n"
 
 function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
   return (
-    <Loader2Icon role="status" aria-label="Loading" className={cn("size-4 animate-spin", className)} {...props} />
+    <Loader2Icon role="status" aria-label={t("common.loading")} className={cn("size-4 animate-spin", className)} {...props} />
   )
 }