salat 4.9.5 → 5.0.0

package/README.md

@@ -13,10 +13,11 @@ A modern, visually rich CLI for checking prayer times in Morocco, built with **R
 ## 🚀 Features
 
 - **Live Countdown**: "Remaining" time updates every second in real-time.
+- **Hijri Date**: Display the current Hijri date alongside Gregorian dates.
 - **Rich UI**: Beautiful terminal interface with colors and borders.
 - **Morocco Focused**: Supports 190+ cities across Morocco.
-- **Smart Caching**: Local storage caching to minimize API calls.
-- **Developer Friendly**: Built with TypeScript and Commander.js.
+- **Smart Caching**: In-memory caching with React Query to minimize API calls.
+- **Developer Friendly**: Built with TypeScript, Commander.js, and React.
 
 ## 📦 Installation
 
@@ -36,7 +37,10 @@ salat
 salat times Rabat
 
 # Run once and exit (no live timer)
-salat -1
+salat times Casablanca -1
+
+# Get the current hijri date
+salat hijri
 
 # Show a rich visual guide
 salat guide
@@ -50,29 +54,29 @@ salat cities
 ```text
 Usage: salat [options] [command]
 
-Daily Moroccan prayers time, right in your console
-
-Options:
-  -V, --version           output the version number
-  -h, --help              display help for command
+Daily Moroccan prayers tim  output the version number
+  -h, --help                display help for command
 
 Commands:
-  times [options] [city]  Get prayer times for a city
-  guide                   Show a rich visual guide to using salat-cli
-  cities                  Display the list of available city names
+  times [options] [city]    Get prayer times for a city
+  hijri                     Display the current hijri date
+  guide                     Show a rich visual guide to using salat-cli
+  cities                    Display the list of available city names
   help [command]          display help for command
 ```
 
+## 📸 Screenshots
+
+![Screenshot 1](images/image.png)
+
 ## 🏗 Dependencies
 
 This project is built on the shoulders of giants:
-
-- [**Ink**](https://github.com/vadimdemedes/ink) - React for interactive command-line apps.
 - [**Commander.js**](https://github.com/tj/commander) - The complete solution for node.js command-line interfaces.
+- [**Ink**](https://github.com/vadimdemedes/ink) - React for interactive command-line apps.
+- [**React Query**](https://tanstack.com/query/latest) - Data synchronization library for managing server state.
 - [**date-fns**](https://date-fns.org/) - Modern JavaScript date utility library.
-- [**node-fetch**](https://github.com/node-fetch/node-fetch) - A light-weight module that brings `window.fetch` to Node.js.
-- [**domino**](https://github.com/fent/domino) - Server-side DOM implementation for parsing API responses.
-- [**node-localstorage**](https://github.com/lmaccherone/node-localstorage) - LocalStorage implementation for Node.js.
+- [**domino**](https://github.com/fent/domino) - Server-side DOM implementation for parsing API response
 
 ## 🤝 Contributing
 

package/dist/commands/hijri.js

@@ -1,3 +1,4 @@
+import { QueryProvider } from "#components/QueryProvider";
 import HijriApp from "#components/HijriApp";
 import { Command } from "commander";
 import { render } from "ink";
@@ -6,5 +7,5 @@ export const hijriCommand = new Command("hijri")
     .description("Display the hijri date")
     .option("-1, --once", "Run once and exit", false)
     .action(() => {
-    render(React.createElement(HijriApp));
+    render(React.createElement(QueryProvider, undefined, React.createElement(HijriApp)));
 });

package/dist/commands/times.js

@@ -1,4 +1,4 @@
-import App from "#components/TimesApp";
+import TimesCommandWrapper from "#components/TimesCommandWrapper";
 import { Command } from "commander";
 import { render } from "ink";
 import React from "react";
@@ -7,5 +7,8 @@ export const timesCommand = new Command("times")
     .argument("[city]", "City name")
     .option("-1, --once", "Run once and exit", false)
     .action((city, options) => {
-    render(React.createElement(App, { cityNameArg: city, once: options.once }));
+    render(React.createElement(TimesCommandWrapper, {
+        initialCity: city,
+        once: options.once,
+    }));
 });

package/dist/components/CitiesApp.js

@@ -4,7 +4,7 @@ import citiesData from "../data/cities.json" with { type: "json" };
 const CitiesApp = () => {
     const cities = citiesData;
     // Sort cities alphabetically
-    const sortedCities = [...cities].sort((a, b) => a.name.localeCompare(b.name));
-    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { bold: true, color: "cyan", children: ["\uD83C\uDF0D Available Cities in Morocco (", cities.length, ")"] }) }), _jsx(Box, { flexDirection: "row", flexWrap: "wrap", children: sortedCities.map((city) => (_jsxs(Box, { width: 25, marginBottom: 0, children: [_jsx(Text, { color: "gray", children: "- " }), _jsx(Text, { children: city.name })] }, city.id))) }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "gray", children: ["Tip: Use these names with the 'times' command, e.g., 'salat times ", sortedCities[0]?.name, "'"] }) })] }));
+    const sortedCities = [...cities].sort((a, b) => a.frenchName.localeCompare(b.frenchName));
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { bold: true, color: "cyan", children: ["\uD83C\uDF0D Available Cities in Morocco (", cities.length, ")"] }) }), _jsx(Box, { flexDirection: "row", flexWrap: "wrap", children: sortedCities.map((city) => (_jsxs(Box, { width: 25, marginBottom: 0, children: [_jsx(Text, { color: "gray", children: "- " }), _jsx(Text, { children: city.frenchName })] }, city.id))) }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "gray", children: ["Tip: Use these names with the 'times' command, e.g., 'salat times", " ", sortedCities[0]?.frenchName, "'"] }) })] }));
 };
 export default CitiesApp;

package/dist/components/CitySelect.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import SelectInput from "ink-select-input";
+import TextInput from "ink-text-input";
+import { useMemo, useState } from "react";
+import citiesData from "../data/cities.json" with { type: "json" };
+const cities = citiesData;
+const CitySelect = ({ onSelect }) => {
+    const [query, setQuery] = useState("");
+    const filteredCities = useMemo(() => {
+        if (!query)
+            return cities;
+        const lowerQuery = query.toLowerCase();
+        return cities.filter((c) => c.frenchName.toLowerCase().includes(lowerQuery));
+    }, [query]);
+    const items = filteredCities.map((c) => ({
+        label: `${c.frenchName}`,
+        value: c.frenchName,
+    }));
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 2, paddingY: 1, width: 60, borderStyle: "round", borderColor: "green", children: [_jsx(Box, { flexDirection: "column", alignItems: "center", marginBottom: 1, children: _jsx(Box, { borderStyle: "single", borderColor: "green", paddingX: 2, children: _jsx(Text, { bold: true, color: "green", children: "SELECT YOUR CITY" }) }) }), _jsxs(Box, { marginBottom: 1, paddingX: 2, children: [_jsx(Text, { color: "white", bold: true, children: "Filter: " }), _jsx(TextInput, { value: query, onChange: setQuery, placeholder: "Type city name..." })] }), _jsx(Box, { borderStyle: "single", borderColor: "gray", padding: 1, children: items.length > 0 ? (_jsx(SelectInput, { items: items.sort((a, b) => a.label.localeCompare(b.label)), onSelect: (item) => onSelect(item.value), limit: 8, indicatorComponent: ({ isSelected }) => (_jsx(Text, { color: "yellow", children: isSelected ? "> " : "  " })), itemComponent: ({ label, isSelected }) => (_jsx(Text, { color: isSelected ? "yellow" : "white", children: label })) })) : (_jsx(Box, { justifyContent: "center", width: "100%", children: _jsx(Text, { color: "red", children: "No cities found." }) })) }), _jsx(Box, { marginTop: 1, justifyContent: "center", children: _jsx(Text, { dimColor: true, color: "gray", children: "Use arrow keys to select \u2022 Enter to confirm" }) })] }));
+};
+export default CitySelect;

package/dist/components/CitySelect.test.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from "ink-testing-library";
+import { describe, expect, it, vi } from "vitest";
+import CitySelect from "./CitySelect.js";
+// Mock data
+vi.mock("../data/cities.json", () => ({
+    default: [
+        { frenchName: "Casablanca", arabicName: "الدار البيضاء" },
+        { frenchName: "Rabat", arabicName: "الرباط" },
+        { frenchName: "Tangier", arabicName: "طنجة" },
+    ],
+}));
+describe("CitySelect", () => {
+    it("should render input and list", () => {
+        const { lastFrame } = render(_jsx(CitySelect, { onSelect: () => { } }));
+        expect(lastFrame()).toContain("SELECT YOUR CITY");
+        expect(lastFrame()).toContain("Casablanca");
+        expect(lastFrame()).toContain("Rabat");
+    });
+    it("should show no results message when no match", async () => {
+        const { lastFrame, stdin } = render(_jsx(CitySelect, { onSelect: () => { } }));
+        stdin.write("NonExistentCity");
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        expect(lastFrame()).toContain("No cities found");
+    });
+    it("should filter cities by french name", async () => {
+        const { lastFrame, stdin } = render(_jsx(CitySelect, { onSelect: () => { } }));
+        stdin.write("Rab");
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        expect(lastFrame()).toContain("Rabat");
+        expect(lastFrame()).not.toContain("Casablanca");
+    });
+    it("should select a city", () => {
+        const onSelect = vi.fn();
+        const { stdin, lastFrame } = render(_jsx(CitySelect, { onSelect: onSelect }));
+        // Select first item (Casablanca)
+        stdin.write("\r");
+        expect(onSelect).toHaveBeenCalledWith("Casablanca");
+    });
+});

package/dist/components/HijriApp.js

@@ -1,32 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getHijriDate } from "#services/utils/hijri";
+import { useHijriDate } from "#hooks/useHijriDate";
 import { Box, Text } from "ink";
-import { useEffect, useState } from "react";
 const HijriApp = () => {
-    const [hijriDate, setHijriDate] = useState(null);
-    const [error, setError] = useState(null);
-    const [loading, setLoading] = useState(true);
-    useEffect(() => {
-        const fetchHijri = async () => {
-            try {
-                const result = await getHijriDate();
-                setHijriDate(result.date);
-            }
-            catch (err) {
-                setError(err.message || "Failed to fetch hijri date");
-            }
-            finally {
-                setLoading(false);
-            }
-        };
-        fetchHijri();
-    }, []);
+    const { hijriDate, error, loading } = useHijriDate();
     if (loading) {
         return _jsx(Text, { children: "Loading hijri date..." });
     }
     if (error) {
         return _jsxs(Text, { color: "red", children: ["Error: ", error] });
     }
-    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: "blue", children: "\uD83D\uDD4C Hijri Date" }) }), _jsx(Box, { padding: 1, children: _jsx(Text, { children: `\u061C${hijriDate}` }) })] }));
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: "blue", children: "\uD83D\uDD4C Hijri Date" }) }), _jsx(Box, { padding: 1, children: _jsx(Text, { children: `${hijriDate}` }) })] }));
 };
 export default HijriApp;

package/dist/components/HijriApp.test.js

@@ -1,30 +1,38 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getHijriDate } from "#services/utils/hijri";
+import { useHijriDate } from "#hooks/useHijriDate";
 import { render } from "ink-testing-library";
 import { describe, expect, it, vi } from "vitest";
 import HijriApp from "./HijriApp.js";
-vi.mock("#services/utils/hijri", () => ({
-    getHijriDate: vi.fn(),
+vi.mock("#hooks/useHijriDate", () => ({
+    useHijriDate: vi.fn(),
 }));
 describe("HijriApp", () => {
     it("should render loading state", () => {
-        vi.mocked(getHijriDate).mockImplementation(() => new Promise(() => { }));
+        vi.mocked(useHijriDate).mockReturnValue({
+            hijriDate: null,
+            error: null,
+            loading: true,
+        });
         const { lastFrame } = render(_jsx(HijriApp, {}));
         expect(lastFrame()).toContain("Loading hijri date...");
     });
-    it("should render error state", async () => {
-        vi.mocked(getHijriDate).mockRejectedValue(new Error("Network error"));
+    it("should render error state", () => {
+        vi.mocked(useHijriDate).mockReturnValue({
+            hijriDate: null,
+            error: "Network error",
+            loading: false,
+        });
         const { lastFrame } = render(_jsx(HijriApp, {}));
-        // Wait for async operation
-        await new Promise((resolve) => setTimeout(resolve, 50));
         expect(lastFrame()).toContain("Error: Network error");
     });
-    it("should render hijri date", async () => {
+    it("should render hijri date", () => {
         const mockDate = "السبت 18 شعبان 1447هـ | الموافق 07 فبراير 2026م";
-        vi.mocked(getHijriDate).mockResolvedValue({ date: mockDate });
+        vi.mocked(useHijriDate).mockReturnValue({
+            hijriDate: mockDate,
+            error: null,
+            loading: false,
+        });
         const { lastFrame } = render(_jsx(HijriApp, {}));
-        // Wait for async operation
-        await new Promise((resolve) => setTimeout(resolve, 50));
         expect(lastFrame()).toContain("Hijri Date");
         expect(lastFrame()).toContain(mockDate);
     });

package/dist/components/QueryProvider.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { queryClient } from "#lib/queryClient";
+import { QueryClientProvider } from "@tanstack/react-query";
+export const QueryProvider = ({ children }) => {
+    return (_jsx(QueryClientProvider, { client: queryClient, children: children }));
+};

package/dist/components/TimesApp.js

@@ -1,25 +1,75 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useSalat } from "#hooks/useSalat";
-import { getNextPrayer, tConv24 } from "#services/utils/time";
-import { format } from "date-fns";
-import { Box, Text } from "ink";
-const App = ({ cityNameArg, once }) => {
-    const { prayerTimes, error, loading, resolvedCityName, currentTime } = useSalat({
+import { useHijriDate } from "#hooks/useHijriDate";
+import { usePrayerTimes } from "#hooks/usePrayerTimes";
+import { getImsakTime, getNextPrayer, tConv24 } from "#services/utils/time";
+import { differenceInSeconds, format, parse, subDays } from "date-fns";
+import { Box, Text, useApp, useInput } from "ink";
+import { useEffect, useState } from "react";
+const ProgressBar = ({ progress, width, }) => {
+    const filledWidth = Math.max(0, Math.min(width, Math.round(progress * width)));
+    const emptyWidth = width - filledWidth;
+    return (_jsxs(Box, { children: [_jsx(Text, { color: "green", children: "█".repeat(filledWidth) }), _jsx(Text, { color: "gray", children: "░".repeat(emptyWidth) })] }));
+};
+const App = ({ cityNameArg, once, onReset }) => {
+    const { exit } = useApp();
+    const { prayerTimes, error, loading, resolvedCityName } = usePrayerTimes({
         cityNameArg,
-        once,
     });
+    const { hijriDate } = useHijriDate();
+    const [currentTime, setCurrentTime] = useState(new Date());
+    useInput((input) => {
+        const key = input.toLowerCase();
+        if (key === "c" && onReset) {
+            onReset();
+        }
+    });
+    useEffect(() => {
+        const timer = setInterval(() => {
+            setCurrentTime(new Date());
+        }, 1000);
+        return () => clearInterval(timer);
+    }, []);
+    useEffect(() => {
+        if (once && !loading && (prayerTimes || error)) {
+            const timer = setTimeout(() => {
+                exit();
+            }, 100);
+            return () => clearTimeout(timer);
+        }
+    }, [once, loading, prayerTimes, error, exit]);
     if (loading) {
-        return _jsx(Text, { children: "Loading prayer times..." });
+        return (_jsx(Box, { padding: 1, children: _jsxs(Text, { color: "yellow", children: ["Loading prayer times for ", resolvedCityName, "..."] }) }));
     }
     if (error) {
-        return _jsxs(Text, { color: "red", children: ["Error: ", error] });
+        return (_jsx(Box, { padding: 1, children: _jsxs(Text, { color: "red", bold: true, children: ["Error: ", error] }) }));
     }
     if (!prayerTimes) {
-        return _jsx(Text, { color: "red", children: "Could not fetch prayer times." });
+        return (_jsx(Box, { padding: 1, children: _jsx(Text, { color: "red", bold: true, children: "Could not fetch prayer times." }) }));
+    }
+    const nextPrayerData = getNextPrayer(prayerTimes, currentTime);
+    // Calculate progress
+    const prayerOrder = ["Fajr", "Chorouq", "Dhuhr", "Asr", "Maghrib", "Ishae"];
+    const nextIndex = prayerOrder.indexOf(nextPrayerData.prayer);
+    const prevIndex = (nextIndex - 1 + prayerOrder.length) % prayerOrder.length;
+    const prevPrayerName = prayerOrder[prevIndex];
+    let prevDate = parse(prayerTimes[prevPrayerName], "HH:mm", currentTime);
+    let nextDate = parse(nextPrayerData.time, "HH:mm", currentTime);
+    if (nextPrayerData.prayer === "Fajr" && currentTime.getHours() >= 12) {
+        nextDate = parse(nextPrayerData.time, "HH:mm", new Date(currentTime.getTime() + 24 * 60 * 60 * 1000));
+    }
+    else if (nextPrayerData.prayer === "Fajr" && currentTime.getHours() < 12) {
+        prevDate = subDays(parse(prayerTimes.Ishae, "HH:mm", currentTime), 1);
     }
-    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { children: ["\uD83E\uDDED ", resolvedCityName, ", Morocco"] }) }), _jsx(Box, { marginBottom: 1, children: _jsxs(Text, { children: ["\uD83D\uDCC5 ", format(currentTime, "PPPP")] }) }), prayerTimes && (_jsxs(Box, { borderStyle: "round", borderColor: "cyan", paddingX: 1, marginBottom: 1, flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, color: "cyan", children: "Next Prayer: " }), _jsx(Text, { bold: true, children: getNextPrayer(prayerTimes, currentTime).prayer })] }), _jsxs(Box, { children: [_jsx(Text, { children: "Time: " }), _jsx(Text, { children: tConv24(getNextPrayer(prayerTimes, currentTime).time) })] }), _jsxs(Box, { children: [_jsx(Text, { color: "yellow", children: "Remaining: " }), _jsx(Text, { color: "yellow", children: getNextPrayer(prayerTimes, currentTime).timeLeft })] })] })), _jsx(Box, { flexDirection: "column", children: Object.entries(prayerTimes).map(([prayer, time]) => {
-                    const isNext = prayer === getNextPrayer(prayerTimes, currentTime).prayer;
-                    return (_jsxs(Box, { children: [_jsx(Box, { width: 10, children: _jsx(Text, { color: isNext ? "cyan" : "white", bold: isNext, children: prayer }) }), _jsx(Box, { marginRight: 2, children: _jsx(Text, { color: isNext ? "cyan" : "gray", children: "-->" }) }), _jsx(Text, { color: isNext ? "yellow" : "green", bold: isNext, children: tConv24(time) })] }, prayer));
-                }) })] }));
+    const totalSeconds = differenceInSeconds(nextDate, prevDate);
+    const elapsedSeconds = differenceInSeconds(currentTime, prevDate);
+    const progress = Math.max(0, Math.min(1, elapsedSeconds / totalSeconds));
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 2, paddingY: 1, borderStyle: "round", borderColor: "green", width: 60, children: [_jsxs(Box, { flexDirection: "column", alignItems: "center", gap: 1, children: [_jsx(Box, { borderStyle: "single", borderColor: "green", children: _jsxs(Text, { bold: true, color: "green", children: ["\uD83C\uDDF2\uD83C\uDDE6 ", resolvedCityName, ", Morocco \uD83C\uDDF2\uD83C\uDDE6"] }) }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "white", bold: true, children: ["\uD83D\uDCC5  ", format(currentTime, "EEEE, MMMM do yyyy")] }) }), hijriDate && (_jsxs(Text, { color: "gray", dimColor: true, children: ["\uD83D\uDD4C ", hijriDate] }))] }), _jsx(Box, { flexDirection: "column", marginY: 1, children: Object.entries({
+                    "Imsak *": getImsakTime(prayerTimes.Fajr),
+                    ...prayerTimes,
+                }).map(([prayer, time]) => {
+                    const isNext = prayer === nextPrayerData.prayer;
+                    const isImsak = prayer === "Imsak *";
+                    return (_jsxs(Box, { justifyContent: "space-between", paddingX: 2, backgroundColor: isNext ? "green" : undefined, children: [_jsx(Box, { children: _jsxs(Text, { color: isNext ? "white" : (isImsak ? "gray" : "white"), bold: isNext, children: [isNext ? "> " : "  ", prayer.padEnd(12)] }) }), _jsx(Box, { children: _jsx(Text, { color: isNext ? "white" : (isImsak ? "gray" : "white"), bold: isNext, children: tConv24(time) }) })] }, prayer));
+                }) }), _jsx(Box, { paddingX: 2, marginTop: 1, children: _jsx(Text, { dimColor: true, color: "gray", italic: true, children: "* Imsak is 10 min before Fajr for safety" }) }), _jsxs(Box, { marginTop: 1, paddingX: 2, paddingY: 1, flexDirection: "column", alignItems: "center", borderStyle: "single", borderColor: "yellow", children: [_jsxs(Text, { children: ["Next: ", _jsx(Text, { color: "green", bold: true, children: nextPrayerData.prayer }), " in ", _jsx(Text, { color: "yellow", bold: true, children: nextPrayerData.timeLeft })] }), _jsxs(Box, { flexDirection: "column", alignItems: "center", marginY: 1, children: [_jsx(ProgressBar, { progress: progress, width: 50 }), _jsxs(Box, { justifyContent: "space-between", width: 50, marginTop: 0, children: [_jsx(Text, { color: "gray", dimColor: true, children: "0%" }), _jsxs(Text, { color: "green", bold: true, children: [Math.round(progress * 100), "%"] }), _jsx(Text, { color: "gray", dimColor: true, children: "100%" })] })] })] }), !once && (_jsx(Box, { marginTop: 1, justifyContent: "center", children: _jsx(Text, { dimColor: true, color: "gray", children: "[C] Change City  \u2022  [Ctrl+C] Exit" }) }))] }));
 };
 export default App;

package/dist/components/TimesApp.test.js

@@ -1,65 +1,80 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useSalat } from '#hooks/useSalat';
-import { render } from 'ink-testing-library';
-import { describe, expect, it, vi } from 'vitest';
-import TimesApp from './TimesApp.js';
-vi.mock('#hooks/useSalat', () => ({
-    useSalat: vi.fn()
+import { useHijriDate } from "#hooks/useHijriDate";
+import { usePrayerTimes } from "#hooks/usePrayerTimes";
+import { render } from "ink-testing-library";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import TimesApp from "./TimesApp.js";
+vi.mock("#hooks/usePrayerTimes", () => ({
+    usePrayerTimes: vi.fn(),
 }));
-describe('TimesApp', () => {
-    it('should render loading state', () => {
-        (vi.mocked(useSalat)).mockReturnValue({
+vi.mock("#hooks/useHijriDate", () => ({
+    useHijriDate: vi.fn(),
+}));
+vi.mock("ink", async () => {
+    const actual = await vi.importActual("ink");
+    return {
+        ...actual,
+        useApp: vi.fn(() => ({
+            exit: vi.fn(),
+        })),
+    };
+});
+describe("TimesApp", () => {
+    beforeEach(() => {
+        vi.mocked(useHijriDate).mockReturnValue({
+            hijriDate: "18 Sha'ban 1447",
+            error: null,
+            loading: false,
+        });
+    });
+    it("should render loading state", () => {
+        vi.mocked(usePrayerTimes).mockReturnValue({
             prayerTimes: null,
             error: null,
             loading: true,
-            resolvedCityName: '',
-            currentTime: new Date()
+            resolvedCityName: "Marrakech",
         });
         const { lastFrame } = render(_jsx(TimesApp, {}));
-        expect(lastFrame()).toContain('Loading prayer times...');
+        expect(lastFrame()).toContain("Loading prayer times for Marrakech");
     });
-    it('should render error state', () => {
-        (vi.mocked(useSalat)).mockReturnValue({
+    it("should render error state", () => {
+        vi.mocked(usePrayerTimes).mockReturnValue({
             prayerTimes: null,
-            error: 'Failed to fetch',
+            error: "Failed to fetch",
             loading: false,
-            resolvedCityName: '',
-            currentTime: new Date()
+            resolvedCityName: "",
         });
         const { lastFrame } = render(_jsx(TimesApp, {}));
-        expect(lastFrame()).toContain('Error: Failed to fetch');
+        expect(lastFrame()).toContain("Error: Failed to fetch");
     });
-    it('should render null prayerTimes state', () => {
-        (vi.mocked(useSalat)).mockReturnValue({
+    it("should render null prayerTimes state", () => {
+        vi.mocked(usePrayerTimes).mockReturnValue({
             prayerTimes: null,
             error: null,
             loading: false,
-            resolvedCityName: '',
-            currentTime: new Date()
+            resolvedCityName: "",
         });
         const { lastFrame } = render(_jsx(TimesApp, {}));
-        expect(lastFrame()).toContain('Could not fetch prayer times.');
+        expect(lastFrame()).toContain("Could not fetch prayer times.");
     });
-    it('should render prayer times', () => {
+    it("should render prayer times", () => {
         const mockPrayerTimes = {
             Fajr: "05:00",
             Chorouq: "06:30",
             Dhuhr: "12:30",
             Asr: "15:45",
             Maghrib: "18:20",
-            Ishae: "19:50"
+            Ishae: "19:50",
         };
-        (vi.mocked(useSalat)).mockReturnValue({
+        vi.mocked(usePrayerTimes).mockReturnValue({
             prayerTimes: mockPrayerTimes,
             error: null,
             loading: false,
-            resolvedCityName: 'Marrakech',
-            currentTime: new Date('2026-02-07T10:00:00')
+            resolvedCityName: "Marrakech",
         });
         const { lastFrame } = render(_jsx(TimesApp, {}));
-        expect(lastFrame()).toContain('Marrakech, Morocco');
-        expect(lastFrame()).toContain('Fajr');
-        expect(lastFrame()).toContain('05:00 AM');
-        expect(lastFrame()).toContain('Next Prayer: Dhuhr');
+        expect(lastFrame()).toContain("Marrakech");
+        expect(lastFrame()).toContain("Fajr");
+        expect(lastFrame()).toContain("05:00 AM");
     });
 });

package/dist/components/TimesCommandWrapper.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CitySelect from "#components/CitySelect";
+import { QueryProvider } from "#components/QueryProvider";
+import App from "#components/TimesApp";
+import { useState } from "react";
+const TimesCommandWrapper = ({ initialCity, once, }) => {
+    const [city, setCity] = useState(initialCity);
+    return (_jsx(QueryProvider, { children: city ? (_jsx(App, { cityNameArg: city, once: once, onReset: () => setCity(undefined) })) : (_jsx(CitySelect, { onSelect: setCity })) }));
+};
+export default TimesCommandWrapper;

package/dist/components/TimesCommandWrapper.test.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { render } from "ink-testing-library";
+import { describe, expect, it, vi } from "vitest";
+import TimesCommandWrapper from "./TimesCommandWrapper.js";
+// Mock dependencies
+vi.mock("#components/CitySelect", async () => {
+    const { Text } = await import("ink");
+    return {
+        default: ({ onSelect }) => {
+            // Trigger onSelect immediately? No, we need to test rendering.
+            return _jsx(Text, { children: "CitySelect Mock" });
+        },
+    };
+});
+vi.mock("#components/TimesApp", async () => {
+    const { Text } = await import("ink");
+    return {
+        default: ({ cityNameArg }) => (_jsxs(Text, { children: ["TimesApp Mock: ", cityNameArg] })),
+    };
+});
+vi.mock("#components/QueryProvider", () => ({
+    QueryProvider: ({ children }) => (_jsx(_Fragment, { children: children })),
+}));
+describe("TimesCommandWrapper", () => {
+    it("should render TimesApp if initialCity is provided", () => {
+        const { lastFrame } = render(_jsx(TimesCommandWrapper, { initialCity: "Casablanca" }));
+        expect(lastFrame()).toContain("TimesApp Mock: Casablanca");
+        expect(lastFrame()).not.toContain("CitySelect Mock");
+    });
+    it("should render CitySelect if no initialCity provided", () => {
+        const { lastFrame } = render(_jsx(TimesCommandWrapper, {}));
+        expect(lastFrame()).toContain("CitySelect Mock");
+        expect(lastFrame()).not.toContain("TimesApp Mock");
+    });
+});