Merge pull request #1 from fernandopal/codespace-2102

Codespace 2102

src/components/common/messaging/bars/MessageOverlayBar.tsx

@@ -11,6 +11,7 @@ import { observer } from "mobx-react-lite";
 import { Message as MessageObject } from "revolt.js";
 import styled from "styled-components";
 
+import { Text } from "preact-i18n";
 import { openContextMenu } from "preact-context-menu";
 import { useEffect, useState } from "preact/hooks";
 
@@ -109,7 +110,7 @@ export const MessageOverlayBar = observer(
         return (
             <OverlayBar>
                 {message.channel?.havePermission("SendMessage") && (
-                    <Tooltip content="Reply">
+                    <Tooltip content={ <Text id="app.popover.message.reply" /> }>
                         <Entry
                             onClick={() =>
                                 internalEmit("ReplyBar", "add", message)
@@ -125,7 +126,7 @@ export const MessageOverlayBar = observer(
                             open={reactionsOpen}
                             setOpen={setReactionsOpen}
                             message={message}>
-                            <Tooltip content="React">
+                            <Tooltip content={ <Text id="app.popover.message.react" /> }>
                                 <Entry>
                                     <HappyBeaming size={18} />
                                 </Entry>
@@ -134,7 +135,7 @@ export const MessageOverlayBar = observer(
                     )}
 
                 {isAuthor && (
-                    <Tooltip content="Edit">
+                    <Tooltip content={ <Text id="app.popover.message.edit" /> }>
                         <Entry
                             onClick={() =>
                                 internalEmit(
@@ -150,7 +151,7 @@ export const MessageOverlayBar = observer(
                 {isAuthor ||
                 (message.channel &&
                     message.channel.havePermission("ManageMessages")) ? (
-                    <Tooltip content="Delete">
+                    <Tooltip content={ <Text id="app.popover.message.delete" /> }>
                         <Entry
                             onClick={(e) =>
                                 e.shiftKey
@@ -164,7 +165,7 @@ export const MessageOverlayBar = observer(
                         </Entry>
                     </Tooltip>
                 ) : undefined}
-                <Tooltip content="More">
+                <Tooltip content={ <Text id="app.popover.message.more" /> }>
                     <Entry
                         onClick={() =>
                             openContextMenu("Menu", {
@@ -179,7 +180,7 @@ export const MessageOverlayBar = observer(
                 {extraActions && (
                     <>
                         <Divider />
-                        <Tooltip content="Mark as Unread">
+                        <Tooltip content={ <Text id="app.popover.message.mark_unread" /> }>
                             <Entry
                                 onClick={() => {
                                     // ! FIXME: deduplicate this code with ctx menu
@@ -207,7 +208,7 @@ export const MessageOverlayBar = observer(
                         </Tooltip>
                         <Tooltip
                             content={
-                                copied === "link" ? "Copied!" : "Copy Link"
+                                <Text id={`app.popover.message.${copied === "link" ? 'copied' : 'copy_link'}`} />
                             }
                             hideOnClick={false}>
                             <Entry
@@ -219,7 +220,9 @@ export const MessageOverlayBar = observer(
                             </Entry>
                         </Tooltip>
                         <Tooltip
-                            content={copied === "id" ? "Copied!" : "Copy ID"}
+                            content={
+                                <Text id={`app.popover.message.${copied === "id" ? 'copied' : 'copy_id'}`} />
+                            }
                             hideOnClick={false}>
                             <Entry
                                 onClick={() => {

src/components/common/user/UserBadges.tsx

@@ -130,14 +130,14 @@ export default function UserBadges({ badges, uid }: Props) {
                     <></>
                 )}
                 {badges & Badges.ReservedRelevantJokeBadge1 ? (
-                    <Tooltip content="sus">
+                    <Tooltip content={ <Text id="app.popover.user_profile.badges.sus" /> }>
                         <img src="/assets/badges/amog.svg" />
                     </Tooltip>
                 ) : (
                     <></>
                 )}
                 {badges & Badges.ReservedRelevantJokeBadge2 ? (
-                    <Tooltip content="It's Morbin Time">
+                    <Tooltip content={ <Text id="app.popover.user_profile.badges.morbin_time" /> }>
                         <img src="/assets/badges/amorbus.svg" />
                     </Tooltip>
                 ) : (

src/components/markdown/plugins/Codeblock.tsx

@@ -2,6 +2,8 @@ import styled from "styled-components";
 
 import { useCallback, useRef } from "preact/hooks";
 
+import { Localizer, Text } from "preact-i18n";
+
 import { Tooltip } from "@revoltchat/ui";
 
 import { modalController } from "../../../controllers/modals/ModalController";
@@ -66,7 +68,7 @@ export const RenderCodeblock: React.FC<{ class: string }> = ({
     return (
         <Base ref={ref}>
             <Lang>
-                <Tooltip content="Copy to Clipboard" placement="top">
+                <Tooltip content={ <Text id="app.popover.misc.copy" /> } placement="top">
                     {/**
                     // @ts-expect-error Preact-React */}
                     <a onClick={onCopy}>{text}</a>

src/pages/channels/voice/VoiceHeader.tsx

@@ -141,20 +141,20 @@ export default observer(({ id }: Props) => {
                 )}
             </div>
             <div className="actions">
-                <Tooltip content={"Leave call"} placement={"top"}>
+                <Tooltip content={ <Text id="app.popover.voice.leave_call" /> } placement={"top"}>
                     <Button palette="error" onClick={voiceState.disconnect}>
                         <PhoneOff width={20} />
                     </Button>
                 </Tooltip>
                 {voiceState.isProducing("audio") ? (
-                    <Tooltip content={"Mute microphone"} placement={"top"}>
+                    <Tooltip content={ <Text id="app.popover.voice.mute_self" /> } placement={"top"}>
                         <Button
                             onClick={() => voiceState.stopProducing("audio")}>
                             <Microphone width={20} />
                         </Button>
                     </Tooltip>
                 ) : (
-                    <Tooltip content={"Unmute microphone"} placement={"top"}>
+                    <Tooltip content={ <Text id="app.popover.voice.unmute_self" /> } placement={"top"}>
                         <Button
                             onClick={() => voiceState.startProducing("audio")}>
                             <MicrophoneOff width={20} />
@@ -162,13 +162,13 @@ export default observer(({ id }: Props) => {
                     </Tooltip>
                 )}
                 {voiceState.isDeaf() ? (
-                    <Tooltip content={"Undeafen"} placement={"top"}>
+                    <Tooltip content={ <Text id="app.popover.voice.undeafen" /> } placement={"top"}>
                         <Button onClick={() => voiceState.stopDeafen()}>
                             <VolumeMute width={20} />
                         </Button>
                     </Tooltip>
                 ) : (
-                    <Tooltip content={"Deafen"} placement={"top"}>
+                    <Tooltip content={ <Text id="app.popover.voice.deafen" /> } placement={"top"}>
                         <Button onClick={() => voiceState.startDeafen()}>
                             <VolumeFull width={20} />
                         </Button>

src/pages/discover/Discover.tsx

@@ -21,7 +21,6 @@ const Container = styled.div`
     flex-grow: 1;
     display: flex;
     flex-direction: column;
-
     ${() =>
         isTouchscreenDevice
             ? css`
@@ -30,7 +29,6 @@ const Container = styled.div`
                   width: 100%;
                   height: 100%;
                   position: fixed;
-
                   padding-bottom: 50px;
                   background: var(--background);
               `
@@ -41,7 +39,6 @@ const Container = styled.div`
 
 const Frame = styled.iframe<{ loaded: boolean }>`
     border: none;
-
     ${() =>
         !isTouchscreenDevice &&
         css`
@@ -49,13 +46,11 @@ const Frame = styled.iframe<{ loaded: boolean }>`
             border-start-start-radius: 8px;
             border-end-start-radius: 8px;
         `}
-
     ${() =>
         isTouchscreenDevice &&
         css`
             padding-top: 56px;
         `}
-
     ${(props) =>
         props.loaded
             ? css`
@@ -68,7 +63,6 @@ const Frame = styled.iframe<{ loaded: boolean }>`
 
 const Loader = styled.div`
     flex-grow: 1;
-
     ${() =>
         !isTouchscreenDevice &&
         css`

src/pages/friends/Friends.tsx

@@ -78,7 +78,7 @@ export default observer(() => {
                         </IconButton>
                     </Tooltip>
                     <div className={styles.divider} />*/}
-                    <Tooltip content={"Create Group"} placement="bottom">
+                    <Tooltip content={ <Text id="app.popover.user_profile.friends.new_group" /> } placement="bottom">
                         <IconButton
                             onClick={() =>
                                 modalController.push({
@@ -88,7 +88,7 @@ export default observer(() => {
                             <MessageAdd size={24} />
                         </IconButton>
                     </Tooltip>
-                    <Tooltip content={"Add Friend"} placement="bottom">
+                    <Tooltip content={ <Text id="app.popover.user_profile.friends.add" /> } placement="bottom">
                         <IconButton
                             onClick={() =>
                                 modalController.push({

src/pages/home/Home.tsx

@@ -182,6 +182,7 @@ export default observer(() => {
                                 </CategoryButton>
                             </Link>
                         </div>
+                        {/* TODO: TRANSLATE */}
                         {isDecember && (
                             <a href="#" onClick={toggleSeasonalTheme}>
                                 Turn {seasonalTheme ? "off" : "on"} homescreen

src/pages/login/ConfirmDelete.tsx

@@ -2,6 +2,7 @@ import { Check } from "@styled-icons/boxicons-regular";
 import { useParams } from "react-router-dom";
 import styled from "styled-components";
 
+import { Text } from "preact-i18n";
 import { useEffect, useState } from "preact/hooks";
 
 import { Modal, Preloader } from "@revoltchat/ui";
@@ -24,20 +25,24 @@ export default function ConfirmDelete() {
 
     return (
         <Modal
-            title={deleted ? "Confirmed deletion." : "Please wait..."}
+            title={
+                <Text id={`${ 
+                    deleted
+                        ? 'app.special.modals.account.delete.confirmation'
+                        : 'generic.please_wait'
+                }`} />
+            }
             description={
                 deleted ? (
                     <>
-                        Your account will be deleted in 7 days.
+                        <Text id="app.special.modals.account.delete.long.a" />{" "}
-                        <br />
-                        You may contact{" "}
                         <a href="mailto:contact@revolt.chat">
-                            Revolt support
+                            <Text id="app.special.modals.account.delete.long.b" />
                         </a>{" "}
-                        to cancel the request if you wish.
+                        <Text id="app.special.modals.account.delete.long.c" />
                     </>
                 ) : (
-                    "Contacting the server."
+                    <Text id="generic.contacting_server" />
                 )
             }
             nonDismissable>

src/pages/login/forms/CaptchaBlock.tsx

@@ -28,7 +28,7 @@ export const CaptchaBlock = observer((props: CaptchaProps) => {
 
     return (
         <div className={styles.captcha}>
-            <div className={styles.title}>Are you human?</div>
+            <div className={styles.title}><Text id="login.captcha_title" /></div>
             <div className={styles.checkbox}>
                 <HCaptcha
                     theme="dark"

src/pages/settings/panes/MyBots.tsx

@@ -56,7 +56,6 @@ const BotBadge = styled.div`
     user-select: none;
     margin-inline-start: 2px;
     text-transform: uppercase;
-
     color: var(--accent-contrast);
     background: var(--accent);
     border-radius: calc(var(--border-radius) / 2);