From d69984c51decff454693a3da4926c29b4c610525 Mon Sep 17 00:00:00 2001
From: gohan5858 <88976739+gohan5858@users.noreply.github.com>
Date: Sun, 27 Oct 2024 01:10:30 +0900
Subject: [PATCH 1/8] =?UTF-8?q?rename:=20=E3=83=91=E3=82=B9=E5=90=8D?=
 =?UTF-8?q?=E3=82=92=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3?=
 =?UTF-8?q?=E3=83=88=E5=90=8D=E3=81=AB=E5=90=88=E3=81=86=E3=82=88=E3=81=86?=
 =?UTF-8?q?=E3=81=AB=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 task_yell/src/app/{enhanced-calendar-todo-app => home}/page.tsx | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename task_yell/src/app/{enhanced-calendar-todo-app => home}/page.tsx (100%)

diff --git a/task_yell/src/app/enhanced-calendar-todo-app/page.tsx b/task_yell/src/app/home/page.tsx
similarity index 100%
rename from task_yell/src/app/enhanced-calendar-todo-app/page.tsx
rename to task_yell/src/app/home/page.tsx

From d083d60c7dc785ed5000a587605aa4e0612a9ce9 Mon Sep 17 00:00:00 2001
From: gohan5858 <88976739+gohan5858@users.noreply.github.com>
Date: Sun, 27 Oct 2024 01:38:02 +0900
Subject: [PATCH 2/8] =?UTF-8?q?chang:=20=E6=9C=80=E6=96=B0=E3=81=AEHome?=
 =?UTF-8?q?=E3=83=93=E3=83=A5=E3=83=BC=E3=81=AB=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 task_yell/src/app/home/page.tsx | 888 ++++++++++++++++++++++++--------
 1 file changed, 661 insertions(+), 227 deletions(-)

diff --git a/task_yell/src/app/home/page.tsx b/task_yell/src/app/home/page.tsx
index a2b2967..a8a273b 100644
--- a/task_yell/src/app/home/page.tsx
+++ b/task_yell/src/app/home/page.tsx
@@ -1,18 +1,21 @@
 "use client";
 
-import { useState, useEffect, useMemo } from "react";
-import { motion, AnimatePresence } from "framer-motion";
 import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
 import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
 import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from "@/components/ui/sheet";
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import {
   Select,
   SelectContent,
@@ -21,43 +24,42 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import {
-  Menu,
-  CalendarIcon,
-  ChevronLeft,
-  ChevronRight,
-  Edit,
-  Trash2,
-  MapPinIcon,
-  UserPlusIcon,
-} from "lucide-react";
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
 import {
-  format,
-  startOfMonth,
-  endOfMonth,
-  eachDayOfInterval,
-  isSameMonth,
-  isSameDay,
   addMonths,
-  subMonths,
+  eachDayOfInterval,
+  endOfMonth,
+  format,
   getDay,
-  isToday,
   isFuture,
+  isSameDay,
+  isSameMonth,
+  isToday,
+  startOfMonth,
+  subMonths,
 } from "date-fns";
 import { ja } from "date-fns/locale";
-import { Calendar } from "@/components/ui/calendar";
+import { AnimatePresence, motion, useDragControls } from "framer-motion";
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Label } from "@/components/ui/label";
-import { Switch } from "@/components/ui/switch";
+  CalendarIcon,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  Edit,
+  MapPinIcon,
+  Menu,
+  Trash2,
+  UserPlusIcon,
+  X,
+} from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
 
 type Priority = "low" | "medium" | "high";
 type Category = "work" | "personal" | "shopping" | "health" | "other";
@@ -226,148 +228,165 @@ function EventCreator({
   };
 
   return (
-    <div className="space-y-4">
-      <div className="flex items-center space-x-2">
-        <Checkbox
-          id="is-task"
-          checked={isTask}
-          onCheckedChange={(checked) => setIsTask(checked as boolean)}
-        />
-        <Label htmlFor="is-task">タスクにする</Label>
+    <div className="flex space-x-4">
+      <div className="w-2/5">
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-2">
+          <h3 className="text-sm font-semibold mb-2">
+            {format(date || new Date(), "yyyy年MM月dd日 (E)", { locale: ja })}
+          </h3>
+          <div className="space-y-1">
+            {Array.from({ length: 24 }).map((_, hour) => (
+              <div key={hour} className="flex items-center">
+                <span className="w-8 text-xs text-gray-500">{`${hour.toString().padStart(2, "0")}:00`}</span>
+                <div className="flex-1 h-4 border-t border-gray-200 dark:border-gray-700"></div>
+              </div>
+            ))}
+          </div>
+        </div>
       </div>
+      <div className="w-3/5 space-y-3">
+        <div className="flex items-center space-x-2">
+          <Checkbox
+            id="is-task"
+            checked={isTask}
+            onCheckedChange={(checked) => setIsTask(checked as boolean)}
+          />
+          <Label htmlFor="is-task">タスクにする</Label>
+        </div>
 
-      <Input
-        placeholder="タイトルを追加"
-        value={title}
-        onChange={(e) => setTitle(e.target.value)}
-      />
+        <Input
+          placeholder="タイトルを追加"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+        />
 
-      {!isTask && (
-        <>
-          <div className="flex items-center space-x-2">
-            <CalendarIcon className="text-gray-500" />
-            <Popover>
-              <PopoverTrigger asChild>
-                <Button variant="outline">
-                  {date
-                    ? format(date, "yyyy年MM月dd日 (E)", { locale: ja })
-                    : "日付を選択"}
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent className="w-auto p-0">
-                <Calendar
-                  mode="single"
-                  selected={date}
-                  onSelect={setDate}
-                  initialFocus
-                />
-              </PopoverContent>
-            </Popover>
-          </div>
+        {!isTask && (
+          <>
+            <div className="flex items-center space-x-2">
+              <CalendarIcon className="text-gray-500" />
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button variant="outline">
+                    {date
+                      ? format(date, "yyyy年MM月dd日 (E)", { locale: ja })
+                      : "日付を選択"}
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-auto p-0">
+                  <Calendar
+                    mode="single"
+                    selected={date}
+                    onSelect={setDate}
+                    initialFocus
+                  />
+                </PopoverContent>
+              </Popover>
+            </div>
+
+            <div className="flex items-center space-x-2">
+              <Select
+                value={startTime}
+                onValueChange={(value) => handleTimeChange(value, true)}
+              >
+                <SelectTrigger className="w-[180px]">
+                  <SelectValue placeholder="開始時間" />
+                </SelectTrigger>
+                <SelectContent>
+                  {timeOptions.map((time) => (
+                    <SelectItem key={time} value={time}>
+                      {time}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <span>-</span>
+              <Select
+                value={endTime}
+                onValueChange={(value) => handleTimeChange(value, false)}
+              >
+                <SelectTrigger className="w-[180px]">
+                  <SelectValue placeholder="終了時間" />
+                </SelectTrigger>
+                <SelectContent>
+                  {timeOptions.map((time) => (
+                    <SelectItem key={time} value={time}>
+                      {time}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <Textarea
+              placeholder="説明を追加"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+            />
+
+            <div className="flex items-center space-x-2">
+              <UserPlusIcon className="text-gray-500" />
+              <Input
+                placeholder="招待"
+                value={invitees}
+                onChange={(e) => setInvitees(e.target.value)}
+              />
+            </div>
+
+            <div className="flex items-center space-x-2">
+              <MapPinIcon className="text-gray-500" />
+              <Input
+                placeholder="場所または会議URLを追加"
+                value={location}
+                onChange={(e) => setLocation(e.target.value)}
+              />
+            </div>
 
-          <div className="flex items-center space-x-2">
             <Select
-              value={startTime}
-              onValueChange={(value) => handleTimeChange(value, true)}
+              value={category}
+              onValueChange={(value: Category) => setCategory(value)}
             >
-              <SelectTrigger className="w-[180px]">
-                <SelectValue placeholder="開始時間" />
+              <SelectTrigger className="w-full">
+                <SelectValue placeholder="カテゴリを選択" />
               </SelectTrigger>
               <SelectContent>
-                {timeOptions.map((time) => (
-                  <SelectItem key={time} value={time}>
-                    {time}
-                  </SelectItem>
-                ))}
+                <SelectItem value="work">仕事</SelectItem>
+                <SelectItem value="personal">個人</SelectItem>
+                <SelectItem value="shopping">買い物</SelectItem>
+                <SelectItem value="health">健康</SelectItem>
+                <SelectItem value="other">その他</SelectItem>
               </SelectContent>
             </Select>
-            <span>-</span>
+
             <Select
-              value={endTime}
-              onValueChange={(value) => handleTimeChange(value, false)}
+              value={priority}
+              onValueChange={(value: Priority) => setPriority(value)}
             >
-              <SelectTrigger className="w-[180px]">
-                <SelectValue placeholder="終了時間" />
+              <SelectTrigger className="w-full">
+                <SelectValue placeholder="重要度を選択" />
               </SelectTrigger>
               <SelectContent>
-                {timeOptions.map((time) => (
-                  <SelectItem key={time} value={time}>
-                    {time}
-                  </SelectItem>
-                ))}
+                <SelectItem value="low">低</SelectItem>
+                <SelectItem value="medium">中</SelectItem>
+                <SelectItem value="high">高</SelectItem>
               </SelectContent>
             </Select>
-          </div>
-
-          <Textarea
-            placeholder="説明を追加"
-            value={description}
-            onChange={(e) => setDescription(e.target.value)}
-          />
-
-          <div className="flex items-center space-x-2">
-            <UserPlusIcon className="text-gray-500" />
-            <Input
-              placeholder="招待"
-              value={invitees}
-              onChange={(e) => setInvitees(e.target.value)}
-            />
-          </div>
-
-          <div className="flex items-center space-x-2">
-            <MapPinIcon className="text-gray-500" />
-            <Input
-              placeholder="場所または会議URLを追加"
-              value={location}
-              onChange={(e) => setLocation(e.target.value)}
-            />
-          </div>
-
-          <Select
-            value={category}
-            onValueChange={(value: Category) => setCategory(value)}
-          >
-            <SelectTrigger className="w-full">
-              <SelectValue placeholder="カテゴリを選択" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="work">仕事</SelectItem>
-              <SelectItem value="personal">個人</SelectItem>
-              <SelectItem value="shopping">買い物</SelectItem>
-              <SelectItem value="health">健康</SelectItem>
-              <SelectItem value="other">その他</SelectItem>
-            </SelectContent>
-          </Select>
-
-          <Select
-            value={priority}
-            onValueChange={(value: Priority) => setPriority(value)}
-          >
-            <SelectTrigger className="w-full">
-              <SelectValue placeholder="重要度を選択" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="low">低</SelectItem>
-              <SelectItem value="medium">中</SelectItem>
-              <SelectItem value="high">高</SelectItem>
-            </SelectContent>
-          </Select>
-          <div className="flex items-center space-x-2">
-            <Checkbox
-              id="is-locked"
-              checked={isLocked}
-              onCheckedChange={(checked) => setIsLocked(checked as boolean)}
-            />
-            <Label htmlFor="is-locked">ロックする</Label>
-          </div>
-        </>
-      )}
+            <div className="flex items-center space-x-2">
+              <Checkbox
+                id="is-locked"
+                checked={isLocked}
+                onCheckedChange={(checked) => setIsLocked(checked as boolean)}
+              />
+              <Label htmlFor="is-locked">ロックする</Label>
+            </div>
+          </>
+        )}
 
-      <div className="flex justify-end space-x-2">
-        <Button variant="outline" onClick={onCancel}>
-          キャンセル
-        </Button>
-        <Button onClick={handleSave}>保存</Button>
+        <div className="flex justify-end space-x-2">
+          <Button variant="outline" onClick={onCancel}>
+            キャンセル
+          </Button>
+          <Button onClick={handleSave}>保存</Button>
+        </div>
       </div>
     </div>
   );
@@ -376,25 +395,27 @@ function EventCreator({
 export default function Page() {
   const [todos, setTodos] = useState<Todo[]>([]);
   const [events, setEvents] = useState<Event[]>([]);
+  const [newTodo, setNewTodo] = useState("");
   const [selectedDate, setSelectedDate] = useState<Date>(new Date());
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [todoDate, setTodoDate] = useState<Date>(selectedDate);
   const [selectedDateTodos, setSelectedDateTodos] = useState<Todo[]>([]);
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [priority, setPriority] = useState<Priority>("medium");
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [category, setCategory] = useState<Category>("other");
   const [currentMonth, setCurrentMonth] = useState(new Date());
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [modalState, setModalState] = useState<
+    "minimized" | "partial" | "full"
+  >("partial");
   const [searchTerm, setSearchTerm] = useState("");
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [editingTodo, setEditingTodo] = useState<Todo | null>(null);
   const [isDarkMode, setIsDarkMode] = useState(false);
   const [isEventModalOpen, setIsEventModalOpen] = useState(false);
+  const dragControls = useDragControls();
+  const modalRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     const filteredTodos = todos.filter((todo) =>
-      isSameDay(todo.date, selectedDate),
+      isSameDay(todo.date, selectedDate)
     );
     setSelectedDateTodos(filteredTodos);
   }, [selectedDate, todos]);
@@ -407,14 +428,35 @@ export default function Page() {
     }
   }, [isDarkMode]);
 
+  const addTodo = () => {
+    if (newTodo.trim() && todoDate) {
+      const newTodoItem = {
+        id: Date.now(),
+        text: newTodo,
+        completed: false,
+        date: todoDate,
+        priority,
+        category,
+      };
+      setTodos([...todos, newTodoItem]);
+      setNewTodo("");
+      setTodoDate(new Date());
+      setPriority("medium");
+      setCategory("other");
+      if (isSameDay(todoDate, selectedDate)) {
+        setSelectedDateTodos([...selectedDateTodos, newTodoItem]);
+      }
+    }
+  };
+
   const toggleTodo = (id: number) => {
     const updatedTodos = todos.map((todo) =>
-      todo.id === id ? { ...todo, completed: !todo.completed } : todo,
+      todo.id === id ? { ...todo, completed: !todo.completed } : todo
     );
     setTodos(updatedTodos);
     if (selectedDate) {
       const updatedSelectedDateTodos = selectedDateTodos.map((todo) =>
-        todo.id === id ? { ...todo, completed: !todo.completed } : todo,
+        todo.id === id ? { ...todo, completed: !todo.completed } : todo
       );
       setSelectedDateTodos(updatedSelectedDateTodos);
     }
@@ -424,6 +466,14 @@ export default function Page() {
     setEditingTodo(todo);
   };
 
+  const updateTodo = (updatedTodo: Todo) => {
+    const updatedTodos = todos.map((todo) =>
+      todo.id === updatedTodo.id ? updatedTodo : todo
+    );
+    setTodos(updatedTodos);
+    setEditingTodo(null);
+  };
+
   const deleteTodo = (id: number) => {
     const updatedTodos = todos.filter((todo) => todo.id !== id);
     setTodos(updatedTodos);
@@ -455,54 +505,108 @@ export default function Page() {
     const baseColor = isDarkMode ? "bg-red-" : "bg-red-";
     const intensity = Math.min(count * 100, 900);
     const colorClass = `${baseColor}${intensity}`;
-    if (count >= 3) {
-      return `${colorClass} animate-bounce shadow-lg`;
-    }
-    return colorClass;
+    return `${colorClass} ${count >= 3 ? "animate-pulse" : ""}`;
   };
 
   const renderCalendar = () => {
     const days = getDaysInMonth(currentMonth);
     const firstDayOfMonth = getDay(days[0]);
+    const weeks = Math.ceil((days.length + firstDayOfMonth) / 7);
 
     return (
-      <div className="grid grid-cols-7 gap-1 bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
-        {["日", "月", "火", "水", "木", "金", "土"].map((day) => (
-          <div
-            key={day}
-            className="text-center font-semibold text-gray-600 dark:text-gray-300 p-2"
-          >
-            {day}
-          </div>
-        ))}
-        {Array(firstDayOfMonth)
-          .fill(null)
-          .map((_, index) => (
-            <div key={`empty-${index}`} className="p-2"></div>
+      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
+        <div className="grid grid-cols-7 gap-1">
+          {["日", "月", "火", "水", "木", "金", "土"].map((day) => (
+            <div
+              key={day}
+              className="text-center font-semibold text-gray-600 dark:text-gray-300 p-2"
+            >
+              {day}
+            </div>
           ))}
-        {days.map((day) => {
-          const todoCount = getTodoCountForDay(day);
-          const eventCount = getEventCountForDay(day);
-          const isSelected = isSameDay(day, selectedDate);
-          const isCurrentMonth = isSameMonth(day, currentMonth);
+        </div>
+        {Array.from({ length: weeks }).map((_, weekIndex) => {
+          const weekDays = days.slice(
+            weekIndex * 7 - firstDayOfMonth,
+            (weekIndex + 1) * 7 - firstDayOfMonth
+          );
+          const maxEventsInWeek = Math.max(
+            ...weekDays.map((day) =>
+              day ? getTodoCountForDay(day) + getEventCountForDay(day) : 0
+            )
+          );
+          const weekHeight =
+            maxEventsInWeek > 2 ? Math.min(maxEventsInWeek * 20, 100) : "auto";
 
           return (
-            <motion.div
-              key={day.toISOString()}
-              className={`p-2 border rounded-md cursor-pointer transition-all duration-300 ${isSelected ? "border-blue-300 dark:border-blue-600" : ""} ${
-                !isCurrentMonth ? "text-gray-400 dark:text-gray-600" : ""
-              } ${getTaskIndicatorStyle(todoCount, eventCount)} hover:bg-gray-100 dark:hover:bg-gray-700`}
-              onClick={() => handleDateSelect(day)}
-              whileHover={{ scale: 1.1 }}
-              whileTap={{ scale: 0.95 }}
+            <div
+              key={weekIndex}
+              className="grid grid-cols-7 gap-1"
+              style={{ minHeight: "100px", height: weekHeight }}
             >
-              <div className="text-center">{format(day, "d")}</div>
-              {(todoCount > 0 || eventCount > 0) && (
-                <div className="text-xs text-center mt-1 font-bold">
-                  {todoCount + eventCount}
-                </div>
-              )}
-            </motion.div>
+              {Array(7)
+                .fill(null)
+                .map((_, dayIndex) => {
+                  const day = weekDays[dayIndex];
+                  if (!day)
+                    return (
+                      <div
+                        key={`empty-${weekIndex}-${dayIndex}`}
+                        className="p-1"
+                      ></div>
+                    );
+
+                  const todoCount = getTodoCountForDay(day);
+                  const eventCount = getEventCountForDay(day);
+                  const isSelected = isSameDay(day, selectedDate);
+                  const isCurrentMonth = isSameMonth(day, currentMonth);
+                  const dayItems = [
+                    ...todos.filter((todo) => isSameDay(todo.date, day)),
+                    ...events.filter((event) => isSameDay(event.start, day)),
+                  ];
+
+                  return (
+                    <motion.div
+                      key={day.toISOString()}
+                      className={`p-1 border rounded-md cursor-pointer transition-all duration-300 overflow-hidden ${
+                        isSelected ? "border-blue-300 dark:border-blue-600" : ""
+                      } ${
+                        !isCurrentMonth
+                          ? "text-gray-400 dark:text-gray-600"
+                          : ""
+                      } ${getTaskIndicatorStyle(todoCount, eventCount)} hover:bg-gray-100 dark:hover:bg-gray-700`}
+                      onClick={() => handleDateSelect(day)}
+                      whileHover={{ scale: 1.05 }}
+                      whileTap={{ scale: 0.95 }}
+                    >
+                      <div className="text-right text-sm">
+                        {format(day, "d")}
+                      </div>
+                      {(todoCount > 0 || eventCount > 0) && (
+                        <div className="mt-1 space-y-1">
+                          {dayItems.slice(0, 2).map((item, index) => (
+                            <div
+                              key={index}
+                              className={`text-xs p-1 rounded ${
+                                "text" in item
+                                  ? priorityColors[item.priority]
+                                  : priorityColors[item.priority]
+                              }`}
+                            >
+                              {"text" in item ? item.text : item.title}
+                            </div>
+                          ))}
+                          {dayItems.length > 2 && (
+                            <div className="text-xs text-center font-bold">
+                              +{dayItems.length - 2} more
+                            </div>
+                          )}
+                        </div>
+                      )}
+                    </motion.div>
+                  );
+                })}
+            </div>
           );
         })}
       </div>
@@ -521,7 +625,11 @@ export default function Page() {
       animate={{ opacity: 1, y: 0 }}
       exit={{ opacity: 0, y: -20 }}
       transition={{ duration: 0.3 }}
-      className={`flex items-center p-2 rounded ${todo.completed ? "bg-gray-200 dark:bg-gray-700" : priorityColors[todo.priority]} transition-colors duration-200`}
+      className={`flex items-center p-2 rounded ${
+        todo.completed
+          ? "bg-gray-200 dark:bg-gray-700"
+          : priorityColors[todo.priority]
+      } transition-colors duration-200`}
     >
       <Checkbox
         id={`todo-${todo.id}`}
@@ -577,12 +685,11 @@ export default function Page() {
     </motion.div>
   );
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const filteredTodos = useMemo(() => {
     return todos.filter(
       (todo) =>
         todo.text.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        format(todo.date, "yyyy/MM/dd").includes(searchTerm),
+        format(todo.date, "yyyy/MM/dd").includes(searchTerm)
     );
   }, [todos, searchTerm]);
 
@@ -591,13 +698,22 @@ export default function Page() {
       (event) =>
         event.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
         event.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        format(event.start, "yyyy/MM/dd").includes(searchTerm),
+        format(event.start, "yyyy/MM/dd").includes(searchTerm)
     );
   }, [events, searchTerm]);
 
+  const sortedTodos = useMemo(() => {
+    return [...filteredTodos].sort((a, b) => {
+      if (a.completed === b.completed) {
+        return b.date.getTime() - a.date.getTime();
+      }
+      return a.completed ? 1 : -1;
+    });
+  }, [filteredTodos]);
+
   const sortedEvents = useMemo(() => {
     return [...filteredEvents].sort(
-      (a, b) => b.start.getTime() - a.start.getTime(),
+      (a, b) => b.start.getTime() - a.start.getTime()
     );
   }, [filteredEvents]);
 
@@ -606,11 +722,18 @@ export default function Page() {
     .sort((a, b) => a.date.getTime() - b.date.getTime())
     .slice(0, 5);
 
+  const handleStatusBarClick = () => {
+    setModalState((prevState) => {
+      if (prevState === "minimized") return "partial";
+      if (prevState === "partial") return "full";
+      return "partial";
+    });
+  };
+
   return (
     <div
       className={`relative h-screen bg-gray-100 dark:bg-gray-900 overflow-hidden ${isDarkMode ? "dark" : ""}`}
     >
-      {/* ハンバーガーメニューとその中身 */}
       <Sheet>
         <SheetTrigger asChild>
           <Button
@@ -640,10 +763,8 @@ export default function Page() {
       </Sheet>
 
       <div className="flex flex-col lg:flex-row h-full pt-20 px-4">
-        {/* 以下divタグが全体ページ左側 */}
         <div className="w-full lg:w-1/2 pr-2 overflow-auto">
           <div className="mb-4 flex justify-between items-center">
-            {/* カレンダーを先月に移動するボタン */}
             <Button
               variant="outline"
               size="icon"
@@ -651,13 +772,9 @@ export default function Page() {
             >
               <ChevronLeft className="h-4 w-4" />
             </Button>
-
-            {/* 現在表示中の月 */}
             <h2 className="text-xl lg:text-2xl font-bold dark:text-white">
               {format(currentMonth, "yyyy年MM月", { locale: ja })}
             </h2>
-
-            {/* カレンダーを次月にするボタン */}
             <Button
               variant="outline"
               size="icon"
@@ -666,13 +783,82 @@ export default function Page() {
               <ChevronRight className="h-4 w-4" />
             </Button>
           </div>
-
-          {/* カレンダーをレンダリング */}
           {renderCalendar()}
         </div>
 
-        {/* 以下divタグが全体ページ右側 */}
         <div className="w-full lg:w-1/2 pl-2 bg-white dark:bg-gray-800 overflow-auto lg:block hidden">
+          <h2 className="text-xl lg:text-2xl font-bold mb-4 dark:text-white">
+            TODO リスト
+          </h2>
+          <div className="flex flex-col lg:flex-row mb-4 space-y-2 lg:space-y-0 lg:space-x-2">
+            <Input
+              type="text"
+              value={newTodo}
+              onChange={(e) => setNewTodo(e.target.value)}
+              placeholder="新しいタスクを入力"
+              className="flex-grow"
+            />
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button variant="outline" className="w-full lg:w-auto">
+                  {format(todoDate, "yyyy-MM-dd")}
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="w-auto p-0">
+                <Calendar
+                  mode="single"
+                  selected={todoDate}
+                  onSelect={(date) => date && setTodoDate(date)}
+                  initialFocus
+                />
+              </PopoverContent>
+            </Popover>
+            <Select
+              value={priority}
+              onValueChange={(value: Priority) => setPriority(value)}
+            >
+              <SelectTrigger className="w-full lg:w-[180px]">
+                <SelectValue placeholder="重要度を選択" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="low">低</SelectItem>
+                <SelectItem value="medium">中</SelectItem>
+                <SelectItem value="high">高</SelectItem>
+              </SelectContent>
+            </Select>
+            <Select
+              value={category}
+              onValueChange={(value: Category) => setCategory(value)}
+            >
+              <SelectTrigger className="w-full lg:w-[180px]">
+                <SelectValue placeholder="カテゴリを選択" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="work">仕事</SelectItem>
+                <SelectItem value="personal">個人</SelectItem>
+                <SelectItem value="shopping">買い物</SelectItem>
+                <SelectItem value="health">健康</SelectItem>
+                <SelectItem value="other">その他</SelectItem>
+              </SelectContent>
+            </Select>
+            <Button onClick={addTodo} className="w-full lg:w-auto">
+              追加
+            </Button>
+          </div>
+          <div className="mb-4">
+            <Input
+              type="text"
+              placeholder="タスクを検索..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="w-full"
+            />
+          </div>
+          <AnimatePresence>
+            {sortedTodos.map((todo) => (
+              <TodoItem key={todo.id} todo={todo} />
+            ))}
+          </AnimatePresence>
           <h3 className="text-lg font-semibold mt-8 mb-4 dark:text-white">
             イベント
           </h3>
@@ -683,7 +869,6 @@ export default function Page() {
           </AnimatePresence>
         </div>
 
-        {/* 以下のdivタグ部分はスマホ画面のみ表示 */}
         <div className="mt-4 bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 lg:hidden">
           <h3 className="text-lg font-semibold mb-2 dark:text-white">
             直近のTODO
@@ -702,9 +887,258 @@ export default function Page() {
         </div>
       </div>
 
-      {/* 以下、カレンダーの日を押した時に出るダイアログ。 */}
+      <AnimatePresence>
+        {isModalOpen && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{
+              opacity: modalState === "minimized" ? 0 : 1,
+            }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 bg-black flex items-end justify-center z-50 lg:hidden"
+            style={{
+              backgroundColor:
+                modalState === "minimized"
+                  ? "transparent"
+                  : "rgba(0, 0, 0, 0.5)",
+              pointerEvents: modalState === "minimized" ? "none" : "auto",
+            }}
+            onClick={(e) => {
+              if (e.target === e.currentTarget && modalState !== "minimized") {
+                setIsModalOpen(false);
+              }
+            }}
+          >
+            <motion.div
+              ref={modalRef}
+              initial={{ y: "100%" }}
+              animate={{
+                y:
+                  modalState === "minimized"
+                    ? "calc(100% - 40px)"
+                    : modalState === "partial"
+                      ? "calc(100% - 400px)"
+                      : "0%",
+                height:
+                  modalState === "full"
+                    ? "100%"
+                    : modalState === "partial"
+                      ? "400px"
+                      : "40px",
+                transition: {
+                  type: "spring",
+                  damping: 30,
+                  stiffness: 300,
+                },
+              }}
+              exit={{ y: "100%" }}
+              transition={{ type: "spring", damping: 25, stiffness: 500 }}
+              drag="y"
+              dragControls={dragControls}
+              dragConstraints={{ top: 0, bottom: 0 }}
+              dragElastic={0.2}
+              onDragEnd={(_, info) => {
+                if (info.offset.y > 200) {
+                  setIsModalOpen(false);
+                } else if (info.offset.y < -20) {
+                  setModalState("full");
+                } else if (info.offset.y > 20 && info.offset.y <= 100) {
+                  setModalState("partial");
+                } else if (info.offset.y > 100) {
+                  setModalState("minimized");
+                }
+              }}
+              className="bg-white dark:bg-gray-800 w-full sm:w-96 md:w-[512px] rounded-t-xl shadow-lg overflow-hidden"
+              style={{
+                maxWidth: "calc(100% - 2rem)",
+                margin: "0 1rem",
+                height: modalState === "full" ? "calc(100% - 2rem)" : "auto",
+                maxHeight: "calc(100% - 2rem)",
+                zIndex: 60,
+              }}
+            >
+              <div
+                className="h-10 flex items-center justify-start cursor-pointer overflow-x-auto whitespace-nowrap px-4"
+                onClick={handleStatusBarClick}
+                onPointerDown={(e) => dragControls.start(e)}
+              >
+                <ChevronUp className="h-6 w-6 text-gray-400 flex-shrink-0" />
+                <span className="ml-2 text-sm text-gray-600 dark:text-gray-300">
+                  {format(selectedDate, "yyyy年MM月dd日", { locale: ja })}のTODO
+                </span>
+                {selectedDateTodos.length > 0 && (
+                  <span className="ml-2 text-sm text-gray-600 dark:text-gray-300">
+                    （{selectedDateTodos.length}件）
+                  </span>
+                )}
+              </div>
+              <div
+                className="p-4 overflow-y-auto"
+                style={{ maxHeight: "calc(100% - 40px)" }}
+              >
+                <div className="flex justify-between items-center mb-4">
+                  <h3 className="text-lg font-semibold dark:text-white">
+                    {format(selectedDate, "yyyy年MM月dd日", { locale: ja })}
+                    のTODO
+                  </h3>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => setIsModalOpen(false)}
+                  >
+                    <X className="h-6 w-6" />
+                  </Button>
+                </div>
+                <div className="space-y-4">
+                  <Input
+                    type="text"
+                    value={newTodo}
+                    onChange={(e) => setNewTodo(e.target.value)}
+                    placeholder="新しいタスクを入力"
+                    className="w-full"
+                  />
+                  <div className="flex space-x-2">
+                    <Popover>
+                      <PopoverTrigger asChild>
+                        <Button variant="outline" className="w-1/2">
+                          {format(todoDate, "yyyy-MM-dd")}
+                        </Button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-auto p-0">
+                        <Calendar
+                          mode="single"
+                          selected={todoDate}
+                          onSelect={(date) => date && setTodoDate(date)}
+                          initialFocus
+                        />
+                      </PopoverContent>
+                    </Popover>
+                    <Select
+                      value={priority}
+                      onValueChange={(value: Priority) => setPriority(value)}
+                    >
+                      <SelectTrigger className="w-1/2">
+                        <SelectValue placeholder="重要度" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="low">低</SelectItem>
+                        <SelectItem value="medium">中</SelectItem>
+                        <SelectItem value="high">高</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <Select
+                    value={category}
+                    onValueChange={(value: Category) => setCategory(value)}
+                  >
+                    <SelectTrigger className="w-full">
+                      <SelectValue placeholder="カテゴリを選択" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="work">仕事</SelectItem>
+                      <SelectItem value="personal">個人</SelectItem>
+                      <SelectItem value="shopping">買い物</SelectItem>
+                      <SelectItem value="health">健康</SelectItem>
+                      <SelectItem value="other">その他</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <Button onClick={addTodo} className="w-full">
+                    追加
+                  </Button>
+                  {selectedDateTodos.length > 0 ? (
+                    <ul className="space-y-2">
+                      {selectedDateTodos.map((todo) => (
+                        <li key={todo.id}>
+                          <TodoItem todo={todo} />
+                        </li>
+                      ))}
+                    </ul>
+                  ) : (
+                    <p className="dark:text-gray-300">
+                      この日のTODOはありません。
+                    </p>
+                  )}
+                </div>
+              </div>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      <Dialog open={!!editingTodo} onOpenChange={() => setEditingTodo(null)}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>タスクを編集</DialogTitle>
+          </DialogHeader>
+          {editingTodo && (
+            <div className="space-y-4">
+              <Input
+                type="text"
+                value={editingTodo.text}
+                onChange={(e) =>
+                  setEditingTodo({ ...editingTodo, text: e.target.value })
+                }
+                placeholder="タスクを入力"
+              />
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button variant="outline">
+                    {format(editingTodo.date, "yyyy-MM-dd")}
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-auto p-0">
+                  <Calendar
+                    mode="single"
+                    selected={editingTodo.date}
+                    onSelect={(date) =>
+                      date && setEditingTodo({ ...editingTodo, date })
+                    }
+                    initialFocus
+                  />
+                </PopoverContent>
+              </Popover>
+              <Select
+                value={editingTodo.priority}
+                onValueChange={(value: Priority) =>
+                  setEditingTodo({ ...editingTodo, priority: value })
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="重要度を選択" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="low">低</SelectItem>
+                  <SelectItem value="medium">中</SelectItem>
+                  <SelectItem value="high">高</SelectItem>
+                </SelectContent>
+              </Select>
+              <Select
+                value={editingTodo.category}
+                onValueChange={(value: Category) =>
+                  setEditingTodo({ ...editingTodo, category: value })
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="カテゴリを選択" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="work">仕事</SelectItem>
+                  <SelectItem value="personal">個人</SelectItem>
+                  <SelectItem value="shopping">買い物</SelectItem>
+                  <SelectItem value="health">健康</SelectItem>
+                  <SelectItem value="other">その他</SelectItem>
+                </SelectContent>
+              </Select>
+              <Button onClick={() => editingTodo && updateTodo(editingTodo)}>
+                更新
+              </Button>
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+
       <Dialog open={isEventModalOpen} onOpenChange={setIsEventModalOpen}>
-        <DialogContent className="max-w-4xl">
+        <DialogContent className="max-w-3xl">
           <DialogHeader>
             <DialogTitle>
               {format(selectedDate, "yyyy年MM月dd日", { locale: ja })}の予定

From 4c3cde9f592d3af2910824577439faaeeebddfa9 Mon Sep 17 00:00:00 2001
From: gohan5858 <88976739+gohan5858@users.noreply.github.com>
Date: Sun, 27 Oct 2024 03:38:04 +0900
Subject: [PATCH 3/8] =?UTF-8?q?refactor:=20=E6=97=A5=E4=BB=98=E5=85=A5?=
 =?UTF-8?q?=E5=8A=9B=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3?=
 =?UTF-8?q?=E3=83=88=E3=82=92=E4=BD=9C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ui/date-time-input.tsx     | 75 +++++++++++++++++++
 1 file changed, 75 insertions(+)
 create mode 100644 task_yell/src/components/ui/date-time-input.tsx

diff --git a/task_yell/src/components/ui/date-time-input.tsx b/task_yell/src/components/ui/date-time-input.tsx
new file mode 100644
index 0000000..de82cea
--- /dev/null
+++ b/task_yell/src/components/ui/date-time-input.tsx
@@ -0,0 +1,75 @@
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { CalendarIcon } from "@radix-ui/react-icons";
+
+import { format } from "date-fns";
+import { ja } from "date-fns/locale";
+import { useState } from "react";
+
+export function DateTimeInput({ className }: { className?: string }) {
+  const [date, setDate] = useState<Date | undefined>(new Date());
+  const [time, setTime] = useState("10:00");
+
+  const timeOptions = Array.from({ length: 96 }, (_, i) => {
+    const hours = Math.floor(i / 4)
+      .toString()
+      .padStart(2, "0");
+    const minutes = ((i % 4) * 15).toString().padStart(2, "0");
+    return `${hours}:${minutes}`;
+  });
+  const handleTimeChange = (time: string) => setTime(time);
+
+  return (
+    <div className={`flex flex-row ${className}`}>
+      <div className="flex flex-row items-center gap-2 w-full">
+        <CalendarIcon className="text-gray-500 w-6 h-6" />
+        <div className="flex flex-row w-full">
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button variant="outline">
+                {date
+                  ? format(date, "yyyy年MM月dd日 (E)", { locale: ja })
+                  : "日付を選択"}
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent>
+              <Calendar
+                mode="single"
+                selected={date ?? undefined}
+                onSelect={(day) => setDate(day ?? undefined)}
+                initialFocus
+              />
+            </PopoverContent>
+          </Popover>
+          <Select
+            value={"startTime"}
+            onValueChange={(value) => handleTimeChange(value)}
+          >
+            <SelectTrigger className="flex-grow">
+              <SelectValue placeholder="開始時間" />
+            </SelectTrigger>
+            <SelectContent>
+              {timeOptions.map((t) => (
+                <SelectItem key={t} value={t}>
+                  {time}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+    </div>
+  );
+}

From 42b906052324e098ff5911e7a1f3f94ef491a8cf Mon Sep 17 00:00:00 2001
From: gohan5858 <88976739+gohan5858@users.noreply.github.com>
Date: Sun, 27 Oct 2024 03:55:01 +0900
Subject: [PATCH 4/8] =?UTF-8?q?refactor:=20=E4=B8=8D=E8=A6=81=E3=81=AA?=
 =?UTF-8?q?=E3=82=B3=E3=83=BC=E3=83=89=E3=81=AE=E5=89=8A=E9=99=A4=E3=80=81?=
 =?UTF-8?q?=E3=81=8A=E3=82=88=E3=81=B3=E6=95=B4=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 task_yell/src/app/home/page.tsx | 249 ++++++++++++--------------------
 1 file changed, 93 insertions(+), 156 deletions(-)

diff --git a/task_yell/src/app/home/page.tsx b/task_yell/src/app/home/page.tsx
index a8a273b..dcb0c66 100644
--- a/task_yell/src/app/home/page.tsx
+++ b/task_yell/src/app/home/page.tsx
@@ -3,6 +3,7 @@
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
 import { Checkbox } from "@/components/ui/checkbox";
+import { DateTimeInput } from "@/components/ui/date-time-input";
 import {
   Dialog,
   DialogContent,
@@ -32,6 +33,7 @@ import {
 } from "@/components/ui/sheet";
 import { Switch } from "@/components/ui/switch";
 import { Textarea } from "@/components/ui/textarea";
+import { AngleIcon, ListBulletIcon, Pencil1Icon, ViewGridIcon } from "@radix-ui/react-icons";
 import {
   addMonths,
   eachDayOfInterval,
@@ -48,7 +50,6 @@ import {
 import { ja } from "date-fns/locale";
 import { AnimatePresence, motion, useDragControls } from "framer-motion";
 import {
-  CalendarIcon,
   ChevronLeft,
   ChevronRight,
   ChevronUp,
@@ -175,9 +176,9 @@ function EventCreator({
 }) {
   const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
-  const [date, setDate] = useState<Date | undefined>(new Date());
-  const [startTime, setStartTime] = useState("10:00");
-  const [endTime, setEndTime] = useState("11:00");
+  const [date] = useState<Date | undefined>(new Date());
+  const [startTime] = useState("10:00");
+  const [endTime] = useState("11:00");
   const [location, setLocation] = useState("");
   const [invitees, setInvitees] = useState("");
   const [category, setCategory] = useState<Category>("other");
@@ -185,26 +186,6 @@ function EventCreator({
   const [isTask, setIsTask] = useState(false);
   const [isLocked, setIsLocked] = useState(false);
 
-  const timeOptions = Array.from({ length: 96 }, (_, i) => {
-    const hours = Math.floor(i / 4)
-      .toString()
-      .padStart(2, "0");
-    const minutes = ((i % 4) * 15).toString().padStart(2, "0");
-    return `${hours}:${minutes}`;
-  });
-
-  const handleTimeChange = (time: string, isStart: boolean) => {
-    if (isStart) {
-      setStartTime(time);
-      // 終了時間を自動的に1時間後に設定
-      const [hours, minutes] = time.split(":").map(Number);
-      const endDate = new Date(2000, 0, 1, hours + 1, minutes);
-      setEndTime(format(endDate, "HH:mm"));
-    } else {
-      setEndTime(time);
-    }
-  };
-
   const handleSave = () => {
     if (date) {
       const newEvent: Event = {
@@ -245,7 +226,7 @@ function EventCreator({
         </div>
       </div>
       <div className="w-3/5 space-y-3">
-        <div className="flex items-center space-x-2">
+        <div className="flex items-center gap-2">
           <Checkbox
             id="is-task"
             checked={isTask}
@@ -253,135 +234,91 @@ function EventCreator({
           />
           <Label htmlFor="is-task">タスクにする</Label>
         </div>
+        <div className="flex flex-row items-center gap-2">
+          <Pencil1Icon className="w-6 h-6" />
+          <Input
+            placeholder="タイトルを追加"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+          />
+        </div>
 
-        <Input
-          placeholder="タイトルを追加"
-          value={title}
-          onChange={(e) => setTitle(e.target.value)}
-        />
-
-        {!isTask && (
-          <>
-            <div className="flex items-center space-x-2">
-              <CalendarIcon className="text-gray-500" />
-              <Popover>
-                <PopoverTrigger asChild>
-                  <Button variant="outline">
-                    {date
-                      ? format(date, "yyyy年MM月dd日 (E)", { locale: ja })
-                      : "日付を選択"}
-                  </Button>
-                </PopoverTrigger>
-                <PopoverContent className="w-auto p-0">
-                  <Calendar
-                    mode="single"
-                    selected={date}
-                    onSelect={setDate}
-                    initialFocus
-                  />
-                </PopoverContent>
-              </Popover>
-            </div>
-
-            <div className="flex items-center space-x-2">
-              <Select
-                value={startTime}
-                onValueChange={(value) => handleTimeChange(value, true)}
-              >
-                <SelectTrigger className="w-[180px]">
-                  <SelectValue placeholder="開始時間" />
-                </SelectTrigger>
-                <SelectContent>
-                  {timeOptions.map((time) => (
-                    <SelectItem key={time} value={time}>
-                      {time}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              <span>-</span>
-              <Select
-                value={endTime}
-                onValueChange={(value) => handleTimeChange(value, false)}
-              >
-                <SelectTrigger className="w-[180px]">
-                  <SelectValue placeholder="終了時間" />
-                </SelectTrigger>
-                <SelectContent>
-                  {timeOptions.map((time) => (
-                    <SelectItem key={time} value={time}>
-                      {time}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-
-            <Textarea
-              placeholder="説明を追加"
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-            />
-
-            <div className="flex items-center space-x-2">
-              <UserPlusIcon className="text-gray-500" />
-              <Input
-                placeholder="招待"
-                value={invitees}
-                onChange={(e) => setInvitees(e.target.value)}
-              />
-            </div>
-
-            <div className="flex items-center space-x-2">
-              <MapPinIcon className="text-gray-500" />
-              <Input
-                placeholder="場所または会議URLを追加"
-                value={location}
-                onChange={(e) => setLocation(e.target.value)}
-              />
-            </div>
-
-            <Select
-              value={category}
-              onValueChange={(value: Category) => setCategory(value)}
-            >
-              <SelectTrigger className="w-full">
-                <SelectValue placeholder="カテゴリを選択" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="work">仕事</SelectItem>
-                <SelectItem value="personal">個人</SelectItem>
-                <SelectItem value="shopping">買い物</SelectItem>
-                <SelectItem value="health">健康</SelectItem>
-                <SelectItem value="other">その他</SelectItem>
-              </SelectContent>
-            </Select>
-
-            <Select
-              value={priority}
-              onValueChange={(value: Priority) => setPriority(value)}
-            >
-              <SelectTrigger className="w-full">
-                <SelectValue placeholder="重要度を選択" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="low">低</SelectItem>
-                <SelectItem value="medium">中</SelectItem>
-                <SelectItem value="high">高</SelectItem>
-              </SelectContent>
-            </Select>
-            <div className="flex items-center space-x-2">
-              <Checkbox
-                id="is-locked"
-                checked={isLocked}
-                onCheckedChange={(checked) => setIsLocked(checked as boolean)}
-              />
-              <Label htmlFor="is-locked">ロックする</Label>
-            </div>
-          </>
+        {isTask ? (
+          <DateTimeInput className="w-full" />
+        ) : (
+          <div className="flex flex-col gap-2">
+            <DateTimeInput className="w-full" />
+            <DateTimeInput className="w-full" />
+          </div>
         )}
 
-        <div className="flex justify-end space-x-2">
+        <div className="flex flex-row gap-2">
+          <ListBulletIcon className="w-6 h-6" />
+          <Textarea
+            placeholder="説明を追加"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+          />
+        </div>
+        <div className="flex items-center gap-2">
+          <UserPlusIcon className="text-gray-500 h-6 w-6" />
+          <Input
+            placeholder="招待"
+            value={invitees}
+            onChange={(e) => setInvitees(e.target.value)}
+          />
+        </div>
+        <div className="flex items-center gap-2">
+          <MapPinIcon className="text-gray-500 h-6 w-6" />
+          <Input
+            placeholder="場所または会議URLを追加"
+            value={location}
+            onChange={(e) => setLocation(e.target.value)}
+          />
+        </div>
+        <div className="flex flex-row gap-2 items-center">
+          <ViewGridIcon className="w-6 h-6" />
+          <Select
+            value={category}
+            onValueChange={(value: Category) => setCategory(value)}
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue placeholder="カテゴリを選択" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="work">仕事</SelectItem>
+              <SelectItem value="personal">個人</SelectItem>
+              <SelectItem value="shopping">買い物</SelectItem>
+              <SelectItem value="health">健康</SelectItem>
+              <SelectItem value="other">その他</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="flex flex-row gap-2 items-center">
+          <AngleIcon className="w-6 h-6" />
+          <Select
+            value={priority}
+            onValueChange={(value: Priority) => setPriority(value)}
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue placeholder="重要度を選択" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="low">低</SelectItem>
+              <SelectItem value="medium">中</SelectItem>
+              <SelectItem value="high">高</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="flex items-center gap-2">
+          <Checkbox
+            id="is-locked"
+            checked={isLocked}
+            onCheckedChange={(checked) => setIsLocked(checked as boolean)}
+          />
+          <Label htmlFor="is-locked">ロックする</Label>
+        </div>
+        <div className="flex justify-end gap-2">
           <Button variant="outline" onClick={onCancel}>
             キャンセル
           </Button>
@@ -642,7 +579,7 @@ export default function Page() {
       >
         {todo.text}
       </label>
-      <div className="flex items-center space-x-2">
+      <div className="flex items-center gap-2">
         {categoryIcons[todo.category]}
         <span className="text-sm text-gray-500 dark:text-gray-400">
           {format(todo.date, "yyyy/MM/dd", { locale: ja })}
@@ -672,7 +609,7 @@ export default function Page() {
             <p className="text-sm text-gray-600 dark:text-gray-400">
               {event.description}
             </p>
-            <div className="flex items-center space-x-2 mt-1">
+            <div className="flex items-center gap-2 mt-1">
               {categoryIcons[event.category]}
               <span className="text-sm text-gray-500 dark:text-gray-400">
                 {format(event.start, "yyyy/MM/dd HH:mm", { locale: ja })} -{" "}
@@ -750,7 +687,7 @@ export default function Page() {
             <SheetTitle>設定</SheetTitle>
           </SheetHeader>
           <div className="mt-4 space-y-4">
-            <div className="flex items-center space-x-2">
+            <div className="flex items-center gap-2">
               <Switch
                 id="dark-mode"
                 checked={isDarkMode}
@@ -790,7 +727,7 @@ export default function Page() {
           <h2 className="text-xl lg:text-2xl font-bold mb-4 dark:text-white">
             TODO リスト
           </h2>
-          <div className="flex flex-col lg:flex-row mb-4 space-y-2 lg:space-y-0 lg:space-x-2">
+          <div className="flex flex-col lg:flex-row mb-4 space-y-2 lg:space-y-0 lg:gap-2">
             <Input
               type="text"
               value={newTodo}
@@ -997,7 +934,7 @@ export default function Page() {
                     placeholder="新しいタスクを入力"
                     className="w-full"
                   />
-                  <div className="flex space-x-2">
+                  <div className="flex gap-2">
                     <Popover>
                       <PopoverTrigger asChild>
                         <Button variant="outline" className="w-1/2">

From fe70c96f6b72059a226f7bcef35dc7c07d655ff7 Mon Sep 17 00:00:00 2001
From: gohan5858 <88976739+gohan5858@users.noreply.github.com>
Date: Sun, 27 Oct 2024 04:00:36 +0900
Subject: [PATCH 5/8] =?UTF-8?q?move:=20u=E3=83=87=E3=82=A3=E3=83=AC?=
 =?UTF-8?q?=E3=82=AF=E3=83=88=E3=83=AA=E3=81=AFshadcn=E3=81=AE=E3=82=82?=
 =?UTF-8?q?=E3=81=AE=E3=81=8C=E5=85=A5=E3=82=8B=E3=81=AE=E3=81=A7=E5=A4=96?=
 =?UTF-8?q?=E3=81=AB=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3?=
 =?UTF-8?q?=E3=83=88=E3=82=92=E7=A7=BB=E5=8B=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 task_yell/src/app/home/page.tsx                       | 2 +-
 task_yell/src/components/{ui => }/date-time-input.tsx | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename task_yell/src/components/{ui => }/date-time-input.tsx (100%)

diff --git a/task_yell/src/app/home/page.tsx b/task_yell/src/app/home/page.tsx
index dcb0c66..acf7df6 100644
--- a/task_yell/src/app/home/page.tsx
+++ b/task_yell/src/app/home/page.tsx
@@ -3,7 +3,7 @@
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
 import { Checkbox } from "@/components/ui/checkbox";
-import { DateTimeInput } from "@/components/ui/date-time-input";
+import { DateTimeInput } from "@/components/date-time-input";
 import {
   Dialog,
   DialogContent,
diff --git a/task_yell/src/components/ui/date-time-input.tsx b/task_yell/src/components/date-time-input.tsx
similarity index 100%
rename from task_yell/src/components/ui/date-time-input.tsx
rename to task_yell/src/components/date-time-input.tsx

From 117cbc82b99805e64eb5a194f9124d74ee71a5ec Mon Sep 17 00:00:00 2001
From: gohan5858 <88976739+gohan5858@users.noreply.github.com>
Date: Sun, 27 Oct 2024 04:30:07 +0900
Subject: [PATCH 6/8] =?UTF-8?q?fix:=20textarea=E3=81=AEresize=E3=82=92?=
 =?UTF-8?q?=E4=B8=8D=E5=8F=AF=E8=83=BD=E3=81=AB=E5=A4=89=E6=9B=B4=E3=81=97?=
 =?UTF-8?q?=E8=A6=8B=E5=88=87=E3=82=8C=E3=82=8B=E3=81=AE=E3=82=92=E4=BF=AE?=
 =?UTF-8?q?=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 task_yell/src/app/home/page.tsx          | 10 ++++++++--
 task_yell/src/components/ui/textarea.tsx |  6 +++---
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/task_yell/src/app/home/page.tsx b/task_yell/src/app/home/page.tsx
index acf7df6..7b4a524 100644
--- a/task_yell/src/app/home/page.tsx
+++ b/task_yell/src/app/home/page.tsx
@@ -1,9 +1,9 @@
 "use client";
 
+import { DateTimeInput } from "@/components/date-time-input";
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
 import { Checkbox } from "@/components/ui/checkbox";
-import { DateTimeInput } from "@/components/date-time-input";
 import {
   Dialog,
   DialogContent,
@@ -33,7 +33,12 @@ import {
 } from "@/components/ui/sheet";
 import { Switch } from "@/components/ui/switch";
 import { Textarea } from "@/components/ui/textarea";
-import { AngleIcon, ListBulletIcon, Pencil1Icon, ViewGridIcon } from "@radix-ui/react-icons";
+import {
+  AngleIcon,
+  ListBulletIcon,
+  Pencil1Icon,
+  ViewGridIcon,
+} from "@radix-ui/react-icons";
 import {
   addMonths,
   eachDayOfInterval,
@@ -255,6 +260,7 @@ function EventCreator({
         <div className="flex flex-row gap-2">
           <ListBulletIcon className="w-6 h-6" />
           <Textarea
+            className="h-32"
             placeholder="説明を追加"
             value={description}
             onChange={(e) => setDescription(e.target.value)}
diff --git a/task_yell/src/components/ui/textarea.tsx b/task_yell/src/components/ui/textarea.tsx
index c16456e..2484d09 100644
--- a/task_yell/src/components/ui/textarea.tsx
+++ b/task_yell/src/components/ui/textarea.tsx
@@ -11,14 +11,14 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-          className,
+          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 resize-none",
+          className
         )}
         ref={ref}
         {...props}
       />
     );
-  },
+  }
 );
 Textarea.displayName = "Textarea";
 

From 39449b4c15b290ca69767d715cb66b52d00cf9e4 Mon Sep 17 00:00:00 2001
From: gohan5858 <88976739+gohan5858@users.noreply.github.com>
Date: Sun, 27 Oct 2024 06:05:10 +0900
Subject: [PATCH 7/8] =?UTF-8?q?add:=20WantTodo=E5=91=A8=E3=82=8A=E3=81=AE?=
 =?UTF-8?q?=E6=A9=9F=E8=83=BD=E3=82=92=E5=AE=9F=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 task_yell/src/app/home/page.tsx | 708 ++++++++++----------------------
 1 file changed, 214 insertions(+), 494 deletions(-)

diff --git a/task_yell/src/app/home/page.tsx b/task_yell/src/app/home/page.tsx
index 7b4a524..16a701c 100644
--- a/task_yell/src/app/home/page.tsx
+++ b/task_yell/src/app/home/page.tsx
@@ -2,7 +2,6 @@
 
 import { DateTimeInput } from "@/components/date-time-input";
 import { Button } from "@/components/ui/button";
-import { Calendar } from "@/components/ui/calendar";
 import { Checkbox } from "@/components/ui/checkbox";
 import {
   Dialog,
@@ -12,11 +11,6 @@ import {
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
 import {
   Select,
   SelectContent,
@@ -43,13 +37,12 @@ import {
   addMonths,
   eachDayOfInterval,
   endOfMonth,
+  endOfWeek,
   format,
-  getDay,
-  isFuture,
   isSameDay,
   isSameMonth,
-  isToday,
   startOfMonth,
+  startOfWeek,
   subMonths,
 } from "date-fns";
 import { ja } from "date-fns/locale";
@@ -96,90 +89,27 @@ type Event = {
   isLocked: boolean;
 };
 
+type StickyNote = {
+  id: number;
+  title: string;
+};
+
 const priorityColors: Record<Priority, string> = {
   low: "bg-blue-100 dark:bg-blue-900",
   medium: "bg-yellow-100 dark:bg-yellow-900",
   high: "bg-red-100 dark:bg-red-900",
 };
 
-const categoryIcons: Record<Category, JSX.Element> = {
-  work: (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className="h-4 w-4"
-      viewBox="0 0 20 20"
-      fill="currentColor"
-    >
-      <path
-        fillRule="evenodd"
-        d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.57A22.952 22.952 0 0110 13a22.95 22.95 0 01-8-1.43V8a2 2 0 012-2h2zm2-1a1 1 0 011-1h2a1 1 0 011 1v1H8V5zm1 5a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1z"
-        clipRule="evenodd"
-      />
-      <path d="M2 13.692V16a2 2 0 002 2h12a2 2 0 002-2v-2.308A24.974 24.974 0 0110 15c-2.796 0-5.487-.46-8-1.308z" />
-    </svg>
-  ),
-  personal: (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className="h-4 w-4"
-      viewBox="0 0 20 20"
-      fill="currentColor"
-    >
-      <path
-        fillRule="evenodd"
-        d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
-        clipRule="evenodd"
-      />
-    </svg>
-  ),
-  shopping: (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className="h-4 w-4"
-      viewBox="0 0 20 20"
-      fill="currentColor"
-    >
-      <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
-    </svg>
-  ),
-  health: (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className="h-4 w-4"
-      viewBox="0 0 20 20"
-      fill="currentColor"
-    >
-      <path
-        fillRule="evenodd"
-        d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
-        clipRule="evenodd"
-      />
-    </svg>
-  ),
-  other: (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className="h-4 w-4"
-      viewBox="0 0 20 20"
-      fill="currentColor"
-    >
-      <path
-        fillRule="evenodd"
-        d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
-        clipRule="evenodd"
-      />
-    </svg>
-  ),
-};
-
 function EventCreator({
   onSave,
   onCancel,
+  initialTitle = "",
 }: {
   onSave: (event: Event) => void;
   onCancel: () => void;
+  initialTitle?: string;
 }) {
-  const [title, setTitle] = useState("");
+  const [title, setTitle] = useState(initialTitle);
   const [description, setDescription] = useState("");
   const [date] = useState<Date | undefined>(new Date());
   const [startTime] = useState("10:00");
@@ -231,7 +161,7 @@ function EventCreator({
         </div>
       </div>
       <div className="w-3/5 space-y-3">
-        <div className="flex items-center gap-2">
+        <div className="flex items-center space-x-2">
           <Checkbox
             id="is-task"
             checked={isTask}
@@ -324,7 +254,8 @@ function EventCreator({
           />
           <Label htmlFor="is-locked">ロックする</Label>
         </div>
-        <div className="flex justify-end gap-2">
+
+        <div className="flex justify-end space-x-2">
           <Button variant="outline" onClick={onCancel}>
             キャンセル
           </Button>
@@ -335,34 +266,32 @@ function EventCreator({
   );
 }
 
-export default function Page() {
-  const [todos, setTodos] = useState<Todo[]>([]);
+export default function Home() {
+  const [todos] = useState<Todo[]>([]);
   const [events, setEvents] = useState<Event[]>([]);
-  const [newTodo, setNewTodo] = useState("");
+  const [stickyNotes, setStickyNotes] = useState<StickyNote[]>([]);
+  const [newStickyNote, setNewStickyNote] = useState("");
   const [selectedDate, setSelectedDate] = useState<Date>(new Date());
-  const [todoDate, setTodoDate] = useState<Date>(selectedDate);
-  const [selectedDateTodos, setSelectedDateTodos] = useState<Todo[]>([]);
-  const [priority, setPriority] = useState<Priority>("medium");
-  const [category, setCategory] = useState<Category>("other");
   const [currentMonth, setCurrentMonth] = useState(new Date());
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [modalState, setModalState] = useState<
     "minimized" | "partial" | "full"
   >("partial");
   const [searchTerm, setSearchTerm] = useState("");
-  const [editingTodo, setEditingTodo] = useState<Todo | null>(null);
+  const [editingStickyNote, setEditingStickyNote] = useState<StickyNote | null>(
+    null
+  );
   const [isDarkMode, setIsDarkMode] = useState(false);
   const [isEventModalOpen, setIsEventModalOpen] = useState(false);
+  const [draggedStickyNote, setDraggedStickyNote] = useState<StickyNote | null>(
+    null
+  );
+  const [removedStickyNote, setRemovedStickyNote] = useState<StickyNote | null>(
+    null
+  );
   const dragControls = useDragControls();
   const modalRef = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
-    const filteredTodos = todos.filter((todo) =>
-      isSameDay(todo.date, selectedDate)
-    );
-    setSelectedDateTodos(filteredTodos);
-  }, [selectedDate, todos]);
-
   useEffect(() => {
     if (isDarkMode) {
       document.documentElement.classList.add("dark");
@@ -371,66 +300,46 @@ export default function Page() {
     }
   }, [isDarkMode]);
 
-  const addTodo = () => {
-    if (newTodo.trim() && todoDate) {
-      const newTodoItem = {
-        id: Date.now(),
-        text: newTodo,
-        completed: false,
-        date: todoDate,
-        priority,
-        category,
-      };
-      setTodos([...todos, newTodoItem]);
-      setNewTodo("");
-      setTodoDate(new Date());
-      setPriority("medium");
-      setCategory("other");
-      if (isSameDay(todoDate, selectedDate)) {
-        setSelectedDateTodos([...selectedDateTodos, newTodoItem]);
-      }
-    }
-  };
-
-  const toggleTodo = (id: number) => {
-    const updatedTodos = todos.map((todo) =>
-      todo.id === id ? { ...todo, completed: !todo.completed } : todo
-    );
-    setTodos(updatedTodos);
-    if (selectedDate) {
-      const updatedSelectedDateTodos = selectedDateTodos.map((todo) =>
-        todo.id === id ? { ...todo, completed: !todo.completed } : todo
-      );
-      setSelectedDateTodos(updatedSelectedDateTodos);
+  const addStickyNote = () => {
+    if (newStickyNote.trim()) {
+      const newNote: StickyNote = { id: Date.now(), title: newStickyNote };
+      setStickyNotes([...stickyNotes, newNote]);
+      setNewStickyNote("");
     }
   };
 
-  const editTodo = (todo: Todo) => {
-    setEditingTodo(todo);
+  const editStickyNote = (note: StickyNote) => {
+    setEditingStickyNote(note);
   };
 
-  const updateTodo = (updatedTodo: Todo) => {
-    const updatedTodos = todos.map((todo) =>
-      todo.id === updatedTodo.id ? updatedTodo : todo
+  const updateStickyNote = (updatedNote: StickyNote) => {
+    const updatedNotes = stickyNotes.map((note) =>
+      note.id === updatedNote.id ? updatedNote : note
     );
-    setTodos(updatedTodos);
-    setEditingTodo(null);
+    setStickyNotes(updatedNotes);
+    setEditingStickyNote(null);
   };
 
-  const deleteTodo = (id: number) => {
-    const updatedTodos = todos.filter((todo) => todo.id !== id);
-    setTodos(updatedTodos);
-    setSelectedDateTodos(selectedDateTodos.filter((todo) => todo.id !== id));
+  const deleteStickyNote = (id: number) => {
+    const noteToRemove = stickyNotes.find((note) => note.id === id);
+    if (noteToRemove) {
+      setRemovedStickyNote(noteToRemove);
+      setStickyNotes(stickyNotes.filter((note) => note.id !== id));
+    }
+    if (draggedStickyNote && draggedStickyNote.id === id) {
+      setDraggedStickyNote(null);
+    }
   };
 
   const addEvent = (newEvent: Event) => {
     setEvents([...events, newEvent]);
     setIsEventModalOpen(false);
+    setRemovedStickyNote(null);
   };
 
   const getDaysInMonth = (date: Date) => {
-    const start = startOfMonth(date);
-    const end = endOfMonth(date);
+    const start = startOfWeek(startOfMonth(date), { weekStartsOn: 0 });
+    const end = endOfWeek(endOfMonth(date), { weekStartsOn: 0 });
     return eachDayOfInterval({ start, end });
   };
 
@@ -453,8 +362,7 @@ export default function Page() {
 
   const renderCalendar = () => {
     const days = getDaysInMonth(currentMonth);
-    const firstDayOfMonth = getDay(days[0]);
-    const weeks = Math.ceil((days.length + firstDayOfMonth) / 7);
+    const weeks = Math.ceil(days.length / 7);
 
     return (
       <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
@@ -469,13 +377,10 @@ export default function Page() {
           ))}
         </div>
         {Array.from({ length: weeks }).map((_, weekIndex) => {
-          const weekDays = days.slice(
-            weekIndex * 7 - firstDayOfMonth,
-            (weekIndex + 1) * 7 - firstDayOfMonth
-          );
+          const weekDays = days.slice(weekIndex * 7, (weekIndex + 1) * 7);
           const maxEventsInWeek = Math.max(
-            ...weekDays.map((day) =>
-              day ? getTodoCountForDay(day) + getEventCountForDay(day) : 0
+            ...weekDays.map(
+              (day) => getTodoCountForDay(day) + getEventCountForDay(day)
             )
           );
           const weekHeight =
@@ -487,68 +392,80 @@ export default function Page() {
               className="grid grid-cols-7 gap-1"
               style={{ minHeight: "100px", height: weekHeight }}
             >
-              {Array(7)
-                .fill(null)
-                .map((_, dayIndex) => {
-                  const day = weekDays[dayIndex];
-                  if (!day)
-                    return (
-                      <div
-                        key={`empty-${weekIndex}-${dayIndex}`}
-                        className="p-1"
-                      ></div>
-                    );
-
-                  const todoCount = getTodoCountForDay(day);
-                  const eventCount = getEventCountForDay(day);
-                  const isSelected = isSameDay(day, selectedDate);
-                  const isCurrentMonth = isSameMonth(day, currentMonth);
-                  const dayItems = [
-                    ...todos.filter((todo) => isSameDay(todo.date, day)),
-                    ...events.filter((event) => isSameDay(event.start, day)),
-                  ];
-
-                  return (
-                    <motion.div
-                      key={day.toISOString()}
-                      className={`p-1 border rounded-md cursor-pointer transition-all duration-300 overflow-hidden ${
-                        isSelected ? "border-blue-300 dark:border-blue-600" : ""
-                      } ${
-                        !isCurrentMonth
-                          ? "text-gray-400 dark:text-gray-600"
-                          : ""
-                      } ${getTaskIndicatorStyle(todoCount, eventCount)} hover:bg-gray-100 dark:hover:bg-gray-700`}
-                      onClick={() => handleDateSelect(day)}
-                      whileHover={{ scale: 1.05 }}
-                      whileTap={{ scale: 0.95 }}
-                    >
-                      <div className="text-right text-sm">
-                        {format(day, "d")}
+              {weekDays.map((day) => {
+                const todoCount = getTodoCountForDay(day);
+                const eventCount = getEventCountForDay(day);
+                const isSelected = isSameDay(day, selectedDate);
+                const isCurrentMonth = isSameMonth(day, currentMonth);
+                const dayItems = [
+                  ...todos.filter((todo) => isSameDay(todo.date, day)),
+                  ...events.filter((event) => isSameDay(event.start, day)),
+                ];
+
+                return (
+                  <motion.div
+                    key={day.toISOString()}
+                    className={`p-1 border rounded-md cursor-pointer transition-all duration-300 overflow-hidden ${
+                      isSelected ? "border-blue-300 dark:border-blue-600" : ""
+                    } ${
+                      !isCurrentMonth
+                        ? "text-gray-400 dark:text-gray-600 bg-gray-100 dark:bg-gray-700"
+                        : ""
+                    } ${getTaskIndicatorStyle(todoCount, eventCount)} hover:bg-gray-100 dark:hover:bg-gray-700`}
+                    onClick={() => handleDateSelect(day)}
+                    whileHover={{ scale: 1.05 }}
+                    whileTap={{ scale: 0.95 }}
+                    onDragOver={(e) => {
+                      e.preventDefault();
+                      e.currentTarget.classList.add(
+                        "bg-blue-100",
+                        "dark:bg-blue-800"
+                      );
+                    }}
+                    onDragLeave={(e) => {
+                      e.currentTarget.classList.remove(
+                        "bg-blue-100",
+                        "dark:bg-blue-800"
+                      );
+                    }}
+                    onDrop={(e) => {
+                      e.preventDefault();
+                      e.currentTarget.classList.remove(
+                        "bg-blue-100",
+                        "dark:bg-blue-800"
+                      );
+                      if (draggedStickyNote) {
+                        handleDateSelect(day);
+                        setIsEventModalOpen(true);
+                        deleteStickyNote(draggedStickyNote.id);
+                      }
+                    }}
+                  >
+                    <div className="text-right text-sm">{format(day, "d")}</div>
+                    {(todoCount > 0 || eventCount > 0) && (
+                      <div className="mt-1 space-y-1">
+                        {dayItems.slice(0, 2).map((item, index) => (
+                          <div
+                            key={index}
+                            className={`text-xs p-1 rounded ${
+                              "text" in item
+                                ? priorityColors[item.priority]
+                                : priorityColors[item.priority]
+                            }`}
+                          >
+                            {"text" in item ? item.text : item.title}
+                          </div>
+                        ))}
+                        {dayItems.length > 2 && (
+                          <div className="text-xs text-center font-bold">
+                            +{dayItems.length - 2} more
+                          </div>
+                        )}
                       </div>
-                      {(todoCount > 0 || eventCount > 0) && (
-                        <div className="mt-1 space-y-1">
-                          {dayItems.slice(0, 2).map((item, index) => (
-                            <div
-                              key={index}
-                              className={`text-xs p-1 rounded ${
-                                "text" in item
-                                  ? priorityColors[item.priority]
-                                  : priorityColors[item.priority]
-                              }`}
-                            >
-                              {"text" in item ? item.text : item.title}
-                            </div>
-                          ))}
-                          {dayItems.length > 2 && (
-                            <div className="text-xs text-center font-bold">
-                              +{dayItems.length - 2} more
-                            </div>
-                          )}
-                        </div>
-                      )}
-                    </motion.div>
-                  );
-                })}
+                    )}
+                  </motion.div>
+                );
+              })}
             </div>
           );
         })}
@@ -558,112 +475,60 @@ export default function Page() {
 
   const handleDateSelect = (date: Date) => {
     setSelectedDate(date);
-    setTodoDate(date);
     setIsEventModalOpen(true);
   };
 
-  const TodoItem = ({ todo }: { todo: Todo }) => (
+  const StickyNoteItem = ({ note }: { note: StickyNote }) => (
     <motion.div
       initial={{ opacity: 0, y: 20 }}
       animate={{ opacity: 1, y: 0 }}
       exit={{ opacity: 0, y: -20 }}
       transition={{ duration: 0.3 }}
-      className={`flex items-center p-2 rounded ${
-        todo.completed
-          ? "bg-gray-200 dark:bg-gray-700"
-          : priorityColors[todo.priority]
-      } transition-colors duration-200`}
+      className="bg-yellow-200 dark:bg-yellow-700 p-4 rounded shadow-md"
+      draggable
+      onDragStart={(e) => {
+        setDraggedStickyNote(note);
+        const dragEvent = e as DragEvent;
+        if (dragEvent.dataTransfer) {
+          dragEvent.dataTransfer.effectAllowed = "move";
+          dragEvent.dataTransfer.setData("text/plain", note.id.toString());
+        }
+        if (e.currentTarget) {
+          (e.currentTarget as HTMLElement).style.opacity = "0.5";
+        }
+      }}
+      onDragEnd={(e) => {
+        setDraggedStickyNote(null);
+        if (e.currentTarget) {
+          (e.currentTarget as HTMLElement).style.opacity = "1";
+        }
+      }}
     >
-      <Checkbox
-        id={`todo-${todo.id}`}
-        checked={todo.completed}
-        onCheckedChange={() => toggleTodo(todo.id)}
-      />
-      <label
-        htmlFor={`todo-${todo.id}`}
-        className={`ml-2 flex-grow ${todo.completed ? "line-through text-gray-500 dark:text-gray-400" : ""}`}
-      >
-        {todo.text}
-      </label>
-      <div className="flex items-center gap-2">
-        {categoryIcons[todo.category]}
-        <span className="text-sm text-gray-500 dark:text-gray-400">
-          {format(todo.date, "yyyy/MM/dd", { locale: ja })}
-        </span>
-        <Button variant="ghost" size="icon" onClick={() => editTodo(todo)}>
+      <h3 className="font-semibold mb-2">{note.title}</h3>
+      <div className="flex justify-end space-x-2">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => editStickyNote(note)}
+        >
           <Edit className="h-4 w-4" />
         </Button>
-        <Button variant="ghost" size="icon" onClick={() => deleteTodo(todo.id)}>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => deleteStickyNote(note.id)}
+        >
           <Trash2 className="h-4 w-4" />
         </Button>
       </div>
     </motion.div>
   );
 
-  const EventItem = ({ event }: { event: Event }) => (
-    <motion.div
-      initial={{ opacity: 0, y: 20 }}
-      animate={{ opacity: 1, y: 0 }}
-      exit={{ opacity: 0, y: -20 }}
-      transition={{ duration: 0.3 }}
-      className={`flex items-center p-2 rounded ${priorityColors[event.priority]} transition-colors duration-200`}
-    >
-      <div className="flex-grow">
-        <h4 className="font-semibold">{event.title}</h4>
-        {!event.isTask && (
-          <>
-            <p className="text-sm text-gray-600 dark:text-gray-400">
-              {event.description}
-            </p>
-            <div className="flex items-center gap-2 mt-1">
-              {categoryIcons[event.category]}
-              <span className="text-sm text-gray-500 dark:text-gray-400">
-                {format(event.start, "yyyy/MM/dd HH:mm", { locale: ja })} -{" "}
-                {format(event.end, "HH:mm", { locale: ja })}
-              </span>
-            </div>
-          </>
-        )}
-      </div>
-    </motion.div>
-  );
-
-  const filteredTodos = useMemo(() => {
-    return todos.filter(
-      (todo) =>
-        todo.text.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        format(todo.date, "yyyy/MM/dd").includes(searchTerm)
+  const filteredStickyNotes = useMemo(() => {
+    return stickyNotes.filter((note) =>
+      note.title.toLowerCase().includes(searchTerm.toLowerCase())
     );
-  }, [todos, searchTerm]);
-
-  const filteredEvents = useMemo(() => {
-    return events.filter(
-      (event) =>
-        event.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        event.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        format(event.start, "yyyy/MM/dd").includes(searchTerm)
-    );
-  }, [events, searchTerm]);
-
-  const sortedTodos = useMemo(() => {
-    return [...filteredTodos].sort((a, b) => {
-      if (a.completed === b.completed) {
-        return b.date.getTime() - a.date.getTime();
-      }
-      return a.completed ? 1 : -1;
-    });
-  }, [filteredTodos]);
-
-  const sortedEvents = useMemo(() => {
-    return [...filteredEvents].sort(
-      (a, b) => b.start.getTime() - a.start.getTime()
-    );
-  }, [filteredEvents]);
-
-  const recentTodos = todos
-    .filter((todo) => isToday(todo.date) || isFuture(todo.date))
-    .sort((a, b) => a.date.getTime() - b.date.getTime())
-    .slice(0, 5);
+  }, [stickyNotes, searchTerm]);
 
   const handleStatusBarClick = () => {
     setModalState((prevState) => {
@@ -693,7 +558,7 @@ export default function Page() {
             <SheetTitle>設定</SheetTitle>
           </SheetHeader>
           <div className="mt-4 space-y-4">
-            <div className="flex items-center gap-2">
+            <div className="flex items-center space-x-2">
               <Switch
                 id="dark-mode"
                 checked={isDarkMode}
@@ -731,102 +596,36 @@ export default function Page() {
 
         <div className="w-full lg:w-1/2 pl-2 bg-white dark:bg-gray-800 overflow-auto lg:block hidden">
           <h2 className="text-xl lg:text-2xl font-bold mb-4 dark:text-white">
-            TODO リスト
+            付箋
           </h2>
-          <div className="flex flex-col lg:flex-row mb-4 space-y-2 lg:space-y-0 lg:gap-2">
+          <div className="flex flex-col lg:flex-row mb-4 space-y-2 lg:space-y-0 lg:space-x-2">
             <Input
               type="text"
-              value={newTodo}
-              onChange={(e) => setNewTodo(e.target.value)}
-              placeholder="新しいタスクを入力"
+              value={newStickyNote}
+              onChange={(e) => setNewStickyNote(e.target.value)}
+              placeholder="タイトルを入力"
               className="flex-grow"
             />
-            <Popover>
-              <PopoverTrigger asChild>
-                <Button variant="outline" className="w-full lg:w-auto">
-                  {format(todoDate, "yyyy-MM-dd")}
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent className="w-auto p-0">
-                <Calendar
-                  mode="single"
-                  selected={todoDate}
-                  onSelect={(date) => date && setTodoDate(date)}
-                  initialFocus
-                />
-              </PopoverContent>
-            </Popover>
-            <Select
-              value={priority}
-              onValueChange={(value: Priority) => setPriority(value)}
-            >
-              <SelectTrigger className="w-full lg:w-[180px]">
-                <SelectValue placeholder="重要度を選択" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="low">低</SelectItem>
-                <SelectItem value="medium">中</SelectItem>
-                <SelectItem value="high">高</SelectItem>
-              </SelectContent>
-            </Select>
-            <Select
-              value={category}
-              onValueChange={(value: Category) => setCategory(value)}
-            >
-              <SelectTrigger className="w-full lg:w-[180px]">
-                <SelectValue placeholder="カテゴリを選択" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="work">仕事</SelectItem>
-                <SelectItem value="personal">個人</SelectItem>
-                <SelectItem value="shopping">買い物</SelectItem>
-                <SelectItem value="health">健康</SelectItem>
-                <SelectItem value="other">その他</SelectItem>
-              </SelectContent>
-            </Select>
-            <Button onClick={addTodo} className="w-full lg:w-auto">
+            <Button onClick={addStickyNote} className="w-full lg:w-auto">
               追加
             </Button>
           </div>
           <div className="mb-4">
             <Input
               type="text"
-              placeholder="タスクを検索..."
+              placeholder="付箋を検索..."
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
               className="w-full"
             />
           </div>
-          <AnimatePresence>
-            {sortedTodos.map((todo) => (
-              <TodoItem key={todo.id} todo={todo} />
-            ))}
-          </AnimatePresence>
-          <h3 className="text-lg font-semibold mt-8 mb-4 dark:text-white">
-            イベント
-          </h3>
-          <AnimatePresence>
-            {sortedEvents.map((event) => (
-              <EventItem key={event.id} event={event} />
-            ))}
-          </AnimatePresence>
-        </div>
-
-        <div className="mt-4 bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 lg:hidden">
-          <h3 className="text-lg font-semibold mb-2 dark:text-white">
-            直近のTODO
-          </h3>
-          {recentTodos.length > 0 ? (
-            <ul className="space-y-2">
-              {recentTodos.map((todo) => (
-                <li key={todo.id}>
-                  <TodoItem todo={todo} />
-                </li>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            <AnimatePresence>
+              {filteredStickyNotes.map((note) => (
+                <StickyNoteItem key={note.id} note={note} />
               ))}
-            </ul>
-          ) : (
-            <p className="dark:text-gray-300">直近のTODOはありません。</p>
-          )}
+            </AnimatePresence>
+          </div>
         </div>
       </div>
 
@@ -907,11 +706,11 @@ export default function Page() {
               >
                 <ChevronUp className="h-6 w-6 text-gray-400 flex-shrink-0" />
                 <span className="ml-2 text-sm text-gray-600 dark:text-gray-300">
-                  {format(selectedDate, "yyyy年MM月dd日", { locale: ja })}のTODO
+                  {format(selectedDate, "yyyy年MM月dd日", { locale: ja })}の付箋
                 </span>
-                {selectedDateTodos.length > 0 && (
+                {filteredStickyNotes.length > 0 && (
                   <span className="ml-2 text-sm text-gray-600 dark:text-gray-300">
-                    （{selectedDateTodos.length}件）
+                    （{filteredStickyNotes.length}件）
                   </span>
                 )}
               </div>
@@ -922,7 +721,7 @@ export default function Page() {
                 <div className="flex justify-between items-center mb-4">
                   <h3 className="text-lg font-semibold dark:text-white">
                     {format(selectedDate, "yyyy年MM月dd日", { locale: ja })}
-                    のTODO
+                    の付箋
                   </h3>
                   <Button
                     variant="ghost"
@@ -935,70 +734,23 @@ export default function Page() {
                 <div className="space-y-4">
                   <Input
                     type="text"
-                    value={newTodo}
-                    onChange={(e) => setNewTodo(e.target.value)}
-                    placeholder="新しいタスクを入力"
+                    value={newStickyNote}
+                    onChange={(e) => setNewStickyNote(e.target.value)}
+                    placeholder="新しい付箋のタイトルを入力"
                     className="w-full"
                   />
-                  <div className="flex gap-2">
-                    <Popover>
-                      <PopoverTrigger asChild>
-                        <Button variant="outline" className="w-1/2">
-                          {format(todoDate, "yyyy-MM-dd")}
-                        </Button>
-                      </PopoverTrigger>
-                      <PopoverContent className="w-auto p-0">
-                        <Calendar
-                          mode="single"
-                          selected={todoDate}
-                          onSelect={(date) => date && setTodoDate(date)}
-                          initialFocus
-                        />
-                      </PopoverContent>
-                    </Popover>
-                    <Select
-                      value={priority}
-                      onValueChange={(value: Priority) => setPriority(value)}
-                    >
-                      <SelectTrigger className="w-1/2">
-                        <SelectValue placeholder="重要度" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="low">低</SelectItem>
-                        <SelectItem value="medium">中</SelectItem>
-                        <SelectItem value="high">高</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </div>
-                  <Select
-                    value={category}
-                    onValueChange={(value: Category) => setCategory(value)}
-                  >
-                    <SelectTrigger className="w-full">
-                      <SelectValue placeholder="カテゴリを選択" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="work">仕事</SelectItem>
-                      <SelectItem value="personal">個人</SelectItem>
-                      <SelectItem value="shopping">買い物</SelectItem>
-                      <SelectItem value="health">健康</SelectItem>
-                      <SelectItem value="other">その他</SelectItem>
-                    </SelectContent>
-                  </Select>
-                  <Button onClick={addTodo} className="w-full">
+                  <Button onClick={addStickyNote} className="w-full">
                     追加
                   </Button>
-                  {selectedDateTodos.length > 0 ? (
-                    <ul className="space-y-2">
-                      {selectedDateTodos.map((todo) => (
-                        <li key={todo.id}>
-                          <TodoItem todo={todo} />
-                        </li>
+                  {filteredStickyNotes.length > 0 ? (
+                    <div className="grid grid-cols-1 gap-4">
+                      {filteredStickyNotes.map((note) => (
+                        <StickyNoteItem key={note.id} note={note} />
                       ))}
-                    </ul>
+                    </div>
                   ) : (
                     <p className="dark:text-gray-300">
-                      この日のTODOはありません。
+                      この日の付箋はありません。
                     </p>
                   )}
                 </div>
@@ -1008,71 +760,32 @@ export default function Page() {
         )}
       </AnimatePresence>
 
-      <Dialog open={!!editingTodo} onOpenChange={() => setEditingTodo(null)}>
+      <Dialog
+        open={!!editingStickyNote}
+        onOpenChange={() => setEditingStickyNote(null)}
+      >
         <DialogContent>
           <DialogHeader>
-            <DialogTitle>タスクを編集</DialogTitle>
+            <DialogTitle>付箋を編集</DialogTitle>
           </DialogHeader>
-          {editingTodo && (
+          {editingStickyNote && (
             <div className="space-y-4">
               <Input
                 type="text"
-                value={editingTodo.text}
+                value={editingStickyNote.title}
                 onChange={(e) =>
-                  setEditingTodo({ ...editingTodo, text: e.target.value })
+                  setEditingStickyNote({
+                    ...editingStickyNote,
+                    title: e.target.value,
+                  })
                 }
-                placeholder="タスクを入力"
+                placeholder="タイトルを入力"
               />
-              <Popover>
-                <PopoverTrigger asChild>
-                  <Button variant="outline">
-                    {format(editingTodo.date, "yyyy-MM-dd")}
-                  </Button>
-                </PopoverTrigger>
-                <PopoverContent className="w-auto p-0">
-                  <Calendar
-                    mode="single"
-                    selected={editingTodo.date}
-                    onSelect={(date) =>
-                      date && setEditingTodo({ ...editingTodo, date })
-                    }
-                    initialFocus
-                  />
-                </PopoverContent>
-              </Popover>
-              <Select
-                value={editingTodo.priority}
-                onValueChange={(value: Priority) =>
-                  setEditingTodo({ ...editingTodo, priority: value })
+              <Button
+                onClick={() =>
+                  editingStickyNote && updateStickyNote(editingStickyNote)
                 }
               >
-                <SelectTrigger>
-                  <SelectValue placeholder="重要度を選択" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="low">低</SelectItem>
-                  <SelectItem value="medium">中</SelectItem>
-                  <SelectItem value="high">高</SelectItem>
-                </SelectContent>
-              </Select>
-              <Select
-                value={editingTodo.category}
-                onValueChange={(value: Category) =>
-                  setEditingTodo({ ...editingTodo, category: value })
-                }
-              >
-                <SelectTrigger>
-                  <SelectValue placeholder="カテゴリを選択" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="work">仕事</SelectItem>
-                  <SelectItem value="personal">個人</SelectItem>
-                  <SelectItem value="shopping">買い物</SelectItem>
-                  <SelectItem value="health">健康</SelectItem>
-                  <SelectItem value="other">その他</SelectItem>
-                </SelectContent>
-              </Select>
-              <Button onClick={() => editingTodo && updateTodo(editingTodo)}>
                 更新
               </Button>
             </div>
@@ -1089,7 +802,14 @@ export default function Page() {
           </DialogHeader>
           <EventCreator
             onSave={addEvent}
-            onCancel={() => setIsEventModalOpen(false)}
+            onCancel={() => {
+              if (removedStickyNote) {
+                setStickyNotes([...stickyNotes, removedStickyNote]);
+                setRemovedStickyNote(null);
+              }
+              setIsEventModalOpen(false);
+            }}
+            initialTitle={draggedStickyNote ? draggedStickyNote.title : ""}
           />
         </DialogContent>
       </Dialog>

From e8a25592750ca324002294cf808a2f13b4982286 Mon Sep 17 00:00:00 2001
From: gohan5858 <88976739+gohan5858@users.noreply.github.com>
Date: Sun, 27 Oct 2024 06:13:40 +0900
Subject: [PATCH 8/8] chore: npm run format

---
 task_yell/src/app/home/page.tsx          | 20 ++++++++++----------
 task_yell/src/components/ui/textarea.tsx |  4 ++--
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/task_yell/src/app/home/page.tsx b/task_yell/src/app/home/page.tsx
index 16a701c..0dd1aef 100644
--- a/task_yell/src/app/home/page.tsx
+++ b/task_yell/src/app/home/page.tsx
@@ -279,15 +279,15 @@ export default function Home() {
   >("partial");
   const [searchTerm, setSearchTerm] = useState("");
   const [editingStickyNote, setEditingStickyNote] = useState<StickyNote | null>(
-    null
+    null,
   );
   const [isDarkMode, setIsDarkMode] = useState(false);
   const [isEventModalOpen, setIsEventModalOpen] = useState(false);
   const [draggedStickyNote, setDraggedStickyNote] = useState<StickyNote | null>(
-    null
+    null,
   );
   const [removedStickyNote, setRemovedStickyNote] = useState<StickyNote | null>(
-    null
+    null,
   );
   const dragControls = useDragControls();
   const modalRef = useRef<HTMLDivElement>(null);
@@ -314,7 +314,7 @@ export default function Home() {
 
   const updateStickyNote = (updatedNote: StickyNote) => {
     const updatedNotes = stickyNotes.map((note) =>
-      note.id === updatedNote.id ? updatedNote : note
+      note.id === updatedNote.id ? updatedNote : note,
     );
     setStickyNotes(updatedNotes);
     setEditingStickyNote(null);
@@ -380,8 +380,8 @@ export default function Home() {
           const weekDays = days.slice(weekIndex * 7, (weekIndex + 1) * 7);
           const maxEventsInWeek = Math.max(
             ...weekDays.map(
-              (day) => getTodoCountForDay(day) + getEventCountForDay(day)
-            )
+              (day) => getTodoCountForDay(day) + getEventCountForDay(day),
+            ),
           );
           const weekHeight =
             maxEventsInWeek > 2 ? Math.min(maxEventsInWeek * 20, 100) : "auto";
@@ -419,20 +419,20 @@ export default function Home() {
                       e.preventDefault();
                       e.currentTarget.classList.add(
                         "bg-blue-100",
-                        "dark:bg-blue-800"
+                        "dark:bg-blue-800",
                       );
                     }}
                     onDragLeave={(e) => {
                       e.currentTarget.classList.remove(
                         "bg-blue-100",
-                        "dark:bg-blue-800"
+                        "dark:bg-blue-800",
                       );
                     }}
                     onDrop={(e) => {
                       e.preventDefault();
                       e.currentTarget.classList.remove(
                         "bg-blue-100",
-                        "dark:bg-blue-800"
+                        "dark:bg-blue-800",
                       );
                       if (draggedStickyNote) {
                         handleDateSelect(day);
@@ -526,7 +526,7 @@ export default function Home() {
 
   const filteredStickyNotes = useMemo(() => {
     return stickyNotes.filter((note) =>
-      note.title.toLowerCase().includes(searchTerm.toLowerCase())
+      note.title.toLowerCase().includes(searchTerm.toLowerCase()),
     );
   }, [stickyNotes, searchTerm]);
 
diff --git a/task_yell/src/components/ui/textarea.tsx b/task_yell/src/components/ui/textarea.tsx
index 2484d09..027f074 100644
--- a/task_yell/src/components/ui/textarea.tsx
+++ b/task_yell/src/components/ui/textarea.tsx
@@ -12,13 +12,13 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       <textarea
         className={cn(
           "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 resize-none",
-          className
+          className,
         )}
         ref={ref}
         {...props}
       />
     );
-  }
+  },
 );
 Textarea.displayName = "Textarea";