[fix] add visible checkbox

src/app/(withHeader)/script/create/page.module.css

@@ -77,8 +77,88 @@
   padding: 1rem 2rem;
 }
 
-@media (width < 610px) {
-  .flex {
-    flex-wrap: wrap;
-  }
+.checkboxLabel {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  cursor: pointer;
+  padding: 1rem 1.25rem;
+  border-radius: 0.75rem;
+  border: 1px solid var(--color-gray-border);
+  background-color: var(--color-white-main);
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.checkboxLabel:hover {
+  border-color: var(--color-purple-dark);
+  box-shadow: 0 0 0 1px var(--color-purple-dark);
+}
+
+.checkboxInput {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+}
+
+.checkboxMark {
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 2px solid var(--color-gray-border);
+  border-radius: 0.375rem;
+  background-color: var(--color-white-main);
+  transition: all 0.2s;
+  position: relative;
+}
+
+.checkboxInput:focus-visible + .checkboxMark {
+  outline: 2px solid var(--color-purple-dark);
+  outline-offset: 2px;
+}
+
+.checkboxLabel:hover .checkboxMark {
+  border-color: var(--color-purple-dark);
+}
+
+.checkboxInput:checked ~ .checkboxMark {
+  background-color: var(--color-purple-dark);
+  border-color: var(--color-purple-dark);
+}
+
+.checkboxMark::after {
+  content: '';
+  position: absolute;
+  display: none;
+  left: 0.25rem;
+  top: 0.0625rem;
+  width: 0.375rem;
+  height: 0.625rem;
+  border: solid var(--color-white-main);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+.checkboxInput:checked ~ .checkboxMark::after {
+  display: block;
+}
+
+.checkboxContent {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.checkboxText {
+  font-weight: 600;
+  font-size: var(--font-size-sm);
+  color: var(--color-dark-main);
+  user-select: none;
+}
+
+.checkboxHint {
+  font-size: var(--font-size-xxs);
+  color: var(--color-gray-light2);
+  user-select: none;
 }

src/app/(withHeader)/script/create/page.tsx

@@ -13,7 +13,7 @@ import { getSendValues } from '@/utils/send';
 import { useCustomToast } from '@/hooks/other/useCustomToast';
 import { notifyMutationError } from '@/utils/notifyMutationError';
 import { ScriptFormInfoBlock } from '@/components/ScriptFormInfoBlock';
-import { ValueType } from '@/shared/api/generated/data-contracts';
+import { ValueType, Visibility } from '@/shared/api/generated/data-contracts';
 
 export default function CreatePage() {
   const router = useRouter();
@@ -48,6 +48,7 @@ export default function CreatePage() {
                 name: values.name.trim(),
                 desc: values.desc?.trim() ?? '',
                 archiveID: String(file_id),
+                visibility: values.visibility,
                 in: values.inputParams.map((param) => ({
                   name: param.name.trim(),
                   desc: param.desc?.trim() ?? '',

src/app/(withHeader)/script/create/page.usecase.tsx

@@ -3,6 +3,7 @@ import styles from '@/app/(withHeader)/script/create/page.module.css';
 import cn from 'classnames';
 import { AddParametrIcon } from '@/components/icons/AddParametricon';
 import * as Yup from 'yup';
+import { Visibility } from '@/shared/api/generated/data-contracts';
 
 const trimString = (v: unknown) => (typeof v === 'string' ? v.trim() : v);
 
@@ -90,6 +91,7 @@ export interface ScriptFormValues {
   name: string;
   desc: string;
   file: File | null;
+  visibility: Visibility;
   inputParams: ParameterWithId[];
   outputParams: ParameterWithId[];
 }
@@ -98,6 +100,7 @@ export const ScriptInitialValues: ScriptFormValues = {
   name: '',
   desc: '',
   file: null,
+  visibility: Visibility.Private,
   inputParams: [],
   outputParams: [],
 };

src/components/ScriptFormInfoBlock/index.tsx

@@ -4,6 +4,7 @@ import { FastField, type FastFieldProps } from 'formik';
 import { InfoBlockLayout } from '@/layouts/InfoBlockLayout';
 import InputLayout from '@/layouts/InputLayout';
 import { pageCreateUsecase } from '@/app/(withHeader)/script/create/page.usecase';
+import { Visibility } from '@/shared/api/generated/data-contracts';
 import styles from '@/app/(withHeader)/script/create/page.module.css';
 
 export const ScriptFormInfoBlock: FC = memo(() => {
@@ -58,6 +59,32 @@ export const ScriptFormInfoBlock: FC = memo(() => {
           />
         )}
       </FastField>
+
+      <FastField name='visibility'>
+        {({ form, field }: FastFieldProps) => (
+          <label className={styles.checkboxLabel}>
+            <input
+              type='checkbox'
+              className={styles.checkboxInput}
+              checked={field.value === Visibility.Public}
+              onChange={(e) =>
+                form.setFieldValue(
+                  field.name,
+                  e.target.checked ? Visibility.Public : Visibility.Private,
+                )
+              }
+              aria-label='Публичный шаблон'
+            />
+            <span className={styles.checkboxMark} />
+            <div className={styles.checkboxContent}>
+              <span className={styles.checkboxText}>Публичный шаблон</span>
+              <span className={styles.checkboxHint}>
+                Шаблон будет доступен всем пользователям для просмотра и запуска
+              </span>
+            </div>
+          </label>
+        )}
+      </FastField>
     </InfoBlockLayout>
   );
 });

src/shared/ExtendedBlock/ExtendedBlock.module.css

@@ -82,7 +82,6 @@
   padding-top: 0 !important;
 }
 
-
 @media (width <= 1024px) {
   .ScriptParametrsLayout__content {
     grid-template-columns: repeat(1, 1fr);

src/shared/api/generated/Auth.ts

@@ -1,35 +1,37 @@
-/* eslint-disable */
-/* tslint:disable */
-// @ts-nocheck
-/*
- * ---------------------------------------------------------------
- * ## THIS FILE WAS GENERATED VIA SWAGGER-TYPESCRIPT-API        ##
- * ##                                                           ##
- * ## AUTHOR: acacode                                           ##
- * ## SOURCE: https://github.com/acacode/swagger-typescript-api ##
- * ---------------------------------------------------------------
- */
-
-import { LoginRequest, LoginResponse, PlainError } from './data-contracts';
-import { ContentType, HttpClient, RequestParams } from './http-client';
-
-export class Auth<SecurityDataType = unknown> extends HttpClient<SecurityDataType> {
-  /**
-   * No description
-   *
-   * @tags auth
-   * @name Login
-   * @request POST:/auth/login
-   * @secure
-   */
-  login = (data: LoginRequest, params: RequestParams = {}) =>
-    this.request<LoginResponse, PlainError>({
-      path: `/auth/login`,
-      method: 'POST',
-      body: data,
-      secure: true,
-      type: ContentType.Json,
-      format: 'json',
-      ...params,
-    });
-}
+/* eslint-disable */
+/* tslint:disable */
+// @ts-nocheck
+/*
+ * ---------------------------------------------------------------
+ * ## THIS FILE WAS GENERATED VIA SWAGGER-TYPESCRIPT-API        ##
+ * ##                                                           ##
+ * ## AUTHOR: acacode                                           ##
+ * ## SOURCE: https://github.com/acacode/swagger-typescript-api ##
+ * ---------------------------------------------------------------
+ */
+
+import { LoginRequest, LoginResponse, PlainError } from "./data-contracts";
+import { ContentType, HttpClient, RequestParams } from "./http-client";
+
+export class Auth<
+  SecurityDataType = unknown,
+> extends HttpClient<SecurityDataType> {
+  /**
+   * No description
+   *
+   * @tags auth
+   * @name Login
+   * @request POST:/auth/login
+   * @secure
+   */
+  login = (data: LoginRequest, params: RequestParams = {}) =>
+    this.request<LoginResponse, PlainError>({
+      path: `/auth/login`,
+      method: "POST",
+      body: data,
+      secure: true,
+      type: ContentType.Json,
+      format: "json",
+      ...params,
+    });
+}