refactor: consolidate English translations (#6640)

packages/widgets/src/app/component.tsx

@@ -23,7 +23,8 @@ import { PingDot } from "./ping/ping-dot";
 import { PingIndicator } from "./ping/ping-indicator";
 
 export default function AppWidget({ options, isEditMode, height, width }: WidgetComponentProps<"app">) {
-  const t = useI18n();
+  const tCommon = useI18n("common");
+  const tApp = useI18n("widget.app");
   const settings = useSettings();
   const board = useRequiredBoard();
   const appQuery = clientApi.app.byId.useQuery({ id: options.appId }, { enabled: Boolean(options.appId) });
@@ -121,14 +122,14 @@ export default function AppWidget({ options, isEditMode, height, width }: Widget
         !settings.forceDisableStatus &&
         !board.disableStatus &&
         Boolean(app.pingUrl ?? app.href) ? (
-          <Suspense fallback={<PingDot icon={IconMinus} color="gray" tooltip={`${t("common.action.loading")}…`} />}>
+          <Suspense fallback={<PingDot icon={IconMinus} color="gray" tooltip={`${tCommon("action.loading")}…`} />}>
             <PingIndicator appId={app.id} />
           </Suspense>
         ) : null}
       </AppLink>
       {appQuery.error && (
         <Box pos="absolute" top={4} right={4}>
-          <WidgetQueryErrorIndicator error={appQuery.error} label={t("widget.app.name")} />
+          <WidgetQueryErrorIndicator error={appQuery.error} label={tApp("name")} />
         </Box>
       )}
     </Box>

packages/widgets/src/app/index.ts

@@ -55,7 +55,7 @@ export const { definition, componentLoader } = createWidgetDefinition("app", {
           options: [
             {
               label(t) {
-                return t("widget.app.option.layout.option.column");
+                return t("widget.common.layout.option.vertical");
               },
               value: "column",
               icon: IconLayoutNavbarExpand,
@@ -69,7 +69,7 @@ export const { definition, componentLoader } = createWidgetDefinition("app", {
             },
             {
               label(t) {
-                return t("widget.app.option.layout.option.row");
+                return t("widget.common.layout.option.horizontal");
               },
               value: "row",
               icon: IconLayoutSidebarLeftExpand,

packages/widgets/src/app/ping/ping-indicator.tsx

@@ -10,12 +10,12 @@ interface PingIndicatorProps {
 }
 
 export const PingIndicator = ({ appId }: PingIndicatorProps) => {
-  const t = useI18n();
+  const t = useI18n("common");
   const { data: pingResult, error } = clientApi.widget.app.ping.useQuery({ id: appId }, { refetchOnMount: false });
 
-  if (error) return <PingDot icon={IconX} color="red" tooltip={t("common.error")} />;
+  if (error) return <PingDot icon={IconX} color="red" tooltip={t("error")} />;
 
-  if (!pingResult) return <PingDot icon={IconMinus} color="gray" tooltip={`${t("common.action.loading")}…`} />;
+  if (!pingResult) return <PingDot icon={IconMinus} color="gray" tooltip={`${t("action.loading")}…`} />;
 
   const isError = "error" in pingResult || pingResult.statusCode >= 500;