refactor: ♻️ Added more i18n strings

Nerimity · Dec 28, 2022 · 793738f · 793738f
1 parent a62b012
commit 793738f
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 24 deletions.
diff --git a/src/chat-api/Bitwise.ts b/src/chat-api/Bitwise.ts
@@ -19,14 +19,14 @@ export const USER_BADGES = {
 
 export const CHANNEL_PERMISSIONS = {
   PRIVATE_CHANNEL: {
-    name: 'Private Channel',
-    description: 'Disable access to the channel. Server admins can still access the channel.',
+    name: 'servers.channelPermissions.privateChannel',
+    description: 'servers.channelPermissions.privateChannelDescription',
     bit: 1,
     icon: 'lock'
   },
   SEND_MESSAGE: {
-    name: 'Send Message',
-    description: 'Enable sending messages in the channel. Server admins can still send messages.',
+    name: 'servers.channelPermissions.sendMessage',
+    description: 'servers.channelPermissions.sendMessageDescription',
     bit: 2,
     icon: 'mail'
   }

diff --git a/src/components/servers/settings/PublishServerSettings.tsx b/src/components/servers/settings/PublishServerSettings.tsx
@@ -7,6 +7,7 @@ import Checkbox from "@/components/ui/Checkbox";
 import Input from "@/components/ui/input/Input";
 import SettingsBlock from "@/components/ui/settings-block/SettingsBlock";
 import Text from "@/components/ui/Text";
+import { useTransContext } from "@mbarzda/solid-i18next";
 import { Link, useParams } from "@nerimity/solid-router";
 import { createEffect, createSignal, Show,} from "solid-js";
 import { css, styled } from "solid-styled-components";
@@ -22,6 +23,7 @@ const buttonStyle = css`
 `;
 
 export default function PublishServerSettings() {
+  const [t] = useTransContext();
   const params = useParams<{serverId: string}>();
   const {header} = useStore();
 
@@ -103,12 +105,12 @@ export default function PublishServerSettings() {
   return (
     <Container>
       <Text color="rgba(255,255,255,0.6)" style={{"margin-bottom": "10px"}}>Publishing your server will make it be available in the <Link href="/app/explore/servers">explore</Link> page.</Text>
-      <SettingsBlock icon="public" label="Public" description="Make this server public.">
+      <SettingsBlock icon="public" label={t('servers.settings.publishServer.public')} description={t('servers.settings.publishServer.publicDescription')}>
         <Checkbox checked={isPublic()} onChange={v => setIsPublic(v)}/>
       </SettingsBlock>
 
       <Show when={isPublic() && publicServer()}>
-        <SettingsBlock icon="arrow_upward" label="Bump Server" description="Bump this server to get to the top.">
+        <SettingsBlock icon="arrow_upward" label={t('servers.settings.publishServer.bumpServer')} description={t('servers.settings.publishServer.bumpServerDescription')}>
           <Button onClick={bumpClick} class={css`margin-right: 0px;`} label={`Bump (${publicServer()?.bumpCount})`} />
         </SettingsBlock>
       </Show>
@@ -117,8 +119,8 @@ export default function PublishServerSettings() {
         <Input value={description()} onText={t => setDescription(t)} type="textarea" height={200} label={`Server Description (${description().length}/${MAX_DESCRIPTION_LENGTH})`} />
       </Show>
       <Show when={error()}><Text color="var(--alert-color)">{error()}</Text></Show>
-      <Show when={showPublishButton()}><Button class={buttonStyle} iconName="public" label="Publish" onClick={publish} /></Show>
-      <Show when={!isPublic() && publicServer()}><Button class={buttonStyle} iconName="delete" color="var(--alert-color)" label="Delete server" onClick={deletePublic} /></Show>
+      <Show when={showPublishButton()}><Button class={buttonStyle} iconName="public" label={t('servers.settings.publishServer.publishServerButton')} onClick={publish} /></Show>
+      <Show when={!isPublic() && publicServer()}><Button class={buttonStyle} iconName="delete" color="var(--alert-color)" label={t('servers.settings.publishServer.unpublishServerButton')} onClick={deletePublic} /></Show>
     </Container>
   )
 }
diff --git a/src/components/servers/settings/channel/ServerSettingsChannel.tsx b/src/components/servers/settings/channel/ServerSettingsChannel.tsx
@@ -14,13 +14,15 @@ import Checkbox from '@/components/ui/Checkbox';
 import { addBit, CHANNEL_PERMISSIONS, getAllPermissions, removeBit } from '@/chat-api/Bitwise';
 import DeleteConfirmModal from '@/components/ui/delete-confirm-modal/DeleteConfirmModal';
 import { useCustomPortal } from '@/components/ui/custom-portal/CustomPortal';
+import { useTransContext } from '@mbarzda/solid-i18next';
 
 type ChannelParams = {
   serverId: string;
   channelId: string;  
 }
 
 export default function ServerSettingsChannel() {
+  const [t] = useTransContext();
   const params = useParams<ChannelParams>();
   const { header, channels } = useStore();
   const createPortal = useCustomPortal();
@@ -62,7 +64,7 @@ export default function ServerSettingsChannel() {
   }
 
 
-  const saveRequestStatus = () => saveRequestSent() ? 'Saving...' : 'Save Changes';
+  const saveRequestStatus = () => saveRequestSent() ? t('servers.settings.channel.saving') : t('servers.settings.channel.saveChangesButton');
 
 
   const onPermissionChanged = (checked: boolean, bit: number) => {
@@ -85,23 +87,23 @@ export default function ServerSettingsChannel() {
   return (
     <div class={styles.channelPane}>
       {/* Channel Name */}
-      <SettingsBlock icon='edit' label='Channel Name'>
+      <SettingsBlock icon='edit' label={t('servers.settings.channel.channelName')}>
         <Input value={inputValues().name} onText={(v) => setInputValue('name', v) } />
       </SettingsBlock>
       <div>
-        <SettingsBlock icon="security" label="Permissions" description="Manage permissions for this channel." header={true} />
+        <SettingsBlock icon="security" label={t('servers.settings.channel.permissions')} description={t('servers.settings.channel.permissionsDescription')} header={true} />
         <For each={ permissions()}>
           {(permission) => (
-            <SettingsBlock icon={permission.icon} label={permission.name} description={permission.description} class={styles.permissionItem}>
+            <SettingsBlock icon={permission.icon} label={t(permission.name)} description={t(permission.description)} class={styles.permissionItem}>
               <Checkbox checked={permission.hasPerm} onChange={checked => onPermissionChanged(checked, permission.bit, )} />
             </SettingsBlock>
           )}
 
         </For>
       </div>
       {/* Delete Channel */}
-      <SettingsBlock icon='delete' label='Delete this channel' description='This cannot be undone!'>
-        <Button label='Delete Channel' color='var(--alert-color)' onClick={showDeleteConfirmModal} />
+      <SettingsBlock icon='delete' label={t('servers.settings.channel.deleteThisChannel')} description={t('servers.settings.channel.deleteThisChannelDescription')}>
+        <Button label={t('servers.settings.channel.deleteChannelButton')} color='var(--alert-color)' onClick={showDeleteConfirmModal} />
       </SettingsBlock>
       {/* Errors & buttons */}
       <Show when={error()}><div class={styles.error}>{error()}</div></Show>

diff --git a/src/components/servers/settings/channels/ServerSettingsChannels.tsx b/src/components/servers/settings/channels/ServerSettingsChannels.tsx
@@ -8,6 +8,7 @@ import Button from '@/components/ui/Button';
 import { Channel } from '@/chat-api/store/useChannels';
 import Icon from '@/components/ui/icon/Icon';
 import { createServerChannel } from '@/chat-api/services/ServerService';
+import { useTransContext } from '@mbarzda/solid-i18next';
 
 
 
@@ -44,6 +45,7 @@ function ChannelList() {
 
 
 export default function ServerSettingsChannel() {
+  const [t] = useTransContext();
   const { serverId } = useParams();
   const { header } = useStore();
   const [channelAddRequestSent, setChannelAddRequestSent] = createSignal(false);
@@ -70,8 +72,8 @@ export default function ServerSettingsChannel() {
 
   return (
     <div class={styles.channelsPane}>
-      <SettingsBlock label='Add a new channel' icon='add'>
-        <Button label='Add Channel' onClick={onAddChannelClicked} />
+      <SettingsBlock label={t('servers.settings.channels.addNewChannel')} icon='add'>
+        <Button label={t('servers.settings.channels.addChannelButton')} onClick={onAddChannelClicked} />
       </SettingsBlock>
       <ChannelList />
     </div>

diff --git a/src/components/servers/settings/invites/ServerSettingsInvite.tsx b/src/components/servers/settings/invites/ServerSettingsInvite.tsx
@@ -18,8 +18,10 @@ import Input from '@/components/ui/input/Input';
 import { Notice } from '@/components/ui/Notice';
 import { css } from 'solid-styled-components';
 import Text from '@/components/ui/Text';
+import { useTransContext } from '@mbarzda/solid-i18next';
 
 export default function ServerSettingsInvite() {
+  const [t] = useTransContext();
   const params = useParams<{serverId: string}>();
   const {header, servers, account} = useStore();
   const windowProperties = useWindowProperties();
@@ -61,12 +63,12 @@ export default function ServerSettingsInvite() {
   return (
     <div class={classNames(styles.invitesPane, conditionalClass(mobileSize(), styles.mobile))}>
       <Show when={isServerOwner()}><CustomInvite invites={invites()} onUpdate={fetchInvites} /></Show>
-      <SettingsBlock label='Create a new invite' icon='add'>
-        <Button label='Create Invite' onClick={onCreateInviteClick} />
+      <SettingsBlock label={t('servers.settings.invites.createANewInvite')} icon='add'>
+        <Button label={t('servers.settings.invites.createInviteButton')} onClick={onCreateInviteClick} />
       </SettingsBlock>
 
 
-      <SettingsBlock label='Server Invites' description='Invite your friends to this server.' icon='mail' header={true} />
+      <SettingsBlock label={t('servers.settings.invites.serverInvites')} description={t('servers.settings.invites.serverInvitesDescription')} icon='mail' header={true} />
       <For each={invites()}>
         {(invite) => (
           <InviteItem invite={invite} />
@@ -79,6 +81,7 @@ export default function ServerSettingsInvite() {
 
 
 function CustomInvite(props: {invites: any[]; onUpdate: () => void;}) {
+  const [t] = useTransContext();
   const params = useParams<{serverId: string}>();
   const {servers} = useStore();
   const server = () => servers.get(params.serverId)
@@ -114,25 +117,26 @@ function CustomInvite(props: {invites: any[]; onUpdate: () => void;}) {
   return (
     <FlexColumn style={{ "margin-bottom": "20px" }}>
     <Show when={!server()?.verified}>
-      <Notice class={css`margin-bottom: 10px;`} type='info' description='Custom invite links are only available for verified servers.'/>
+      <Notice class={css`margin-bottom: 10px;`} type='info' description={t('servers.settings.invites.customInviteVerifiedOnlyNotice')}/>
     </Show>
 
-    <SettingsBlock class={css`&&{position: relative; overflow: hidden; ${!server()?.verified ? 'cursor: not-allowed; opacity: 0.6;' : ''} }`} label='Custom Link' icon='link'>
+    <SettingsBlock class={css`&&{position: relative; overflow: hidden; ${!server()?.verified ? 'cursor: not-allowed; opacity: 0.6;' : ''} }`} label={t('servers.settings.invites.customLink')} icon='link'>
       {/* Overlay to block actions when server is not verified. */}
       <Show when={!server()?.verified}>
         <div style={{ position: 'absolute', inset: 0, "z-index": 1111}} />
       </Show>
       <Input prefix={prefixUrl} onText={t => setCustomCode(t)} value={customCode()} />
     </SettingsBlock>
     <Show when={error()}><Text style={{"align-self": 'end'}} size={12} color="var(--alert-color)">{error()}</Text></Show>
-    <Show when={showCustomCodeSaveButton()} ><Button onClick={createInvite} class={css`align-self: self-end; margin-bottom: -8px;`} label='Save' iconName='save' /></Show>
+    <Show when={showCustomCodeSaveButton()} ><Button onClick={createInvite} class={css`align-self: self-end; margin-bottom: -8px;`} label={t('servers.settings.invites.saveButton')} iconName='save' /></Show>
   </FlexColumn>
   )
 }
 
 
 
 const InviteItem =(props: {invite: any}) => {
+  const [t] = useTransContext();
   const url = env.APP_URL + RouterEndpoints.EXPLORE_SERVER_INVITE_SHORT(props.invite.code);
 
   return (
@@ -150,8 +154,8 @@ const InviteItem =(props: {invite: any}) => {
             {formatTimestamp(props.invite.createdAt)}</div>
         </div>
         <FlexRow class={styles.buttons}>
-          <Button onClick={() => copyToClipboard(url)} class={classNames(styles.copyButton, styles.button)} label='Copy Link' iconName='copy' />
-          <Button class={classNames(styles.deleteButton, styles.button)} label='Delete' iconName='delete' color='var(--alert-color)' />
+          <Button onClick={() => copyToClipboard(url)} class={classNames(styles.copyButton, styles.button)} label={t('servers.settings.invites.copyLinkButton')} iconName='copy' />
+          <Button class={classNames(styles.deleteButton, styles.button)} label={t('servers.settings.invites.deleteButton')} iconName='delete' color='var(--alert-color)' />
         </FlexRow>
       </div>
     </div>

diff --git a/src/locales/list/en-gb.json b/src/locales/list/en-gb.json
@@ -106,6 +106,39 @@
       "header": {
         "editServer": "Edit Server",
         "serverMemberCount": "{{count}} members"
+      },
+      "channels": {
+        "addChannelButton": "Add Channel",
+        "addNewChannel": "Add a new channel"
+      },
+      "channel": {
+        "saving": "Saving...",
+        "saveChangesButton": "Save Changes",
+        "channelName": "Channel Name",
+        "permissions": "Permissions",
+        "permissionsDescription": "Manage permissions for this channel.",
+        "deleteThisChannel": "Delete this channel",
+        "deleteThisChannelDescription": "This cannot be undone!",
+        "deleteChannelButton": "Delete Channel"
+      },
+      "invites": {
+        "createANewInvite": "Create a new invite",
+        "createInviteButton": "Create Invite",
+        "serverInvites": "Server Invites",
+        "serverInvitesDescription": "Invite your friends to this server.",
+        "customInviteVerifiedOnlyNotice": "Custom invite links are only available for verified servers.",
+        "customLink": "Custom Link",
+        "saveButton": "Save",
+        "deleteButton": "Delete",
+        "copyLinkButton": "Copy Link"
+      },
+      "publishServer": {
+        "public": "Public",
+        "publicDescription": "Make this server public.",
+        "bumpServer": "Bump Server",
+        "bumpServerDescription": "Bump this server to get to the top.",
+        "publishServerButton": "Publish server",
+        "unpublishServerButton": "Unpublish server"
       }
     },
     "rolePermissions": {
@@ -121,6 +154,12 @@
       "kickDescription": "Permission to kick users",
       "ban": "Ban",
       "banDescription": "Permission to ban users."
+    },
+    "channelPermissions": {
+      "privateChannel": "Private Channel",
+      "privateChannelDescription": "Disable access to the channel. Server admins can still access the channel.",
+      "sendMessage": "Send Message",
+      "sendMessageDescription": "Enable sending messages in the channel. Server admins can still send messages."
     }
   },
   "settings": {