clean up notification

blotztask-mobile/src/feature/calendar/components/task-card.tsx

@@ -21,6 +21,7 @@ import { SubtaskProgressBar } from "./subtask-progress-bar";
 import SubtaskList from "./subtask-list";
 import { TaskCardRightActions } from "./task-card-right-actions";
 import { TaskCardLeftActions } from "./task-card-left-actions";
+import { theme } from "@/shared/constants/theme";
 
 // Props
 interface TaskCardProps {
@@ -41,7 +42,6 @@ const TaskCard = ({ task, deleteTask, isDeleting, selectedDay, onOpenMode }: Tas
   const { breakDownAndReplaceSubtasks, isBreakingDownAndReplacingSubtasks } = useSubtaskMutations();
 
   // Derived values
-  const labelColor = task.label?.color ?? "#D1D1D6";
   const hasSubtasks = !!task.subtasks?.length;
   const timePeriod = formatDateRange({
     startTime: task.startTime,
@@ -139,7 +139,10 @@ const TaskCard = ({ task, deleteTask, isDeleting, selectedDay, onOpenMode }: Tas
             />
 
             {/* Vertical label colour bar */}
-            <View className="h-10 w-1.5 rounded-full" style={{ backgroundColor: labelColor }} />
+            <View
+              className="h-10 w-1.5 rounded-full"
+              style={{ backgroundColor: task.label?.color ?? theme.colors.disabled }}
+            />
 
             {/* DDL Tag */}
             {task.isDeadline && (

blotztask-mobile/src/feature/monthly-calendar/components/day-detail-panel.tsx

@@ -59,7 +59,7 @@ export const SelectedDayDetailPanel = ({ selectedDay }: { selectedDay: Date }) =
 
                   {/* Column 3: Title */}
                   <View className="flex-1">
-                    <Text className="text-base font-baloo text-secondary leading-tight">
+                    <Text className="text-lg text-secondary leading-tight py-1 font-semibold">
                       {task.title}
                     </Text>
                   </View>

blotztask-mobile/src/feature/task-add-edit/components/deadline-section.tsx

@@ -148,7 +148,7 @@ export const DeadlineSection = ({ control, getValues, isActiveTab }: DeadlineSec
                 deadlineDate={deadlineDate ? format(deadlineDate, "yyyy-MM-dd") : undefined}
                 eventStartDate={startDate ? format(startDate, "yyyy-MM-dd") : undefined}
                 eventEndDate={
-                  isActiveTab === "event" && endDate
+                  isActiveTab === SegmentButtonValue.Event && endDate
                     ? format(endDate, "yyyy-MM-dd")
                     : startDate
                       ? format(startDate, "yyyy-MM-dd")

blotztask-mobile/src/feature/task-add-edit/components/event-tab.tsx

@@ -8,38 +8,17 @@ import {
   isAfter,
   isSameDay,
   isBefore,
-  isEqual,
 } from "date-fns";
 import { zhCN, enUS } from "date-fns/locale";
-import { Control, UseFormClearErrors, UseFormTrigger, useController } from "react-hook-form";
+import { Control, FieldPath, useController } from "react-hook-form";
 import { TaskFormField } from "../models/task-form-schema";
 import TimePicker from "./time-picker";
 import DoubleDatesCalendar from "./double-dates-calendar";
 import { useTranslation } from "react-i18next";
 import Animated from "react-native-reanimated";
 import { MotionAnimations } from "@/shared/constants/animations/motion";
-import { combineDateTime } from "../util/combine-date-time";
 
-export const EventTab = ({
-  control,
-  trigger,
-  clearErrors,
-  setValue,
-}: {
-  control: Control<TaskFormField>;
-  trigger?: UseFormTrigger<TaskFormField>;
-  clearErrors?: UseFormClearErrors<TaskFormField>;
-  setValue: (name: keyof TaskFormField, value: any) => void;
-}) => {
-  const validateRange = (sd: Date, st: Date, ed: Date, et: Date) => {
-    const start = combineDateTime(sd, st);
-    const end = combineDateTime(ed, et);
-    if (start && end && (isBefore(start, end) || isEqual(start, end))) {
-      clearErrors?.("endTime");
-    } else {
-      trigger?.("endTime");
-    }
-  };
+export const EventTab = ({ control }: { control: Control<TaskFormField> }) => {
   const { t, i18n } = useTranslation("tasks");
   const isChinese = i18n.language === "zh";
   const locale = isChinese ? zhCN : enUS;
@@ -48,67 +27,27 @@ export const EventTab = ({
     "startDate" | "startTime" | "endDate" | "endTime" | null
   >(null);
 
-  const {
-    field: { value: startDateValue, onChange: startDateOnChange },
-  } = useController({
-    control,
-    name: "startDate",
-  });
-
-  const {
-    field: { value: startTimeValue, onChange: startTimeOnChange },
-  } = useController({
-    control,
-    name: "startTime",
-  });
-
-  const {
-    field: { value: endDateValue, onChange: endDateOnChange },
-  } = useController({
-    control,
-    name: "endDate",
-  });
-
-  const {
-    field: { value: endTimeValue, onChange: endTimeOnChange },
-  } = useController({
-    control,
-    name: "endTime",
-  });
-
-  const {
-    field: { value: deadlineDate },
-  } = useController({
-    control,
-    name: "deadlineDate",
-  });
+  const useField = <T extends FieldPath<TaskFormField>>(name: T) =>
+    useController<TaskFormField, T>({ control, name }).field;
 
-  const {
-    field: { value: isDdl },
-  } = useController({
-    control,
-    name: "isDeadline",
-  });
+  const { value: startDateValue, onChange: startDateOnChange } = useField("startDate");
+  const { value: startTimeValue, onChange: startTimeOnChange } = useField("startTime");
+  const { value: endDateValue, onChange: endDateOnChange } = useField("endDate");
+  const { value: endTimeValue, onChange: endTimeOnChange } = useField("endTime");
+  const { value: deadlineDate } = useField("deadlineDate");
+  const { value: isDdl } = useField("isDeadline");
 
   const ddlStr = isDdl && deadlineDate ? format(deadlineDate, "yyyy-MM-dd") : undefined;
 
   const handleStartDateChange = (nextDate: Date) => {
-    const previousSpan =
-      startDateValue && endDateValue
-        ? Math.max(differenceInCalendarDays(endDateValue, startDateValue), 0)
-        : 0;
-
     startDateOnChange(nextDate);
 
-    const nextEndDate =
-      endDateValue && isAfter(nextDate, endDateValue)
-        ? addDays(nextDate, previousSpan)
-        : endDateValue;
     if (endDateValue && isAfter(nextDate, endDateValue)) {
+      const previousSpan =
+        startDateValue ? Math.max(differenceInCalendarDays(endDateValue, startDateValue), 0) : 0;
+      const nextEndDate = addDays(nextDate, previousSpan);
       endDateOnChange(nextEndDate);
     }
-
-    validateRange(nextDate, startTimeValue, nextEndDate, endTimeValue);
   };
 
   const isDateInvalid =
@@ -235,10 +174,7 @@ export const EventTab = ({
               startDate={startDateValue}
               endDate={endDateValue}
               deadlineDate={ddlStr}
-              setEndDate={(v: Date) => {
-                endDateOnChange(v);
-                validateRange(startDateValue, startTimeValue, v, endTimeValue);
-              }}
+              setEndDate={(v: Date) => endDateOnChange(v)}
               current={format(
                 activeSelector === "endDate"
                   ? (endDateValue ?? startDateValue ?? new Date())
@@ -255,10 +191,7 @@ export const EventTab = ({
           >
             <TimePicker
               value={endTimeValue}
-              onChange={(v: Date) => {
-                endTimeOnChange(v);
-                validateRange(startDateValue, startTimeValue, endDateValue, v);
-              }}
+              onChange={(v: Date) => endTimeOnChange(v)}
             />
           </Animated.View>
         )}

blotztask-mobile/src/feature/task-add-edit/components/segment-toggle.tsx

@@ -14,12 +14,12 @@ const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 
 export function SegmentToggle({ value, setValue }: Props) {
   const { t } = useTranslation("tasks");
-  const tabPositionX = useSharedValue(value === "reminder" ? 0 : 224 / 2);
+  const tabPositionX = useSharedValue(value === SegmentButtonValue.Reminder ? 0 : 224 / 2);
   const [containerWidth, setContainerWidth] = React.useState(224);
   const isInitialMount = React.useRef(true);
   React.useEffect(() => {
     if (containerWidth > 0) {
-      onTabMovingAnimation(value === "reminder" ? 0 : 1, !isInitialMount.current);
+      onTabMovingAnimation(value === SegmentButtonValue.Reminder ? 0 : 1, !isInitialMount.current);
       isInitialMount.current = false;
     }
   }, [value, containerWidth]);
@@ -47,13 +47,13 @@ export function SegmentToggle({ value, setValue }: Props) {
       <AnimatedPressable
         className={`flex-1 justify-center items-center py-2 px-3 rounded-xl `}
         onPress={() => {
-          setValue("reminder");
+          setValue(SegmentButtonValue.Reminder);
           onTabMovingAnimation(0);
         }}
       >
         <Text
           className={`text-[15px] font-semibold ${
-            value === "reminder" ? "text-[#1A2433]" : "text-[#6B768A]"
+            value === SegmentButtonValue.Reminder ? "text-[#1A2433]" : "text-[#6B768A]"
           }`}
         >
           {t("form.reminder")}
@@ -64,13 +64,13 @@ export function SegmentToggle({ value, setValue }: Props) {
       <AnimatedPressable
         className={`flex-1 justify-center items-center py-2 px-3 rounded-xl`}
         onPress={() => {
-          setValue("event");
+          setValue(SegmentButtonValue.Event);
           onTabMovingAnimation(1);
         }}
       >
         <Text
           className={`text-[15px] font-semibold ${
-            value === "event" ? "text-[#1A2433]" : "text-[#6B768A]"
+            value === SegmentButtonValue.Event ? "text-[#1A2433]" : "text-[#6B768A]"
           }`}
         >
           {t("form.event")}

blotztask-mobile/src/feature/task-add-edit/models/segment-button-value.ts

@@ -1 +1,4 @@
-export type SegmentButtonValue = "reminder" | "event";
+export enum SegmentButtonValue {
+  Reminder = "reminder",
+  Event = "event",
+}

blotztask-mobile/src/feature/task-add-edit/models/task-form-schema.ts

@@ -17,8 +17,8 @@ export const taskFormSchema = z
     labelId: z.number().nullable(),
     alert: z.number().nullable(),
     isDeadline: z.boolean(),
-    deadlineDate: z.date(),
-    deadlineTime: z.date(),
+    deadlineDate: z.date().nullable(),
+    deadlineTime: z.date().nullable(),
   })
   .refine(
     (data) => {