Mobile App design

apps/frontend-mobile/hooks/useRecentSearches.ts

@@ -0,0 +1,41 @@
+import { useState, useEffect, useCallback } from 'react';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+const STORAGE_KEY = 'recent_medicine_searches';
+const MAX_ITEMS = 5;
+
+export function useRecentSearches() {
+  const [recentSearches, setRecentSearches] = useState<string[]>([]);
+
+  useEffect(() => {
+    AsyncStorage.getItem(STORAGE_KEY).then((data) => {
+      if (data) setRecentSearches(JSON.parse(data));
+    });
+  }, []);
+
+  const addSearch = useCallback(async (query: string) => {
+    const trimmed = query.trim();
+    if (!trimmed) return;
+    setRecentSearches((prev) => {
+      const filtered = prev.filter((s) => s !== trimmed);
+      const next = [trimmed, ...filtered].slice(0, MAX_ITEMS);
+      AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(next));
+      return next;
+    });
+  }, []);
+
+  const removeSearch = useCallback(async (query: string) => {
+    setRecentSearches((prev) => {
+      const next = prev.filter((s) => s !== query);
+      AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(next));
+      return next;
+    });
+  }, []);
+
+  const clearAll = useCallback(async () => {
+    setRecentSearches([]);
+    AsyncStorage.removeItem(STORAGE_KEY);
+  }, []);
+
+  return { recentSearches, addSearch, removeSearch, clearAll };
+}

apps/frontend-mobile/hooks/useThemeColor.ts

@@ -0,0 +1,19 @@
+import { useColorScheme } from 'react-native';
+import { colors, darkColors } from '../constants/theme';
+import { useThemeStore, ThemeMode } from '../store/themeStore';
+
+export type AppColors = typeof colors;
+
+export function useThemeColor(): { colors: AppColors; isDark: boolean; mode: ThemeMode } {
+  const systemScheme = useColorScheme();
+  const mode = useThemeStore((s) => s.mode);
+
+  const isDark =
+    mode === 'dark' || (mode === 'system' && systemScheme === 'dark');
+
+  return {
+    colors: isDark ? darkColors : colors,
+    isDark,
+    mode,
+  };
+}