feat(web): add ArrowButton component for task navigation

- Introduced ArrowButton component to encapsulate left and right navigation buttons with icons.
- Updated Task and TaskListHeader components to utilize ArrowButton for migrating tasks and navigating days.
- Removed direct icon usage in favor of the new ArrowButton for cleaner code and improved reusability.

Author: tyler-dane

packages/web/src/components/Button/ArrowButton.tsx

@@ -0,0 +1,24 @@
+import { ChevronLeftIcon } from "@web/views/Day/components/Icons/ChevronLeftIcon";
+import { ChevronRightIcon } from "@web/views/Day/components/Icons/ChevronRightIcon";
+
+export const ArrowButton = ({
+  direction,
+  label,
+  onClick,
+}: {
+  direction: "left" | "right";
+  label: string;
+  onClick: () => void;
+}) => {
+  const hoverColor = "bg-white/20";
+
+  return (
+    <button
+      className={`flex h-6 w-6 items-center justify-center rounded-full text-white transition-colors hover:${hoverColor} focus:${hoverColor} focus:ring-2 focus:ring-white/50 focus:outline-none`}
+      aria-label={label}
+      onClick={onClick}
+    >
+      {direction === "left" ? <ChevronLeftIcon /> : <ChevronRightIcon />}
+    </button>
+  );
+};

packages/web/src/views/Day/components/Icons/ChevronLeftIcon.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 export const ChevronLeftIcon = () => {
   return (
     <svg

packages/web/src/views/Day/components/Icons/ChevronRightIcon.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 export const ChevronRightIcon = () => {
   return (
     <svg

packages/web/src/views/Day/components/Task/Task.tsx

@@ -1,8 +1,7 @@
 import React from "react";
 import { DATA_TASK_ELEMENT_ID } from "@web/common/constants/web.constants";
+import { ArrowButton } from "@web/components/Button/ArrowButton";
 import { Task as TaskType } from "../../task.types";
-import { ChevronLeftIcon } from "../Icons/ChevronLeftIcon";
-import { ChevronRightIcon } from "../Icons/ChevronRightIcon";
 import { TaskCircleIcon } from "../Icons/TaskCircleIcon";
 
 export interface TaskProps {
@@ -86,23 +85,17 @@ export const Task = ({
           onChange={(e) => onTitleChange(e.target.value)}
         />
       </div>
-      {/* Migration buttons */}
       <div className="ml-auto flex gap-1 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100">
-        <button
-          aria-label="Move task to previous day"
-          className="flex h-6 w-6 items-center justify-center rounded-full text-white transition-colors hover:bg-white/10 hover:text-white focus:bg-white/10 focus:text-white focus:ring-2 focus:ring-white/50 focus:outline-none"
+        <ArrowButton
+          direction="left"
+          label="Move task to previous day"
           onClick={() => onMigrate(task.id, "backward")}
-        >
-          <ChevronLeftIcon />
-        </button>
-
-        <button
-          aria-label="Move task to next day"
-          className="flex h-6 w-6 items-center justify-center rounded-full text-white transition-colors hover:bg-white/10 hover:text-white focus:bg-white/10 focus:text-white focus:ring-2 focus:ring-white/50 focus:outline-none"
+        />
+        <ArrowButton
+          direction="right"
+          label="Move task to next day"
           onClick={() => onMigrate(task.id, "forward")}
-        >
-          <ChevronRightIcon />
-        </button>
+        />
       </div>
     </div>
   );

packages/web/src/views/Day/components/TaskList/TaskListHeader.tsx

@@ -1,9 +1,8 @@
 import dayjs from "@core/util/date/dayjs";
+import { ArrowButton } from "@web/components/Button/ArrowButton";
 import { TooltipWrapper } from "@web/components/Tooltip/TooltipWrapper";
 import { useDateInView } from "../../hooks/navigation/useDateInView";
 import { useDateNavigation } from "../../hooks/navigation/useDateNavigation";
-import { ChevronLeftIcon } from "../Icons/ChevronLeftIcon";
-import { ChevronRightIcon } from "../Icons/ChevronRightIcon";
 import { CircleIcon } from "../Icons/CircleIcon";
 
 export const DAY_HEADING_FORMAT = "dddd";
@@ -14,8 +13,6 @@ export const TaskListHeader = () => {
     useDateNavigation();
 
   const dateInView = useDateInView();
-  // Display the date components directly from UTC to avoid timezone conversion issues
-  // The UTC date represents the calendar date, so we can format it directly
   const header = dateInView.locale("en").format(DAY_HEADING_FORMAT);
   const subheader = dateInView.locale("en").format(DAY_SUBHEADING_FORMAT);
   const isToday =
@@ -51,20 +48,18 @@ export const TaskListHeader = () => {
             </TooltipWrapper>
           </div>
           <TooltipWrapper onClick={navigateToPreviousDay} shortcut="J">
-            <button
-              className="flex h-6 w-6 items-center justify-center rounded-full text-white transition-colors hover:bg-white/20 focus:bg-white/20 focus:ring-2 focus:ring-white/50 focus:outline-none"
-              aria-label="Previous day"
-            >
-              <ChevronLeftIcon />
-            </button>
+            <ArrowButton
+              direction="left"
+              label="Previous day"
+              onClick={navigateToPreviousDay}
+            />
           </TooltipWrapper>
           <TooltipWrapper onClick={navigateToNextDay} shortcut="K">
-            <button
-              className="flex h-6 w-6 items-center justify-center rounded-full text-white transition-colors hover:bg-white/20 focus:bg-white/20 focus:ring-2 focus:ring-white/50 focus:outline-none"
-              aria-label="Next day"
-            >
-              <ChevronRightIcon />
-            </button>
+            <ArrowButton
+              direction="right"
+              label="Next day"
+              onClick={navigateToNextDay}
+            />
           </TooltipWrapper>
         </div>
       </div>