Editor refactor

package.json

@@ -12,11 +12,13 @@
     "check-format": "prettier --check ."
   },
   "dependencies": {
+    "@poursha98/react-ios-time-picker": "^2.0.3",
     "@radix-ui/react-dialog": "^1.1.13",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-popover": "^1.1.13",
     "@radix-ui/react-select": "^2.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-toast": "^1.2.15",
     "clsx": "^2.1.1",
     "date-fns-tz": "^3.2.0",

src/app/(event)/[event-code]/page-client.tsx

@@ -10,7 +10,7 @@ import { ResultsAvailabilityMap } from "@/core/availability/types";
 import { EventRange } from "@/core/event/types";
 import LinkButton from "@/features/button/components/link";
 import { AvailabilityDataResponse } from "@/features/event/availability/fetch-data";
-import TimeZoneSelector from "@/features/event/components/timezone-selector";
+import TimeZoneSelector from "@/features/event/components/selectors/timezone";
 import ScheduleGrid from "@/features/event/grid/grid";
 import EventInfoDrawer, { EventInfo } from "@/features/event/info-drawer";
 

src/app/(event)/[event-code]/painting/page-client.tsx

@@ -15,7 +15,7 @@ import ActionButton from "@/features/button/components/action";
 import LinkButton from "@/features/button/components/link";
 import { SelfAvailabilityResponse } from "@/features/event/availability/fetch-data";
 import { validateAvailabilityData } from "@/features/event/availability/validate-data";
-import TimeZoneSelector from "@/features/event/components/timezone-selector";
+import TimeZoneSelector from "@/features/event/components/selectors/timezone";
 import ScheduleGrid from "@/features/event/grid/grid";
 import EventInfoDrawer, { EventInfo } from "@/features/event/info-drawer";
 import { useToast } from "@/features/toast/context";

src/components/segmented-control.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { useMemo } from "react";
+
+import { cn } from "@/lib/utils/classname";
+
+type SegmentedControlProps<T extends string> = {
+  options: { label: string; value: T }[];
+  value: T;
+  onChange: (value: T) => void;
+  className?: string;
+};
+
+export default function SegmentedControl<T extends string>({
+  options,
+  value,
+  onChange,
+  className,
+}: SegmentedControlProps<T>) {
+  const activeIndex = options.findIndex((opt) => opt.value === value);
+  const count = options.length;
+
+  // Calculate dynamic style for the sliding pill
+  const pillStyle = useMemo(() => {
+    const pillWidth = `(100% - 16px) / ${count}`;
+    const leftOffset = `calc(8px + (${pillWidth}) * ${activeIndex})`;
+
+    return {
+      width: `calc(${pillWidth})`,
+      left: activeIndex === -1 ? "8px" : leftOffset,
+    };
+  }, [activeIndex, count]);
+
+  return (
+    <div
+      className={cn(
+        "bg-panel relative isolate grid w-full rounded-full p-2",
+        className,
+      )}
+      style={{
+        gridTemplateColumns: `repeat(${count}, minmax(0, 1fr))`,
+      }}
+    >
+      <div
+        className="bg-accent absolute bottom-2 top-2 rounded-full transition-[left,width] duration-300 ease-out"
+        style={pillStyle}
+      />
+
+      {options.map((option) => {
+        const isSelected = option.value === value;
+        return (
+          <button
+            key={option.value}
+            onClick={() => onChange(option.value)}
+            className={cn(
+              "z-10 w-full rounded-full py-2 text-sm font-medium transition-colors duration-300 focus:outline-none",
+              isSelected
+                ? "text-white"
+                : "text-foreground hover:bg-accent/25 cursor-pointer",
+            )}
+          >
+            {option.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

src/core/event/context.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { createContext, useContext, ReactNode } from "react";
+
+import { EventRange } from "@/core/event/types";
+import { useEventInfo } from "@/core/event/use-event-info";
+
+type EventContextType = ReturnType<typeof useEventInfo>;
+
+const EventContext = createContext<EventContextType | null>(null);
+
+type EventProviderProps = {
+  children: ReactNode;
+  initialData?: {
+    title: string;
+    code: string;
+    eventRange: EventRange;
+  };
+};
+
+export function EventProvider({ children, initialData }: EventProviderProps) {
+  const eventInfo = useEventInfo(initialData);
+
+  return (
+    <EventContext.Provider value={eventInfo}>{children}</EventContext.Provider>
+  );
+}
+
+export function useEventContext() {
+  const context = useContext(EventContext);
+  if (!context) {
+    throw new Error("useEventContext must be used within an EventProvider");
+  }
+  return context;
+}

src/core/event/reducers/range-reducer.ts

@@ -4,7 +4,8 @@ export type EventRangeAction =
   | { type: "SET_RANGE_INFO"; payload: EventRange }
   | { type: "SET_RANGE_TYPE"; payload: "specific" | "weekday" }
   | { type: "SET_DATE_RANGE"; payload: { from: string; to: string } }
-  | { type: "SET_TIME_RANGE"; payload: { from: number; to: number } }
+  | { type: "SET_START_TIME"; payload: number }
+  | { type: "SET_END_TIME"; payload: number }
   | {
       type: "SET_WEEKDAYS";
       payload: { weekdays: Partial<Record<keyof WeekdayMap, 0 | 1>> };
@@ -67,12 +68,22 @@ export function EventRangeReducer(
       };
     }
 
-    case "SET_TIME_RANGE": {
+    case "SET_START_TIME": {
       return {
         ...state,
         timeRange: {
-          from: action.payload.from,
-          to: action.payload.to,
+          from: action.payload,
+          to: state.timeRange.to,
+        },
+      };
+    }
+
+    case "SET_END_TIME": {
+      return {
+        ...state,
+        timeRange: {
+          from: state.timeRange.from,
+          to: action.payload,
         },
       };
     }