feat: status-system

src/components/menu.tsx

@@ -4,6 +4,8 @@ import { FunctionComponent, h } from "preact";
 import { useLocation } from "preact-iso";
 import { tv } from "tailwind-variants";
 import classes from "./menu.module.scss";
+import { calculatePoints, getCurrentStatus } from "@/utils/status-system";
+import { useEffect, useState } from "preact/hooks";
 
 interface MenuItemProps {
   title: string;
@@ -34,9 +36,33 @@ const MenuItem: FunctionComponent<MenuItemProps> = ({ title, link, icon }: MenuI
   );
 };
 
+
 const Avatar: FunctionComponent = () => {
+  const [status, setStatus] = useState("");
   const { route, path } = useLocation();
-  //TODO: Move styles to scss module
+
+  useEffect(() => {
+    const updateStatus = () => {
+      const tasks = JSON.parse(localStorage.getItem("tasks") || "[]");
+      const completedTasks = tasks.filter((task: { checked: boolean }) => task.checked).length;
+      const points = calculatePoints(completedTasks);
+      setStatus(getCurrentStatus(points));
+    };
+
+    // Initial update
+    updateStatus();
+
+    // Update when tasks change
+    const handleStorage = (e: StorageEvent) => {
+      if (e.key === "tasks") {
+        updateStatus();
+      }
+    };
+    
+    window.addEventListener('storage', handleStorage);
+    return () => window.removeEventListener('storage', handleStorage);
+  }, []);
+
   return (
     <button
       onClick={() => route("/profile/settings")}
@@ -52,7 +78,7 @@ const Avatar: FunctionComponent = () => {
         <div class="my-5 aspect-square h-full rounded-full bg-white"></div>
         <div class="flex flex-col items-center justify-center">
           <p class="text-3xl font-semibold">никнейм</p>
-          <div class="rounded-[1rem] bg-white px-5 leading-5 font-light italic">статус</div>
+          <div class="rounded-[1rem] bg-white px-5 leading-5 font-light italic">{status}</div>
         </div>
       </div>
     </button>

src/components/task.tsx

@@ -32,7 +32,6 @@ const markStyle = tv({
 
 const Task: FunctionComponent<TaskProps> = ({ name, checked = false, onClick = () => {}, onMarkClick = () => {} }) => {
   return (
-    // Временное действие для тестирования
     <div class="w-[95%]">
       <div class={classes.task} onClick={onClick}>
         <div