UI improvements and prepare for OSM migration

2026-07-28 20:05:12 +02:00
parent 6ac78ea6a1
commit c6240784ff
6 changed files with 146 additions and 98 deletions
@@ -235,15 +235,6 @@ export function InspectionFormScreen({ route, navigation }: Props) {
            <Text style={styles.tplChevron}>›</Text>
          </TouchableOpacity>
        ))}
-
-        <View style={{ height: 8 }} />
-        <PrimaryButton
-          title="Inspección libre (sin plantilla)"
-          variant="ghost"
-          onPress={() => pickTemplate(null)}
-        />
-        <View style={{ height: 8 }} />
-        <PrimaryButton title="Cancelar" variant="ghost" onPress={() => navigation.goBack()} />
      </ScrollView>
    );
  }
@@ -1,5 +1,5 @@
 import { NativeStackScreenProps } from '@react-navigation/native-stack';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import {
  ActivityIndicator,
  FlatList,
@@ -16,7 +16,7 @@ import { getProjects, saveProjectList, saveTemplates, setActiveProjectId } from
 import { isOnline } from '../net/connectivity';
 import { runSync } from '../sync/engine';
 import { RootStackParamList } from '../navigation/types';
-import { COLORS, PrimaryButton } from '../ui/components';
+import { COLORS } from '../ui/components';

 type Props = NativeStackScreenProps<RootStackParamList, 'Projects'>;

@@ -33,7 +33,26 @@ export function ProjectsScreen({ navigation }: Props) {
  const [loading, setLoading] = useState(false);
  const [opening, setOpening] = useState<number | null>(null);
  const [showMenu, setShowMenu] = useState(false);
-  const dropdownRef = useRef<View>(null);
+
+  // Mueve el menú de usuario al header nativo
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      headerRight: () => (
+        <View style={styles.headerRight}>
+          <TouchableOpacity
+            onPress={() => setShowMenu(!showMenu)}
+            activeOpacity={0.7}
+            style={styles.userButton}
+          >
+            <Text style={styles.dropdownLabel}>
+              {user?.name?.split(' ')[0] ?? 'Usuario'}
+              <Text style={styles.chevronSmall}> ▼</Text>
+            </Text>
+          </TouchableOpacity>
+        </View>
+      ),
+    });
+  }, [navigation, user, showMenu]);

  const load = useCallback(async () => {
    setLoading(true);
@@ -41,9 +60,6 @@ export function ProjectsScreen({ navigation }: Props) {
      if (await isOnline()) {
        const list = normalize(await api.listProjects());
        await saveProjectList(list);
-        // Prefetch del catálogo global de plantillas: así quedan SIEMPRE en
-        // local y se puede inspeccionar offline aunque el proyecto no se haya
-        // abierto todavía. No bloquea la lista si /templates falla.
        try {
          const { templates } = await api.getTemplates();
          await saveTemplates(templates);
@@ -69,8 +85,6 @@ export function ProjectsScreen({ navigation }: Props) {
      setOpening(p.id);
      try {
        await setActiveProjectId(p.id);
-        // runSync ya resuelve ambos casos: sin cursor baja el snapshot completo,
-        // con cursor baja el delta (y vacía primero el outbox, vacío en la 1ª vez).
        if (await isOnline()) await runSync(p.id);
        navigation.navigate('ProjectDetail', { projectId: p.id, name: p.name });
      } finally {
@@ -92,34 +106,24 @@ export function ProjectsScreen({ navigation }: Props) {

  return (
    <View style={styles.container}>
-      {/* Header with dropdown menu */}
-      <View style={styles.header}>
-        <Text style={styles.headerTitle}>Proyectos</Text>
-        <TouchableOpacity
-          ref={dropdownRef}
-          style={styles.dropdownWrapper}
-          onPress={() => setShowMenu(!showMenu)}
-          activeOpacity={1}
-        >
-          <Text style={styles.dropdownLabel}>
-            {user?.name ?? 'Usuario'}
-            <Text style={styles.chevron}> ▼</Text>
-          </Text>
-          {showMenu && (
-            <View style={styles.dropdownMenu} pointerEvents="box-none">
-              <TouchableOpacity style={styles.dropdownItem} onPress={handleSettings} activeOpacity={0.7}>
-                <Text style={styles.dropdownItemText}>⚙ Configuración</Text>
-              </TouchableOpacity>
-              <TouchableOpacity style={[styles.dropdownItem, styles.dropdownItemDanger]} onPress={handleLogout} activeOpacity={0.7}>
-                <Text style={styles.dropdownItemText}>Salir</Text>
-              </TouchableOpacity>
-            </View>
-          )}
-        </TouchableOpacity>
-      </View>
+      {/* Menu flotante (se posiciona relativo al contenedor principal) */}
+      {showMenu && (
+        <View style={styles.floatingMenu}>
+          <TouchableOpacity style={styles.dropdownItem} onPress={handleSettings} activeOpacity={0.7}>
+            <Text style={styles.dropdownItemText}>⚙ Configuración</Text>
+          </TouchableOpacity>
+          <TouchableOpacity style={[styles.dropdownItem, styles.dropdownItemDanger]} onPress={handleLogout} activeOpacity={0.7}>
+            <Text style={styles.dropdownItemText}>Salir</Text>
+          </TouchableOpacity>
+        </View>
+      )}

      {/* Close dropdown when tapping outside */}
-      <TouchableOpacity onPress={() => setShowMenu(false)} style={styles.touchOutside}>
+      <TouchableOpacity
+        onPress={() => setShowMenu(false)}
+        style={styles.touchOutside}
+        activeOpacity={1}
+      >
        <FlatList
          data={projects}
          keyExtractor={(p) => String(p.id)}
@@ -147,43 +151,40 @@ export function ProjectsScreen({ navigation }: Props) {
 }

 const styles = StyleSheet.create({
-  container: { flex: 1 },
-  header: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    padding: 16,
+  container: { flex: 1, backgroundColor: '#fff' },
+  headerRight: {
+    marginRight: 8,
  },
-  headerTitle: { fontSize: 20, fontWeight: '700', color: COLORS.primary },
-  dropdownWrapper: {
-    position: 'relative',
+  userButton: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
  },
  dropdownLabel: {
-    fontSize: 16,
+    fontSize: 15,
    fontWeight: '600',
-    color: '#333',
+    color: COLORS.primary,
  },
-  chevron: { fontSize: 14, color: '#666' },
-  dropdownMenu: {
+  chevronSmall: { fontSize: 10, color: COLORS.primary },
+  floatingMenu: {
    position: 'absolute',
-    top: 40,
-    right: 0,
+    top: 4,
+    right: 16,
    backgroundColor: '#fff',
    borderRadius: 8,
    borderWidth: 1,
    borderColor: COLORS.border,
    overflow: 'hidden',
    minWidth: 180,
-    elevation: 4,
+    elevation: 10,
    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.1,
-    shadowRadius: 4,
-    zIndex: 100,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.2,
+    shadowRadius: 5,
+    zIndex: 1000,
  },
  dropdownItem: {
    paddingHorizontal: 16,
-    paddingVertical: 12,
+    paddingVertical: 14,
  },
  dropdownItemDanger: {
    borderTopWidth: StyleSheet.hairlineWidth,
@@ -201,13 +202,15 @@ const styles = StyleSheet.create({
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
-    paddingVertical: 16,
-    borderTopWidth: StyleSheet.hairlineWidth,
+    paddingVertical: 18,
+    borderBottomWidth: StyleSheet.hairlineWidth,
    borderColor: COLORS.border,
    backgroundColor: '#fff',
  },
  cardContent: { flex: 1 },
-  cardName: { fontSize: 16, fontWeight: '600', color: '#111' },
+  cardName: { fontSize: 16, fontWeight: '700', color: '#111' },
  cardMeta: { fontSize: 13, color: COLORS.muted, marginTop: 4 },
+  chevron: { fontSize: 20, color: COLORS.border, marginLeft: 8 },
  empty: { textAlign: 'center', marginTop: 40, color: '#888' },
 });
+
@@ -26,6 +26,34 @@ export function FeatureDetailContent({ featureId }: { featureId: number }) {
  const [inspections, setInspections] = useState<Inspection[]>([]);
  const [featureTypes, setFeatureTypes] = useState<FeatureType[]>([]);

+  // Header right button for Nueva inspección
+  // MOVIDO AQUÍ: Los hooks deben ir siempre antes de cualquier return.
+  useFocusEffect(
+    useCallback(() => {
+      if (canInspect && feature) {
+        navigation.setOptions({
+          headerRight: () => (
+            <TouchableOpacity
+              style={styles.headerButton}
+              onPress={() =>
+                navigation.navigate('InspectionForm', {
+                  featureId: feature.id,
+                  featureName: feature.name,
+                  templateId: feature.template_id ?? undefined,
+                })
+              }
+            >
+              <Text style={styles.headerButtonText}>+ Inspección</Text>
+            </TouchableOpacity>
+          ),
+        });
+      }
+      return () => {
+        navigation.setOptions({ headerRight: undefined });
+      };
+    }, [navigation, canInspect, feature]),
+  );
+
  const refresh = useCallback(async () => {
    const [f, ins, types] = await Promise.all([
      getFeature(featureId),
@@ -52,33 +80,6 @@ export function FeatureDetailContent({ featureId }: { featureId: number }) {
  const featureType = featureTypes.find((t) => t.id === feature.feature_type_id);
  const isActive = feature.is_active == null || Number(feature.is_active) !== 0;

-  // Header right button for Nueva inspección
-  useFocusEffect(
-    useCallback(() => {
-      if (canInspect) {
-        navigation.setOptions({
-          headerRight: () => (
-            <TouchableOpacity
-              style={styles.headerButton}
-              onPress={() =>
-                navigation.navigate('InspectionForm', {
-                  featureId: feature.id,
-                  featureName: feature.name,
-                  templateId: feature.template_id ?? undefined,
-                })
-              }
-            >
-              <Text style={styles.headerButtonText}>+ Inspección</Text>
-            </TouchableOpacity>
-          ),
-        });
-      }
-      return () => {
-        navigation.setOptions({ headerRight: undefined });
-      };
-    }, [navigation, canInspect, feature?.id, feature?.name, feature?.template_id]),
-  );
-
  return (
    <ScrollView contentContainerStyle={styles.body}>
      <View style={styles.badges}>