プリセット名入力モーダルの追加とwantedDestinationIdのサポート

TinyKitten · claude · TinyKitten · commit 4b7c28cc28e5 · 2026-03-10T10:35:53.000+09:00
Co-Authored-By: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/assets/translations/en.json b/assets/translations/en.json
@@ -277,5 +277,8 @@
   "settingsWalkthroughDescription3": "Configure auto announcement settings. You can receive voice guidance when arriving at stations.",
   "settingsWalkthroughTitle4": "Display Languages",
   "settingsWalkthroughDescription4": "Set the languages to display on screen. You can choose from Japanese, English, Chinese, and Korean.",
-  "requireJapaneseOrEnglish": "Either Japanese or English must be set."
+  "requireJapaneseOrEnglish": "Either Japanese or English must be set.",
+  "presetNameInputTitle": "Enter preset name",
+  "presetNamePlaceholder": "Preset name",
+  "save": "Save"
 }
diff --git a/assets/translations/ja.json b/assets/translations/ja.json
@@ -278,5 +278,8 @@
   "settingsWalkthroughDescription3": "自動アナウンス機能の設定ができます。駅到着時に音声で案内を受け取ることができます。",
   "settingsWalkthroughTitle4": "表示言語",
   "settingsWalkthroughDescription4": "画面に表示する言語を設定できます。日本語、英語、中国語、韓国語から選択可能です。",
-  "requireJapaneseOrEnglish": "日本語または英語のいずれかを設定する必要があります"
+  "requireJapaneseOrEnglish": "日本語または英語のいずれかを設定する必要があります",
+  "presetNameInputTitle": "プリセット名を入力",
+  "presetNamePlaceholder": "プリセット名",
+  "save": "保存"
 }
diff --git a/src/components/SavePresetNameModal.tsx b/src/components/SavePresetNameModal.tsx
@@ -0,0 +1,135 @@
+import { useAtomValue } from 'jotai';
+import type React from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  Keyboard,
+  Platform,
+  Pressable,
+  StyleSheet,
+  TextInput,
+  type TextInput as TextInputType,
+  View,
+} from 'react-native';
+import { FONTS, LED_THEME_BG_COLOR } from '~/constants';
+import { isLEDThemeAtom } from '~/store/atoms/theme';
+import { translate } from '~/translation';
+import { RFValue } from '~/utils/rfValue';
+import Button from './Button';
+import { CustomModal } from './CustomModal';
+import { Heading } from './Heading';
+
+type Props = {
+  visible: boolean;
+  onClose: () => void;
+  onSubmit: (name: string) => void;
+  defaultName: string;
+};
+
+const styles = StyleSheet.create({
+  contentView: {
+    width: '100%',
+    paddingVertical: 24,
+    paddingHorizontal: 24,
+  },
+  textInput: {
+    borderWidth: 1,
+    borderColor: '#aaa',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    width: '100%',
+    fontSize: RFValue(14),
+    marginTop: 12,
+    borderRadius: 8,
+  },
+  buttonContainer: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginTop: 24,
+    gap: 16,
+  },
+  saveButton: {
+    width: 120,
+  },
+});
+
+export const SavePresetNameModal: React.FC<Props> = ({
+  visible,
+  onClose,
+  onSubmit,
+  defaultName,
+}) => {
+  const isLEDTheme = useAtomValue(isLEDThemeAtom);
+  const textInputRef = useRef<TextInputType>(null);
+  const textRef = useRef(defaultName);
+  const [isEmpty, setIsEmpty] = useState(false);
+
+  useEffect(() => {
+    if (visible) {
+      textRef.current = defaultName;
+      setIsEmpty(!defaultName.trim());
+    }
+  }, [visible, defaultName]);
+
+  const handleChangeText = useCallback((text: string) => {
+    textRef.current = text;
+    setIsEmpty(!text.trim());
+  }, []);
+
+  const handleSubmit = useCallback(() => {
+    const name = textRef.current.trim();
+    if (name) {
+      onSubmit(name);
+    }
+  }, [onSubmit]);
+
+  return (
+    <CustomModal
+      visible={visible}
+      onClose={onClose}
+      backdropStyle={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
+      contentContainerStyle={[
+        styles.contentView,
+        {
+          backgroundColor: isLEDTheme ? LED_THEME_BG_COLOR : '#fff',
+          borderRadius: isLEDTheme ? 0 : 8,
+        },
+      ]}
+      avoidKeyboard
+    >
+      <Pressable onPress={Keyboard.dismiss}>
+        <Heading>{translate('presetNameInputTitle')}</Heading>
+
+        <TextInput
+          ref={textInputRef}
+          autoFocus={Platform.OS === 'ios'}
+          defaultValue={defaultName}
+          onChangeText={handleChangeText}
+          style={[
+            styles.textInput,
+            {
+              color: isLEDTheme ? '#fff' : '#000',
+              fontFamily: isLEDTheme ? FONTS.JFDotJiskan24h : undefined,
+            },
+          ]}
+          placeholder={translate('presetNamePlaceholder')}
+          returnKeyType="done"
+          onSubmitEditing={handleSubmit}
+        />
+
+        <View style={styles.buttonContainer}>
+          <Button onPress={onClose} outline>
+            {translate('cancel')}
+          </Button>
+          <Button
+            style={styles.saveButton}
+            disabled={isEmpty}
+            onPress={handleSubmit}
+          >
+            {translate('save')}
+          </Button>
+        </View>
+      </Pressable>
+    </CustomModal>
+  );
+};
diff --git a/src/hooks/useSavedRoutes.ts b/src/hooks/useSavedRoutes.ts
@@ -11,6 +11,7 @@ interface SavedRouteRow {
   name: string;
   lineId: number;
   trainTypeId: number | null;
+  wantedDestinationId: number | null;
   hasTrainType: number; // SQLiteではBOOLEANが数値として保存される
   createdAt: string; // SQLiteでは日時が文字列として保存される
 }
@@ -31,6 +32,7 @@ const convertRowToSavedRoute = (row: SavedRouteRow): SavedRoute | null => {
       name: row.name,
       lineId: row.lineId,
       trainTypeId: row.trainTypeId,
+      wantedDestinationId: row.wantedDestinationId ?? null,
       hasTrainType: true,
       createdAt: new Date(row.createdAt),
     };
@@ -40,6 +42,7 @@ const convertRowToSavedRoute = (row: SavedRouteRow): SavedRoute | null => {
     name: row.name,
     lineId: row.lineId,
     trainTypeId: null,
+    wantedDestinationId: row.wantedDestinationId ?? null,
     hasTrainType: false,
     createdAt: new Date(row.createdAt),
   };
@@ -74,6 +77,14 @@ export const useSavedRoutes = () => {
       await db.execAsync(
         'CREATE INDEX IF NOT EXISTS idx_saved_routes_ttype_dest_has ON saved_routes(trainTypeId, hasTrainType, createdAt DESC);'
       );
+      // wantedDestinationId カラムを既存テーブルに追加（存在しない場合のみ）
+      try {
+        await db.execAsync(
+          'ALTER TABLE saved_routes ADD COLUMN wantedDestinationId INTEGER;'
+        );
+      } catch {
+        // カラムが既に存在する場合は無視
+      }
       setNavigationAtom((prev) => ({ ...prev, presetsFetched: true }));
     };
     initDb();
@@ -130,14 +141,15 @@ export const useSavedRoutes = () => {
       } as SavedRoute;
 
       await db.runAsync(
-        `INSERT INTO saved_routes 
-         (id, name, lineId, trainTypeId, hasTrainType, createdAt)
-         VALUES (?, ?, ?, ?, ?, ?)`,
+        `INSERT INTO saved_routes
+         (id, name, lineId, trainTypeId, wantedDestinationId, hasTrainType, createdAt)
+         VALUES (?, ?, ?, ?, ?, ?, ?)`,
         [
           newRoute.id,
           newRoute.name,
           newRoute.lineId,
           newRoute.trainTypeId ?? null,
+          newRoute.wantedDestinationId ?? null,
           newRoute.hasTrainType ? 1 : 0,
           newRoute.createdAt.toISOString(),
         ]
diff --git a/src/models/SavedRoute.ts b/src/models/SavedRoute.ts
@@ -5,6 +5,7 @@ export const SavedRouteWithTrainTypeSchema = z.object({
   hasTrainType: z.literal(true),
   lineId: z.number().int().nonnegative(),
   trainTypeId: z.number().int().nonnegative(),
+  wantedDestinationId: z.number().int().nonnegative().nullable(),
   name: z.string().min(1).max(100),
   createdAt: z.date(),
 });
@@ -18,6 +19,7 @@ export const SavedRouteWithoutTrainTypeSchema = z.object({
   hasTrainType: z.literal(false),
   lineId: z.number().int().nonnegative(),
   trainTypeId: z.null(),
+  wantedDestinationId: z.number().int().nonnegative().nullable(),
   name: z.string().min(1).max(100),
   createdAt: z.date(),
 });
