vibefast-cli 0.2.4 → 0.3.1

package/2/apps/native/src/features/settings/ui/item.tsx

@@ -0,0 +1,45 @@
+import type * as React from 'react';
+import { I18nManager, StyleSheet, View } from 'react-native';
+
+import { Pressable, Text } from '@/components/ui';
+import { ArrowRight } from '@/components/ui/icons';
+import type { TxKeyPath } from '@/lib';
+
+type ItemProps = {
+  text: TxKeyPath;
+  value?: string;
+  onPress?: () => void;
+  icon?: React.ReactNode;
+};
+
+const styles = StyleSheet.create({
+  arrowRTL: {
+    transform: [{ scaleX: -1 }],
+  },
+});
+
+export const Item = ({ text, value, icon, onPress }: ItemProps) => {
+  const isPressable = onPress !== undefined;
+  const isRTL = I18nManager.isRTL;
+
+  return (
+    <Pressable
+      onPress={onPress}
+      pointerEvents={isPressable ? 'auto' : 'none'}
+      className="flex-1 flex-row items-center justify-between p-3.5"
+    >
+      <View className="flex-row items-center">
+        {icon && <View className="pr-2">{icon}</View>}
+        <Text tx={text} />
+      </View>
+      <View className="flex-row items-center">
+        <Text className="text-neutral-600 dark:text-white">{value}</Text>
+        {isPressable && (
+          <View className="pl-2">
+            <ArrowRight style={isRTL ? styles.arrowRTL : undefined} />
+          </View>
+        )}
+      </View>
+    </Pressable>
+  );
+};

package/2/apps/native/src/features/settings/ui/items-container.tsx

@@ -0,0 +1,23 @@
+import type React from 'react';
+import { View } from 'react-native';
+
+import { Text } from '@/components/ui';
+import type { TxKeyPath } from '@/lib';
+
+type Props = {
+  children: React.ReactNode;
+  title?: TxKeyPath;
+};
+
+export const ItemsContainer = ({ children, title }: Props) => {
+  return (
+    <>
+      {title && <Text className="pb-2 pt-4 text-lg" tx={title} />}
+      {
+        <View className="rounded-md border border-neutral-200 dark:border-neutral-700 dark:bg-neutral-900">
+          {children}
+        </View>
+      }
+    </>
+  );
+};

package/2/apps/native/src/features/settings/ui/language-item.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+
+import type { OptionType } from '@/components/ui';
+import { Options, useModal } from '@/components/ui';
+import { translate, useSelectedLanguage } from '@/lib';
+import type { Language } from '@/lib/i18n/resources';
+
+import { Item } from './item';
+
+export const LanguageItem = () => {
+  const { language, setLanguage } = useSelectedLanguage();
+  const modal = useModal();
+  const onSelect = React.useCallback(
+    (option: OptionType) => {
+      setLanguage(option.value as Language);
+      modal.dismiss();
+    },
+    [setLanguage, modal],
+  );
+
+  const langs = React.useMemo(
+    () => [
+      { label: `🇺🇸 ${translate('settings.english')}`, value: 'en' },
+      { label: `🇸🇦 ${translate('settings.arabic')}`, value: 'ar' },
+      { label: `🇪🇸 ${translate('settings.spanish')}`, value: 'es' },
+      { label: `🇫🇷 ${translate('settings.french')}`, value: 'fr' },
+      { label: `🇩🇪 ${translate('settings.german')}`, value: 'de' },
+    ],
+    [],
+  );
+
+  const selectedLanguage = React.useMemo(
+    () => langs.find((lang) => lang.value === language),
+    [language, langs],
+  );
+
+  return (
+    <>
+      <Item
+        text="settings.language"
+        value={selectedLanguage?.label}
+        onPress={modal.present}
+      />
+      <Options
+        ref={modal.ref}
+        options={langs}
+        onSelect={onSelect}
+        value={selectedLanguage?.value}
+      />
+    </>
+  );
+};

package/2/apps/native/src/features/settings/ui/notification-item.tsx

@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from 'react';
+import { View } from 'react-native';
+
+import { Text } from '@/components/ui';
+import { Switch } from '@/components/ui/switch';
+import { translate } from '@/lib';
+import { usePushNotifications } from '@/lib/hooks';
+
+export const NotificationItem = () => {
+  const {
+    handleToggleNotifications,
+    isRegistering,
+    notificationStatus,
+    isStatusLoading,
+  } = usePushNotifications();
+
+  const [isEnabled, setIsEnabled] = useState(false);
+
+  // Sync local state with backend status
+  useEffect(() => {
+    if (notificationStatus) {
+      // Enable if user has token and notifications are not paused
+      const shouldBeEnabled =
+        notificationStatus.hasToken && !notificationStatus.paused;
+      setIsEnabled(shouldBeEnabled);
+    }
+  }, [notificationStatus]);
+
+  const handleToggle = async (checked: boolean) => {
+    const previousState = isEnabled;
+    setIsEnabled(checked);
+
+    try {
+      await handleToggleNotifications(checked);
+    } catch (error) {
+      // Revert state on error
+      setIsEnabled(previousState);
+      console.error('Failed to toggle notifications:', error);
+    }
+  };
+
+  return (
+    <View className="flex-1 flex-row items-center justify-between p-3.5">
+      <View className="flex-row items-center">
+        <Text>{translate('settings.notifications')}</Text>
+      </View>
+      <View className="flex-row items-center">
+        <Switch
+          value={isEnabled}
+          onValueChange={handleToggle}
+          accessibilityLabel={translate(
+            'settings.accessibility.notifications_toggle',
+          )}
+          disabled={isRegistering || isStatusLoading}
+        />
+      </View>
+    </View>
+  );
+};

package/2/apps/native/src/features/settings/ui/theme-item.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import type { OptionType } from '@/components/ui';
+import { Options, useModal } from '@/components/ui';
+import type { ColorSchemeType } from '@/lib';
+import { translate, useSelectedTheme } from '@/lib';
+
+import { Item } from './item';
+
+export const ThemeItem = () => {
+  const { selectedTheme, setSelectedTheme } = useSelectedTheme();
+  const modal = useModal();
+
+  const onSelect = React.useCallback(
+    (option: OptionType) => {
+      setSelectedTheme(option.value as ColorSchemeType);
+      modal.dismiss();
+    },
+    [setSelectedTheme, modal],
+  );
+
+  const themes = [
+    { label: `${translate('settings.theme.dark')} 🌙`, value: 'dark' },
+    { label: `${translate('settings.theme.light')} 🌞`, value: 'light' },
+    { label: `${translate('settings.theme.system')} ⚙️`, value: 'system' },
+  ];
+
+  const theme = themes.find((t) => t.value === selectedTheme);
+
+  return (
+    <>
+      <Item
+        text="settings.theme.title"
+        value={theme?.label}
+        onPress={modal.present}
+      />
+      <Options
+        ref={modal.ref}
+        options={themes}
+        onSelect={onSelect}
+        value={theme?.value}
+      />
+    </>
+  );
+};

package/2/apps/native/src/features/tracker-app/app/index.tsx

@@ -0,0 +1,108 @@
+import { Ionicons, MaterialIcons } from '@expo/vector-icons';
+import React from 'react';
+import { ScrollView, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { Text } from '@/components/ui';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+import CalorieCard from '../components/calorie-card';
+import MacroCard from '../components/macro-card';
+import PromoBanner from '../components/promo-banner';
+import RecentlyLogged from '../components/recently-logged';
+import WeekCalendar from '../components/week-calendar';
+
+export default function HomeScreen() {
+  const theme = useThemeConfig();
+
+  return (
+    <SafeAreaView
+      className="flex-1"
+      style={{ backgroundColor: theme.colors.background }}
+    >
+      <ScrollView className="flex-1 px-5" showsVerticalScrollIndicator={false}>
+        <View className="flex-row items-center justify-between pb-6 pt-4">
+          <View className="flex-row items-center">
+            <MaterialIcons
+              name="restaurant-menu"
+              size={28}
+              color={theme.colors.foreground}
+            />
+            <Text
+              className="ml-2 text-2xl font-extrabold"
+              style={{ color: theme.colors.foreground }}
+            >
+              CalAI
+            </Text>
+          </View>
+          <View
+            className="flex-row items-center rounded-2xl px-3 py-1.5"
+            style={{ backgroundColor: theme.colors.card }}
+          >
+            <Ionicons name="flame" size={16} color={theme.colors.warning} />
+            <Text
+              className="ml-1 text-base font-bold"
+              style={{ color: theme.colors.foreground }}
+            >
+              1
+            </Text>
+          </View>
+        </View>
+
+        <WeekCalendar />
+
+        <CalorieCard calories={1852} progress={25} />
+
+        <View className="mb-2 flex-row gap-3">
+          <MacroCard
+            value={122}
+            unit="g"
+            label="Protein left"
+            progress={35}
+            color={theme.colors.destructive}
+            icon={
+              <MaterialIcons
+                name="restaurant-menu"
+                size={20}
+                color={theme.colors.destructive}
+              />
+            }
+            delay={600}
+          />
+          <MacroCard
+            value={222}
+            unit="g"
+            label="Carbs left"
+            progress={60}
+            color={theme.colors.warning}
+            icon={
+              <Ionicons
+                name="nutrition"
+                size={20}
+                color={theme.colors.warning}
+              />
+            }
+            delay={800}
+          />
+          <MacroCard
+            value={49}
+            unit="g"
+            label="Fat left"
+            progress={45}
+            color={theme.colors.primary}
+            icon={
+              <Ionicons name="water" size={20} color={theme.colors.primary} />
+            }
+            delay={1000}
+          />
+        </View>
+
+        <PromoBanner />
+
+        <RecentlyLogged />
+
+        <View className="h-25" />
+      </ScrollView>
+    </SafeAreaView>
+  );
+}

package/2/apps/native/src/features/tracker-app/components/animated-number.tsx

@@ -0,0 +1,102 @@
+import React, { useMemo, useRef, useState } from 'react';
+import { StyleSheet } from 'react-native';
+import { AnimatedRollingNumber } from 'react-native-animated-rolling-numbers';
+import {
+  Easing,
+  ReduceMotion,
+  runOnJS,
+  useAnimatedReaction,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+import { Text } from '@/components/ui';
+
+interface AnimatedNumberProps {
+  value: number;
+  fontSize?: number;
+  fontWeight?: string;
+  color: string;
+  duration?: number;
+  mode?: 'rolling' | 'tween';
+  decimals?: number;
+}
+
+function AnimatedNumber({
+  value,
+  fontSize = 48,
+  fontWeight = 'bold',
+  color,
+  duration = 1000,
+  mode = 'rolling',
+  decimals = 0,
+}: AnimatedNumberProps) {
+  const displayRef = useRef(value);
+  const [display, setDisplay] = useState(value);
+  const sv = useSharedValue(displayRef.current);
+
+  // Start animation when value changes
+  React.useEffect(() => {
+    sv.value = withTiming(value, {
+      duration,
+      easing: Easing.out(Easing.cubic),
+    });
+    displayRef.current = value;
+  }, [value, duration, sv]);
+
+  // Throttled UI updates to reduce JS pressure when many instances
+  const throttleMs = 16; // ~60fps ceiling
+  const lastTs = useRef(0);
+  useAnimatedReaction(
+    () => sv.value,
+    (v) => {
+      const now = Date.now();
+      if (now - lastTs.current >= throttleMs) {
+        lastTs.current = now;
+        runOnJS(setDisplay)(Number(v));
+      }
+    },
+    [],
+  );
+
+  const textStyle = useMemo(
+    () => [styles.number, { fontSize, fontWeight: fontWeight as any, color }],
+    [fontSize, fontWeight, color],
+  );
+
+  const spinningAnimationConfig = useMemo(
+    () => ({
+      duration,
+      reduceMotion: ReduceMotion.Never,
+      easing: Easing.out(Easing.cubic),
+    }),
+    [duration],
+  );
+
+  if (mode === 'tween') {
+    return (
+      <Text style={textStyle} className="">
+        {display.toFixed(decimals)}
+      </Text>
+    );
+  }
+
+  return (
+    <AnimatedRollingNumber
+      value={value}
+      useGrouping={false}
+      enableCompactNotation={false}
+      compactToFixed={0}
+      textStyle={textStyle}
+      spinningAnimationConfig={spinningAnimationConfig}
+    />
+  );
+}
+
+export default React.memo(AnimatedNumber);
+
+const styles = StyleSheet.create({
+  number: {
+    textAlign: 'left',
+  },
+});

package/2/apps/native/src/features/tracker-app/components/calorie-card.tsx

@@ -0,0 +1,66 @@
+import { Ionicons } from '@expo/vector-icons';
+import React from 'react';
+import { View } from 'react-native';
+
+import { Text } from '@/components/ui';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+import AnimatedNumber from './animated-number';
+import CircularProgress from './circular-progress';
+
+interface CalorieCardProps {
+  calories: number;
+  progress: number;
+}
+
+export default function CalorieCard({ calories, progress }: CalorieCardProps) {
+  const theme = useThemeConfig();
+
+  return (
+    <View
+      className="mb-4 flex-row items-center justify-between rounded-2xl border p-6"
+      style={{
+        backgroundColor: theme.colors.card,
+        borderColor: theme.colors.border,
+        shadowColor: theme.colors.foreground,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 8,
+        elevation: 4,
+      }}
+    >
+      <View className="flex-1">
+        <View className="flex-row items-baseline">
+          <AnimatedNumber
+            value={calories}
+            fontSize={48}
+            fontWeight="800"
+            color={theme.colors.foreground}
+            duration={1500}
+          />
+        </View>
+        <Text
+          className="text-base font-medium"
+          style={{ color: theme.colors.mutedForeground }}
+        >
+          Calories left
+        </Text>
+      </View>
+      <View className="ml-5">
+        <CircularProgress
+          size={80}
+          strokeWidth={8}
+          progress={progress}
+          color={theme.colors.primary}
+          backgroundColor={theme.colors.muted}
+          duration={2000}
+          delay={300}
+        >
+          <View className="items-center justify-center">
+            <Ionicons name="flame" size={24} color={theme.colors.warning} />
+          </View>
+        </CircularProgress>
+      </View>
+    </View>
+  );
+}

package/2/apps/native/src/features/tracker-app/components/circular-progress.tsx

@@ -0,0 +1,97 @@
+import { Canvas, Path as SkPath, Skia } from '@shopify/react-native-skia';
+import type React from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import { type LayoutChangeEvent, View as UIView } from 'react-native';
+
+interface CircularProgressProps {
+  size: number;
+  strokeWidth: number;
+  progress: number; // 0..100
+  color: string;
+  backgroundColor?: string;
+  children?: React.ReactNode;
+  duration?: number;
+  delay?: number;
+}
+
+export default function CircularProgress({
+  size,
+  strokeWidth,
+  progress,
+  color,
+  backgroundColor = '#f0f0f0',
+  children,
+  duration = 1500,
+  delay = 0,
+}: CircularProgressProps) {
+  const [containerSize, setContainerSize] = useState(size);
+  const [p, setP] = useState(1);
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    const { width, height } = e.nativeEvent.layout;
+    const s = Math.min(width || size, height || size) || size;
+    if (s > 0) setContainerSize(s);
+  };
+
+  useEffect(() => {
+    let raf: number;
+    let start: number | null = null;
+    const easeInOutCubic = (t: number) =>
+      t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;
+    const tick = (ts: number) => {
+      if (start == null) start = ts + (delay || 0);
+      const elapsed = Math.max(0, ts - start);
+      const t = Math.min(1, elapsed / (duration || 1500));
+      setP(easeInOutCubic(t) * (progress / 100));
+      if (t < 1) raf = requestAnimationFrame(tick);
+    };
+    setP(0);
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [progress, duration, delay]);
+
+  const radius = useMemo(
+    () => (containerSize - strokeWidth) / 2,
+    [containerSize, strokeWidth],
+  );
+
+  const circlePath = useMemo(() => {
+    const pth = Skia.Path.Make();
+    pth.addCircle(containerSize / 2, containerSize / 2, radius);
+    return pth;
+  }, [containerSize, radius]);
+
+  return (
+    <UIView
+      className="relative"
+      style={{ width: size, height: size }}
+      onLayout={onLayout}
+    >
+      <Canvas style={{ width: containerSize, height: containerSize }}>
+        {/* Track */}
+        <SkPath
+          path={circlePath}
+          color={backgroundColor}
+          style="stroke"
+          strokeWidth={strokeWidth}
+          opacity={1}
+        />
+        {/* Progress arc */}
+        <SkPath
+          path={circlePath}
+          color={color}
+          style="stroke"
+          strokeWidth={strokeWidth}
+          start={0}
+          end={p}
+          strokeCap="round"
+        />
+      </Canvas>
+      {children && (
+        <UIView className="absolute inset-0 items-center justify-center">
+          {children}
+        </UIView>
+      )}
+    </UIView>
+  );
+}

package/2/apps/native/src/features/tracker-app/components/floating-add-button.tsx

@@ -0,0 +1,27 @@
+import { Ionicons } from '@expo/vector-icons';
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+export default function FloatingAddButton() {
+  const theme = useThemeConfig();
+
+  const handlePress = () => {
+    // Handle add food functionality
+    console.log('Add food pressed');
+  };
+
+  return (
+    <TouchableOpacity
+      className="absolute right-5 size-14 items-center justify-center rounded-full shadow-lg"
+      style={{
+        backgroundColor: theme.colors.primary,
+        bottom: 100, // Fixed positioning
+      }}
+      onPress={handlePress}
+    >
+      <Ionicons name="add" size={24} color={theme.colors.primaryForeground} />
+    </TouchableOpacity>
+  );
+}