@simplysm/solid 13.0.72 → 13.0.74

package/dist/providers/i18n/locales/ko.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../../src/providers/i18n/locales/ko.ts"],
-  "mappings": "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",
+  "mappings": "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",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplysm/solid",
-  "version": "13.0.72",
+  "version": "13.0.74",
   "description": "Simplysm package - SolidJS library",
   "author": "simplysm",
   "license": "Apache-2.0",
@@ -28,7 +28,7 @@
     "@solid-primitives/resize-observer": "^2.1.5",
     "@solid-primitives/storage": "^4.3.4",
     "@solidjs/router": "^0.15.4",
-    "@tabler/icons-solidjs": "^3.37.1",
+    "@tabler/icons-solidjs": "^3.38.0",
     "@tiptap/core": "^3.20.0",
     "@tiptap/extension-color": "^3.20.0",
     "@tiptap/extension-highlight": "^3.20.0",
@@ -51,10 +51,10 @@
     "tabbable": "^6.4.0",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^3.4.19",
-    "@simplysm/core-common": "13.0.72",
-    "@simplysm/core-browser": "13.0.72",
-    "@simplysm/service-common": "13.0.72",
-    "@simplysm/service-client": "13.0.72"
+    "@simplysm/core-browser": "13.0.74",
+    "@simplysm/core-common": "13.0.74",
+    "@simplysm/service-client": "13.0.74",
+    "@simplysm/service-common": "13.0.74"
   },
   "devDependencies": {
     "@solidjs/testing-library": "^0.8.10"

package/src/components/data/calendar/Calendar.tsx

@@ -3,7 +3,7 @@ import { DateOnly } from "@simplysm/core-common";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
-import { useI18nOptional } from "../../../providers/i18n/I18nContext";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 
 export interface CalendarProps<TValue> extends Omit<
   JSX.HTMLAttributes<HTMLTableElement>,
@@ -62,15 +62,14 @@ function CalendarBase<TValue>(props: CalendarProps<TValue>) {
     onChange: () => local.onYearMonthChange,
   });
 
-  const i18n = useI18nOptional();
+  const i18n = useI18n();
   const weekNames = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"] as const;
 
   const weekHeaders = createMemo(() => {
     const start = weekStartDay();
     return Array.from({ length: 7 }, (_, i) => {
       const key = weekNames[(start + i) % 7];
-      return i18n?.t(`calendar.weeks.${key}`) ??
-              { sun: "Sun", mon: "Mon", tue: "Tue", wed: "Wed", thu: "Thu", fri: "Fri", sat: "Sat" }[key];
+      return i18n.t(`calendar.weeks.${key}`);
     });
   });
 

package/src/components/data/sheet/DataSheet.tsx

@@ -39,7 +39,7 @@ import { Checkbox } from "../../form-control/checkbox/Checkbox";
 import { Pagination } from "../Pagination";
 import { useSyncConfig } from "../../../hooks/useSyncConfig";
 import { DialogContext } from "../../disclosure/DialogContext";
-import { useI18nOptional } from "../../../providers/i18n/I18nContext";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 import "./DataSheet.css";
 import {
   configButtonClass,
@@ -111,8 +111,8 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
     "children",
   ]);
 
-  const modal = useContext(DialogContext);
-  const i18n = useI18nOptional();
+  const dialog = useContext(DialogContext);
+  const i18n = useI18n();
 
   // #region Column Collection
   const resolved = children(() => local.children);
@@ -163,8 +163,8 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
     setConfig({ ...prev, columnRecord: record });
   }
 
-  async function openConfigModal(): Promise<void> {
-    if (!modal) return;
+  async function openConfigDialog(): Promise<void> {
+    if (!dialog) return;
 
     const { DataSheetConfigDialog } = await import("./DataSheetConfigDialog");
 
@@ -185,7 +185,7 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
 
     const currentConfig = config();
 
-    const result = await modal.show<DataSheetConfig>(
+    const result = await dialog.show<DataSheetConfig>(
       () => <DataSheetConfigDialog columnInfos={columnInfos} currentConfig={currentConfig} />,
       {
         header: "Sheet Settings",
@@ -770,7 +770,7 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
         local.class,
       )}
     >
-      <Show when={!local.hideConfigBar && (modal != null || effectivePageCount() > 1)}>
+      <Show when={!local.hideConfigBar && (dialog != null || effectivePageCount() > 1)}>
         <div class={toolbarClass}>
           <Show when={effectivePageCount() > 1}>
             <Pagination
@@ -782,10 +782,10 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
             />
           </Show>
           <div class="flex-1" />
-          <Show when={modal != null}>
+          <Show when={dialog != null}>
             <button
               class={configButtonClass}
-              onClick={openConfigModal}
+              onClick={openConfigDialog}
               title="Sheet Settings"
               type="button"
             >
@@ -845,8 +845,8 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
                           class={expandToggleClass}
                           onClick={toggleExpandAll}
                           title={isAllExpanded()
-                            ? (i18n?.t("dataSheet.collapseAll") ?? "Collapse all")
-                            : (i18n?.t("dataSheet.expandAll") ?? "Expand all")}
+                            ? i18n.t("dataSheet.collapseAll")
+                            : i18n.t("dataSheet.expandAll")}
                         >
                           <Icon
                             icon={IconChevronDown}

package/src/components/data/sheet/DataSheetConfigDialog.tsx

@@ -13,6 +13,7 @@ import { Checkbox } from "../../form-control/checkbox/Checkbox";
 import { TextInput } from "../../form-control/field/TextInput";
 import { Button } from "../../form-control/Button";
 import { borderSubtle } from "../../../styles/tokens.styles";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 
 const containerClass = clsx("flex flex-col", "gap-2", "p-2");
 const sheetWrapperClass = clsx("rounded border", borderSubtle);
@@ -34,8 +35,9 @@ export interface DataSheetConfigDialogProps {
 
 export const DataSheetConfigDialog: Component<DataSheetConfigDialogProps> = (props) => {
   const dialog = useDialogInstance<DataSheetConfig>();
+  const i18n = useI18n();
 
-  /* eslint-disable solid/reactivity -- modal props are static values only used once at mount time */
+  /* eslint-disable solid/reactivity -- dialog props are static values only used once at mount time */
   const initialItems: EditColumnItem[] = props.columnInfos
     .filter((info) => !info.collapse)
     .map((info) => {
@@ -105,7 +107,7 @@ export const DataSheetConfigDialog: Component<DataSheetConfigDialogProps> = (pro
   }
 
   function handleReset(): void {
-    if (!confirm("Are you sure you want to reset all sheet settings?")) return;
+    if (!confirm(i18n.t("dataSheetConfigDialog.resetConfirm"))) return;
     dialog?.close({ columnRecord: {} });
   }
 
@@ -115,13 +117,13 @@ export const DataSheetConfigDialog: Component<DataSheetConfigDialogProps> = (pro
         <DataSheet items={editItems} inset hideConfigBar onItemsReorder={handleReorder}>
           <DataSheet.Column<EditColumnItem>
             key="header"
-            header="Column"
+            header={i18n.t("dataSheetConfigDialog.column")}
             class="px-2 py-1"
             sortable={false}
           >
             {(ctx) => ctx.item.headerText}
           </DataSheet.Column>
-          <DataSheet.Column<EditColumnItem> key="fixed" header="Fixed" sortable={false}>
+          <DataSheet.Column<EditColumnItem> key="fixed" header={i18n.t("dataSheetConfigDialog.fixed")} sortable={false}>
             {(ctx) => (
               <Checkbox
                 inset
@@ -130,7 +132,7 @@ export const DataSheetConfigDialog: Component<DataSheetConfigDialogProps> = (pro
               />
             )}
           </DataSheet.Column>
-          <DataSheet.Column<EditColumnItem> key="hidden" header="Hidden" sortable={false}>
+          <DataSheet.Column<EditColumnItem> key="hidden" header={i18n.t("dataSheetConfigDialog.hidden")} sortable={false}>
             {(ctx) => (
               <Checkbox
                 inset
@@ -139,13 +141,13 @@ export const DataSheetConfigDialog: Component<DataSheetConfigDialogProps> = (pro
               />
             )}
           </DataSheet.Column>
-          <DataSheet.Column<EditColumnItem> key="width" header="Width" sortable={false}>
+          <DataSheet.Column<EditColumnItem> key="width" header={i18n.t("dataSheetConfigDialog.width")} sortable={false}>
             {(ctx) => (
               <TextInput
                 value={ctx.item.width}
                 onValueChange={(v) => updateItem(ctx.item.key, "width", v)}
                 inset
-                placeholder="auto"
+                placeholder={i18n.t("dataSheetConfigDialog.autoPlaceholder")}
               />
             )}
           </DataSheet.Column>
@@ -154,12 +156,12 @@ export const DataSheetConfigDialog: Component<DataSheetConfigDialogProps> = (pro
 
       <div class={footerClass}>
         <Button onClick={handleReset} theme="warning" variant="solid">
-          Reset
+          {i18n.t("dataSheetConfigDialog.reset")}
         </Button>
         <div class={footerActionsClass}>
-          <Button onClick={() => dialog?.close(undefined)}>Cancel</Button>
+          <Button onClick={() => dialog?.close(undefined)}>{i18n.t("dataSheetConfigDialog.cancel")}</Button>
           <Button onClick={handleOk} theme="primary" variant="solid">
-            Confirm
+            {i18n.t("dataSheetConfigDialog.confirm")}
           </Button>
         </div>
       </div>

package/src/components/data/sheet/types.ts

@@ -138,7 +138,7 @@ export interface DataSheetReorderEvent<TItem> {
   position: DataSheetDragPosition;
 }
 
-// Column information passed to config modal
+// Column information passed to config dialog
 export interface DataSheetConfigColumnInfo {
   key: string;
   header: string[];

package/src/components/disclosure/Dialog.tsx

@@ -21,7 +21,7 @@ import { createMountTransition } from "../../hooks/createMountTransition";
 import { startPointerDrag } from "../../helpers/startPointerDrag";
 import { createSlotComponent } from "../../helpers/createSlotComponent";
 import { mergeStyles } from "../../helpers/mergeStyles";
-import { useI18nOptional } from "../../providers/i18n/I18nContext";
+import { useI18n } from "../../providers/i18n/I18nContext";
 import { Icon } from "../display/Icon";
 import { borderSubtle } from "../../styles/tokens.styles";
 import { DialogDefaultsContext } from "./DialogContext";
@@ -39,7 +39,7 @@ const DialogHeader = createSlotComponent(DialogSlotsContext, (ctx) => ctx.setHea
 const DialogAction = createSlotComponent(DialogSlotsContext, (ctx) => ctx.setAction);
 
 export interface DialogProps {
-  /** Modal open state */
+  /** Dialog open state */
   open?: boolean;
   /** Callback when open state changes */
   onOpenChange?: (open: boolean) => void;
@@ -146,7 +146,7 @@ interface DialogComponent extends ParentComponent<DialogProps> {
 
 export const Dialog: DialogComponent = (props) => {
   const dialogDefaults = useContext(DialogDefaultsContext);
-  const i18n = useI18nOptional();
+  const i18n = useI18n();
 
   const [local] = splitProps(props, [
     "open",
@@ -479,10 +479,10 @@ export const Dialog: DialogComponent = (props) => {
     <Show when={mounted()}>
       <Portal>
         <DialogSlotsContext.Provider value={{ setHeader, setAction }}>
-          <div ref={setWrapperRef} data-modal class={wrapperClass()}>
+          <div ref={setWrapperRef} data-dialog class={wrapperClass()}>
             {/* Backdrop */}
             <Show when={!local.float}>
-              <div data-modal-backdrop class={backdropClass()} onClick={handleBackdropClick} />
+              <div data-dialog-backdrop class={backdropClass()} onClick={handleBackdropClick} />
             </Show>
 
             {/* Dialog */}
@@ -490,7 +490,7 @@ export const Dialog: DialogComponent = (props) => {
               ref={(el) => {
                 dialogRef = el;
               }}
-              data-modal-dialog
+              data-dialog-panel
               role="dialog"
               aria-modal={local.float ? undefined : true}
               aria-labelledby={hasHeader() ? headerId : undefined}
@@ -503,7 +503,7 @@ export const Dialog: DialogComponent = (props) => {
               {/* Header */}
               <Show when={hasHeader()}>
                 <div
-                  data-modal-header
+                  data-dialog-header
                   class={clsx(headerClass(), "touch-none")}
                   style={
                     typeof local.headerStyle === "string"
@@ -518,10 +518,10 @@ export const Dialog: DialogComponent = (props) => {
                   <Show when={action()}>{action()!()}</Show>
                   <Show when={local.closable ?? true}>
                     <Button
-                      data-modal-close
+                      data-dialog-close
                       size={"sm"}
                       variant={"ghost"}
-                      aria-label={i18n?.t("dialog.close") ?? "Close dialog"}
+                      aria-label={i18n.t("dialog.close")}
                       onClick={handleCloseClick}
                     >
                       <Icon icon={IconX} />
@@ -531,7 +531,7 @@ export const Dialog: DialogComponent = (props) => {
               </Show>
 
               {/* Content */}
-              <div data-modal-content class={dialogContentClass}>
+              <div data-dialog-content class={dialogContentClass}>
                 {local.children}
               </div>
 

package/src/components/disclosure/dialogZIndex.ts

@@ -2,7 +2,7 @@
  * Dialog z-index registry
  *
  * Manages z-index of open Dialogs to prevent infinite increase.
- * Base starting value is 2000 (same as tailwind z-modal), uses only as many as there are open Dialogs.
+ * Base starting value is 2000 (same as tailwind z-dialog), uses only as many as there are open Dialogs.
  */
 
 const BASE_Z = 2000;

package/src/components/features/crud-detail/CrudDetail.tsx

@@ -22,7 +22,7 @@ import { createTopbarActions, TopbarContext } from "../../layout/topbar/TopbarCo
 import { useDialogInstance } from "../../disclosure/DialogInstanceContext";
 import { Dialog } from "../../disclosure/Dialog";
 import { createEventListener } from "@solid-primitives/event-listener";
-import { useI18nOptional } from "../../../providers/i18n/I18nContext";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 import clsx from "clsx";
 import {
   IconCheck,
@@ -64,11 +64,11 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
   ]);
 
   const noti = useNotification();
-  const i18n = useI18nOptional();
+  const i18n = useI18n();
   const topbarCtx = useContext(TopbarContext);
   const dialogInstance = useDialogInstance<boolean>();
 
-  const isModal = dialogInstance !== undefined;
+  const isInDialog = dialogInstance !== undefined;
 
   const canEdit = () => local.editable ?? true;
 
@@ -96,7 +96,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
       originalData = objClone(result.data);
       setInfo(result.info);
     } catch (err) {
-      noti.error(err, i18n?.t("crudDetail.lookupFailed") ?? "Lookup failed");
+      noti.error(err, i18n.t("crudDetail.lookupFailed"));
     }
     setBusyCount((c) => c - 1);
     setReady(true);
@@ -119,7 +119,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
   // -- Refresh --
   async function handleRefresh() {
     if (hasChanges()) {
-      if (!confirm(i18n?.t("crudDetail.discardChanges") ?? "Discard changes?")) return;
+      if (!confirm(i18n.t("crudDetail.discardChanges"))) return;
     }
     await doLoad();
   }
@@ -131,7 +131,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
 
     const currentInfo = info();
     if (currentInfo && !currentInfo.isNew && !hasChanges()) {
-      noti.info(i18n?.t("crudDetail.notice") ?? "Notice", i18n?.t("crudDetail.noChanges") ?? "No changes to save.");
+      noti.info(i18n.t("crudDetail.notice"), i18n.t("crudDetail.noChanges"));
       return;
     }
 
@@ -139,7 +139,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
     try {
       const result = await local.submit(objClone(unwrap(data)));
       if (result) {
-        noti.success(i18n?.t("crudDetail.saveCompleted") ?? "Save completed", i18n?.t("crudDetail.saveSuccess") ?? "Saved successfully.");
+        noti.success(i18n.t("crudDetail.saveCompleted"), i18n.t("crudDetail.saveSuccess"));
         if (dialogInstance) {
           dialogInstance.close(true);
         } else {
@@ -147,7 +147,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
         }
       }
     } catch (err) {
-      noti.error(err, i18n?.t("crudDetail.saveFailed") ?? "Save failed");
+      noti.error(err, i18n.t("crudDetail.saveFailed"));
     }
     setBusyCount((c) => c - 1);
   }
@@ -171,7 +171,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
     try {
       const result = await local.toggleDelete(del);
       if (result) {
-        noti.success(del ? (i18n?.t("crudDetail.deleteCompleted") ?? "Delete completed") : (i18n?.t("crudDetail.restoreCompleted") ?? "Restore completed"), del ? (i18n?.t("crudDetail.deleteSuccess") ?? "Deleted successfully.") : (i18n?.t("crudDetail.restoreSuccess") ?? "Restored successfully."));
+        noti.success(del ? i18n.t("crudDetail.deleteCompleted") : i18n.t("crudDetail.restoreCompleted"), del ? i18n.t("crudDetail.deleteSuccess") : i18n.t("crudDetail.restoreSuccess"));
         if (dialogInstance) {
           dialogInstance.close(true);
         } else {
@@ -179,7 +179,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
         }
       }
     } catch (err) {
-      noti.error(err, del ? (i18n?.t("crudDetail.deleteFailed") ?? "Delete failed") : (i18n?.t("crudDetail.restoreFailed") ?? "Restore failed"));
+      noti.error(err, del ? i18n.t("crudDetail.deleteFailed") : i18n.t("crudDetail.restoreFailed"));
     }
     setBusyCount((c) => c - 1);
   }
@@ -211,7 +211,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
             onClick={() => formRef?.requestSubmit()}
           >
             <Icon icon={IconDeviceFloppy} class="mr-1" />
-            {i18n?.t("crudDetail.save") ?? "Save"}
+            {i18n.t("crudDetail.save")}
           </Button>
         </Show>
         <Show
@@ -227,13 +227,13 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
               onClick={() => void handleToggleDelete()}
             >
               <Icon icon={info()!.isDeleted ? IconTrashOff : IconTrash} class="mr-1" />
-              {info()!.isDeleted ? (i18n?.t("crudDetail.restore") ?? "Restore") : (i18n?.t("crudDetail.delete") ?? "Delete")}
+              {info()!.isDeleted ? i18n.t("crudDetail.restore") : i18n.t("crudDetail.delete")}
             </Button>
           )}
         </Show>
         <Button size="lg" variant="ghost" theme="info" onClick={() => void handleRefresh()}>
           <Icon icon={IconRefresh} class="mr-1" />
-          {i18n?.t("crudDetail.refresh") ?? "Refresh"}
+          {i18n.t("crudDetail.refresh")}
         </Button>
       </>
     ));
@@ -272,8 +272,8 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
   // -- Render --
   return (
     <>
-      {/* Modal mode: Dialog.Action (refresh button in header) */}
-      <Show when={isModal}>
+      {/* Dialog mode: Dialog.Action (refresh button in header) */}
+      <Show when={isInDialog}>
         <Dialog.Action>
           <Button size={"sm"} variant={"ghost"} onClick={() => void handleRefresh()}>
             <Icon icon={IconRefresh} />
@@ -287,9 +287,9 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
         class={clsx("flex h-full flex-col gap-2", local.class)}
       >
         {/* Toolbar */}
-        <Show when={(!isModal && !topbarCtx) || defs().tools}>
+        <Show when={(!isInDialog && !topbarCtx) || defs().tools}>
           <div class="flex gap-2 pb-0">
-            <Show when={!topbarCtx && !isModal}>
+            <Show when={!topbarCtx && !isInDialog}>
               <Show when={canEdit() && local.submit}>
                 <Button
                   size="sm"
@@ -298,7 +298,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
                   onClick={() => formRef?.requestSubmit()}
                 >
                   <Icon icon={IconDeviceFloppy} class="mr-1" />
-                  {i18n?.t("crudDetail.save") ?? "Save"}
+                  {i18n.t("crudDetail.save")}
                 </Button>
               </Show>
               <Show
@@ -318,13 +318,13 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
                     onClick={() => void handleToggleDelete()}
                   >
                     <Icon icon={info()!.isDeleted ? IconTrashOff : IconTrash} class="mr-1" />
-                    {info()!.isDeleted ? (i18n?.t("crudDetail.restore") ?? "Restore") : (i18n?.t("crudDetail.delete") ?? "Delete")}
+                    {info()!.isDeleted ? i18n.t("crudDetail.restore") : i18n.t("crudDetail.delete")}
                   </Button>
                 )}
               </Show>
               <Button size="sm" theme="info" variant="ghost" onClick={() => void handleRefresh()}>
                 <Icon icon={IconRefresh} class="mr-1" />
-                {i18n?.t("crudDetail.refresh") ?? "Refresh"}
+                {i18n.t("crudDetail.refresh")}
               </Button>
             </Show>
             <Show when={defs().tools}>{(toolsDef) => toolsDef().children}</Show>
@@ -343,7 +343,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
         <Show when={info()?.lastModifiedAt}>
           {(_) => (
             <div class="px-2 pb-1 text-xs text-base-400">
-              {i18n?.t("crudDetail.lastModified") ?? "Last modified"}: {info()!.lastModifiedAt!.toFormatString("yyyy-MM-dd HH:mm")}
+              {i18n.t("crudDetail.lastModified")}: {info()!.lastModifiedAt!.toFormatString("yyyy-MM-dd HH:mm")}
               <Show when={info()?.lastModifiedBy}> ({info()!.lastModifiedBy})</Show>
             </div>
           )}
@@ -352,8 +352,8 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
         {/* After (outside form) */}
         <Show when={defs().after}>{(afterDef) => afterDef().children}</Show>
 
-        {/* Modal mode: bottom bar */}
-        <Show when={isModal && canEdit()}>
+        {/* Dialog mode: bottom bar */}
+        <Show when={isInDialog && canEdit()}>
           <div class="flex gap-2 border-t border-base-200 px-3 py-1.5">
             <div class="flex-1" />
             <Show
@@ -362,7 +362,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
               {(_) => (
                 <Button variant={"solid"} theme="danger" onClick={() => void handleToggleDelete()}>
                   <Icon icon={info()!.isDeleted ? IconTrashOff : IconTrash} class="mr-1" />
-                  {info()!.isDeleted ? (i18n?.t("crudDetail.restore") ?? "Restore") : (i18n?.t("crudDetail.delete") ?? "Delete")}
+                  {info()!.isDeleted ? i18n.t("crudDetail.restore") : i18n.t("crudDetail.delete")}
                 </Button>
               )}
             </Show>
@@ -374,7 +374,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
                 class={"gap-1"}
               >
                 <Icon icon={IconCheck} />
-                {i18n?.t("crudDetail.confirm") ?? "Confirm"}
+                {i18n.t("crudDetail.confirm")}
               </Button>
             </Show>
           </div>