feat: input colors and some improvements

.gitignore

@@ -23,3 +23,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# My
+repomix-output.*

.vscode/settings.json

@@ -8,5 +8,6 @@
       "([\"'`][^\"'`]*.*?[\"'`])",
       "[\"'`]([^\"'`]*).*?[\"'`]"
     ]
-  ]
+  ],
+  "editor.formatOnSave": true
 }

bun.lock

@@ -18,7 +18,7 @@
         "react-hook-form": "^7.56.1",
         "tailwind-merge": "^3.0.2",
         "tailwind-variants": "^1.0.0",
-        "tailwindcss": "^4.0.17",
+        "tailwindcss": "^4.1.5",
         "uuid": "^11.1.0",
       },
       "devDependencies": {
@@ -713,7 +713,7 @@
 
     "tailwind-variants": ["tailwind-variants@1.0.0", "", { "dependencies": { "tailwind-merge": "3.0.2" }, "peerDependencies": { "tailwindcss": "*" } }, "sha512-2WSbv4ulEEyuBKomOunut65D8UZwxrHoRfYnxGcQNnHqlSCp2+B7Yz2W+yrNDrxRodOXtGD/1oCcKGNBnUqMqA=="],
 
-    "tailwindcss": ["tailwindcss@4.0.17", "", {}, "sha512-OErSiGzRa6rLiOvaipsDZvLMSpsBZ4ysB4f0VKGXUrjw2jfkJRd6kjRKV2+ZmTCNvwtvgdDam5D7w6WXsdLJZw=="],
+    "tailwindcss": ["tailwindcss@4.1.5", "", {}, "sha512-nYtSPfWGDiWgCkwQG/m+aX83XCwf62sBgg3bIlNiiOcggnS1x3uVRDAuyelBFL+vJdOPPCGElxv9DjHJjRHiVA=="],
 
     "tapable": ["tapable@2.2.1", "", {}, "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ=="],
 
@@ -767,6 +767,12 @@
 
     "@humanfs/node/@humanwhocodes/retry": ["@humanwhocodes/retry@0.3.1", "", {}, "sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA=="],
 
+    "@tailwindcss/node/tailwindcss": ["tailwindcss@4.0.17", "", {}, "sha512-OErSiGzRa6rLiOvaipsDZvLMSpsBZ4ysB4f0VKGXUrjw2jfkJRd6kjRKV2+ZmTCNvwtvgdDam5D7w6WXsdLJZw=="],
+
+    "@tailwindcss/postcss/tailwindcss": ["tailwindcss@4.0.17", "", {}, "sha512-OErSiGzRa6rLiOvaipsDZvLMSpsBZ4ysB4f0VKGXUrjw2jfkJRd6kjRKV2+ZmTCNvwtvgdDam5D7w6WXsdLJZw=="],
+
+    "@tailwindcss/vite/tailwindcss": ["tailwindcss@4.0.17", "", {}, "sha512-OErSiGzRa6rLiOvaipsDZvLMSpsBZ4ysB4f0VKGXUrjw2jfkJRd6kjRKV2+ZmTCNvwtvgdDam5D7w6WXsdLJZw=="],
+
     "@typescript-eslint/typescript-estree/minimatch": ["minimatch@9.0.5", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow=="],
 
     "@typescript-eslint/typescript-estree/semver": ["semver@7.7.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA=="],

package.json

@@ -23,7 +23,7 @@
     "react-hook-form": "^7.56.1",
     "tailwind-merge": "^3.0.2",
     "tailwind-variants": "^1.0.0",
-    "tailwindcss": "^4.0.17",
+    "tailwindcss": "^4.1.5",
     "uuid": "^11.1.0"
   },
   "devDependencies": {

repomix-output.xml

@@ -1,678 +0,0 @@
-This file is a merged representation of a subset of the codebase, containing files not matching ignore patterns, combined into a single document by Repomix.
-
-<file_summary>
-This section contains a summary of this file.
-
-<purpose>
-This file contains a packed representation of the entire repository's contents.
-It is designed to be easily consumable by AI systems for analysis, code review,
-or other automated processes.
-</purpose>
-
-<file_format>
-The content is organized as follows:
-1. This summary section
-2. Repository information
-3. Directory structure
-4. Repository files, each consisting of:
-  - File path as an attribute
-  - Full contents of the file
-</file_format>
-
-<usage_guidelines>
-- This file should be treated as read-only. Any changes should be made to the
-  original repository files, not this packed version.
-- When processing this file, use the file path to distinguish
-  between different files in the repository.
-- Be aware that this file may contain sensitive information. Handle it with
-  the same level of security as you would the original repository.
-</usage_guidelines>
-
-<notes>
-- Some files may have been excluded based on .gitignore rules and Repomix's configuration
-- Binary files are not included in this packed representation. Please refer to the Repository Structure section for a complete list of file paths, including binary files
-- Files matching these patterns are excluded: bun.lock, node_modules/, .vscode/
-- Files matching patterns in .gitignore are excluded
-- Files matching default ignore patterns are excluded
-- Files are sorted by Git change count (files with more changes are at the bottom)
-</notes>
-
-<additional_info>
-
-</additional_info>
-
-</file_summary>
-
-<directory_structure>
-public/
-  vite.svg
-src/
-  assets/
-    preact.svg
-  components/
-    ui/
-      Button.module.scss
-      Button.tsx
-      Input.module.scss
-      Input.tsx
-    layout.tsx
-    menu.module.scss
-    menu.tsx
-  pages/
-    login.module.scss
-    login.tsx
-    profile.module.scss
-    profile.tsx
-  providers/
-    AuthProvider.tsx
-  utils/
-    class-merge.ts
-  app.module.scss
-  app.tsx
-  index.scss
-  main.tsx
-  vite-env.d.ts
-.gitattributes
-.gitignore
-.prettierrc
-eslint.config.mjs
-index.html
-package.json
-postcss.config.mts
-tsconfig.app.json
-tsconfig.json
-tsconfig.node.json
-vite.config.ts
-</directory_structure>
-
-<files>
-This section contains the contents of the repository's files.
-
-<file path="src/providers/AuthProvider.tsx">
-import { signal, Signal } from "@preact/signals";
-import { createContext, JSX } from "preact";
-import { useContext } from "preact/hooks";
-
-interface AppContextValue {
-  isLoggedIn: Signal<boolean>;
-}
-
-const AppContext = createContext<AppContextValue>({
-  isLoggedIn: signal(false),
-});
-
-const AppProvider = ({ children }: { children: JSX.Element }) => {
-  const value: AppContextValue = {
-    isLoggedIn: signal(false),
-  };
-
-  return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
-};
-
-const useAppContext = () => {
-  const context = useContext(AppContext);
-  if (!context) {
-    throw new Error("useAppContext must be used within AppProvider");
-  }
-  return context;
-};
-
-export { AppProvider, useAppContext };
-</file>
-
-<file path="public/vite.svg">
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
-</file>
-
-<file path="src/assets/preact.svg">
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="27.68" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 296"><path fill="#673AB8" d="m128 0l128 73.9v147.8l-128 73.9L0 221.7V73.9z"></path><path fill="#FFF" d="M34.865 220.478c17.016 21.78 71.095 5.185 122.15-34.704c51.055-39.888 80.24-88.345 63.224-110.126c-17.017-21.78-71.095-5.184-122.15 34.704c-51.055 39.89-80.24 88.346-63.224 110.126Zm7.27-5.68c-5.644-7.222-3.178-21.402 7.573-39.253c11.322-18.797 30.541-39.548 54.06-57.923c23.52-18.375 48.303-32.004 69.281-38.442c19.922-6.113 34.277-5.075 39.92 2.148c5.644 7.223 3.178 21.403-7.573 39.254c-11.322 18.797-30.541 39.547-54.06 57.923c-23.52 18.375-48.304 32.004-69.281 38.441c-19.922 6.114-34.277 5.076-39.92-2.147Z"></path><path fill="#FFF" d="M220.239 220.478c17.017-21.78-12.169-70.237-63.224-110.126C105.96 70.464 51.88 53.868 34.865 75.648c-17.017 21.78 12.169 70.238 63.224 110.126c51.055 39.889 105.133 56.485 122.15 34.704Zm-7.27-5.68c-5.643 7.224-19.998 8.262-39.92 2.148c-20.978-6.437-45.761-20.066-69.28-38.441c-23.52-18.376-42.74-39.126-54.06-57.923c-10.752-17.851-13.218-32.03-7.575-39.254c5.644-7.223 19.999-8.261 39.92-2.148c20.978 6.438 45.762 20.067 69.281 38.442c23.52 18.375 42.739 39.126 54.06 57.923c10.752 17.85 13.218 32.03 7.574 39.254Z"></path><path fill="#FFF" d="M127.552 167.667c10.827 0 19.603-8.777 19.603-19.604c0-10.826-8.776-19.603-19.603-19.603c-10.827 0-19.604 8.777-19.604 19.603c0 10.827 8.777 19.604 19.604 19.604Z"></path></svg>
-</file>
-
-<file path="src/components/layout.tsx">
-import { useAppContext } from "@/providers/AuthProvider";
-import { FunctionComponent } from "preact";
-import { Route, Router, useLocation } from "preact-iso";
-import { useEffect } from "preact/hooks";
-import Menu from "./menu";
-
-const Layout: FunctionComponent = () => {
-  const { isLoggedIn } = useAppContext();
-  const location = useLocation();
-  useEffect(() => {
-    console.log(isLoggedIn.value);
-  }, [isLoggedIn]);
-  return (
-    <div class="flex min-w-screen flex-row justify-between">
-      <div class="w-full overflow-x-auto">
-        <Router>
-          <Route
-            path="/"
-            component={() => {
-              // location.route("/settings");
-              return <h1>Home</h1>;
-            }}
-          />
-          <Route path="/settings" component={() => <h1>Test</h1>} />
-          <Route path="/tasks" component={() => <h1>Test2</h1>} />
-          <Route default component={() => <h1>404</h1>} />
-        </Router>
-      </div>
-      <Menu />
-    </div>
-  );
-};
-
-export default Layout;
-</file>
-
-<file path="src/pages/profile.module.scss">
-@reference "../index.scss";
-</file>
-
-<file path="src/pages/profile.tsx">
-import Layout from "@/components/layout";
-import { FunctionComponent } from "preact";
-
-const ProfilePage: FunctionComponent = () => {
-  return <Layout />;
-};
-
-export default ProfilePage;
-</file>
-
-<file path="src/utils/class-merge.ts">
-import { ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(...inputs));
-}
-</file>
-
-<file path="src/app.module.scss">
-@reference "./index.scss";
-
-.text {
-  @apply text-9xl text-red-500;
-}
-</file>
-
-<file path="src/main.tsx">
-import { render } from "preact";
-import { App } from "./app.tsx";
-import "./index.scss";
-
-render(<App />, document.getElementById("app")!);
-</file>
-
-<file path="src/vite-env.d.ts">
-/// <reference types="vite/client" />
-</file>
-
-<file path=".gitattributes">
-* text=auto
-bun.lock binary
-</file>
-
-<file path=".gitignore">
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-!.vscode/settings.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
-</file>
-
-<file path="eslint.config.mjs">
-// @ts-check
-
-import eslint from "@eslint/js";
-import tseslint from "typescript-eslint";
-
-export default tseslint.config({
-  extends: [eslint.configs.recommended, tseslint.configs.recommended],
-  ignores: ["*.d.ts"],
-  languageOptions: {
-    ecmaVersion: "latest",
-    sourceType: "module",
-    parserOptions: { ecmaFeatures: { jsx: true } },
-  },
-  settings: {
-    env: {
-      browser: true,
-      es6: true,
-    },
-  },
-});
-</file>
-
-<file path="postcss.config.mts">
-export default {
-  plugins: {
-    "@tailwindcss/postcss": {},
-  },
-};
-</file>
-
-<file path="tsconfig.app.json">
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "lib": [
-      "ES2020",
-      "DOM",
-      "DOM.Iterable"
-    ],
-    "skipLibCheck": true,
-    "paths": {
-      "react": [
-        "./node_modules/preact/compat/"
-      ],
-      "react-dom": [
-        "./node_modules/preact/compat/"
-      ],
-      "@/*": [
-        "./src/*"
-      ]
-    },
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-    "jsxImportSource": "preact",
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": [
-    "src"
-  ]
-}
-</file>
-
-<file path="tsconfig.json">
-{
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
-}
-</file>
-
-<file path="tsconfig.node.json">
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ES2022",
-    "lib": ["ES2023"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["vite.config.ts"]
-}
-</file>
-
-<file path="vite.config.ts">
-import preact from '@preact/preset-vite';
-import tailwindcss from '@tailwindcss/vite';
-import { defineConfig } from 'vite';
-import tsConfigPaths from 'vite-tsconfig-paths';
-
-// https://vite.dev/config/
-export default defineConfig({
-  plugins: [preact(), tailwindcss(), tsConfigPaths()],
-});
-</file>
-
-<file path="src/components/ui/Button.module.scss">
-@reference '../../index.scss';
-
-.button {
-  @apply rounded-2xl border-2 py-3 font-semibold text-white transition-colors hover:cursor-pointer;
-}
-</file>
-
-<file path="src/components/ui/Button.tsx">
-import { FunctionComponent } from "preact";
-import { tv } from "tailwind-variants";
-import classes from "./Button.module.scss";
-const button = tv({
-  base: classes.button,
-  variants: {
-    color: {
-      primary: "bg-blue-400 hover:bg-blue-500",
-      secondary: "bg-red-400 hover:bg-red-500",
-    },
-  },
-});
-
-const Button: FunctionComponent<{ onClick: () => void }> = (props) => {
-  return (
-    <button type="button" class={button({ color: "primary" })} onClick={props.onClick}>
-      {props.children}
-    </button>
-  );
-};
-
-export default Button;
-</file>
-
-<file path="src/components/ui/Input.tsx">
-import { FunctionComponent } from "preact";
-import { tv } from "tailwind-variants";
-import classes from "./Input.module.scss";
-
-const input = tv({
-  base: classes.input_field,
-  variants: {
-    "text-align": {
-      center: "text-center",
-      left: "text-left",
-    },
-  },
-  defaultVariants: {
-    "text-align": "left",
-  },
-});
-
-interface InputProps {
-  isPassword?: boolean;
-  placeholder?: string;
-  textAlign?: "center" | "left";
-}
-
-const Input: FunctionComponent<InputProps> = ({ isPassword = false, placeholder = "", textAlign }: InputProps) => {
-  return (
-    <input
-      type={isPassword ? "password" : "text"}
-      class={input({ "text-align": textAlign })}
-      placeholder={placeholder}
-    />
-  );
-};
-
-export default Input;
-</file>
-
-<file path="src/components/menu.module.scss">
-@reference "../index.scss";
-
-.menu_container {
-  @apply flex min-h-8 min-w-screen flex-col items-center gap-4 border-l border-l-gray-500 px-5 pt-5 md:min-h-screen md:min-w-[300px];
-}
-
-.menu_item {
-  @apply w-full cursor-pointer rounded-md px-6 py-2 text-center hover:bg-gray-200;
-}
-</file>
-
-<file path="src/components/menu.tsx">
-import { FunctionComponent } from "preact";
-import { useLocation } from "preact-iso";
-import { tv } from "tailwind-variants";
-import classes from "./menu.module.scss";
-
-interface MenuItemProps {
-  title: string;
-  link: string;
-}
-
-const MenuItem: FunctionComponent<MenuItemProps> = ({ title, link }: MenuItemProps) => {
-  const location = useLocation();
-  const active = location.path === link;
-  const menuItemClasses = tv({
-    base: classes.menu_item,
-    variants: {
-      activity: {
-        active: "bg-gray-200",
-        inactive: "bg-gray-100",
-      },
-    },
-    defaultVariants: {
-      activity: "inactive",
-    },
-  });
-  return (
-    <div class={menuItemClasses({ activity: active ? "active" : "inactive" })} onClick={() => location.route(link)}>
-      {title}
-    </div>
-  );
-};
-
-interface MenuItems {
-  title: string;
-  link: string;
-}
-
-const Menu: FunctionComponent = () => {
-  const menu_items: MenuItems[] = [
-    {
-      title: "Профиль",
-      link: "/profile",
-    },
-    {
-      title: "Задачи",
-      link: "/tasks",
-    },
-    {
-      title: "Календарь",
-      link: "/calendar",
-    },
-  ];
-  return (
-    <div class={classes.menu_container}>
-      {menu_items.map(({ title, link }) => (
-        <MenuItem title={title} link={link} />
-      ))}
-    </div>
-  );
-};
-
-export default Menu;
-</file>
-
-<file path="src/pages/login.module.scss">
-@reference "../index.scss";
-
-.login_container {
-  @apply flex min-h-screen flex-col items-center justify-center;
-}
-
-.login_card {
-  @apply flex w-[95%] min-w-[300px] flex-col justify-center gap-2 rounded-md border-gray-400 p-5 shadow-md md:w-[350px];
-}
-</file>
-
-<file path="src/pages/login.tsx">
-import Button from "@/components/ui/Button";
-import Input from "@/components/ui/Input";
-import { useAppContext } from "@/providers/AuthProvider";
-import { FunctionComponent } from "preact";
-import { useLocation } from "preact-iso";
-import classes from "./login.module.scss";
-const LoginPage: FunctionComponent = () => {
-  const { isLoggedIn } = useAppContext();
-  const location = useLocation();
-  return (
-    <div class={classes.login_container}>
-      <div class={classes.login_card}>
-        <Input placeholder="Login" textAlign="center" />
-        <Input isPassword placeholder="Password" textAlign="center" />
-        <Button
-          onClick={() => {
-            isLoggedIn.value = true;
-            location.route("/profile/settings");
-          }}
-        >
-          Login
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-export default LoginPage;
-</file>
-
-<file path="src/index.scss">
-@import "tailwindcss";
-@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
-:root {
-  font-family: "Montserrat", sans-serif;
-}
-</file>
-
-<file path="index.html">
-<!doctype html>
-<html lang="ru">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Антихвост</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
-</file>
-
-<file path="src/components/ui/Input.module.scss">
-@reference "../../index.scss";
-
-.input_field {
-  @apply rounded-md border border-gray-300 p-2 placeholder:transition focus:outline-0 focus:placeholder:opacity-25;
-}
-</file>
-
-<file path="src/app.tsx">
-import { FunctionComponent } from "preact";
-import { ErrorBoundary, lazy, LocationProvider, Route, Router, useLocation } from "preact-iso";
-import "preact/debug";
-import LoginPage from "./pages/login";
-import { AppProvider } from "./providers/AuthProvider";
-
-const HomePage: FunctionComponent = () => {
-  const location = useLocation();
-  location.route("/login");
-  return <div>Redirecting to login...</div>;
-};
-
-export function App() {
-  return (
-    <AppProvider>
-      <LocationProvider>
-        <ErrorBoundary>
-          <Router>
-            <Route path="/" component={HomePage} />
-            <Route path="/login" component={LoginPage} />
-            <Route path="/profile/*" component={lazy(() => import("./pages/profile"))} />
-          </Router>
-        </ErrorBoundary>
-      </LocationProvider>
-    </AppProvider>
-  );
-}
-</file>
-
-<file path=".prettierrc">
-{
-  "tabWidth": 2,
-  "printWidth": 120,
-  "arrowParens": "always",
-  "singleQuote": false,
-  "trailingComma": "es5",
-  "useTabs": false,
-  "semi": true,
-  "bracketSpacing": true,
-  "plugins": ["prettier-plugin-tailwindcss"],
-  "tailwindFunctions": ["tv"]
-}
-</file>
-
-<file path="package.json">
-{
-  "name": "anti-hvost",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@preact/signals": "^2.0.2",
-    "@tailwindcss/postcss": "^4.0.17",
-    "@tailwindcss/vite": "^4.0.17",
-    "clsx": "^2.1.1",
-    "postcss": "^8.5.3",
-    "preact": "^10.26.2",
-    "preact-iso": "^2.9.1",
-    "tailwind-merge": "^3.0.2",
-    "tailwind-variants": "^1.0.0",
-    "tailwindcss": "^4.0.17"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.23.0",
-    "@preact/preset-vite": "^2.10.1",
-    "@typescript-eslint/parser": "^8.28.0",
-    "eslint": "^9.23.0",
-    "eslint-config-prettier": "^10.1.1",
-    "prettier": "^3.5.3",
-    "prettier-eslint": "^16.3.0",
-    "prettier-plugin-tailwindcss": "^0.6.11",
-    "sass-embedded": "^1.86.0",
-    "typescript": "~5.7.2",
-    "typescript-eslint": "^8.28.0",
-    "vite": "^6.2.0",
-    "vite-tsconfig-paths": "^5.1.4"
-  }
-}
-</file>
-
-</files>

src/components/ModalCalendar.tsx

@@ -1,13 +1,13 @@
 import { cn } from "@/utils/class-merge";
 import { ClockIcon } from "@heroicons/react/24/outline";
 import { FunctionComponent } from "preact";
-import { Dispatch, StateUpdater, useState } from "preact/hooks";
+import { Dispatch, StateUpdater, useEffect, useState } from "preact/hooks";
 import { Calendar, CalendarPassThroughMethodOptions } from "primereact/calendar";
 import { FormEvent } from "primereact/ts-helpers";
 import Button from "./ui/Button";
-import ModalWindow from "./ui/Modal";
+import ModalWindow, { ModalWindowProps } from "./ui/Modal";
 
-interface ModalCalendarProps {
+interface ModalCalendarProps extends ModalWindowProps {
   isOpen?: boolean;
   setIsOpen?: Dispatch<StateUpdater<boolean>>;
   onClose?: () => void;
@@ -27,10 +27,25 @@ const TRANSITIONS = {
   },
 };
 
-const ModalCalendar: FunctionComponent<ModalCalendarProps> = ({ isOpen, setIsOpen, onClose, onChange, value }) => {
+const ModalCalendar: FunctionComponent<ModalCalendarProps> = ({
+  isOpen,
+  setIsOpen,
+  onClose,
+  onChange,
+  value,
+  ...rest
+}) => {
   const [showTime, setShowTime] = useState(false);
+  const [minDate, setMinDate] = useState(new Date());
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setMinDate(new Date());
+    }, 1000);
+    return () => clearInterval(interval);
+  }, []);
   return (
     <ModalWindow
+      {...rest}
       isOpen={isOpen}
       setIsOpen={setIsOpen}
       onClose={() => {
@@ -38,7 +53,6 @@ const ModalCalendar: FunctionComponent<ModalCalendarProps> = ({ isOpen, setIsOpe
         setShowTime(false);
       }}
       className="md:h-[40rem] md:w-[30rem]"
-      zIndex={60}
     >
       <div class="w-full flex-1 self-start">
         <Calendar
@@ -46,6 +60,7 @@ const ModalCalendar: FunctionComponent<ModalCalendarProps> = ({ isOpen, setIsOpe
           onChange={onChange}
           value={value}
           hourFormat="24"
+          minDate={minDate}
           showTime={showTime}
           pt={{
             root: ({ props }: CalendarPassThroughMethodOptions) => ({

src/components/ModalTags.tsx

@@ -3,14 +3,15 @@ import { BookOpenIcon, DocumentDuplicateIcon } from "@heroicons/react/24/outline
 import { FunctionComponent } from "preact";
 import { Dispatch, StateUpdater, useEffect, useState } from "preact/hooks";
 import Button from "./ui/Button";
-import ModalWindow from "./ui/Modal";
+import ModalWindow, { ModalWindowProps } from "./ui/Modal";
 
 export interface ITags {
   first: string;
   second: string;
+  overdue: boolean;
 }
 
-interface ModalTagsProps {
+interface ModalTagsProps extends ModalWindowProps {
   isOpen?: boolean;
   setIsOpen?: Dispatch<StateUpdater<boolean>>;
   onClose?: () => void;
@@ -22,7 +23,15 @@ interface ModalTagsProps {
   };
 }
 
-const ModalTags: FunctionComponent<ModalTagsProps> = ({ isOpen, setIsOpen, onClose, onChange, value, tagsList }) => {
+const ModalTags: FunctionComponent<ModalTagsProps> = ({
+  isOpen,
+  setIsOpen,
+  onClose,
+  onChange,
+  value,
+  tagsList,
+  ...rest
+}) => {
   const [showFirstTags, setShowFirstTags] = useState(false);
   const [showSecondTags, setShowSecondTags] = useState(false);
   useEffect(() => {
@@ -34,6 +43,7 @@ const ModalTags: FunctionComponent<ModalTagsProps> = ({ isOpen, setIsOpen, onClo
   return (
     <ModalWindow
       isOpen={isOpen}
+      {...rest}
       setIsOpen={setIsOpen}
       onClose={() => {
         onClose!();

src/components/task.module.scss

@@ -1,5 +1,5 @@
 @reference "../index.scss";
 
 .task {
-  @apply flex h-24 w-full cursor-pointer flex-row items-center justify-start gap-4 rounded-[3rem] bg-[rgba(251,194,199,0.53)] px-5 py-6 text-xl shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] transition-transform hover:scale-[1.05] hover:bg-[rgba(251,194,199,0.7)] active:scale-[1.05] md:w-[500px];
+  @apply relative flex h-24 w-full cursor-pointer flex-row items-center justify-start gap-4 rounded-[3rem] bg-[rgba(251,194,199,0.53)] px-5 py-6 text-xl shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] transition-transform hover:scale-[1.05] hover:bg-[rgba(251,194,199,0.7)] active:scale-[1.05] md:w-[500px];
 }

src/components/task.tsx

@@ -6,6 +6,7 @@ import classes from "./task.module.scss";
 interface TaskProps {
   name: string;
   checked?: boolean;
+  overdue?: boolean;
   onClick?: () => void;
   onMarkClick?: MouseEventHandler<HTMLParagraphElement>;
 }
@@ -30,7 +31,13 @@ const markStyle = tv({
   },
 });
 
-const Task: FunctionComponent<TaskProps> = ({ name, checked = false, onClick = () => {}, onMarkClick = () => {} }) => {
+const Task: FunctionComponent<TaskProps> = ({
+  name,
+  checked = false,
+  onClick = () => {},
+  onMarkClick = () => {},
+  overdue,
+}) => {
   return (
     <div class="w-[95%]">
       <div class={classes.task} onClick={onClick}>
@@ -44,6 +51,7 @@ const Task: FunctionComponent<TaskProps> = ({ name, checked = false, onClick = (
           <p class={markStyle({ checked })}>✓</p>
         </div>
         {name}
+        {overdue && <span class="absolute top-2 right-16 text-xs text-red-500">Просрочено</span>}
       </div>
     </div>
   );

src/components/ui/Dialog.tsx

@@ -23,15 +23,12 @@ const Dialog: FunctionComponent<DialogProps> = ({
   if (!isOpen) return null;
 
   return (
-    <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+    <div class="fixed inset-0 z-150 flex items-center justify-center bg-black/50">
       <div class="w-full max-w-md rounded-[4rem] bg-white p-6 shadow-lg">
         <h2 class="mb-4 text-xl font-semibold">{title}</h2>
-        <p class="mb-6">{content}</p>
+        <p class="mb-6 text-sm sm:text-[1rem]">{content}</p>
         <div class="flex justify-end gap-4">
-          <Button
+          <Button onClick={() => setIsOpen(false)} className="bg-gray-200 text-gray-800 hover:bg-gray-300">
-            onClick={() => setIsOpen(false)}
-            className="bg-gray-200 text-gray-800 hover:bg-gray-300"
-          >
             {cancelText}
           </Button>
           <Button
@@ -49,4 +46,4 @@ const Dialog: FunctionComponent<DialogProps> = ({
   );
 };
 
-export default Dialog; 
+export default Dialog;

src/components/ui/Modal.tsx

@@ -2,7 +2,7 @@ import { cn } from "@/utils/class-merge";
 import { FunctionComponent } from "preact";
 import { Dispatch, StateUpdater, useEffect } from "preact/hooks";
 
-interface ModalWindowProps {
+export interface ModalWindowProps {
   isOpen?: boolean;
   setIsOpen?: Dispatch<StateUpdater<boolean>>;
   onClose?: () => void;

src/pages/profile_calendar.tsx

@@ -1,26 +1,25 @@
-import { withTitle } from "@/constructors/Component";
-import { UrlsTitle } from "@/enums/urls";
-import { FunctionComponent } from "preact";
-import { useState, useEffect } from "preact/hooks";
-import { Calendar, CalendarDateTemplateEvent } from "primereact/calendar";
-import { cn } from "@/utils/class-merge";
-import { ITask } from "./profile_tasks.dto";
-import Task from "@/components/task";
-import ModalWindow from "@/components/ui/Modal";
 import ModalCalendar from "@/components/ModalCalendar";
 import ModalTags, { ITags } from "@/components/ModalTags";
-import { useForm } from "react-hook-form";
+import Task from "@/components/task";
-import { ITaskForm } from "./profile_tasks.dto";
+import Dialog from "@/components/ui/Dialog";
-import { Nullable } from "primereact/ts-helpers";
+import ModalWindow from "@/components/ui/Modal";
+import { withTitle } from "@/constructors/Component";
+import { UrlsTitle } from "@/enums/urls";
+import { cn } from "@/utils/class-merge";
 import {
-  PencilIcon,
-  InboxArrowDownIcon,
-  CalendarDaysIcon,
   BookOpenIcon,
+  CalendarDaysIcon,
   DocumentDuplicateIcon,
+  InboxArrowDownIcon,
+  PencilIcon,
   TrashIcon,
 } from "@heroicons/react/24/outline";
-import Dialog from "@/components/ui/Dialog";
+import { FunctionComponent } from "preact";
+import { useEffect, useState } from "preact/hooks";
+import { Calendar, CalendarDateTemplateEvent } from "primereact/calendar";
+import { Nullable } from "primereact/ts-helpers";
+import { useForm } from "react-hook-form";
+import { ITask, ITaskForm } from "./profile_tasks.dto";
 
 const example_tags: { first: string[]; second: string[] } = {
   first: ["Программирование", "Информатика", "Физика", "Математика"],
@@ -58,10 +57,9 @@ const ProfileCalendar: FunctionComponent = () => {
   const [isEditModal, setIsEditModal] = useState(false);
   const [editContent, setEditContent] = useState<ITask | null>(null);
   const [calendarDate, setCalendarDate] = useState<Nullable<Date>>();
-  const [tags, setTags] = useState<ITags>({ first: "", second: "" });
+  const [tags, setTags] = useState<ITags>({ first: "", second: "", overdue: false });
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
 
-
   const {
     handleSubmit,
     register,
@@ -123,6 +121,15 @@ const ProfileCalendar: FunctionComponent = () => {
     setEditContent(newEditContent);
   }, [tags]);
 
+  const tasksCount = (date: CalendarDateTemplateEvent) => {
+    return tasks.filter((task) => {
+      const taskDate = task.date;
+      return (
+        taskDate.getDate() === date.day && taskDate.getMonth() === date.month && taskDate.getFullYear() === date.year
+      );
+    }).length;
+  };
+
   const hasTasksOnDate = (date: CalendarDateTemplateEvent) => {
     return tasks.some((task) => {
       const taskDate = task.date;
@@ -134,6 +141,7 @@ const ProfileCalendar: FunctionComponent = () => {
 
   const dateTemplate = (date: CalendarDateTemplateEvent) => {
     const isHighlighted = hasTasksOnDate(date);
+    const countT = tasksCount(date);
     const isSelected =
       currentDate &&
       currentDate.getDate() === date.day &&
@@ -143,7 +151,6 @@ const ProfileCalendar: FunctionComponent = () => {
       new Date().getDate() === date.day &&
       new Date().getMonth() === date.month &&
       new Date().getFullYear() === date.year;
-
     return (
       <div
         className={cn(
@@ -156,7 +163,14 @@ const ProfileCalendar: FunctionComponent = () => {
         )}
       >
         <span>{date.day}</span>
-        {isHighlighted && <span className="absolute top-2 right-2 h-2 w-2 rounded-full bg-pink-400" />}
+        {isHighlighted && (
+          <div class="absolute top-2 right-2 flex h-fit w-2 flex-col items-center gap-1 md:h-2 md:w-fit md:flex-row">
+            {Array.from({ length: countT > 3 ? 3 : countT }).map((_, i) => (
+              <span key={i} className="size-2 rounded-full bg-pink-400" />
+            ))}
+            {countT > 3 && <span className="text-xs font-bold text-pink-400 select-none">+</span>}
+          </div>
+        )}
       </div>
     );
   };
@@ -192,7 +206,7 @@ const ProfileCalendar: FunctionComponent = () => {
     };
     setTasks(tasks.map((task) => (task.id === eTask.id ? eTask : task)));
     localStorage.setItem("tasks", JSON.stringify(tasks.map((task) => (task.id === eTask.id ? eTask : task))));
-    setTags({ first: "", second: "" });
+    setTags({ first: "", second: "", overdue: false });
   };
 
   const pt = {
@@ -222,7 +236,7 @@ const ProfileCalendar: FunctionComponent = () => {
         tagsList={example_tags}
         value={tags}
         onClose={() => {
-          setTags({ first: "", second: "" });
+          setTags({ first: "", second: "", overdue: false });
         }}
         onChange={setTags}
       />
@@ -242,7 +256,7 @@ const ProfileCalendar: FunctionComponent = () => {
           setIsEdit(false);
           setEditContent(null);
           setIsEditModal(false);
-          setTags({ first: "", second: "" });
+          setTags({ first: "", second: "", overdue: false });
           setCalendarDate(null);
         }}
       >
@@ -345,7 +359,7 @@ const ProfileCalendar: FunctionComponent = () => {
                 })}
                 onClick={() => {
                   if (!isEditModal) return;
-                  setTags({ first: editContent.tags[0], second: editContent.tags[1] });
+                  setTags({ first: editContent.tags[0], second: editContent.tags[1], overdue: false });
                   setOpenModalTags(true);
                 }}
               >

src/pages/profile_settings.tsx

@@ -4,6 +4,7 @@ import { UrlsTitle } from "@/enums/urls";
 import { useAppContext } from "@/providers/AuthProvider";
 import { cn } from "@/utils/class-merge";
 import { calculatePoints, getCurrentStatus } from "@/utils/status-system";
+import { ArrowRightStartOnRectangleIcon, Cog8ToothIcon } from "@heroicons/react/24/outline";
 import { FunctionComponent } from "preact";
 import { useLocation } from "preact-iso";
 import { useEffect, useState } from "preact/hooks";
@@ -32,9 +33,9 @@ const ProfileSettings: FunctionComponent = () => {
         updateStatus();
       }
     };
-    
+
-    window.addEventListener('storage', handleStorage);
+    window.addEventListener("storage", handleStorage);
-    return () => window.removeEventListener('storage', handleStorage);
+    return () => window.removeEventListener("storage", handleStorage);
   }, []);
 
   return (
@@ -58,17 +59,18 @@ const ProfileSettings: FunctionComponent = () => {
       <div class={classes.profile_container}>
         <div class={classes.settings_block}>
           <div class={classes.settings_block__buttons}>
-            <Button>Сменить тему</Button>
+            <Button className="flex flex-row items-center justify-center gap-2">
-            <Button>Настройки</Button>
+              <Cog8ToothIcon class="size-8" /> Настройки
+            </Button>
             <Button
-              color="secondary"
+              className="flex flex-row items-center justify-center gap-2 bg-[linear-gradient(180.00deg,rgba(246,255,211,0.7),rgba(195,229,253,0.7)_100%)]"
               onClick={() => {
                 isLoggedIn.value = false;
                 localStorage.setItem("loggedIn", "false");
                 route("/login", true);
               }}
             >
-              Выйти
+              <ArrowRightStartOnRectangleIcon class="size-8" /> Выйти
             </Button>
           </div>
         </div>

src/pages/profile_tasks.module.scss

@@ -5,7 +5,7 @@
 }
 
 .header {
-  @apply mb-3 w-full text-3xl font-semibold md:mb-12 md:text-5xl;
+  @apply mb-3 flex w-full flex-row items-center justify-between text-xl font-semibold sm:text-3xl md:mb-12 md:text-5xl;
 }
 
 .tasks_container {

src/pages/profile_tasks.tsx

@@ -1,3 +1,4 @@
+//! Файл большой, потому что было лень делить на компоненты
 import Task from "@/components/task";
 
 import ModalCalendar from "@/components/ModalCalendar";
@@ -19,9 +20,11 @@ import {
   MagnifyingGlassIcon,
   PencilIcon,
   TrashIcon,
+  XMarkIcon,
 } from "@heroicons/react/24/outline";
 import { FunctionComponent } from "preact";
-import { useEffect, useMemo, useState } from "preact/hooks";
+import { useEffect, useMemo, useRef, useState } from "preact/hooks";
+import { Checkbox, CheckboxPassThroughMethodOptions } from "primereact/checkbox";
 import { Nullable } from "primereact/ts-helpers";
 import { SubmitHandler, useForm } from "react-hook-form";
 import { v4 as uuid } from "uuid";
@@ -37,13 +40,19 @@ const ProfileTasks: FunctionComponent = () => {
   const [openModal, setIsOpen] = useState(false); // Открыта модалка
   const [openModalCalendar, setOpenModalCalendar] = useState(false); // Открыта модалка календаря
   const [openModalTags, setOpenModalTags] = useState(false); // Открыта модалка тегов
+  const [openSearchModal, setOpenSearchModal] = useState(false); // Открыто окно поиска
+  const [openFilterModal, setOpenFilterModal] = useState(false);
   const [isEdit, setIsEdit] = useState(false); // Открыта задача
   const [isEditModal, setIsEditModal] = useState(false); // Включено редактирование задачи
   const [isCreating, setIsCreating] = useState(false); // Включено создание задачи
   const [editContent, setEditContent] = useState<ITask | null>(null); // Содержимое редактируемой задачи
   const [calendarDate, setCalendarDate] = useState<Nullable<Date>>(); // Выбранная в календаре дата
-  const [tags, setTags] = useState<ITags>({ first: "", second: "" });
+  const [tags, setTags] = useState<ITags>({ first: "", second: "", overdue: false });
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [searchQuery, setSearchQuery] = useState(""); // Текст поиска
+  const [filterTags, setFilterTags] = useState<ITags>({ first: "", second: "", overdue: false });
+  const [openFirstList, setOpenFirstList] = useState(false);
+  const [openSecondList, setOpenSecondList] = useState(false);
   const getDate = useMemo(() => {
     const date = new Date();
     const formatter = new Intl.DateTimeFormat("ru-RU", { month: "long", day: "numeric" });
@@ -91,7 +100,7 @@ const ProfileTasks: FunctionComponent = () => {
     if (isCreating) setTasks([...tasks, eTask]);
     else setTasks(tasks.map((task) => (task.id === eTask.id ? eTask : task)));
     if (isCreating) setIsOpen(false);
-    setTags({ first: "", second: "" });
+    setTags({ first: "", second: "", overdue: false });
   };
   useEffect(() => {
     if (editContent) reset({ ...editContent, date: editContent.date.toISOString().slice(0, 16) });
@@ -172,19 +181,51 @@ const ProfileTasks: FunctionComponent = () => {
     setShowDeleteDialog(false);
   };
 
+  const filteredTasks = useMemo(() => {
+    let filtered = tasks;
+
+    // Фильтрация по поиску
+    if (searchQuery) {
+      filtered = filtered.filter(
+        (task) =>
+          task.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+          task.description?.toLowerCase().includes(searchQuery.toLowerCase())
+      );
+    }
+
+    // Фильтрация по тегам
+    if (filterTags.first || filterTags.second) {
+      filtered = filtered.filter(
+        (task) =>
+          (!filterTags.first || task.tags[0] === filterTags.first) &&
+          (!filterTags.second || task.tags[1] === filterTags.second)
+      );
+    }
+
+    filtered = filtered.filter((task) => (filterTags.overdue ? task.date < new Date() : task.date >= new Date()));
+    return filtered;
+  }, [tasks, searchQuery, filterTags]);
+
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (searchInputRef.current && openSearchModal) searchInputRef.current.focus();
+  }, [searchInputRef, openSearchModal]);
   return (
     <div class={classes.container}>
       <ModalTags
+        zIndex={70}
         isOpen={openModalTags}
         setIsOpen={setOpenModalTags}
         tagsList={example_tags}
         value={tags}
         onClose={() => {
-          if (!isCreating) setTags({ first: "", second: "" });
+          if (!isCreating) setTags({ first: "", second: "", overdue: false });
         }}
         onChange={setTags}
       />
       <ModalCalendar
+        zIndex={80}
         isOpen={openModalCalendar}
         setIsOpen={setOpenModalCalendar}
         onClose={() => {
@@ -194,6 +235,7 @@ const ProfileTasks: FunctionComponent = () => {
         value={calendarDate!}
       />
       <ModalWindow
+        zIndex={60}
         isOpen={openModal}
         setIsOpen={setIsOpen}
         onClose={() => {
@@ -201,7 +243,7 @@ const ProfileTasks: FunctionComponent = () => {
           setEditContent(null);
           setIsCreating(false);
           setIsEditModal(false);
-          setTags({ first: "", second: "" });
+          setTags({ first: "", second: "", overdue: false });
           setCalendarDate(null);
         }}
       >
@@ -217,7 +259,9 @@ const ProfileTasks: FunctionComponent = () => {
             <div class="flex w-full flex-row items-start justify-between">
               <div class="flex flex-1 flex-col gap-1 pe-2">
                 <input
-                  class="w-full text-2xl outline-0"
+                  class={cn("w-full p-2 text-2xl outline-0", {
+                    "rounded-md bg-gray-400/30 ring-1 ring-gray-400": isEditModal,
+                  })}
                   disabled={!isEditModal}
                   placeholder="Название"
                   {...register("name", {
@@ -226,7 +270,9 @@ const ProfileTasks: FunctionComponent = () => {
                   })}
                 />
                 <textarea
-                  class="h-[5rem] w-full resize-none outline-0"
+                  class={cn("h-[5rem] w-full resize-none p-2 outline-0", {
+                    "rounded-md bg-gray-400/30 ring-1 ring-gray-400": isEditModal,
+                  })}
                   disabled={!isEditModal}
                   placeholder={isEditModal ? "Описание" : ""}
                   {...register("description", {
@@ -241,7 +287,7 @@ const ProfileTasks: FunctionComponent = () => {
                 />
                 <input type="checkbox" hidden {...register("checked")} />
               </div>
-              <div class="flex flex-row gap-4">
+              <div class="flex flex-col gap-4 md:flex-row">
                 <div
                   className="flex cursor-pointer flex-col items-center gap-3"
                   onClick={() => {
@@ -304,7 +350,7 @@ const ProfileTasks: FunctionComponent = () => {
                 })}
                 onClick={() => {
                   if (!isEditModal) return;
-                  setTags({ first: editContent.tags[0], second: editContent.tags[1] });
+                  setTags({ first: editContent.tags[0], second: editContent.tags[1], overdue: false });
                   setOpenModalTags(true);
                 }}
               >
@@ -329,15 +375,15 @@ const ProfileTasks: FunctionComponent = () => {
             }}
           >
             <div class="flex w-full flex-1 flex-row items-start justify-between">
-              <div class="me-4 flex h-full flex-1 flex-col gap-1">
+              <div class="flex flex-1 flex-col gap-1 pe-2">
                 <input
-                  class="text-2xl outline-0"
+                  class="w-full rounded-md bg-gray-400/30 p-2 text-2xl ring-1 ring-gray-400 outline-0"
                   maxLength={20}
                   placeholder="Название"
                   {...register("name", { required: "Заполните название" })}
                 />
                 <textarea
-                  class="mb-10 w-full flex-1 resize-none outline-0"
+                  class="h-[5rem] w-full resize-none rounded-md bg-gray-400/30 p-2 ring-1 ring-gray-400 outline-0"
                   placeholder="Описание"
                   maxLength={200}
                   {...register("description")}
@@ -350,15 +396,15 @@ const ProfileTasks: FunctionComponent = () => {
                 />
                 <input type="checkbox" checked={false} hidden {...register("checked")} />
               </div>
-              <div class="flex flex-row gap-3 self-start">
+              <div class="flex flex-col gap-3 self-start md:flex-row">
                 <CalendarDaysIcon
-                  class="size-10 cursor-pointer"
+                  class="size-8 cursor-pointer"
                   onClick={() => {
                     setOpenModalCalendar(true);
                     setCalendarDate(calendarDate ?? new Date());
                   }}
                 />
-                <BookmarkIcon class="ms-4 size-10 cursor-pointer" onClick={() => setOpenModalTags(true)} />
+                <BookmarkIcon class="size-8 cursor-pointer" onClick={() => setOpenModalTags(true)} />
               </div>
             </div>
             {errors.name && <p class="text-red-500">{errors.name.message}</p>}
@@ -389,110 +435,363 @@ const ProfileTasks: FunctionComponent = () => {
         confirmText="Удалить"
         cancelText="Отмена"
       />
-      {tasks.length > 0 ? (
+      {!searchQuery && !filterTags.first && !filterTags.second && !filterTags.overdue ? (
-        <>
+        filteredTasks.length > 0 ? (
-          <div class={classes.header}>Сегодня: {getDate}</div>
+          <>
-          <div class={classes.tasks_container}>
+            <div class={classes.header}>
-            {groupTasksByDate.today.length > 0 ? (
+              Сегодня: {getDate}
-              <div class="w-full">
+              <div class="flex flex-row items-center gap-2 md:hidden">
-                {groupTasksByDate.today.map((task) => (
+                {!openSearchModal && (
-                  <Task
+                  <div
-                    name={task.name}
+                    class="flex aspect-square h-12 cursor-pointer flex-col items-center justify-center rounded-full bg-[rgba(206,232,251,0.7)] text-xl text-gray-600 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] hover:bg-[rgba(206,232,251,0.9)]"
-                    key={task.id}
+                    onClick={(e) => {
-                    checked={task.checked}
+                      e.stopPropagation();
-                    onClick={() => {
+                      if (!openSearchModal) setOpenFilterModal(false);
-                      setIsOpen(true);
+                      setOpenSearchModal(!openSearchModal);
-                      setIsEdit(true);
-                      setEditContent(task);
-                      setCalendarDate(task.date);
                     }}
-                    onMarkClick={() => {
+                  >
-                      setTasks(tasks.map((t) => (t.id === task.id ? { ...t, checked: !t.checked } : t)));
+                    <MagnifyingGlassIcon class="size-6" />
+                  </div>
+                )}
+                <div class="flex aspect-square h-12 cursor-pointer flex-col items-center justify-center rounded-full bg-[rgba(206,232,251,0.7)] text-xl text-gray-600 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] hover:bg-[rgba(206,232,251,0.9)]">
+                  <FunnelIcon
+                    class="size-6"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      if (!openFilterModal) setOpenSearchModal(false);
+                      setOpenFilterModal(!openFilterModal);
                     }}
                   />
-                ))}
+                </div>
-              </div>
-            ) : (
-              <div class="w-full text-center text-xl">Задач на сегодня нет</div>
-            )}
-            {groupTasksByDate.tomorrow.length > 0 && (
-              <div class="flex w-full flex-col gap-3 md:gap-10">
-                <div class="w-full text-3xl font-semibold md:text-5xl">Завтра</div>
-                {groupTasksByDate.tomorrow.map((task) => (
-                  <Task
-                    name={task.name}
-                    key={task.id}
-                    checked={task.checked}
-                    onClick={() => {
-                      setIsOpen(true);
-                      setIsEdit(true);
-                      setEditContent(task);
-                      setCalendarDate(task.date);
-                    }}
-                    onMarkClick={() => {
-                      setTasks(tasks.map((t) => (t.id === task.id ? { ...t, checked: !t.checked } : t)));
-                    }}
-                  />
-                ))}
-              </div>
-            )}
-            {groupTasksByDate.future.map((group) => (
-              <div class="flex w-full flex-col gap-3 md:gap-10" key={group.date.getTime()}>
-                <div class="w-full text-3xl font-semibold md:text-5xl">{formatDate(group.date)}</div>
-                {group.tasks.map((task) => (
-                  <Task
-                    name={task.name}
-                    key={task.id}
-                    checked={task.checked}
-                    onClick={() => {
-                      setIsOpen(true);
-                      setIsEdit(true);
-                      setEditContent(task);
-                      setCalendarDate(task.date);
-                    }}
-                    onMarkClick={() => {
-                      setTasks(tasks.map((t) => (t.id === task.id ? { ...t, checked: !t.checked } : t)));
-                    }}
-                  />
-                ))}
-              </div>
-            ))}
-          </div>
-          <div class="group fixed right-1 bottom-16 flex flex-row items-center justify-start space-x-3 overflow-x-hidden py-2 md:right-[22rem] md:bottom-4">
-            <div
-              class="flex aspect-square h-20 cursor-pointer items-center justify-center rounded-full bg-[rgb(251,194,199,0.53)] text-9xl text-white shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] transition-all duration-300 ease-out group-hover:ml-[12rem] hover:bg-[rgb(251,194,199,0.7)]"
-              onClick={() => {
-                setIsCreating(true);
-                setIsOpen(true);
-              }}
-            >
-              <PlusIcon />
-            </div>
-            <div class="absolute left-0 my-auto hidden flex-row space-x-3 opacity-0 transition-opacity duration-100 group-hover:opacity-100 md:flex">
-              <div class="pointer-events-none flex aspect-square h-20 cursor-pointer flex-col items-center justify-center rounded-full bg-[rgba(206,232,251,0.7)] text-xl text-gray-600 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] group-hover:pointer-events-auto hover:bg-[rgba(206,232,251,0.9)]">
-                <MagnifyingGlassIcon class="size-12" />
-              </div>
-              <div class="pointer-events-none flex aspect-square h-20 cursor-pointer flex-col items-center justify-center rounded-full bg-[rgba(206,232,251,0.7)] text-xl text-gray-600 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] group-hover:pointer-events-auto hover:bg-[rgba(206,232,251,0.9)]">
-                <FunnelIcon class="size-12" />
               </div>
             </div>
-          </div>
+            <div class={classes.tasks_container}>
-        </>
+              {groupTasksByDate.today.length > 0 ? (
-      ) : (
+                <div class="w-full">
-        <>
+                  {groupTasksByDate.today.map((task) => (
+                    <Task
+                      name={task.name}
+                      key={task.id}
+                      checked={task.checked}
+                      overdue={task.date < new Date()}
+                      onClick={() => {
+                        setIsOpen(true);
+                        setIsEdit(true);
+                        setEditContent(task);
+                        setCalendarDate(task.date);
+                      }}
+                      onMarkClick={() => {
+                        setTasks(tasks.map((t) => (t.id === task.id ? { ...t, checked: !t.checked } : t)));
+                      }}
+                    />
+                  ))}
+                </div>
+              ) : (
+                <div class="w-full text-center text-xl">Задач на сегодня нет</div>
+              )}
+              {groupTasksByDate.tomorrow.length > 0 && (
+                <div class="flex w-full flex-col gap-3 md:gap-10">
+                  <div class="w-full text-3xl font-semibold md:text-5xl">Завтра</div>
+                  {groupTasksByDate.tomorrow.map((task) => (
+                    <Task
+                      name={task.name}
+                      key={task.id}
+                      checked={task.checked}
+                      onClick={() => {
+                        setIsOpen(true);
+                        setIsEdit(true);
+                        setEditContent(task);
+                        setCalendarDate(task.date);
+                      }}
+                      onMarkClick={() => {
+                        setTasks(tasks.map((t) => (t.id === task.id ? { ...t, checked: !t.checked } : t)));
+                      }}
+                    />
+                  ))}
+                </div>
+              )}
+              {groupTasksByDate.future.map((group) => (
+                <div class="flex w-full flex-col gap-3 md:gap-10" key={group.date.getTime()}>
+                  <div class="w-full text-3xl font-semibold md:text-5xl">{formatDate(group.date)}</div>
+                  {group.tasks.map((task) => (
+                    <Task
+                      name={task.name}
+                      key={task.id}
+                      checked={task.checked}
+                      onClick={() => {
+                        setIsOpen(true);
+                        setIsEdit(true);
+                        setEditContent(task);
+                        setCalendarDate(task.date);
+                      }}
+                      onMarkClick={() => {
+                        setTasks(tasks.map((t) => (t.id === task.id ? { ...t, checked: !t.checked } : t)));
+                      }}
+                    />
+                  ))}
+                </div>
+              ))}
+            </div>
+          </>
+        ) : (
           <div class="flex w-full flex-1 flex-col items-center justify-center text-2xl">Начни уже сегодня!</div>
-          <div class="group fixed right-1 bottom-16 flex flex-row items-center justify-start space-x-3 overflow-x-hidden py-2 md:right-[22rem] md:bottom-4">
+        )
-            <div
+      ) : (
-              class="flex aspect-square h-20 cursor-pointer items-center justify-center rounded-full bg-[rgb(251,194,199,0.53)] text-9xl text-white shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] transition-all duration-300 ease-out hover:bg-[rgb(251,194,199,0.7)]"
+        <div class={classes.tasks_container}>
-              onClick={() => {
+          <div class="mb-8 flex w-full flex-row items-center justify-between text-xl font-semibold sm:text-3xl md:text-5xl">
-                setIsCreating(true);
+            {searchQuery ? "Результаты поиска" : "Результаты фильтрации"}
-                setIsOpen(true);
+            <div class="flex flex-row items-center gap-2 md:hidden">
-              }}
+              {!openSearchModal && (
-            >
+                <div
-              <PlusIcon />
+                  class="flex aspect-square h-12 cursor-pointer flex-col items-center justify-center rounded-full bg-[rgba(206,232,251,0.7)] text-xl text-gray-600 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] hover:bg-[rgba(206,232,251,0.9)]"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    if (!openSearchModal) setOpenFilterModal(false);
+                    setOpenSearchModal(!openSearchModal);
+                  }}
+                >
+                  <MagnifyingGlassIcon class="size-6" />
+                </div>
+              )}
+              <div class="flex aspect-square h-12 cursor-pointer flex-col items-center justify-center rounded-full bg-[rgba(206,232,251,0.7)] text-xl text-gray-600 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] hover:bg-[rgba(206,232,251,0.9)]">
+                <FunnelIcon
+                  class="size-6"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    if (!openFilterModal) setOpenSearchModal(false);
+                    setOpenFilterModal(!openFilterModal);
+                  }}
+                />
+              </div>
             </div>
           </div>
-        </>
+          {filteredTasks.length > 0 ? (
+            filteredTasks.map((task) => (
+              <Task
+                name={task.name}
+                key={task.id}
+                checked={task.checked}
+                overdue={task.date < new Date()}
+                onClick={() => {
+                  setIsOpen(true);
+                  setIsEdit(true);
+                  setEditContent(task);
+                  setCalendarDate(task.date);
+                }}
+                onMarkClick={() => {
+                  setTasks(tasks.map((t) => (t.id === task.id ? { ...t, checked: !t.checked } : t)));
+                }}
+              />
+            ))
+          ) : (
+            <div class="w-full text-center text-xl">
+              {searchQuery ? "Ничего не найдено" : "Нет задач с выбранными фильтрами"}
+            </div>
+          )}
+        </div>
+      )}
+      <div class="group fixed right-1 bottom-16 flex flex-row items-center justify-start space-x-3 overflow-x-hidden py-2 md:right-[22rem] md:bottom-4">
+        <div
+          class="flex aspect-square h-20 cursor-pointer items-center justify-center rounded-full bg-[rgb(251,194,199,0.53)] text-9xl text-white shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] transition-all duration-300 ease-out group-hover:ml-[12rem] hover:bg-[rgb(251,194,199,0.7)]"
+          onClick={() => {
+            setIsCreating(true);
+            setIsOpen(true);
+          }}
+        >
+          <PlusIcon />
+        </div>
+        <div class="absolute left-0 my-auto hidden flex-row space-x-3 opacity-0 transition-opacity duration-100 group-hover:opacity-100 md:flex">
+          <div
+            class="pointer-events-none flex aspect-square h-20 cursor-pointer flex-col items-center justify-center rounded-full bg-[rgba(206,232,251,0.7)] text-xl text-gray-600 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] group-hover:pointer-events-auto hover:bg-[rgba(206,232,251,0.9)]"
+            onClick={(e) => {
+              e.stopPropagation();
+              if (!openSearchModal) setOpenFilterModal(false);
+              setOpenSearchModal(!openSearchModal);
+            }}
+          >
+            <MagnifyingGlassIcon class="size-12" />
+          </div>
+          <div class="pointer-events-none flex aspect-square h-20 cursor-pointer flex-col items-center justify-center rounded-full bg-[rgba(206,232,251,0.7)] text-xl text-gray-600 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] group-hover:pointer-events-auto hover:bg-[rgba(206,232,251,0.9)]">
+            <FunnelIcon
+              class="size-12"
+              onClick={(e) => {
+                e.stopPropagation();
+                if (!openFilterModal) setOpenSearchModal(false);
+                setOpenFilterModal(!openFilterModal);
+              }}
+            />
+          </div>
+        </div>
+      </div>
+      {openSearchModal && (
+        <div class="fixed bottom-28 z-50 w-full rounded-lg bg-white p-4 shadow-lg md:absolute md:right-[24rem] md:mx-0 md:w-80">
+          {/* Пофиксить разфокус при вводе */}
+          <div class="flex items-center gap-2">
+            <MagnifyingGlassIcon class="size-6 text-gray-400" />
+            <input
+              type="text"
+              class="w-full rounded-lg border-0 px-4 py-2 outline-none"
+              placeholder="Поиск"
+              ref={searchInputRef}
+              value={searchQuery}
+              onInput={(e) => {
+                setSearchQuery((e.target as HTMLInputElement).value);
+              }}
+            />
+            <XMarkIcon
+              class="size-5 cursor-pointer text-gray-400 hover:text-gray-600"
+              onClick={() => {
+                setSearchQuery("");
+                setOpenSearchModal(false);
+              }}
+            />
+          </div>
+        </div>
+      )}
+      {openFilterModal && (
+        <div class="fixed top-[50%] z-50 w-full rounded-[2rem] bg-white p-4 shadow-lg md:absolute md:top-auto md:right-[24rem] md:bottom-28 md:w-80">
+          <div class="flex flex-col gap-4">
+            <div class="text-center text-lg font-semibold">Фильтры</div>
+            <div class="flex flex-col gap-2">
+              <div class="flex flex-row gap-2">
+                <Checkbox
+                  name="overdue"
+                  checked={filterTags.overdue}
+                  onChange={(e) => {
+                    setFilterTags({ ...filterTags, overdue: e.target.checked! });
+                  }}
+                  pt={{
+                    root: {
+                      className: cn("cursor-pointer inline-flex relative select-none align-bottom", "w-6 h-6"),
+                    },
+                    input: {
+                      className: cn(
+                        "absolute appearance-none top-0 left-0 size-full p-0 m-0 opacity-0 z-10 outline-none cursor-pointer"
+                      ),
+                    },
+                    box: ({ props, context }: CheckboxPassThroughMethodOptions) => ({
+                      className: cn(
+                        "flex items-center justify-center",
+                        "border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200",
+                        {
+                          "border-gray-300 bg-white": !context.checked,
+                          "border-blue-500 bg-blue-500": context.checked,
+                        },
+                        {
+                          "hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]":
+                            !props.disabled,
+                          "cursor-default opacity-60": props.disabled,
+                        }
+                      ),
+                    }),
+                    icon: {
+                      className: "w-4 h-4 transition-all duration-200 text-white text-base",
+                    },
+                  }}
+                ></Checkbox>
+                <label htmlFor="overdue" class="cursor-pointer">
+                  Просроченные
+                </label>
+              </div>
+              <div class="relative">
+                <div
+                  class={cn(
+                    "flex cursor-pointer items-center justify-center gap-2 rounded-lg bg-[rgba(206,232,251,0.7)] px-4 py-2",
+                    {
+                      "bg-[rgba(206,232,251,0.9)]": filterTags.first,
+                    }
+                  )}
+                  onClick={() => {
+                    setOpenFirstList(!openFirstList);
+                    setOpenSecondList(false);
+                  }}
+                >
+                  <BookOpenIcon class="size-5" />
+                  <span>{filterTags.first || "Предмет"}</span>
+                </div>
+                {openFirstList && (
+                  <div class="absolute top-full right-0 z-50 w-64 rounded-lg bg-white p-2 shadow-lg md:top-0 md:right-full md:mr-2">
+                    {example_tags.first.map((tag) => (
+                      <div
+                        key={tag}
+                        class="group flex cursor-pointer items-center gap-2 rounded-lg px-4 py-2 hover:bg-[rgba(206,232,251,0.3)]"
+                        onClick={() => {
+                          setFilterTags({ ...filterTags, first: tag });
+                          setOpenFirstList(false);
+                        }}
+                      >
+                        <div
+                          class={cn("flex h-5 w-5 items-center justify-center rounded-full border-2", {
+                            "border-[#FBC2C7] bg-[#FBC2C7]": filterTags.first === tag,
+                            "border-[#D4D4D4]": filterTags.first !== tag,
+                          })}
+                        >
+                          {filterTags.first === tag && <div class="h-2.5 w-2.5 rounded-full bg-white" />}
+                        </div>
+                        <span class="text-sm font-medium text-[#404040]">{tag}</span>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+
+              <div class="relative">
+                <div
+                  class={cn(
+                    "flex cursor-pointer items-center justify-center gap-2 rounded-lg bg-[rgba(206,232,251,0.7)] px-4 py-2",
+                    {
+                      "bg-[rgba(206,232,251,0.9)]": filterTags.second,
+                    }
+                  )}
+                  onClick={() => {
+                    setOpenSecondList(!openSecondList);
+                    setOpenFirstList(false);
+                  }}
+                >
+                  <DocumentDuplicateIcon class="size-5" />
+                  <span>{filterTags.second || "Задача"}</span>
+                </div>
+                {openSecondList && (
+                  <div class="absolute top-full right-0 z-50 w-64 rounded-lg bg-white p-2 shadow-lg md:top-0 md:right-full md:mr-2">
+                    {example_tags.second.map((tag) => (
+                      <div
+                        key={tag}
+                        class="group flex cursor-pointer items-center gap-2 rounded-lg px-4 py-2 hover:bg-[rgba(206,232,251,0.3)]"
+                        onClick={() => {
+                          setFilterTags({ ...filterTags, second: tag });
+                          setOpenSecondList(false);
+                        }}
+                      >
+                        <div
+                          class={cn("flex h-5 w-5 items-center justify-center rounded-full border-2", {
+                            "border-[#FBC2C7] bg-[#FBC2C7]": filterTags.second === tag,
+                            "border-[#D4D4D4]": filterTags.second !== tag,
+                          })}
+                        >
+                          {filterTags.second === tag && <div class="h-2.5 w-2.5 rounded-full bg-white" />}
+                        </div>
+                        <span class="text-sm font-medium text-[#404040]">{tag}</span>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+
+              {(filterTags.first || filterTags.second || filterTags.overdue) && (
+                <button
+                  class="mt-2 w-full rounded-lg bg-red-100 px-4 py-2 text-red-600 hover:bg-red-200"
+                  onClick={() => {
+                    setFilterTags({ first: "", second: "", overdue: false });
+                    setOpenFirstList(false);
+                    setOpenSecondList(false);
+                  }}
+                >
+                  Сбросить фильтры
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
       )}
     </div>
   );