Merge branch 'main' into refactor/separate-sidebar-from-main

.github/workflows/DownloadCrowdinTranslations.yml

@@ -0,0 +1,57 @@
+name: Download Crowdin translations
+
+on:
+  workflow_dispatch:
+  # pull_request:
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  pre_translate:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Compile intl TypeScript files
+        run: npx -p typescript tsc --project src/intl/intl.tsconfig.json
+
+      - name: Get Supported Locales
+        id: get_locales
+        run: |
+          supportedLocales=$(node src/intl/dist/scripts/getSupportedLocales.js)
+          echo "supportedLocales=$supportedLocales" >> $GITHUB_ENV
+      - name: Pre-translate
+        uses: crowdin/github-action@v2
+        with:
+          command: 'pre-translate'
+          command_args: '--method mt ${{ env.supportedLocales }} --file cbuilder/src/intl/cbuilder.json --engine-id ${{ vars.CROWDIN_MT_ID }} --verbose'
+        env:
+          CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}
+          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}
+
+  create_pr:
+    runs-on: ubuntu-latest
+    needs: pre_translate
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Synchronize with Crowdin
+        uses: crowdin/github-action@v2
+        with:
+          upload_sources: false
+          upload_translations: false
+          download_translations: true
+          localization_branch_name: l10n_crowdin_translations
+
+          create_pull_request: true
+          pull_request_title: 'New Crowdin translations'
+          pull_request_body: 'New Crowdin pull request with translations'
+          pull_request_base_branch_name: 'main'
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}
+          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}

.github/workflows/UploadSourceFileToCrowdin.yml

@@ -0,0 +1,25 @@
+name: Upload source file to Crowdin
+
+on:
+  push:
+    paths: ['src/intl/cbuilder.json']
+    branches: [main]
+  pull_request:
+  workflow_dispatch:
+
+jobs:
+  crowdin-upload-sources:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Crowdin push
+        uses: crowdin/github-action@v2
+        with:
+          upload_sources: true
+          upload_translations: false
+          download_translations: false
+        env:
+          CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}
+          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}

.gitignore

@@ -15,6 +15,7 @@
 
 # production
 /build
+/src/intl/dist
 
 # misc
 .DS_Store

crowdin.yml

@@ -0,0 +1,16 @@
+'project_id_env': 'CROWDIN_PROJECT_ID'
+'api_token_env': 'CROWDIN_PERSONAL_TOKEN'
+'base_path': './src/intl'
+'base_url': 'https://api.crowdin.com'
+
+'preserve_hierarchy': true
+
+files:
+  [
+    {
+      'source': '/cbuilder.json',
+      'translation': '/dictionaries/%locale%.json',
+      'dest': '/cbuilder/src/intl/cbuilder.json',
+      'type': 'json',
+    },
+  ]

src/app/[locale]/dashboard/[id]/@board/InitialContent.tsx

@@ -10,6 +10,7 @@ import { useShallow } from 'zustand/react/shallow';
 import { useEffect } from 'react';
 import SvgIcon from '@mui/material/SvgIcon';
 import Brand from '@/components/icons/Brand';
+
 const promptExampleMessagesKey = [
   {
     description: 'promptExample1',
@@ -52,7 +53,7 @@ const PromptExamplesTextField = ({
         // id="prompt-text"
         // name="prompt-text"
         multiline
-        rows={4}
+        rows={1}
         aria-readonly
         value={promptValues.description}
         InputProps={{
@@ -64,6 +65,7 @@ const PromptExamplesTextField = ({
             backgroundColor: 'white',
             border: 'none',
             fontSize: '15px',
+            textAlignLast: 'center',
           },
         }}
         sx={styles.textArea}

src/app/[locale]/dashboard/[id]/@board/Toolbar.tsx

@@ -21,6 +21,7 @@ import { useTheme } from '@mui/material';
 // import EditingToolbar from './EditingToolbar';
 import styles from './styles';
 import { cboardExportAdapter } from '@/lib/exportHelpers/cboardExportAdapter';
+import Settings from '@/components/Settings/Settings';
 
 type Props = {
   isEditing: boolean;
@@ -144,6 +145,7 @@ const DefaultToolbar = () => {
       <IconButton>
         <PrintIcon fontSize="small" />
       </IconButton>
+      <Settings />
       <Divider orientation="vertical" flexItem />
     </>
   );

src/app/[locale]/dashboard/[id]/@board/page.tsx

@@ -25,7 +25,7 @@ export default async function Page({
   }
 
   return (
-    <IntlWrapperForAsync propertyName="Board">
+    <IntlWrapperForAsync propertyName={['Board', 'Settings']}>
       <BoardDisplayed remoteInitialBoard={board} id={id} />
     </IntlWrapperForAsync>
   );

src/app/[locale]/signin/constants.ts

@@ -1,3 +1,4 @@
 export const PURPLE = '#D6B2FF';
 export const BRAND_COLOR = '#363636';
 export const DEFAULT_CALLBACK_URL = '/dashboard/create';
+export const SIGNIN_PATH = '/signin';

src/app/api/mymidjourney/message/[messageId]/route.ts

@@ -10,8 +10,6 @@ export async function GET(
   myHeaders.append('Content-Type', 'application/json');
   myHeaders.append('Authorization', 'Bearer ' + process.env.MYMIDJOURNEY_TOKEN);
 
-  let imgDone: boolean = false;
-  let tries: number = 0;
   type Message = {
     status: string;
     uri: string;
@@ -24,30 +22,18 @@ export async function GET(
     progress: 0,
     messageId: '',
   };
-  function delay(ms: number) {
-    return new Promise((resolve) => setTimeout(resolve, ms));
+  try {
+    const response = await fetch(midjBaseUrl + 'message/' + messageId, {
+      method: 'GET',
+      headers: myHeaders,
+      redirect: 'follow',
+      cache: 'no-store',
+    });
+    const data = await response.json();
+    messageResponse = data;
+  } catch (error) {
+    console.error('Error messaging AI image');
+    return new Response('Error messaging AI image', { status: 500 });
   }
-
-  do {
-    await delay(2000);
-    try {
-      const response = await fetch(midjBaseUrl + 'message/' + messageId, {
-        method: 'GET',
-        headers: myHeaders,
-        redirect: 'follow',
-        cache: 'no-store',
-      });
-      const data = await response.json();
-      messageResponse = data;
-      tries++;
-      if (messageResponse.status === 'DONE') {
-        imgDone = true;
-      }
-    } catch (error) {
-      imgDone = true;
-      console.error('Error messaging AI image');
-      return new Response('Error messaging AI image', { status: 500 });
-    }
-  } while (imgDone === false && tries < 40);
   return Response.json(messageResponse);
 }

src/components/IntlWrapperForAsync/IntlWrapperForAsync.tsx

@@ -6,7 +6,7 @@ export default function IntlWrapperForAsync({
   propertyName,
 }: {
   children: React.ReactNode;
-  propertyName: string;
+  propertyName: string | string[];
 }) {
   const messages = useMessages();
   return (

src/components/Modal/Modal.tsx

@@ -0,0 +1,52 @@
+'use client';
+import React from 'react';
+import Dialog from '@mui/material/Dialog';
+import { useMediaQuery } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import styles from './styles';
+import { TransitionProps } from '@mui/material/transitions';
+import Slide from '@mui/material/Slide';
+
+const Transition = React.forwardRef(function Transition(
+  props: TransitionProps & {
+    children: React.ReactElement;
+  },
+  ref: React.Ref<unknown>,
+) {
+  return <Slide direction="up" ref={ref} {...props} />;
+});
+
+export default function Modal({
+  onClose,
+  open,
+  children,
+}: {
+  onClose: () => void;
+  open: boolean;
+  children: React.ReactNode;
+}) {
+  const theme = useTheme();
+  const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
+
+  return (
+    <>
+      <Dialog
+        fullScreen={fullScreen}
+        maxWidth="sm"
+        open={open}
+        onClose={onClose}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+        aria-modal="true"
+        sx={{
+          '& .MuiDialog-paper': {
+            ...(fullScreen ? styles.dialogPaperFullScreen : styles.dialogPaper),
+          },
+        }}
+        TransitionComponent={Transition}
+      >
+        {children}
+      </Dialog>
+    </>
+  );
+}

src/components/Modal/styles.ts

@@ -0,0 +1,19 @@
+import { SxProps } from '@mui/system/styleFunctionSx/styleFunctionSx';
+
+export default {
+  dialogPaperFullScreen: {
+    margin: 0,
+    maxHeight: '100%',
+    height: '100%',
+    width: '100%',
+    maxWidth: '100%',
+  },
+  dialogPaper: {
+    width: '90%',
+    maxWidth: '550px',
+    height: '85%',
+    maxHeight: '90%',
+    display: 'flex',
+    flexDirection: 'column',
+  },
+} satisfies Record<string, SxProps>;

src/components/Settings/AppSection.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import List from '@mui/material/List';
+import ListSubheader from '@mui/material/ListSubheader';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import FormControl from '@mui/material/FormControl';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import LanguageIcon from '@mui/icons-material/Language';
+import { useLocale, useTranslations } from 'next-intl';
+import { styles } from './styles';
+import { supportedLocales } from '@/intl/intl.constants';
+import { startTransition } from 'react';
+import { useRouter, usePathname } from '@/navigation';
+
+export default function AppSection() {
+  const router = useRouter();
+  const pathname = usePathname();
+  const messages = useTranslations('Settings');
+  const locale = useLocale();
+
+  const handleOnChange = (event: SelectChangeEvent<string>) => {
+    const nextLocale = event.target.value;
+
+    startTransition(() => {
+      router.replace(pathname, { locale: nextLocale });
+    });
+  };
+
+  return (
+    <List
+      subheader={
+        <ListSubheader component="div" id="nested-list-subheader">
+          {messages('application')}
+        </ListSubheader>
+      }
+    >
+      <ListItem
+        secondaryAction={
+          <FormControl sx={styles.formControl} size="small">
+            <Select
+              labelId="demo-simple-select-filled-label"
+              id="demo-simple-select-filled"
+              value={locale}
+              onChange={handleOnChange}
+            >
+              {supportedLocales.map((locale) => (
+                <MenuItem key={locale} value={locale}>
+                  {locale.slice(0, 2).toUpperCase()}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        }
+        disablePadding
+      >
+        <ListItemButton>
+          <ListItemIcon>
+            <LanguageIcon />
+          </ListItemIcon>
+          <ListItemText id={'labelId'} primary={messages('language')} />
+        </ListItemButton>
+      </ListItem>
+    </List>
+  );
+}