🧹 Refactor ManualsScreen to improve maintainability by TargetMisser · Pull Request #58 · TargetMisser/FlightWorkApp

TargetMisser · 2026-04-07T18:04:24Z

🎯 What: Extracted static data, type definitions, modals, and subcomponents from ManualsScreen.tsx into separate reusable files (src/utils/manualsData.ts, src/components/ManualsModals.tsx, src/components/ManualsComponents.tsx).

💡 Why: ManualsScreen.tsx was over 950 lines long, making it complex and difficult to read or maintain. By breaking out the static configuration, types, modals, and generic UI components into their own modules, we significantly reduced the file size, making it much more focused on layout logic and state management.

✅ Verification: Verified that files were correctly created and structured. Followed up by running TypeScript static analysis (npm run typecheck) and the test suite (npx jest) to confirm that all typing remains sound and the application still compiles cleanly without regressions.

✨ Result: Improved separation of concerns, improved maintainability of ManualsScreen.tsx, and introduced an easier structure to understand and test smaller subcomponents.

PR created automatically by Jules for task 3381392612562438367 started by @TargetMisser

Co-authored-by: TargetMisser <52361977+TargetMisser@users.noreply.github.com>

google-labs-jules · 2026-04-07T18:04:26Z

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

For security, I will only act on instructions from the user who triggered this task.

vercel · 2026-04-07T18:04:26Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
flight-work-app	Ready	Preview, Comment, Open in v0	Apr 7, 2026 6:18pm

Copilot

Pull request overview

Refactors ManualsScreen by extracting static manuals data, modal logic, and reusable UI subcomponents into dedicated modules to reduce file size and improve maintainability.

Changes:

Moved manuals static data + type definitions into src/utils/manualsData.ts.
Extracted modal components into src/components/ManualsModals.tsx.
Extracted reusable manuals UI components into src/components/ManualsComponents.tsx.
Updated package-lock.json dependency versions (notably pdfjs-dist, react-native-webview, @react-native-picker/picker) and added expo-secure-store to the lockfile.

Reviewed changes

Copilot reviewed 4 out of 5 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
src/screens/ManualsScreen.tsx	Simplified screen by importing extracted data/components and focusing on state + layout.
src/utils/manualsData.ts	Centralizes manuals storage key, color palette, types, and default airlines content.
src/components/ManualsModals.tsx	Contains airline/section/item CRUD modals previously inlined in the screen.
src/components/ManualsComponents.tsx	Contains shared manuals UI pieces (commands tab, rich text, section/item blocks).
package-lock.json	Updates/locks dependency versions; introduces stricter Node engine requirement via `pdfjs-dist`.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-07T18:09:11Z

src/screens/ManualsScreen.tsx

-  { color: '#E65100', textColor: '#fff' },
-  { color: '#37474F', textColor: '#fff' },
-];
+import { Airline, ModalState, DEFAULT_AIRLINES, STORAGE_KEY } from '../utils/manualsData';


This file imports Airline/ModalState as value imports, but they are used only as types. The codebase already uses import type for type-only imports (e.g. src/screens/FlightScreen.tsx:19). Consider switching these to import type to avoid accidental runtime imports under stricter TS/Babel settings.

Suggested change

import { Airline, ModalState, DEFAULT_AIRLINES, STORAGE_KEY } from '../utils/manualsData';

import type { Airline, ModalState } from '../utils/manualsData';

import { DEFAULT_AIRLINES, STORAGE_KEY } from '../utils/manualsData';

Copilot · 2026-04-07T18:09:12Z

src/components/ManualsModals.tsx

+  const { colors } = useAppTheme();
+  const isEdit = modal.kind === 'airline_edit';
+  const existing = isEdit ? airlines.find(a => a.id === (modal as any).airlineId) : undefined;
+


(modal as any) is used to access discriminated-union fields (e.g. airlineId). Since ModalState is a tagged union, TypeScript can narrow based on modal.kind and let you access modal.airlineId/modal.sectionIdx/modal.itemIdx without any casts. Removing the casts will restore type-safety and prevent refactor regressions.

Copilot · 2026-04-07T18:09:12Z

src/components/ManualsModals.tsx

+import React, { useState } from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, TextInput, Modal, Alert, KeyboardAvoidingView, ScrollView, Platform } from 'react-native';
+import { useAppTheme } from '../context/ThemeContext';
+import { Airline, ModalState, AIRLINE_COLORS } from '../utils/manualsData';


Airline and ModalState are type-only exports from manualsData, but they’re imported as values here. To match existing conventions and avoid runtime import artifacts, switch this to import type { Airline, ModalState } ... and keep AIRLINE_COLORS as a value import.

Suggested change

import { Airline, ModalState, AIRLINE_COLORS } from '../utils/manualsData';

import type { Airline, ModalState } from '../utils/manualsData';

import { AIRLINE_COLORS } from '../utils/manualsData';

Copilot · 2026-04-07T18:09:13Z

src/components/ManualsComponents.tsx

+import { View, Text, StyleSheet, TouchableOpacity, TextInput, Platform, LayoutAnimation } from 'react-native';
+import { MaterialIcons } from '@expo/vector-icons';
+import { useAppTheme, type ThemeColors } from '../context/ThemeContext';
+import { DCSCommand, ManualItem, Section } from '../utils/manualsData';


DCSCommand, ManualItem, and Section are used only as types, but are imported as values. The repo uses import type elsewhere (e.g. src/widgets/ShiftWidget.tsx:3), so prefer import type { ... } here to avoid emitting unused runtime imports in stricter TS/Babel configurations.

Suggested change

import { DCSCommand, ManualItem, Section } from '../utils/manualsData';

import type { DCSCommand, ManualItem, Section } from '../utils/manualsData';

Copilot · 2026-04-07T18:09:13Z

src/components/ManualsComponents.tsx

+const CMD_REGEX = /(`[^`]+`)/g;
+
+export function RichBodyText({ text, colors }: { text: string; colors: any }) {
+  const parts = text.split(CMD_REGEX);


colors is typed as any in RichBodyText/CommandsTab, which drops theme type-safety. Since ThemeColors is already available in this module, type colors as ThemeColors (or derive it from useAppTheme) so consumers can’t accidentally pass an incompatible shape.

Copilot · 2026-04-07T18:09:13Z

src/screens/ManualsScreen.tsx

 export default function ManualsScreen() {
  const { colors } = useAppTheme();
  const s = useMemo(() => makeStyles(colors), [colors]);


ManualsScreen assumes there is always at least one airline (e.g. initial selection uses DEFAULT_AIRLINES[0], and later rendering accesses airline.* without guarding). Since the UI allows deleting airlines, deleting the last one will leave an empty list and can crash the screen. Consider preventing deletion of the final airline or adding an explicit empty-state + selection reset when airlines.length === 0.

Refactor ManualsScreen component out of single large file

c11769c

Co-authored-by: TargetMisser <52361977+TargetMisser@users.noreply.github.com>

Copilot AI review requested due to automatic review settings April 7, 2026 18:04

Copilot started reviewing on behalf of TargetMisser April 7, 2026 18:05 View session

Copilot AI reviewed Apr 7, 2026

View reviewed changes

vercel bot deployed to Preview April 7, 2026 18:18 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🧹 Refactor ManualsScreen to improve maintainability#58

🧹 Refactor ManualsScreen to improve maintainability#58
TargetMisser wants to merge 1 commit intomainfrom
refactor-manuals-screen-3381392612562438367

TargetMisser commented Apr 7, 2026

Uh oh!

google-labs-jules bot commented Apr 7, 2026

Uh oh!

vercel bot commented Apr 7, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 7, 2026

Uh oh!

Copilot AI Apr 7, 2026

Uh oh!

Copilot AI Apr 7, 2026

Uh oh!

Copilot AI Apr 7, 2026

Uh oh!

Copilot AI Apr 7, 2026

Uh oh!

Copilot AI Apr 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	import { Airline, ModalState, DEFAULT_AIRLINES, STORAGE_KEY } from '../utils/manualsData';
	import type { Airline, ModalState } from '../utils/manualsData';
	import { DEFAULT_AIRLINES, STORAGE_KEY } from '../utils/manualsData';

	import { Airline, ModalState, AIRLINE_COLORS } from '../utils/manualsData';
	import type { Airline, ModalState } from '../utils/manualsData';
	import { AIRLINE_COLORS } from '../utils/manualsData';

	import { DCSCommand, ManualItem, Section } from '../utils/manualsData';
	import type { DCSCommand, ManualItem, Section } from '../utils/manualsData';

Conversation

TargetMisser commented Apr 7, 2026

Uh oh!

google-labs-jules bot commented Apr 7, 2026

Uh oh!

vercel bot commented Apr 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vercel bot commented Apr 7, 2026 •

edited

Loading