Task registration bottom sheet is now a drawer on desktop

src/app/add/form/add-task-drawer.tsx

@@ -1,10 +1,11 @@
 'use client';
 
-import { Button, Drawer, SearchField, Separator } from '@heroui/react';
+import { Button, Drawer, SearchField, Separator, useMediaQuery } from '@heroui/react';
 import { Plus } from 'lucide-react';
 import { Fragment, type ReactNode, useMemo, useState } from 'react';
 import type { Division } from '@/db/types';
 import { tReplacer } from '@/i18n/t';
+import { cn } from '@/lib/utils';
 import { CreateTaskForm } from './create-task-form';
 import { TaskOption } from './task-option';
 import type { FormI18n, TaskWithDivision } from './types';
@@ -50,6 +51,10 @@ export function AddTaskDrawer({
   const [selected, setSelected] = useState<Set<string>>(new Set());
   const [creating, setCreating] = useState(false);
 
+  // Bottom sheet on mobile, side drawer everywhere else.
+  const isWide = useMediaQuery('(min-width: 640px)', { defaultValue: false });
+  const placement = isWide ? 'right' : 'bottom';
+
   const groups = useMemo(() => {
     const term = search.trim().toLowerCase();
     const filtered = term
@@ -88,15 +93,16 @@ export function AddTaskDrawer({
     >
       {children}
       <Drawer.Backdrop>
-        <Drawer.Content placement='bottom'>
-          <Drawer.Dialog className='flex max-h-[85dvh] flex-col'>
+        <Drawer.Content placement={placement}>
+          <Drawer.Dialog className={cn('flex flex-col', placement === 'right' ? 'h-full w-[32rem]' : 'max-h-[85dvh]')}>
             {({ close }: { close: () => void }) => (
               <>
                 <Drawer.Header>
                   <Drawer.Heading>{i18n.actions.addTask}</Drawer.Heading>
+                  <Drawer.CloseTrigger aria-label={i18n.actions.close} />
                 </Drawer.Header>
 
-                <Drawer.Body className='flex-1 space-y-4 overflow-y-auto'>
+                <Drawer.Body className='-mx-6 flex-1 space-y-4 overflow-y-auto px-6'>
                   {!creating && (
                     <>
                       <SearchField aria-label={i18n.fields.task.label} value={search} onChange={setSearch}>

src/i18n/en.json

@@ -51,7 +51,8 @@
         "addRemoveCount": "Add {{add}}, remove {{remove}}",
         "create": "Create a new task",
         "cancel": "Cancel",
-        "remove": "Remove"
+        "remove": "Remove",
+        "close": "Close"
       },
       "fields": {
         "session": {

src/i18n/pt.json

@@ -51,7 +51,8 @@
         "addRemoveCount": "Adicionar {{add}}, remover {{remove}}",
         "create": "Criar uma nova tarefa",
         "cancel": "Cancelar",
-        "remove": "Remover"
+        "remove": "Remover",
+        "close": "Fechar"
       },
       "fields": {
         "session": {