プリセット機能の大幅改善: direction/notifyStationIds保存、始発駅選択UI、PresetCard表示改善

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: TinyKitten

assets/translations/en.json

@@ -278,7 +278,10 @@
   "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.",
-  "presetNameInputTitle": "Enter preset name",
+  "savePresetTitle": "Save preset",
+  "presetNameLabel": "Preset name",
   "presetNamePlaceholder": "Preset name",
-  "save": "Save"
+  "save": "Save",
+  "selectStartStationTitle": "Select starting station",
+  "departure": "Dep."
 }

assets/translations/ja.json

@@ -279,7 +279,10 @@
   "settingsWalkthroughTitle4": "表示言語",
   "settingsWalkthroughDescription4": "画面に表示する言語を設定できます。日本語、英語、中国語、韓国語から選択可能です。",
   "requireJapaneseOrEnglish": "日本語または英語のいずれかを設定する必要があります",
-  "presetNameInputTitle": "プリセット名を入力",
+  "savePresetTitle": "プリセットを保存",
+  "presetNameLabel": "プリセット名",
   "presetNamePlaceholder": "プリセット名",
-  "save": "保存"
+  "save": "保存",
+  "selectStartStationTitle": "始発駅を選択",
+  "departure": "始発"
 }

src/components/CommonCard.tsx

@@ -20,8 +20,14 @@ type Props = {
   targetStation?: Station;
   stations?: Station[];
   title?: string;
+  /** カッコ内の文字を小さく表示する際、カッコ自体を非表示にする */
+  hideParens?: boolean;
   subtitle?: string;
   subtitleNumberOfLines?: number;
+  /** 右端のシェブロンを非表示にする */
+  hideChevron?: boolean;
+  /** 右端にチェックマークを表示する */
+  checked?: boolean;
   disabled?: boolean;
   testID?: string;
   loading?: boolean;
@@ -166,8 +172,11 @@ export const CommonCard: React.FC<Props> = ({
   targetStation,
   stations = [],
   title,
+  hideParens,
   subtitle,
   subtitleNumberOfLines,
+  hideChevron,
+  checked,
   disabled,
   testID,
   loading,
@@ -297,8 +306,9 @@ export const CommonCard: React.FC<Props> = ({
             /^\(.*\)$/.test(part) ? (
               <Typography key={`${index}-${part}`} style={styles.titleParens}>
                 {index > 0 && !/\s$/.test(titleParts[index - 1] ?? '')
-                  ? ` ${part}`
-                  : part}
+                  ? ' '
+                  : ''}
+                {hideParens ? part.slice(1, -1) : part}
               </Typography>
             ) : (
               part
@@ -323,7 +333,24 @@ export const CommonCard: React.FC<Props> = ({
         )}
       </View>
       <View style={styles.chevron}>
-        <CardChevron />
+        {!hideChevron && <CardChevron />}
+        {hideChevron && !checked && (
+          <Svg width={24} height={24} viewBox="0 0 24 24">
+            <Path
+              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+              fill="#fff"
+              opacity={0.5}
+            />
+          </Svg>
+        )}
+        {hideChevron && checked && (
+          <Svg width={24} height={24} viewBox="0 0 24 24">
+            <Path
+              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+              fill="#fff"
+            />
+          </Svg>
+        )}
       </View>
     </TouchableOpacity>
   );

src/components/CustomModal.tsx

@@ -4,6 +4,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import {
   Animated,
+  type GestureResponderEvent,
   Keyboard,
   KeyboardAvoidingView,
   Pressable,
@@ -29,6 +30,10 @@ type Props = {
 
 const ANIMATION_DURATION = 180;
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+const captureModalTouch = () => true;
+const stopModalTouchPropagation = (event: GestureResponderEvent) => {
+  event.stopPropagation();
+};
 
 export const CustomModal: React.FC<Props> = ({
   visible,
@@ -128,6 +133,8 @@ export const CustomModal: React.FC<Props> = ({
                 animatedContentStyle,
               ]}
               pointerEvents="auto"
+              onStartShouldSetResponder={captureModalTouch}
+              onTouchEnd={stopModalTouchPropagation}
             >
               {children}
             </Animated.View>
@@ -147,6 +154,8 @@ export const CustomModal: React.FC<Props> = ({
                 animatedContentStyle,
               ]}
               pointerEvents="auto"
+              onStartShouldSetResponder={captureModalTouch}
+              onTouchEnd={stopModalTouchPropagation}
             >
               {children}
             </Animated.View>

src/components/PresetCard.tsx

@@ -10,6 +10,7 @@ import { isJapanese, translate } from '~/translation';
 import isTablet from '~/utils/isTablet';
 import { RFValue } from '~/utils/rfValue';
 import { getStationName, getStationPrimaryCode } from '~/utils/station';
+import { getIsLocal } from '~/utils/trainTypeString';
 import { NoPresetsCard } from './NoPresetsCard';
 import TransferLineMark from './TransferLineMark';
 import Typography from './Typography';
@@ -77,7 +78,7 @@ const styles = StyleSheet.create({
     gap: 8,
   },
   stationName: {
-    fontSize: RFValue(21),
+    fontSize: RFValue(17),
     fontWeight: 'bold',
     textAlignVertical: 'auto',
   },
@@ -91,6 +92,11 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
     textAlignVertical: 'auto',
   },
+  trainTypeName: {
+    fontSize: RFValue(9),
+    fontWeight: 'bold',
+    paddingLeft: 24,
+  },
   lineDot: {
     width: 16,
     height: 16,
@@ -184,6 +190,17 @@ const PresetCardBase: React.FC<Props> = ({ title, from, to }) => {
       : (rightLine.nameRoman ?? rightLine.nameShort ?? null);
   })();
 
+  const leftTrainType = (() => {
+    const tt = from?.trainType;
+    if (!tt || getIsLocal(tt)) return null;
+    return isJapanese ? (tt.name ?? null) : (tt.nameRoman ?? null);
+  })();
+  const rightTrainType = (() => {
+    const tt = to?.trainType;
+    if (!tt || getIsLocal(tt)) return null;
+    return isJapanese ? (tt.name ?? null) : (tt.nameRoman ?? null);
+  })();
+
   const leftCodeRendered = useMemo(
     () =>
       renderTextWithSmallerParens(
@@ -252,6 +269,14 @@ const PresetCardBase: React.FC<Props> = ({ title, from, to }) => {
                 </Typography>
               </View>
             ) : null}
+            {leftTrainType ? (
+              <Typography
+                style={[styles.trainTypeName, { color: metaFg }]}
+                numberOfLines={1}
+              >
+                {leftTrainType}
+              </Typography>
+            ) : null}
           </View>
           <View style={styles.colCenter} />
           <View style={styles.colRight}>
@@ -282,6 +307,14 @@ const PresetCardBase: React.FC<Props> = ({ title, from, to }) => {
                 </Typography>
               </View>
             ) : null}
+            {rightTrainType ? (
+              <Typography
+                style={[styles.trainTypeName, { color: metaFg }]}
+                numberOfLines={1}
+              >
+                {rightTrainType}
+              </Typography>
+            ) : null}
           </View>
         </View>
       )}