reorganize menu files

apps/expo/src/app/home/_components/dish-card.tsx

@@ -5,7 +5,7 @@ import { Image, ListItem, Text, View, XStack, YGroup, YStack } from "tamagui";
 import type { MenuWithRelations } from "@zotmeal/db";
 
 import { PinButton } from "~/components";
-import { testDishImages } from "../testDishImages";
+import { testDishImages } from "../../../components/menu/testDishImages";
 
 type Station = MenuWithRelations["stations"][0];
 type Dish = MenuWithRelations["stations"][0]["dishes"][0];
@@ -33,7 +33,7 @@ export const DishCard = ({
       <Link
         asChild
         href={{
-          pathname: "/home/item/[id]",
+          pathname: "/item/[id]",
           params: {
             id: dish.id,
             stationId,

apps/expo/src/app/home/_components/period-picker.tsx

@@ -5,7 +5,7 @@ import type { PeriodName } from "@zotmeal/utils";
 interface PeriodPickerProps extends PickerProps {
   availablePeriods: PeriodName[];
   period: PeriodName;
-  setPeriod: (periodName: PeriodName) => void;
+  setPeriod: (period: PeriodName) => void;
   color: string;
 }
 

apps/expo/src/app/index.tsx

@@ -1,3 +1,3 @@
-import { Home } from "./home";
+import { Home } from "../components";
 
 export default () => <Home />;

apps/expo/src/app/home/item/[id].tsx → apps/expo/src/app/item/[id].tsx

@@ -19,7 +19,7 @@ import type { NutritionInfo } from "@zotmeal/db";
 
 import { PinButton } from "~/components";
 import { useZotmealStore } from "~/utils";
-import { testDishImages } from "../testDishImages";
+import { testDishImages } from "../../components/menu/testDishImages";
 import RateItem from "./RateItem";
 
 export default function MenuItem() {

apps/expo/src/components/index.ts

@@ -1,2 +1,3 @@
 export * from "./navigation";
 export * from "./ui";
+export * from "./menu";

apps/expo/src/app/home/index.tsx → apps/expo/src/components/menu/Home.tsx

@@ -20,10 +20,10 @@ import { getCurrentPeriodName, getDayPeriodsByDate } from "@zotmeal/utils";
 import { RestaurantTabs } from "~/components";
 import { useZotmealStore } from "~/utils";
 import { api } from "~/utils/api";
-import { UniversalDatePicker } from "./_components/date-picker";
-import { EventToast } from "./_components/event-toast";
-import { PeriodPicker } from "./_components/period-picker";
-import { StationTabs } from "./_components/station-tabs";
+import { UniversalDatePicker } from "../../app/home/_components/date-picker";
+import { EventToast } from "../../app/home/_components/event-toast";
+import { PeriodPicker } from "../../app/home/_components/period-picker";
+import { StationTabs } from "../../app/home/_components/station-tabs";
 
 export function Home() {
   const { anteateryMenu, brandywineMenu, setAnteateryMenu, setBrandywineMenu } =
@@ -38,12 +38,13 @@ export function Home() {
   const [period, setPeriod] = useState<PeriodName>(
     currentPeriod === "closed" ? "breakfast" : currentPeriod,
   );
+
   const theme = useTheme();
 
   const queryOptions = {
     retry: false,
     refetchOnWindowFocus: false,
-  } as const;
+  } satisfies Parameters<typeof api.menu.get.useQuery>[1];
 
   const anteateryQuery = api.menu.get.useQuery(
     {
@@ -124,7 +125,7 @@ export function Home() {
         ) : null}
         {brandywineMenu ? (
           <StationTabs stations={brandywineMenu.stations} />
-        ) : (
+        ) : brandywineQuery.isPending ? null : (
           <View alignItems="center">
             <AlertTriangle size="$10" />
             <Text>Menu not found</Text>
@@ -149,7 +150,7 @@ export function Home() {
         ) : null}
         {anteateryMenu ? (
           <StationTabs stations={anteateryMenu.stations} />
-        ) : (
+        ) : anteateryQuery.isPending ? null : (
           <View alignItems="center">
             <AlertTriangle size="$10" />
             <Text>Menu not found</Text>
@@ -171,10 +172,19 @@ export function Home() {
           <PeriodPicker
             availablePeriods={getDayPeriodsByDate(date)}
             period={period}
-            setPeriod={setPeriod}
+            setPeriod={(period) => {
+              setPeriod(period);
+              refetchMenusWithDebounce();
+            }}
             color={theme.color?.val as string}
           />
-          <UniversalDatePicker date={date} setDate={setDate} />
+          <UniversalDatePicker
+            date={date}
+            setDate={(date) => {
+              setDate(date);
+              refetchMenusWithDebounce();
+            }}
+          />
           <Button
             disabled={anteateryQuery.isLoading || brandywineQuery.isLoading}
             opacity={

apps/expo/src/components/menu/index.ts

@@ -0,0 +1 @@
+export * from "./Home";

apps/expo/src/utils/useSettingsStore.ts

@@ -9,9 +9,9 @@ interface SettingsState {
 }
 
 export const useSettingsStore = create<SettingsState>((set, get) => ({
-  colorSchemePreference: "system",
-  setColorSchemePreference: (colorScheme) =>
-    set({ colorSchemePreference: colorScheme }),
+  colorSchemePreference: "system" as const,
+  setColorSchemePreference: (colorSchemePreference) =>
+    set({ colorSchemePreference }),
 }));
 
 export const useZotmealColorScheme = () => {