Merge remote-tracking branch 'origin/dev'

Reviewed-on: #1

.gitea/workflows/build-and-push.yaml

@@ -0,0 +1,35 @@
+name: Build and Push Docker Image
+
+on:
+  push:
+    branches: [ main ]
+
+env:
+  REGISTRY: git.nullptr.top
+  IMAGE_NAME: git.nullptr.top/liquidcode/liquidcode-frontend
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Log in to Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: liquidcode-ci-service 
+          password: ${{ secrets.SERVICE_ACCOUNT_TOKEN }}
+
+      - name: Build and Push Docker image
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          push: true
+          tags: ${{ env.IMAGE_NAME }}:latest,${{ env.IMAGE_NAME }}:${{ gitea.sha }}
+          cache-from: type=registry,ref=${{ env.IMAGE_NAME }}:buildcache
+          cache-to: type=registry,ref=${{ env.IMAGE_NAME }}:buildcache,mode=max

Dockerfile

@@ -0,0 +1,29 @@
+# Build stage
+FROM node:20-alpine AS build
+WORKDIR /app
+
+# Copy package files
+COPY package.json package-lock.json ./
+
+# Install dependencies
+RUN npm ci
+
+# Copy source code
+COPY . .
+
+# Build the application
+RUN npm run build
+
+# Production stage
+FROM node:20-alpine AS runtime
+WORKDIR /app
+
+# Install a simple HTTP server to serve static files
+RUN npm install -g serve
+
+# Copy built application from build stage
+COPY --from=build /app/dist ./dist
+
+EXPOSE 3000
+
+CMD ["serve", "-s", "dist", "-l", "3000"]

src/api/missionsUpload.ts

@@ -1,39 +0,0 @@
-export interface UploadMissionRequest {
-    missionFile: File;
-    difficulty: number;
-    tags?: string[] | null;
-}
-
-export const buildUploadMissionFormData = (
-    request: UploadMissionRequest,
-): FormData => {
-    const formData = new FormData();
-
-    formData.append('missionFile', request.missionFile);
-    formData.append('difficulty', request.difficulty.toString());
-
-    // tags:
-    // - undefined => fromArchive (do not include tags key at all)
-    // - [] => empty list (not reliably representable via multipart without backend support)
-    // - [..] => custom tags, repeated keys
-    if (Array.isArray(request.tags)) {
-        request.tags.forEach((tag) => formData.append('tags', tag));
-    }
-
-    return formData;
-};
-
-export const getProblemXmlMissingNameMessage = (responseData: unknown) => {
-    const asText =
-        typeof responseData === 'string'
-            ? responseData
-            : responseData == null
-              ? ''
-              : JSON.stringify(responseData);
-
-    if (/problem\.xml/i.test(asText) || /Mission name was not found/i.test(asText)) {
-        return 'В архиве отсутствует имя в problem.xml';
-    }
-
-    return null;
-};

src/components/modal/Modal.tsx

@@ -15,8 +15,8 @@ interface ModalProps {
 }
 
 const modalbgVariants = {
-    closed: { opacity: 0, backdropFilter: 'blur(0px)' },
-    open: { opacity: 1, backdropFilter: 'blur(6px)' },
+    closed: { opacity: 0 },
+    open: { opacity: 1 },
 };
 
 const modalVariants = {
@@ -47,15 +47,13 @@ export const Modal: React.FC<ModalProps> = ({
                         exit={modalbgVariants.closed}
                         transition={{ duration: 0.15 }}
                         className={cn(
-                            'fixed top-0 left-0 h-svh w-svw z-50',
-                            backdrop === 'opaque' && 'bg-[#00000055]',
+                            ' fixed top-0 left-0 h-svh w-svw backdrop-filter transition-[background-color,backdrop-filter,opacity]  z-50',
+                            backdrop == 'blur' && open && 'backdrop-blur-sm',
+                            backdrop == 'opaque' &&
+                                open &&
+                                'bg-[#00000055] pointer-events-none',
                         )}
-                        style={
-                            backdrop === 'blur'
-                                ? undefined
-                                : { backdropFilter: 'none' }
-                        }
-                    />
+                    ></motion.div>
                 )}
             </AnimatePresence>
             <div className="fixed top-0 left-0 h-svh w-svw flex items-center justify-center pointer-events-none  z-50">

src/pages/Article.tsx

@@ -50,7 +50,7 @@ const Article = () => {
                                 #{article.id}
                             </div>
                         </div>
-                        {
+                        {article.tags.length && (
                             <div className="flex gap-[10px]">
                                 {article.tags.map((v, i) => (
                                     <div
@@ -61,7 +61,7 @@ const Article = () => {
                                     </div>
                                 ))}
                             </div>
-                        }
+                        )}
                         <MarkdownPreview
                             content={article!.content}
                             className="bg-transparent"

src/redux/slices/missions.ts

@@ -1,11 +1,6 @@
 import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
 import axios from '../../axios';
 import { toastError } from '../../lib/toastNotification';
-import {
-    buildUploadMissionFormData,
-    getProblemXmlMissingNameMessage,
-    UploadMissionRequest,
-} from '../../api/missionsUpload';
 
 // ─── Типы ────────────────────────────────────────────
 
@@ -153,45 +148,27 @@ export const fetchMyMissions = createAsyncThunk(
 export const uploadMission = createAsyncThunk(
     'missions/uploadMission',
     async (
-        request: UploadMissionRequest,
+        {
+            file,
+            name,
+            difficulty,
+            tags,
+        }: { file: File; name: string; difficulty: number; tags: string[] },
         { rejectWithValue },
     ) => {
         try {
-            const formData = buildUploadMissionFormData(request);
+            const formData = new FormData();
+            formData.append('MissionFile', file);
+            formData.append('Name', name);
+            formData.append('Difficulty', difficulty.toString());
+            tags.forEach((tag) => formData.append('Tags', tag));
 
             const response = await axios.post('/missions/upload', formData, {
                 headers: { 'Content-Type': 'multipart/form-data' },
             });
             return response.data; // Mission
         } catch (err: any) {
-            const status = err?.response?.status;
-            const responseData = err?.response?.data;
-
-            if (status === 400) {
-                const msg = getProblemXmlMissingNameMessage(responseData);
-                if (msg) {
-                    return rejectWithValue({
-                        errors: {
-                            missionFile: [msg],
-                        },
-                    });
-                }
-            }
-
-            if (responseData?.errors) {
-                return rejectWithValue(responseData);
-            }
-
-            const fallback =
-                typeof responseData === 'string'
-                    ? responseData
-                    : 'Не удалось загрузить миссию';
-
-            return rejectWithValue({
-                errors: {
-                    general: [fallback],
-                },
-            });
+            return rejectWithValue(err.response?.data);
         }
     },
 );
@@ -374,19 +351,17 @@ const missionsSlice = createSlice({
             (state, action: PayloadAction<any>) => {
                 state.statuses.upload = 'failed';
 
-                const errors = action.payload?.errors as
-                    | Record<string, string[]>
-                    | undefined;
-                if (errors) {
-                    Object.values(errors).forEach((messages) => {
-                        messages.forEach((msg) => {
-                            toastError(msg);
-                        });
+                const errors = action.payload.errors as Record<
+                    string,
+                    string[]
+                >;
+                Object.values(errors).forEach((messages) => {
+                    messages.forEach((msg) => {
+                        toastError(msg);
                     });
-                    state.create.errors = errors;
-                } else {
-                    toastError('Не удалось загрузить миссию');
-                }
+                });
+
+                state.create.errors = errors;
             },
         );
 

src/views/home/missions/ModalCreate.tsx

@@ -12,7 +12,6 @@ import { toastSuccess } from '../../../lib/toastNotification';
 import { cn } from '../../../lib/cn';
 import { Link } from 'react-router-dom';
 import { NumberInput } from '../../../components/input/NumberInput';
-import { DropDownList, DropDownListItem } from '../../../components/input/DropDownList';
 
 interface ModalCreateProps {
     active: boolean;
@@ -20,37 +19,23 @@ interface ModalCreateProps {
 }
 
 const ModalCreate: FC<ModalCreateProps> = ({ active, setActive }) => {
-    type TagsMode = 'fromArchive' | 'none' | 'custom';
+    const [name, setName] = useState<string>('');
     const [difficulty, setDifficulty] = useState<number>(1);
     const [file, setFile] = useState<File | null>(null);
     const [tagInput, setTagInput] = useState<string>('');
     const [tags, setTags] = useState<string[]>([]);
-    const [tagsMode, setTagsMode] = useState<TagsMode>('fromArchive');
 
     const status = useAppSelector((state) => state.missions.statuses.upload);
     const dispatch = useAppDispatch();
 
     const [clickSubmit, setClickSubmit] = useState<boolean>(false);
 
-    const normalizeTags = (raw: string[]): string[] => {
-        const result: string[] = [];
-        const seen = new Set<string>();
-        for (const t of raw) {
-            const trimmed = t.trim();
-            if (!trimmed) continue;
-            const key = trimmed.toLowerCase();
-            if (seen.has(key)) continue;
-            seen.add(key);
-            result.push(trimmed);
-        }
-        return result;
-    };
-
     const addTag = () => {
-        const parts = tagInput.split(',').map((v) => v.trim());
-        const next = normalizeTags([...tags, ...parts]);
-        setTags(next);
-        setTagInput('');
+        const newTag = tagInput.trim();
+        if (newTag && !tags.includes(newTag)) {
+            setTags([...tags, newTag]);
+            setTagInput('');
+        }
     };
 
     const removeTag = (tagToRemove: string) => {
@@ -66,27 +51,16 @@ const ModalCreate: FC<ModalCreateProps> = ({ active, setActive }) => {
     const handleSubmit = async () => {
         setClickSubmit(true);
         if (!file) return;
-
-        const payloadTags =
-            tagsMode === 'custom' ? normalizeTags(tags) : undefined;
-
-        dispatch(
-            uploadMission({
-                missionFile: file,
-                difficulty,
-                tags: payloadTags,
-            }),
-        );
+        dispatch(uploadMission({ file, name, difficulty, tags }));
     };
 
     useEffect(() => {
         if (status === 'successful') {
             toastSuccess('Миссия создана!');
+            setName('');
             setDifficulty(1);
             setTags([]);
             setFile(null);
-            setTagInput('');
-            setTagsMode('fromArchive');
             dispatch(setMissionsStatus({ key: 'upload', status: 'idle' }));
             setActive(false);
         }
@@ -99,32 +73,12 @@ const ModalCreate: FC<ModalCreateProps> = ({ active, setActive }) => {
         dispatch(setMissionsStatus({ key: 'upload', status: 'idle' }));
     }, [active]);
 
-    const getDifficultyErrorMessage = (): string => {
+    const getNameErrorMessage = (): string => {
         if (!clickSubmit) return '';
-        if (!Number.isFinite(difficulty) || difficulty < 1)
-            return 'Укажите сложность (минимум 1)';
+        if (name == '') return 'Поле не может быть пустым';
         return '';
     };
 
-    const tagsModeItems: DropDownListItem[] = [
-        { text: 'Теги: из архива', value: 'fromArchive' },
-        { text: 'Теги: без тегов', value: 'none' },
-        { text: 'Теги: свои', value: 'custom' },
-    ];
-
-    const isTagsMode = (v: string): v is TagsMode =>
-        v === 'fromArchive' || v === 'none' || v === 'custom';
-
-    const currentTagsModeItem =
-        tagsModeItems.find((i) => i.value === tagsMode) ?? tagsModeItems[0];
-
-    useEffect(() => {
-        if (tagsMode === 'none') {
-            setTags([]);
-            setTagInput('');
-        }
-    }, [tagsMode]);
-
     return (
         <Modal
             className="bg-liquid-background border-liquid-lighter border-[2px] p-[25px] rounded-[20px] text-liquid-white"
@@ -135,6 +89,18 @@ const ModalCreate: FC<ModalCreateProps> = ({ active, setActive }) => {
             <div className="w-[500px]">
                 <div className="font-bold text-[30px]">Добавить задачу</div>
 
+                <Input
+                    name="name"
+                    autocomplete="name"
+                    className="mt-[10px]"
+                    type="text"
+                    label="Название"
+                    defaultState={name}
+                    onChange={setName}
+                    placeholder="В яблочко"
+                    error={getNameErrorMessage()}
+                />
+
                 <NumberInput
                     name="difficulty"
                     className="mt-[10px]"
@@ -144,7 +110,6 @@ const ModalCreate: FC<ModalCreateProps> = ({ active, setActive }) => {
                     maxValue={3500}
                     onChange={(v) => setDifficulty(v)}
                     placeholder="1"
-                    error={getDifficultyErrorMessage()}
                 />
 
                 <div className="mt-4">
@@ -172,66 +137,42 @@ const ModalCreate: FC<ModalCreateProps> = ({ active, setActive }) => {
 
                 {/* Теги */}
                 <div className="mb-[50px] max-w-[600px]">
-                    <div className="mt-[20px]">
-                        <div className="text-[18px] text-liquid-white font-medium h-[23px] mb-[10px]">
-                            Режим тегов
-                        </div>
-                        <DropDownList
-                            items={tagsModeItems}
-                            defaultState={currentTagsModeItem}
-                            onChange={(v) => {
-                                if (isTagsMode(v)) setTagsMode(v);
+                    <div className="grid grid-cols-[1fr,140px] items-end gap-2">
+                        <Input
+                            name="articleTag"
+                            autocomplete="articleTag"
+                            className="mt-[20px] max-w-[600px]"
+                            type="text"
+                            label="Теги"
+                            onChange={(v) => setTagInput(v)}
+                            defaultState={tagInput}
+                            placeholder="arrays"
+                            onKeyDown={(e) => {
+                                if (e.key === 'Enter') addTag();
                             }}
-                            weight="w-full"
                         />
-                        {tagsMode === 'none' && (
-                            <div className="text-liquid-red text-[14px] mt-[8px] whitespace-pre-line">
-                                Пустой список тегов сейчас не поддерживается в multipart.
-                                Будет использован режим “из архива”.
-                            </div>
-                        )}
+                        <PrimaryButton
+                            onClick={addTag}
+                            text="Добавить"
+                            className="h-[40px] w-[140px]"
+                        />
                     </div>
-
-                    {tagsMode === 'custom' && (
-                        <>
-                            <div className="grid grid-cols-[1fr,140px] items-end gap-2">
-                                <Input
-                                    name="missionTags"
-                                    autocomplete="missionTags"
-                                    className="mt-[20px] max-w-[600px]"
-                                    type="text"
-                                    label="Теги (через запятую)"
-                                    onChange={(v) => setTagInput(v)}
-                                    defaultState={tagInput}
-                                    placeholder="arrays, dp"
-                                    onKeyDown={(e) => {
-                                        if (e.key === 'Enter') addTag();
-                                    }}
-                                />
-                                <PrimaryButton
-                                    onClick={addTag}
-                                    text="Добавить"
-                                    className="h-[40px] w-[140px]"
-                                />
+                    <div className="flex flex-wrap gap-[10px] mt-2">
+                        {tags.map((tag) => (
+                            <div
+                                key={tag}
+                                className="flex items-center gap-1 bg-liquid-lighter px-3 py-1 rounded-full"
+                            >
+                                <span>{tag}</span>
+                                <button
+                                    onClick={() => removeTag(tag)}
+                                    className="text-liquid-red font-bold ml-[5px]"
+                                >
+                                    ×
+                                </button>
                             </div>
-                            <div className="flex flex-wrap gap-[10px] mt-2">
-                                {tags.map((tag) => (
-                                    <div
-                                        key={tag}
-                                        className="flex items-center gap-1 bg-liquid-lighter px-3 py-1 rounded-full"
-                                    >
-                                        <span>{tag}</span>
-                                        <button
-                                            onClick={() => removeTag(tag)}
-                                            className="text-liquid-red font-bold ml-[5px]"
-                                        >
-                                            ×
-                                        </button>
-                                    </div>
-                                ))}
-                            </div>
-                        </>
-                    )}
+                        ))}
+                    </div>
                 </div>
 
                 <div>

src/views/mission/codeeditor/CodeEditor.tsx

@@ -3,7 +3,6 @@ import Editor from '@monaco-editor/react';
 import { upload } from '../../../assets/icons/input';
 import { cn } from '../../../lib/cn';
 import { DropDownList } from '../../../components/input/DropDownList';
-import { useParams } from 'react-router-dom';
 
 const languageMap: Record<string, string> = {
     c: 'cpp',
@@ -24,21 +23,19 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
     onChange,
     onChangeLanguage,
 }) => {
-    const { missionId } = useParams<{ missionId: string }>();
-
+    const [language, setLanguage] = useState<string>('C++');
     const [code, setCode] = useState<string>('');
     const [isDragging, setIsDragging] = useState<boolean>(false);
 
     const items = [
+        { value: 'c', text: 'C' },
         { value: 'C++', text: 'C++' },
         { value: 'java', text: 'Java' },
         { value: 'python', text: 'Python' },
+        { value: 'pascal', text: 'Pascal' },
         { value: 'kotlin', text: 'Kotlin' },
         { value: 'csharp', text: 'C#' },
     ];
-    const [language, setLanguage] = useState<string>('C++');
-
-    const getCodeKey = (missionId?: string) => `mission_${missionId}_code`;
 
     useEffect(() => {
         onChange(code);
@@ -47,24 +44,6 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
         onChangeLanguage(language);
     }, [language]);
 
-    useEffect(() => {
-        if (!missionId || !code) return;
-
-        localStorage.setItem(getCodeKey(missionId), code);
-    }, [code, missionId]);
-
-    useEffect(() => {
-        if (!missionId) return;
-
-        const savedCode = localStorage.getItem(getCodeKey(missionId));
-
-        if (savedCode !== null) {
-            setCode(savedCode);
-        } else {
-            setCode('');
-        }
-    }, [missionId]);
-
     const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
         const file = e.target.files?.[0];
         if (!file) return;
@@ -116,6 +95,7 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
                         onChange={(v) => {
                             setLanguage(v);
                         }}
+                        defaultState={{ value: 'C++', text: 'C++' }}
                     />
 
                     <label

src/views/mission/statement/LaTextContainer.tsx

@@ -78,7 +78,7 @@ const replaceImages = (
     const doc = parser.parseFromString(html, 'text/html');
 
     const latexImageNames = Array.from(
-        latex.matchAll(/\\includegraphics(?:\[[^\]]*\])?\{(.+?)\}/g),
+        latex.matchAll(/\\includegraphics\{(.+?)\}/g),
     ).map((match) => match[1]);
 
     const imgs = doc.querySelectorAll<HTMLImageElement>('img.tex-graphics');

src/views/mission/statement/Statement.tsx

@@ -5,7 +5,6 @@ import { CopyIcon } from '../../../assets/icons/missions';
 // import FullLatexRenderer from "./FullLatexRenderer";
 
 import { useState } from 'react';
-import { toastSuccess } from '../../../lib/toastNotification';
 
 interface CopyableDivPropd {
     content: string;
@@ -17,7 +16,7 @@ const CopyableDiv: FC<CopyableDivPropd> = ({ content }) => {
     const handleCopy = async () => {
         try {
             await navigator.clipboard.writeText(content);
-            toastSuccess('Скопировано!');
+            alert('Скопировано!');
         } catch (err) {}
     };