fix(camera): matrix-based zoom for pinch/double-tap, tap-to-focus AE/AF lock, library letterbox smear fix, export raw JPEG bytes q95, resume isActive fixes, dark theme polish

2026-09-08 10:25:34 +07:00
parent 515f408c67
commit 8eca31ce58
25 changed files with 1450 additions and 822 deletions
@@ -0,0 +1,60 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, ScrollView } from 'react-native';
+import { LayoutGrid, Sun, Thermometer, Sparkles, Frame, type LucideIcon } from 'lucide-react-native';
+import * as Haptics from 'expo-haptics';
+
+export type TabId = 'recipes' | 'iq' | 'wb' | 'filters' | 'frame';
+
+interface ToolRailProps {
+  activeTab: TabId | null;
+  onToggle: (tab: TabId) => void;
+}
+
+const TOOLS: { id: TabId; label: string; icon: LucideIcon }[] = [
+  { id: 'recipes', label: 'PRESETS', icon: LayoutGrid },
+  { id: 'iq', label: 'LIGHT', icon: Sun },
+  { id: 'wb', label: 'WB', icon: Thermometer },
+  { id: 'filters', label: 'FX', icon: Sparkles },
+  { id: 'frame', label: 'FRAME', icon: Frame },
+];
+
+export default function ToolRail({ activeTab, onToggle }: ToolRailProps) {
+  return (
+    <View className="py-1.5">
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={{ alignItems: 'center', paddingHorizontal: 8 }}
+      >
+        {TOOLS.map((tool) => {
+          const isActive = activeTab === tool.id;
+          const Icon = tool.icon;
+          return (
+            <TouchableOpacity
+              key={tool.id}
+              onPress={() => {
+                onToggle(tool.id);
+                Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+              }}
+              className={`mx-1 flex-row items-center rounded-full border px-3 py-2 ${
+                isActive
+                  ? 'border-amber-500/70 bg-amber-500/15'
+                  : 'border-zinc-700/60 bg-black/40'
+              }`}
+              activeOpacity={0.7}
+            >
+              <Icon size={14} color={isActive ? '#f59e0b' : '#e4e4e7'} strokeWidth={1.75} />
+              <Text
+                className={`ml-1.5 font-mono text-[10px] font-bold tracking-widest ${
+                  isActive ? 'text-amber-500' : 'text-zinc-300'
+                }`}
+              >
+                {tool.label}
+              </Text>
+            </TouchableOpacity>
+          );
+        })}
+      </ScrollView>
+    </View>
+  );
+}