chore: first ttag batch

packages/web/src/javascripts/Components/AccountMenu/AdvancedOptions.tsx

@@ -6,6 +6,7 @@ import Icon from '@/Components/Icon/Icon'
 import { useApplication } from '../ApplicationProvider'
 import ServerPicker from './ServerPicker/ServerPicker'
 import { DefaultHost } from '@standardnotes/snjs'
+import { c } from 'ttag'
 
 type Props = {
   disabled?: boolean
@@ -50,7 +51,7 @@ const AdvancedOptions: FunctionComponent<Props> = ({
 
       if (!identifier) {
         if (privateUsername?.length > 0) {
-          application.alerts.alert('Unable to compute private username.').catch(console.error)
+          application.alerts.alert(c('Error').t`Unable to compute private username.`).catch(console.error)
         }
         return
       }
@@ -112,7 +113,7 @@ const AdvancedOptions: FunctionComponent<Props> = ({
         onClick={toggleShowAdvanced}
       >
         <div className="flex items-center">
-          Advanced options
+          {c('Action').t`Advanced options`}
           <Icon type="chevron-down" className="ml-1 text-passive-1" />
         </div>
       </button>
@@ -124,12 +125,17 @@ const AdvancedOptions: FunctionComponent<Props> = ({
             <div className="mb-1 flex items-center justify-between">
               <Checkbox
                 name="private-workspace"
-                label="Private username mode"
+                label={c('Option').t`Private username mode`}
                 checked={isPrivateUsername}
                 disabled={disabled || isRecoveryCodes}
                 onChange={handleIsPrivateUsernameChange}
               />
-              <a href="https://standardnotes.com/help/80" target="_blank" rel="noopener noreferrer" title="Learn more">
+              <a
+                href="https://standardnotes.com/help/80"
+                target="_blank"
+                rel="noopener noreferrer"
+                title={c('Action').t`Learn more`}
+              >
                 <Icon type="info" className="text-neutral" />
               </a>
             </div>
@@ -140,7 +146,7 @@ const AdvancedOptions: FunctionComponent<Props> = ({
                   className={{ container: 'mb-2' }}
                   left={[<Icon type="account-circle" className="text-neutral" />]}
                   type="text"
-                  placeholder="Username"
+                  placeholder={c('Label').t`Username`}
                   value={privateUsername}
                   onChange={handlePrivateUsernameNameChange}
                   disabled={disabled || isRecoveryCodes}
@@ -154,7 +160,7 @@ const AdvancedOptions: FunctionComponent<Props> = ({
               <div className="mb-1 flex items-center justify-between">
                 <Checkbox
                   name="use-strict-signin"
-                  label="Use strict sign-in"
+                  label={c('Option').t`Use strict sign-in`}
                   checked={isStrictSignin}
                   disabled={disabled || isRecoveryCodes}
                   onChange={handleStrictSigninChange}
@@ -163,7 +169,7 @@ const AdvancedOptions: FunctionComponent<Props> = ({
                   href="https://standardnotes.com/help/security"
                   target="_blank"
                   rel="noopener noreferrer"
-                  title="Learn more"
+                  title={c('Action').t`Learn more`}
                 >
                   <Icon type="info" className="text-neutral" />
                 </a>
@@ -174,7 +180,7 @@ const AdvancedOptions: FunctionComponent<Props> = ({
               <div className="mb-1 flex items-center justify-between">
                 <Checkbox
                   name="recovery-codes"
-                  label="Use recovery code"
+                  label={c('Option').t`Use recovery code`}
                   checked={isRecoveryCodes}
                   disabled={disabled}
                   onChange={handleIsRecoveryCodesChange}
@@ -188,7 +194,7 @@ const AdvancedOptions: FunctionComponent<Props> = ({
                   className={{ container: 'mb-2' }}
                   left={[<Icon type="security" className="text-neutral" />]}
                   type="text"
-                  placeholder="Recovery code"
+                  placeholder={c('Label').t`Recovery code`}
                   value={recoveryCodes}
                   onChange={handleRecoveryCodesChange}
                   disabled={disabled}

packages/web/src/javascripts/Components/AccountMenu/ConfirmNoMergeDialog.tsx

@@ -2,6 +2,7 @@ import AlertDialog from '@/Components/AlertDialog/AlertDialog'
 import Button from '@/Components/Button/Button'
 import Icon from '@/Components/Icon/Icon'
 import { FunctionComponent } from 'react'
+import { c } from 'ttag'
 
 type Props = {
   onClose: () => void
@@ -12,26 +13,26 @@ const ConfirmNoMergeDialog: FunctionComponent<Props> = ({ onClose, onConfirm })
   return (
     <AlertDialog closeDialog={onClose}>
       <div className="flex items-center justify-between text-lg font-bold">
-        Delete local data?
+        {c('Title').t`Delete local data?`}
         <button className="rounded p-1 font-bold hover:bg-contrast" onClick={onClose}>
           <Icon type="close" />
         </button>
       </div>
       <div className="sk-panel-row">
         <div>
           <p className="text-base text-foreground lg:text-sm">
-            You have chosen not to merge your local data. If you proceed, your local notes and tags will be permanently
-            deleted and replaced with data from your account. This action cannot be undone.
+            {c('Info')
+              .t`You have chosen not to merge your local data. If you proceed, your local notes and tags will be permanently deleted and replaced with data from your account. This action cannot be undone.`}
           </p>
           <p className="mt-2 text-base font-semibold text-danger lg:text-sm">
-            Are you sure you want to continue without merging?
+            {c('Info').t`Are you sure you want to continue without merging?`}
           </p>
         </div>
       </div>
       <div className="mt-4 flex justify-end gap-2">
-        <Button onClick={onClose}>Cancel</Button>
+        <Button onClick={onClose}>{c('Action').t`Cancel`}</Button>
         <Button primary colorStyle="danger" onClick={onConfirm}>
-          Delete Local Data and Continue
+          {c('Action').t`Delete Local Data and Continue`}
         </Button>
       </div>
     </AlertDialog>

packages/web/src/javascripts/Components/AccountMenu/ConfirmPassword.tsx

@@ -122,7 +122,7 @@ const ConfirmPassword: FunctionComponent<Props> = ({ setMenuPane, email, passwor
       }
 
       if (password !== confirmPassword) {
-        setError(STRING_NON_MATCHING_PASSWORDS)
+        setError(STRING_NON_MATCHING_PASSWORDS())
         setConfirmPassword('')
         passwordInputRef.current?.focus()
         return

packages/web/src/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx

@@ -47,7 +47,7 @@ const GeneralAccountMenu: FunctionComponent<Props> = ({ setMenuPane, closeMenu,
         }
       })
       .catch(() => {
-        application.alerts.alert(STRING_GENERIC_SYNC_ERROR).catch(console.error)
+        application.alerts.alert(STRING_GENERIC_SYNC_ERROR()).catch(console.error)
       })
       .finally(() => {
         setIsSyncingInProgress(false)
@@ -69,9 +69,9 @@ const GeneralAccountMenu: FunctionComponent<Props> = ({ setMenuPane, closeMenu,
   }, [application])
 
   const openEmail = useCallback(() => {
-    const subject = 'Standard Notes Feedback'
+    const subject = c('MailtoSubject').t`Standard Notes Feedback`
 
-    const body = `App Version: ${application.version}`
+    const body = c('MailtoBody').t`App Version: ${application.version}`
 
     application.device.openUrl(
       `mailto:help@standardnotes.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`,
@@ -103,29 +103,29 @@ const GeneralAccountMenu: FunctionComponent<Props> = ({ setMenuPane, closeMenu,
   return (
     <>
       <div className="mb-1 mt-1 hidden items-center justify-between px-4 md:flex md:px-3">
-        <div className="text-lg font-bold lg:text-base">Account</div>
+        <div className="text-lg font-bold lg:text-base">{c('Title').t`Account`}</div>
         <div className="flex cursor-pointer" onClick={closeMenu}>
           <Icon type="close" className="text-neutral" />
         </div>
       </div>
       {user ? (
         <>
           <div className="mb-3 px-4 text-lg text-foreground md:px-3 lg:text-sm">
-            <div>You're signed in as:</div>
+            <div>{c('Info').t`You're signed in as:`}</div>
             <div className="wrap my-0.5 font-bold">{user.email}</div>
             <span className="text-neutral">{application.getHost.execute().getValue()}</span>
           </div>
           <div className="mb-2 flex items-start justify-between px-4 text-mobile-menu-item md:px-3 md:text-tablet-menu-item lg:text-menu-item">
             {isSyncingInProgress ? (
               <div className="flex items-center font-semibold text-info">
                 <Spinner className="mr-2 h-5 w-5" />
-                Syncing...
+                {c('Status').t`Syncing...`}
               </div>
             ) : (
               <div className="flex items-start">
                 <Icon type="check-circle" className={`mr-2 text-success ${MenuItemIconSize}`} />
                 <div>
-                  <div className="font-semibold text-success">Last synced:</div>
+                  <div className="font-semibold text-success">{c('Label').t`Last synced:`}</div>
                   <div className="text-text">{lastSyncDate}</div>
                 </div>
               </div>
@@ -161,7 +161,7 @@ const GeneralAccountMenu: FunctionComponent<Props> = ({ setMenuPane, closeMenu,
           {user ? (
             <MenuItem onClick={openPreferences}>
               <Icon type="user" className={iconClassName} />
-              Account settings
+              {c('Action').t`Account settings`}
             </MenuItem>
           ) : (
             <>
@@ -182,18 +182,18 @@ const GeneralAccountMenu: FunctionComponent<Props> = ({ setMenuPane, closeMenu,
             }}
           >
             <Icon type="archive" className={iconClassName} />
-            Import
+            {c('Action').t`Import`}
           </MenuItem>
           {application.isNativeMobileWeb() && (
             <MenuItem onClick={openEmail}>
               <Icon type="email-filled" className={iconClassName} />
-              Email us
+              {c('Action').t`Email us`}
             </MenuItem>
           )}
           <MenuItem className="justify-between" onClick={openHelp}>
             <div className="flex items-center">
               <Icon type="help" className={iconClassName} />
-              Help &amp; feedback
+              {c('Action').t`Help & feedback`}
             </div>
             <span className="text-neutral">v{application.version}</span>
           </MenuItem>
@@ -205,7 +205,7 @@ const GeneralAccountMenu: FunctionComponent<Props> = ({ setMenuPane, closeMenu,
                 }}
               >
                 <Icon type="keyboard" className={iconClassName} />
-                Keyboard shortcuts
+                {c('Action').t`Keyboard shortcuts`}
                 {keyboardShortcutsHelpShortcut && (
                   <KeyboardShortcutIndicator shortcut={keyboardShortcutsHelpShortcut} className="ml-auto" />
                 )}
@@ -216,7 +216,7 @@ const GeneralAccountMenu: FunctionComponent<Props> = ({ setMenuPane, closeMenu,
                 }}
               >
                 <Icon type="info" className={iconClassName} />
-                Command palette
+                {c('Action').t`Command palette`}
                 {commandPaletteShortcut && (
                   <KeyboardShortcutIndicator shortcut={commandPaletteShortcut} className="ml-auto" />
                 )}
@@ -228,7 +228,7 @@ const GeneralAccountMenu: FunctionComponent<Props> = ({ setMenuPane, closeMenu,
           <MenuSection>
             <MenuItem onClick={signOut}>
               <Icon type="signOut" className={iconClassName} />
-              Sign out workspace
+              {c('Action').t`Sign out workspace`}
             </MenuItem>
           </MenuSection>
         ) : null}

packages/web/src/javascripts/Components/AccountMenu/MergeLocalDataCheckbox.tsx

@@ -1,6 +1,7 @@
 import Icon from '@/Components/Icon/Icon'
 import StyledTooltip from '@/Components/StyledTooltip/StyledTooltip'
 import { ChangeEventHandler, FunctionComponent } from 'react'
+import { c } from 'ttag'
 
 type Props = {
   checked: boolean
@@ -21,9 +22,10 @@ const MergeLocalDataCheckbox: FunctionComponent<Props> = ({ checked, onChange, d
         onChange={onChange}
         disabled={disabled}
       />
-      <span className="text-danger">Merge local data ({notesAndTagsCount} notes and tags)</span>
+      <span className="text-danger">{c('Option').t`Merge local data (${notesAndTagsCount} notes and tags)`}</span>
       <StyledTooltip
-        label="If unchecked, your local notes and tags will be permanently deleted and replaced with data from your account."
+        label={c('Info')
+          .t`If unchecked, your local notes and tags will be permanently deleted and replaced with data from your account.`}
         showOnMobile
         className="!z-modal !max-w-[30ch] whitespace-normal"
       >

packages/web/src/javascripts/Components/AccountMenu/ServerPicker/ServerPicker.tsx

@@ -6,6 +6,7 @@ import { useApplication } from '@/Components/ApplicationProvider'
 import { isDesktopApplication } from '@/Utils'
 import RadioButtonGroup from '@/Components/RadioButtonGroup/RadioButtonGroup'
 import { DefaultHost } from '@standardnotes/snjs'
+import { c } from 'ttag'
 
 type Props = {
   className?: string
@@ -49,7 +50,7 @@ const ServerPicker = ({ className }: Props) => {
     } else if (type === 'home server') {
       if (!application.homeServer) {
         application.alerts
-          .alert('Home server is not running. Please open the prefences and home server tab to start it.')
+          .alert(c('Error').t`Home server is not running. Please open the prefences and home server tab to start it.`)
           .catch(console.error)
 
         return
@@ -58,7 +59,7 @@ const ServerPicker = ({ className }: Props) => {
       const homeServerUrl = await application.homeServer.getHomeServerUrl()
       if (!homeServerUrl) {
         application.alerts
-          .alert('Home server is not running. Please open the prefences and home server tab to start it.')
+          .alert(c('Error').t`Home server is not running. Please open the prefences and home server tab to start it.`)
           .catch(console.error)
 
         return
@@ -71,9 +72,9 @@ const ServerPicker = ({ className }: Props) => {
   const options = useMemo(
     () =>
       [
-        { label: 'Default', value: 'standard' },
-        { label: 'Custom', value: 'custom' },
-      ].concat(isDesktopApplication() ? [{ label: 'Home Server', value: 'home server' }] : []) as {
+        { label: c('Option').t`Default`, value: 'standard' },
+        { label: c('Option').t`Custom`, value: 'custom' },
+      ].concat(isDesktopApplication() ? [{ label: c('Option').t`Home Server`, value: 'home server' }] : []) as {
         label: string
         value: ServerType
       }[],
@@ -82,7 +83,7 @@ const ServerPicker = ({ className }: Props) => {
 
   return (
     <div className={`flex h-full flex-grow flex-col px-3 pb-1.5 ${className}`}>
-      <div className="mb-2 flex font-bold">Sync Server</div>
+      <div className="mb-2 flex font-bold">{c('Label').t`Sync Server`}</div>
       <RadioButtonGroup value={currentType} items={options} onChange={selectTab} />
       {currentType === 'custom' && (
         <DecoratedInput

packages/web/src/javascripts/Components/AccountMenu/User.tsx

@@ -1,6 +1,7 @@
 import { observer } from 'mobx-react-lite'
 import { User as UserType } from '@standardnotes/snjs'
 import { useApplication } from '../ApplicationProvider'
+import { c } from 'ttag'
 
 const User = () => {
   const application = useApplication()
@@ -12,17 +13,18 @@ const User = () => {
     <div className="sk-panel-section">
       {application.syncStatusController.errorMessage && (
         <div className="sk-notification danger">
-          <div className="sk-notification-title">Sync Unreachable</div>
+          <div className="sk-notification-title">{c('Title').t`Sync Unreachable`}</div>
           <div className="sk-notification-text">
-            Hmm...we can't seem to sync your account. The reason: {application.syncStatusController.errorMessage}
+            {c('Error')
+              .t`Hmm...we can't seem to sync your account. The reason: ${application.syncStatusController.errorMessage}`}
           </div>
           <a
             className="sk-a info-contrast sk-bold sk-panel-row"
             href="https://standardnotes.com/help"
             rel="noopener"
             target="_blank"
           >
-            Need help?
+            {c('Action').t`Need help?`}
           </a>
         </div>
       )}

packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu.tsx

@@ -8,6 +8,7 @@ import MenuItem from '@/Components/Menu/MenuItem'
 import WorkspaceMenuItem from './WorkspaceMenuItem'
 import { useApplication } from '@/Components/ApplicationProvider'
 import MenuSection from '@/Components/Menu/MenuSection'
+import { c } from 'ttag'
 
 type Props = {
   mainApplicationGroup: WebApplicationGroup
@@ -42,9 +43,9 @@ const WorkspaceSwitcherMenu: FunctionComponent<Props> = ({
 
   const signoutAll = useCallback(async () => {
     const confirmed = await application.alerts.confirm(
-      'Are you sure you want to sign out of all workspaces on this device?',
+      c('Info').t`Are you sure you want to sign out of all workspaces on this device?`,
       undefined,
-      'Sign out all',
+      c('Action').t`Sign out all`,
       ButtonType.Danger,
     )
     if (!confirmed) {
@@ -86,12 +87,12 @@ const WorkspaceSwitcherMenu: FunctionComponent<Props> = ({
       <MenuSection>
         <MenuItem onClick={addAnotherWorkspace}>
           <Icon type="user-add" className="mr-2 text-neutral" />
-          Add another workspace
+          {c('Action').t`Add another workspace`}
         </MenuItem>
         {!hideWorkspaceOptions && (
           <MenuItem onClick={signoutAll}>
             <Icon type="signOut" className="mr-2 text-neutral" />
-            Sign out all workspaces
+            {c('Action').t`Sign out all workspaces`}
           </MenuItem>
         )}
       </MenuSection>