фикс блюра

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

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

src/redux/slices/missions.ts

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

src/views/home/missions/ModalCreate.tsx

@@ -12,6 +12,7 @@ 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;
@@ -19,23 +20,37 @@ interface ModalCreateProps {
 }
 
 const ModalCreate: FC<ModalCreateProps> = ({ active, setActive }) => {
-    const [name, setName] = useState<string>('');
+    type TagsMode = 'fromArchive' | 'none' | 'custom';
     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 addTag = () => {
-        const newTag = tagInput.trim();
-        if (newTag && !tags.includes(newTag)) {
-            setTags([...tags, newTag]);
-            setTagInput('');
+    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 removeTag = (tagToRemove: string) => {
@@ -51,16 +66,27 @@ const ModalCreate: FC<ModalCreateProps> = ({ active, setActive }) => {
     const handleSubmit = async () => {
         setClickSubmit(true);
         if (!file) return;
-        dispatch(uploadMission({ file, name, difficulty, tags }));
+
+        const payloadTags =
+            tagsMode === 'custom' ? normalizeTags(tags) : undefined;
+
+        dispatch(
+            uploadMission({
+                missionFile: file,
+                difficulty,
+                tags: payloadTags,
+            }),
+        );
     };
 
     useEffect(() => {
         if (status === 'successful') {
             toastSuccess('Миссия создана!');
-            setName('');
             setDifficulty(1);
             setTags([]);
             setFile(null);
+            setTagInput('');
+            setTagsMode('fromArchive');
             dispatch(setMissionsStatus({ key: 'upload', status: 'idle' }));
             setActive(false);
         }
@@ -73,12 +99,32 @@ const ModalCreate: FC<ModalCreateProps> = ({ active, setActive }) => {
         dispatch(setMissionsStatus({ key: 'upload', status: 'idle' }));
     }, [active]);
 
-    const getNameErrorMessage = (): string => {
+    const getDifficultyErrorMessage = (): string => {
         if (!clickSubmit) return '';
-        if (name == '') return 'Поле не может быть пустым';
+        if (!Number.isFinite(difficulty) || difficulty < 1)
+            return 'Укажите сложность (минимум 1)';
         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"
@@ -89,18 +135,6 @@ 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]"
@@ -110,6 +144,7 @@ const ModalCreate: FC<ModalCreateProps> = ({ active, setActive }) => {
                     maxValue={3500}
                     onChange={(v) => setDifficulty(v)}
                     placeholder="1"
+                    error={getDifficultyErrorMessage()}
                 />
 
                 <div className="mt-4">
@@ -137,16 +172,38 @@ 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);
+                            }}
+                            weight="w-full"
+                        />
+                        {tagsMode === 'none' && (
+                            <div className="text-liquid-red text-[14px] mt-[8px] whitespace-pre-line">
+                                Пустой список тегов сейчас не поддерживается в multipart.
+                                Будет использован режим “из архива”.
+                            </div>
+                        )}
+                    </div>
+
+                    {tagsMode === 'custom' && (
+                        <>
                             <div className="grid grid-cols-[1fr,140px] items-end gap-2">
                                 <Input
-                            name="articleTag"
-                            autocomplete="articleTag"
+                                    name="missionTags"
+                                    autocomplete="missionTags"
                                     className="mt-[20px] max-w-[600px]"
                                     type="text"
-                            label="Теги"
+                                    label="Теги (через запятую)"
                                     onChange={(v) => setTagInput(v)}
                                     defaultState={tagInput}
-                            placeholder="arrays"
+                                    placeholder="arrays, dp"
                                     onKeyDown={(e) => {
                                         if (e.key === 'Enter') addTag();
                                     }}
@@ -173,6 +230,8 @@ const ModalCreate: FC<ModalCreateProps> = ({ active, setActive }) => {
                                     </div>
                                 ))}
                             </div>
+                        </>
+                    )}
                 </div>
 
                 <div>