initial scaffold

2026-08-20 04:30:54 +02:00 · 2026-05-25 21:54:43 -04:00
parent 40c2302d97
commit 9761975af7
40 changed files with 10797 additions and 1 deletions
@@ -0,0 +1,90 @@
+import { View, Pressable, StyleSheet } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Ionicons } from '@expo/vector-icons';
+import { Text } from './Text';
+import { MiniPlayer } from './MiniPlayer';
+import { colors, layout, spacing } from '@/theme';
+
+type IconName = keyof typeof Ionicons.glyphMap;
+
+export const TAB_META: Record<string, { label: string; icon: IconName }> = {
+  index: { label: 'Home', icon: 'home' },
+  library: { label: 'Library', icon: 'musical-notes' },
+  eq: { label: 'EQ', icon: 'options' },
+};
+
+export interface TabItem {
+  key: string;
+  name: string;
+  focused: boolean;
+}
+
+interface TabBarProps {
+  items: TabItem[];
+  onPress: (item: TabItem) => void;
+}
+
+/**
+ * Astra bottom tab bar with the persistent mini-player glued above it.
+ * Receives plain props (no react-navigation types) so the typed navigation
+ * logic stays in the layout's `tabBar` callback.
+ */
+export function TabBar({ items, onPress }: TabBarProps) {
+  const insets = useSafeAreaInsets();
+  return (
+    <View style={styles.wrap}>
+      <MiniPlayer />
+      <View
+        style={[
+          styles.bar,
+          { paddingBottom: insets.bottom, height: layout.tabBarHeight + insets.bottom },
+        ]}
+      >
+        {items.map((item) => {
+          const meta = TAB_META[item.name];
+          if (!meta) return null;
+          const color = item.focused ? colors.accent : colors.textTertiary;
+          return (
+            <Pressable
+              key={item.key}
+              style={styles.tab}
+              onPress={() => onPress(item)}
+              hitSlop={8}
+              accessibilityRole="tab"
+              accessibilityState={{ selected: item.focused }}
+            >
+              <Ionicons name={meta.icon} size={22} color={color} />
+              <Text variant="caption" style={[styles.label, { color }]}>
+                {meta.label}
+              </Text>
+            </Pressable>
+          );
+        })}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: {
+    backgroundColor: colors.bgSecondary,
+  },
+  bar: {
+    flexDirection: 'row',
+    backgroundColor: colors.bgSecondary,
+    borderTopColor: colors.glassBorder,
+    borderTopWidth: StyleSheet.hairlineWidth,
+  },
+  tab: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: spacing.sm,
+  },
+  label: {
+    marginTop: 2,
+    fontSize: 10,
+  },
+});
+
+export default TabBar;