Fix #1394.

FrontEnd/src/components/AppBar.tsx

@@ -37,7 +37,8 @@ function AppBarNavLink({
       className={({ isActive }) => classnames(className, isActive && "active")}
       onClick={onClick}
     >
-      {children != null ? children : c(label)}
+      {children}
+      {label && c(label)}
     </NavLink>
   );
 }

FrontEnd/src/components/SearchInput.tsx

@@ -1,6 +1,6 @@
 import classNames from "classnames";
 
-import { useC, Text } from "./common";
+import { useC, I18nText } from "./common";
 import { LoadingButton } from "./button";
 
 import "./SearchInput.css";
@@ -11,7 +11,7 @@ interface SearchInputProps {
   onButtonClick: () => void;
   loading?: boolean;
   className?: string;
-  buttonText?: Text;
+  buttonText?: I18nText;
 }
 
 export default function SearchInput({

FrontEnd/src/components/alert/AlertHost.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import classNames from "classnames";
 
-import { ThemeColor, useC, Text } from "../common";
+import { ThemeColor, useC, I18nText } from "../common";
 import IconButton from "../button/IconButton";
 
 import { alertService, AlertInfoWithId } from "./AlertService";
@@ -10,7 +10,7 @@ import "./alert.css";
 
 interface AutoCloseAlertProps {
   color: ThemeColor;
-  message: Text;
+  message: I18nText;
   onDismiss?: () => void;
   onIn?: () => void;
   onOut?: () => void;

FrontEnd/src/components/alert/AlertService.ts

@@ -1,10 +1,10 @@
-import { ThemeColor, Text } from "../common";
+import { ThemeColor, I18nText } from "../common";
 
 const defaultDismissTime = 5000;
 
 export interface AlertInfo {
   color?: ThemeColor;
-  message: Text;
+  message: I18nText;
   dismissTime?: number | "never";
 }
 

FrontEnd/src/components/button/Button.tsx

@@ -1,13 +1,13 @@
 import { ComponentPropsWithoutRef, Ref } from "react";
 import classNames from "classnames";
 
-import { Text, useC, ClickableColor } from "../common";
+import { I18nText, useC, ClickableColor } from "../common";
 
 import "./Button.css";
 
 interface ButtonProps extends ComponentPropsWithoutRef<"button"> {
   color?: ClickableColor;
-  text?: Text;
+  text?: I18nText;
   outline?: boolean;
   buttonRef?: Ref<HTMLButtonElement> | null;
 }

FrontEnd/src/components/button/ButtonRowV2.tsx

@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef, Ref } from "react";
 import classNames from "classnames";
 
-import { Text, ClickableColor } from "../common";
+import { I18nText, ClickableColor } from "../common";
 
 import Button from "./Button";
 import FlatButton from "./FlatButton";
@@ -22,21 +22,21 @@ interface ButtonRowV2ButtonBase {
 
 interface ButtonRowV2ButtonWithNoType extends ButtonRowV2ButtonBase {
   type?: undefined | null;
-  text: Text;
+  text: I18nText;
   outline?: boolean;
   props?: ComponentPropsWithoutRef<typeof Button>;
 }
 
 interface ButtonRowV2NormalButton extends ButtonRowV2ButtonBase {
   type: "normal";
-  text: Text;
+  text: I18nText;
   outline?: boolean;
   props?: ComponentPropsWithoutRef<typeof Button>;
 }
 
 interface ButtonRowV2FlatButton extends ButtonRowV2ButtonBase {
   type: "flat";
-  text: Text;
+  text: I18nText;
   props?: ComponentPropsWithoutRef<typeof FlatButton>;
 }
 
@@ -48,7 +48,7 @@ interface ButtonRowV2IconButton extends ButtonRowV2ButtonBase {
 
 interface ButtonRowV2LoadingButton extends ButtonRowV2ButtonBase {
   type: "loading";
-  text: Text;
+  text: I18nText;
   loading?: boolean;
   props?: ComponentPropsWithoutRef<typeof LoadingButton>;
 }

FrontEnd/src/components/button/FlatButton.tsx

@@ -1,13 +1,13 @@
 import { ComponentPropsWithoutRef, Ref } from "react";
 import classNames from "classnames";
 
-import { Text, useC, ClickableColor } from "../common";
+import { I18nText, useC, ClickableColor } from "../common";
 
 import "./FlatButton.css";
 
 interface FlatButtonProps extends ComponentPropsWithoutRef<"button"> {
   color?: ClickableColor;
-  text?: Text;
+  text?: I18nText;
   buttonRef?: Ref<HTMLButtonElement> | null;
 }
 

FrontEnd/src/components/common.ts

@@ -1,7 +1,9 @@
 import "./index.css";
 
-export type { Text, I18nText } from "~src/common";
-export { UiLogicError, c, convertI18nText, useC } from "~src/common";
+export type { I18nText } from "~src/i18n";
+export { convertI18nText, useC } from "~src/i18n";
+
+export class UiLogicError extends Error {}
 
 export const themeColors = [
   "primary",
@@ -18,5 +20,4 @@ export { breakpoints } from "./breakpoints";
 
 export * as geometry from "~src/utilities/geometry";
 
-export * as array from "~src/utilities/array"
-
+export * as array from "~src/utilities/array";

FrontEnd/src/components/dialog/ConfirmDialog.tsx

@@ -1,4 +1,4 @@
-import { useC, Text, ThemeColor } from "../common";
+import { useC, I18nText, ThemeColor } from "../common";
 
 import Dialog from "./Dialog";
 import DialogContainer from "./DialogContainer";
@@ -14,8 +14,8 @@ export default function ConfirmDialog({
   open: boolean;
   onClose: () => void;
   onConfirm: () => void;
-  title: Text;
-  body: Text;
+  title: I18nText;
+  body: I18nText;
   color?: ThemeColor;
   bodyColor?: ThemeColor;
 }) {

FrontEnd/src/components/dialog/DialogContainer.tsx

@@ -1,14 +1,14 @@
 import { ComponentProps, Ref, ReactNode } from "react";
 import classNames from "classnames";
 
-import { ThemeColor, Text, useC } from "../common";
+import { ThemeColor, I18nText, useC } from "../common";
 import { ButtonRow, ButtonRowV2 } from "../button";
 
 import "./DialogContainer.css";
 
 interface DialogContainerBaseProps {
   className?: string;
-  title: Text;
+  title: I18nText;
   titleColor?: ThemeColor;
   titleClassName?: string;
   titleRef?: Ref<HTMLDivElement>;

FrontEnd/src/components/dialog/OperationDialog.tsx

@@ -1,7 +1,7 @@
 import { useState, ReactNode, ComponentProps } from "react";
 import classNames from "classnames";
 
-import { useC, Text, ThemeColor } from "../common";
+import { useC, I18nText, ThemeColor } from "../common";
 import {
   useInputs,
   InputGroup,
@@ -15,8 +15,8 @@ import DialogContainer from "./DialogContainer";
 import "./OperationDialog.css";
 
 interface OperationDialogPromptProps {
-  message?: Text;
-  customMessage?: Text;
+  message?: I18nText;
+  customMessage?: I18nText;
   customMessageNode?: ReactNode;
   className?: string;
 }
@@ -39,12 +39,12 @@ export interface OperationDialogProps<TData> {
   onClose: () => void;
   color?: ThemeColor;
   inputColor?: ThemeColor;
-  title: Text;
-  inputPrompt?: Text;
+  title: I18nText;
+  inputPrompt?: I18nText;
   inputPromptNode?: ReactNode;
-  successPrompt?: (data: TData) => Text;
+  successPrompt?: (data: TData) => I18nText;
   successPromptNode?: (data: TData) => ReactNode;
-  failurePrompt?: (error: unknown) => Text;
+  failurePrompt?: (error: unknown) => I18nText;
   failurePromptNode?: (error: unknown) => ReactNode;
 
   inputs: InputInitializer;

FrontEnd/src/components/hooks/useWindowLeave.ts

@@ -1,10 +1,10 @@
 import { useEffect } from "react";
 
-import { useC, Text } from "../common";
+import { useC, I18nText } from "../common";
 
 export default function useWindowLeave(
   allow: boolean,
-  message: Text = "timeline.confirmLeave",
+  message: I18nText = "timeline.confirmLeave",
 ) {
   const c = useC();
 

FrontEnd/src/components/input/InputGroup.tsx

@@ -26,16 +26,16 @@
 import { useState, Ref, useId } from "react";
 import classNames from "classnames";
 
-import { useC, Text, ThemeColor } from "../common";
+import { useC, I18nText, ThemeColor } from "../common";
 
 import "./InputGroup.css";
 
 export interface InputBase {
   key: string;
-  label: Text;
-  helper?: Text;
+  label: I18nText;
+  helper?: I18nText;
   disabled?: boolean;
-  error?: Text;
+  error?: I18nText;
 }
 
 export interface TextInput extends InputBase {
@@ -51,7 +51,7 @@ export interface BoolInput extends InputBase {
 
 export interface SelectInputOption {
   value: string;
-  label: Text;
+  label: I18nText;
   icon?: string;
 }
 
@@ -66,14 +66,14 @@ export type Input = TextInput | BoolInput | SelectInput;
 export type InputValue = Input["value"];
 
 export type InputValueDict = Record<string, InputValue>;
-export type InputErrorDict = Record<string, Text>;
+export type InputErrorDict = Record<string, I18nText>;
 export type InputDisabledDict = Record<string, boolean>;
 export type InputDirtyDict = Record<string, boolean>;
 // use never so you don't have to cast everywhere
 export type InputConfirmValueDict = Record<string, never>;
 
 export type GeneralInputErrorDict = {
-  [key: string]: Text | null | undefined;
+  [key: string]: I18nText | null | undefined;
 };
 
 type MakeInputInfo<I extends Input> = Omit<I, "value" | "error" | "disabled">;

FrontEnd/src/components/menu/Menu.tsx

@@ -1,7 +1,7 @@
 import { MouseEvent, CSSProperties } from "react";
 import classNames from "classnames";
 
-import { useC, Text, ThemeColor } from "../common";
+import { useC, I18nText, ThemeColor } from "../common";
 import Icon from "../Icon";
 
 import "./Menu.css";
@@ -12,7 +12,7 @@ export type MenuItem =
     }
   | {
       type: "button";
-      text: Text;
+      text: I18nText;
       icon?: string;
       color?: ThemeColor;
       onClick?: (e: MouseEvent<HTMLButtonElement>) => void;

FrontEnd/src/components/tab/TabBar.tsx

@@ -2,13 +2,13 @@ import { ReactNode } from "react";
 import { Link } from "react-router-dom";
 import classNames from "classnames";
 
-import { Text, ThemeColor, useC } from "../common";
+import { I18nText, ThemeColor, useC } from "../common";
 
 import "./TabBar.css";
 
 export interface Tab {
   name: string;
-  text: Text;
+  text: I18nText;
   link?: string;
   onClick?: () => void;
 }

FrontEnd/src/components/tab/TabPages.tsx

@@ -1,15 +1,15 @@
 import { ReactNode, useState } from "react";
 import classNames from "classnames";
 
-import { Text, UiLogicError } from "../common";
+import { I18nText, UiLogicError } from "../common";
 
 import Tabs from "./TabBar";
 
 import "./TabPages.css";
 
 interface TabPage {
   name: string;
-  text: Text;
+  text: I18nText;
   page: ReactNode;
 }