From 0500c3c1d5fb983c17b9b0b166df578616a2c078 Mon Sep 17 00:00:00 2001
From: satsuki2200 <132316826+satsuki2200@users.noreply.github.com>
Date: Sun, 27 Oct 2024 10:45:24 +0900
Subject: [PATCH] chore: format

---
 task_yell/src/app/home/page.tsx        | 368 ++++++++++++++++++++-----
 task_yell/src/components/ui/sheet.tsx  |  94 ++++++-
 task_yell/src/components/ui/switch.tsx |  11 +-
 3 files changed, 393 insertions(+), 80 deletions(-)

diff --git a/task_yell/src/app/home/page.tsx b/task_yell/src/app/home/page.tsx
index 17ed505..8a148dd 100644
--- a/task_yell/src/app/home/page.tsx
+++ b/task_yell/src/app/home/page.tsx
@@ -3,18 +3,65 @@
 import { DateTimeInput } from "@/components/date-time-input";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} 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, endOfMonth, endOfWeek, format, isSameDay, isSameMonth, startOfMonth, startOfWeek, subMonths } from "date-fns";
+import {
+  AngleIcon,
+  ListBulletIcon,
+  Pencil1Icon,
+  ViewGridIcon,
+} from "@radix-ui/react-icons";
+import {
+  addMonths,
+  eachDayOfInterval,
+  endOfMonth,
+  endOfWeek,
+  format,
+  isSameDay,
+  isSameMonth,
+  startOfMonth,
+  startOfWeek,
+  subMonths,
+} from "date-fns";
 import { ja } from "date-fns/locale";
 import { AnimatePresence, motion, useDragControls } from "framer-motion";
-import { ChevronLeft, ChevronRight, ChevronUp, Edit, MapPinIcon, Menu, Trash2, UserPlusIcon, X, Bell, Users, Download, LogOut } from "lucide-react";
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  Edit,
+  MapPinIcon,
+  Menu,
+  Trash2,
+  UserPlusIcon,
+  X,
+  Bell,
+  Users,
+  Download,
+  LogOut,
+} from "lucide-react";
 import { useEffect, useMemo, useRef, useState } from "react";
 
 type Priority = "low" | "medium" | "high";
@@ -57,7 +104,15 @@ const priorityColors: Record<Priority, string> = {
   high: "bg-red-100 dark:bg-red-900",
 };
 
-function EventCreator({ onSave, onCancel, initialTitle = "" }: { onSave: (event: Event) => void; onCancel: () => void; initialTitle?: string }) {
+function EventCreator({
+  onSave,
+  onCancel,
+  initialTitle = "",
+}: {
+  onSave: (event: Event) => void;
+  onCancel: () => void;
+  initialTitle?: string;
+}) {
   const [title, setTitle] = useState(initialTitle);
   const [description, setDescription] = useState("");
   const [date] = useState<Date | undefined>(new Date());
@@ -96,7 +151,9 @@ function EventCreator({ onSave, onCancel, initialTitle = "" }: { onSave: (event:
     <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>
+          <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">
@@ -109,12 +166,20 @@ function EventCreator({ onSave, onCancel, initialTitle = "" }: { onSave: (event:
       </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)} />
+          <Checkbox
+            id="is-task"
+            checked={isTask}
+            onCheckedChange={(checked) => setIsTask(checked as boolean)}
+          />
           <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)} />
+          <Input
+            placeholder="タイトルを追加"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+          />
         </div>
 
         {isTask ? (
@@ -128,19 +193,35 @@ function EventCreator({ onSave, onCancel, initialTitle = "" }: { onSave: (event:
 
         <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)} />
+          <Textarea
+            className="h-32"
+            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)} />
+          <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)} />
+          <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)}>
+          <Select
+            value={category}
+            onValueChange={(value: Category) => setCategory(value)}
+          >
             <SelectTrigger className="w-full">
               <SelectValue placeholder="カテゴリを選択" />
             </SelectTrigger>
@@ -155,7 +236,10 @@ function EventCreator({ onSave, onCancel, initialTitle = "" }: { onSave: (event:
         </div>
         <div className="flex flex-row gap-2 items-center">
           <AngleIcon className="w-6 h-6" />
-          <Select value={priority} onValueChange={(value: Priority) => setPriority(value)}>
+          <Select
+            value={priority}
+            onValueChange={(value: Priority) => setPriority(value)}
+          >
             <SelectTrigger className="w-full">
               <SelectValue placeholder="重要度を選択" />
             </SelectTrigger>
@@ -167,7 +251,11 @@ function EventCreator({ onSave, onCancel, initialTitle = "" }: { onSave: (event:
           </Select>
         </div>
         <div className="flex items-center gap-2">
-          <Checkbox id="is-locked" checked={isLocked} onCheckedChange={(checked) => setIsLocked(checked as boolean)} />
+          <Checkbox
+            id="is-locked"
+            checked={isLocked}
+            onCheckedChange={(checked) => setIsLocked(checked as boolean)}
+          />
           <Label htmlFor="is-locked">ロックする</Label>
         </div>
 
@@ -190,13 +278,21 @@ export default function Home() {
   const [selectedDate, setSelectedDate] = useState<Date>(new Date());
   const [currentMonth, setCurrentMonth] = useState(new Date());
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const [modalState, setModalState] = useState<"minimized" | "partial" | "full">("partial");
+  const [modalState, setModalState] = useState<
+    "minimized" | "partial" | "full"
+  >("partial");
   const [searchTerm, setSearchTerm] = useState("");
-  const [editingStickyNote, setEditingStickyNote] = useState<StickyNote | 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 [draggedStickyNote, setDraggedStickyNote] = useState<StickyNote | null>(
+    null,
+  );
+  const [removedStickyNote, setRemovedStickyNote] = useState<StickyNote | null>(
+    null,
+  );
   const dragControls = useDragControls();
   const modalRef = useRef<HTMLDivElement>(null);
   const [isOpen, setIsOpen] = useState(false);
@@ -215,10 +311,22 @@ export default function Home() {
    * ハンバーガーメニューの詳細
    */
   const menuItems = [
-    { icon: Bell, label: "通知", onClick: () => setIsNotificationsOpen(!isNotificationsOpen) },
+    {
+      icon: Bell,
+      label: "通知",
+      onClick: () => setIsNotificationsOpen(!isNotificationsOpen),
+    },
     { icon: Users, label: "友達", onClick: () => console.log("友達") },
-    { icon: Download, label: "インポート", onClick: () => console.log("インポート") },
-    { icon: LogOut, label: "ログアウト", onClick: () => console.log("ログアウト") },
+    {
+      icon: Download,
+      label: "インポート",
+      onClick: () => console.log("インポート"),
+    },
+    {
+      icon: LogOut,
+      label: "ログアウト",
+      onClick: () => console.log("ログアウト"),
+    },
   ];
 
   const addStickyNote = () => {
@@ -234,7 +342,9 @@ export default function Home() {
   };
 
   const updateStickyNote = (updatedNote: StickyNote) => {
-    const updatedNotes = stickyNotes.map((note) => (note.id === updatedNote.id ? updatedNote : note));
+    const updatedNotes = stickyNotes.map((note) =>
+      note.id === updatedNote.id ? updatedNote : note,
+    );
     setStickyNotes(updatedNotes);
     setEditingStickyNote(null);
   };
@@ -287,44 +397,70 @@ export default function Home() {
       <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">
+            <div
+              key={day}
+              className="text-center font-semibold text-gray-600 dark:text-gray-300 p-2"
+            >
               {day}
             </div>
           ))}
         </div>
         {Array.from({ length: weeks }).map((_, weekIndex) => {
           const weekDays = days.slice(weekIndex * 7, (weekIndex + 1) * 7);
-          const maxEventsInWeek = Math.max(...weekDays.map((day) => getTodoCountForDay(day) + getEventCountForDay(day)));
-          const weekHeight = maxEventsInWeek > 2 ? Math.min(maxEventsInWeek * 20, 100) : "auto";
+          const maxEventsInWeek = Math.max(
+            ...weekDays.map(
+              (day) => getTodoCountForDay(day) + getEventCountForDay(day),
+            ),
+          );
+          const weekHeight =
+            maxEventsInWeek > 2 ? Math.min(maxEventsInWeek * 20, 100) : "auto";
 
           return (
-            <div key={weekIndex} className="grid grid-cols-7 gap-1" style={{ minHeight: "100px", height: weekHeight }}>
+            <div
+              key={weekIndex}
+              className="grid grid-cols-7 gap-1"
+              style={{ minHeight: "100px", height: weekHeight }}
+            >
               {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))];
+                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" : ""
+                      !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");
+                      e.currentTarget.classList.add(
+                        "bg-blue-100",
+                        "dark:bg-blue-800",
+                      );
                     }}
                     onDragLeave={(e) => {
-                      e.currentTarget.classList.remove("bg-blue-100", "dark:bg-blue-800");
+                      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");
+                      e.currentTarget.classList.remove(
+                        "bg-blue-100",
+                        "dark:bg-blue-800",
+                      );
                       if (draggedStickyNote) {
                         handleDateSelect(day);
                         setIsEventModalOpen(true);
@@ -336,11 +472,18 @@ export default function Home() {
                     {(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]}`}>
+                          <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>}
+                        {dayItems.length > 2 && (
+                          <div className="text-xs text-center font-bold">
+                            +{dayItems.length - 2} more
+                          </div>
+                        )}
                       </div>
                     )}
                   </motion.div>
@@ -386,10 +529,18 @@ export default function Home() {
     >
       <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)}>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => editStickyNote(note)}
+        >
           <Edit className="h-4 w-4" />
         </Button>
-        <Button variant="ghost" size="icon" onClick={() => deleteStickyNote(note.id)}>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => deleteStickyNote(note.id)}
+        >
           <Trash2 className="h-4 w-4" />
         </Button>
       </div>
@@ -397,7 +548,9 @@ export default function Home() {
   );
 
   const filteredStickyNotes = useMemo(() => {
-    return stickyNotes.filter((note) => note.title.toLowerCase().includes(searchTerm.toLowerCase()));
+    return stickyNotes.filter((note) =>
+      note.title.toLowerCase().includes(searchTerm.toLowerCase()),
+    );
   }, [stickyNotes, searchTerm]);
 
   const handleStatusBarClick = () => {
@@ -409,10 +562,16 @@ export default function Home() {
   };
 
   return (
-    <div className={`relative h-screen bg-gray-100 dark:bg-gray-900 overflow-hidden ${isDarkMode ? "dark" : ""}`}>
+    <div
+      className={`relative h-screen bg-gray-100 dark:bg-gray-900 overflow-hidden ${isDarkMode ? "dark" : ""}`}
+    >
       <Sheet open={isOpen} onOpenChange={setIsOpen}>
         <SheetTrigger asChild>
-          <Button variant="ghost" size="icon" className="fixed top-4 left-4 z-50 w-12 h-12 bg-white dark:bg-gray-800 rounded-full shadow-md hover:bg-gray-100 dark:hover:bg-gray-700">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="fixed top-4 left-4 z-50 w-12 h-12 bg-white dark:bg-gray-800 rounded-full shadow-md hover:bg-gray-100 dark:hover:bg-gray-700"
+          >
             {/* CSS変更する必要あるかも */}
             <Menu className="h-6 w-6" />
             <span className="sr-only">メニューを開く</span>
@@ -424,7 +583,11 @@ export default function Home() {
           </SheetHeader>
           <div className="mt-4 space-y-4">
             <div className="flex items-center space-x-2">
-              <Switch id="dark-mode" checked={isDarkMode} onCheckedChange={setIsDarkMode} />
+              <Switch
+                id="dark-mode"
+                checked={isDarkMode}
+                onCheckedChange={setIsDarkMode}
+              />
               <Label htmlFor="dark-mode">ダークモード</Label>
             </div>
           </div>
@@ -432,7 +595,11 @@ export default function Home() {
             <ul className="space-y-4">
               {menuItems.map((item, index) => (
                 <li key={index}>
-                  <Button variant="ghost" className="w-full justify-start" onClick={item.onClick}>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start"
+                    onClick={item.onClick}
+                  >
                     <item.icon className="mr-2 h-5 w-5" />
                     {item.label}
                   </Button>
@@ -443,7 +610,11 @@ export default function Home() {
                         <Input id="phone" placeholder="電話番号を入力" />
                       </div>
                       <div className="flex items-center space-x-2">
-                        <Switch id="notifications" checked={notificationsEnabled} onCheckedChange={setNotificationsEnabled} />
+                        <Switch
+                          id="notifications"
+                          checked={notificationsEnabled}
+                          onCheckedChange={setNotificationsEnabled}
+                        />
                         <Label htmlFor="notifications">通知を有効にする</Label>
                       </div>
                     </div>
@@ -458,11 +629,21 @@ export default function Home() {
       <div className="flex flex-col lg:flex-row h-full pt-20 px-4">
         <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" onClick={() => setCurrentMonth(subMonths(currentMonth, 1))}>
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={() => setCurrentMonth(subMonths(currentMonth, 1))}
+            >
               <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" onClick={() => setCurrentMonth(addMonths(currentMonth, 1))}>
+            <h2 className="text-xl lg:text-2xl font-bold dark:text-white">
+              {format(currentMonth, "yyyy年MM月", { locale: ja })}
+            </h2>
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={() => setCurrentMonth(addMonths(currentMonth, 1))}
+            >
               <ChevronRight className="h-4 w-4" />
             </Button>
           </div>
@@ -470,15 +651,29 @@ export default function Home() {
         </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">付箋</h2>
+          <h2 className="text-xl lg:text-2xl font-bold mb-4 dark:text-white">
+            付箋
+          </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={newStickyNote} onChange={(e) => setNewStickyNote(e.target.value)} placeholder="タイトルを入力" className="flex-grow" />
+            <Input
+              type="text"
+              value={newStickyNote}
+              onChange={(e) => setNewStickyNote(e.target.value)}
+              placeholder="タイトルを入力"
+              className="flex-grow"
+            />
             <Button onClick={addStickyNote} 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" />
+            <Input
+              type="text"
+              placeholder="付箋を検索..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="w-full"
+            />
           </div>
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
             <AnimatePresence>
@@ -500,7 +695,10 @@ export default function Home() {
             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)",
+              backgroundColor:
+                modalState === "minimized"
+                  ? "transparent"
+                  : "rgba(0, 0, 0, 0.5)",
               pointerEvents: modalState === "minimized" ? "none" : "auto",
             }}
             onClick={(e) => {
@@ -513,8 +711,18 @@ export default function Home() {
               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",
+                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,
@@ -547,23 +755,46 @@ export default function Home() {
                 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)}>
+              <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 })}の付箋</span>
-                {filteredStickyNotes.length > 0 && <span className="ml-2 text-sm text-gray-600 dark:text-gray-300">（{filteredStickyNotes.length}件）</span>}
+                <span className="ml-2 text-sm text-gray-600 dark:text-gray-300">
+                  {format(selectedDate, "yyyy年MM月dd日", { locale: ja })}の付箋
+                </span>
+                {filteredStickyNotes.length > 0 && (
+                  <span className="ml-2 text-sm text-gray-600 dark:text-gray-300">
+                    （{filteredStickyNotes.length}件）
+                  </span>
+                )}
               </div>
-              <div className="p-4 overflow-y-auto" style={{ maxHeight: "calc(100% - 40px)" }}>
+              <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 })}
                     の付箋
                   </h3>
-                  <Button variant="ghost" size="icon" onClick={() => setIsModalOpen(false)}>
+                  <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={newStickyNote} onChange={(e) => setNewStickyNote(e.target.value)} placeholder="新しい付箋のタイトルを入力" className="w-full" />
+                  <Input
+                    type="text"
+                    value={newStickyNote}
+                    onChange={(e) => setNewStickyNote(e.target.value)}
+                    placeholder="新しい付箋のタイトルを入力"
+                    className="w-full"
+                  />
                   <Button onClick={addStickyNote} className="w-full">
                     追加
                   </Button>
@@ -574,7 +805,9 @@ export default function Home() {
                       ))}
                     </div>
                   ) : (
-                    <p className="dark:text-gray-300">この日の付箋はありません。</p>
+                    <p className="dark:text-gray-300">
+                      この日の付箋はありません。
+                    </p>
                   )}
                 </div>
               </div>
@@ -583,7 +816,10 @@ export default function Home() {
         )}
       </AnimatePresence>
 
-      <Dialog open={!!editingStickyNote} onOpenChange={() => setEditingStickyNote(null)}>
+      <Dialog
+        open={!!editingStickyNote}
+        onOpenChange={() => setEditingStickyNote(null)}
+      >
         <DialogContent>
           <DialogHeader>
             <DialogTitle>付箋を編集</DialogTitle>
@@ -601,7 +837,13 @@ export default function Home() {
                 }
                 placeholder="タイトルを入力"
               />
-              <Button onClick={() => editingStickyNote && updateStickyNote(editingStickyNote)}>更新</Button>
+              <Button
+                onClick={() =>
+                  editingStickyNote && updateStickyNote(editingStickyNote)
+                }
+              >
+                更新
+              </Button>
             </div>
           )}
         </DialogContent>
@@ -610,7 +852,9 @@ export default function Home() {
       <Dialog open={isEventModalOpen} onOpenChange={setIsEventModalOpen}>
         <DialogContent className="max-w-3xl">
           <DialogHeader>
-            <DialogTitle>{format(selectedDate, "yyyy年MM月dd日", { locale: ja })}の予定</DialogTitle>
+            <DialogTitle>
+              {format(selectedDate, "yyyy年MM月dd日", { locale: ja })}の予定
+            </DialogTitle>
           </DialogHeader>
           <EventCreator
             onSave={addEvent}
diff --git a/task_yell/src/components/ui/sheet.tsx b/task_yell/src/components/ui/sheet.tsx
index 865af08..0af414f 100644
--- a/task_yell/src/components/ui/sheet.tsx
+++ b/task_yell/src/components/ui/sheet.tsx
@@ -15,9 +15,15 @@ const SheetClose = SheetPrimitive.Close;
 
 const SheetPortal = SheetPrimitive.Portal;
 
-const SheetOverlay = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Overlay>, React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>>(({ className, ...props }, ref) => (
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
-    className={cn("fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className)}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
     {...props}
     ref={ref}
   />
@@ -30,23 +36,34 @@ const sheetVariants = cva(
     variants: {
       side: {
         top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-        bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
         left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-        right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
       },
     },
     defaultVariants: {
       side: "right",
     },
-  }
+  },
 );
 
-interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, VariantProps<typeof sheetVariants> {}
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
 
-const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Content>, SheetContentProps>(({ side = "right", className, children, ...props }, ref) => (
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
   <SheetPortal>
     <SheetOverlay />
-    <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
       <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
         <Cross2Icon className="h-4 w-4" />
         <span className="sr-only">Close</span>
@@ -57,20 +74,67 @@ const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Con
 ));
 SheetContent.displayName = SheetPrimitive.Content.displayName;
 
-const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />;
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className,
+    )}
+    {...props}
+  />
+);
 SheetHeader.displayName = "SheetHeader";
 
-const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />;
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className,
+    )}
+    {...props}
+  />
+);
 SheetFooter.displayName = "SheetFooter";
 
-const SheetTitle = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Title>, React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>>(({ className, ...props }, ref) => (
-  <SheetPrimitive.Title ref={ref} className={cn("text-lg font-semibold text-foreground", className)} {...props} />
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-foreground", className)}
+    {...props}
+  />
 ));
 SheetTitle.displayName = SheetPrimitive.Title.displayName;
 
-const SheetDescription = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Description>, React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>>(({ className, ...props }, ref) => (
-  <SheetPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
 ));
 SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
-export { Sheet, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription };
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};
diff --git a/task_yell/src/components/ui/switch.tsx b/task_yell/src/components/ui/switch.tsx
index c18aae4..d692565 100644
--- a/task_yell/src/components/ui/switch.tsx
+++ b/task_yell/src/components/ui/switch.tsx
@@ -5,17 +5,22 @@ import * as SwitchPrimitives from "@radix-ui/react-switch";
 
 import { cn } from "@/lib/utils";
 
-const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitives.Root>, React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>>(({ className, ...props }, ref) => (
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
       "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
-      className
+      className,
     )}
     {...props}
     ref={ref}
   >
     <SwitchPrimitives.Thumb
-      className={cn("pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0")}
+      className={cn(
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
+      )}
     />
   </SwitchPrimitives.Root>
 ));