feat: Refactor PositionBox and TrainDataView components to streamline position data handling and improve layout responsiveness

components/ActionSheetComponents/EachTrainInfo/PositionBox.tsx

@@ -6,25 +6,30 @@ import { useResponsive } from "@/lib/responsive";
 
 type stateBox = {
   currentTrainData: trainDataType | undefined;
-  platformNumber: string | number | undefined;
   title: string;
   style?: ViewStyle;
   mode?: number;
-  platformDescription: string;
-  lineNumber: string;
 };
 export const PositionBox: FC<stateBox> = (props) => {
   const {
     currentTrainData,
-    platformNumber,
     title,
     style,
     mode,
-    platformDescription,
-    lineNumber,
   } = props;
   const { colors } = useThemeColors();
   const { fontScale } = useResponsive();
+  const {officialPosition} = currentTrainData || {};
+
+  const isStationPosition = officialPosition?.positionType === "station";
+  const platformNumber = isStationPosition
+    ? officialPosition?.platform
+    : undefined;
+  const lineNumber = isStationPosition ? officialPosition?.track : undefined;
+  // Notes describe the current position even when it is a prediction or a
+  // section between stations. Platform/track remain station-only fields, but
+  // the note itself must not be hidden by position_type.
+  const platformDescription = officialPosition?.note;
   let firstText = "";
   let secondText = "";
   let marginText = "";
@@ -73,10 +78,10 @@ export const PositionBox: FC<stateBox> = (props) => {
             style={[
               { flexShrink: 1, minWidth: 0 },
               mode == 2
-                ? { fontSize: fontScale(18), textAlign: "right" as const }
+                ? { fontSize: fontScale(16), textAlign: "right" as const }
                 : isBetween
-                  ? { fontSize: fontScale(25), textAlign: "right" as const }
-                  : { fontSize: fontScale(28), textAlign: "right" as const },
+                  ? { fontSize: fontScale(23), textAlign: "right" as const }
+                  : { fontSize: fontScale(23), textAlign: "right" as const },
               { color: colors.textAccent },
             ]}
           >
@@ -95,10 +100,10 @@ export const PositionBox: FC<stateBox> = (props) => {
             style={[
               { flexShrink: 1, minWidth: 0 },
               mode == 2
-                ? { fontSize: fontScale(18), textAlign: "right" as const }
+                ? { fontSize: fontScale(16), textAlign: "right" as const }
                 : isBetween
-                  ? { fontSize: fontScale(25), textAlign: "right" as const }
-                  : { fontSize: fontScale(16), textAlign: "right" as const },
+                  ? { fontSize: fontScale(23), textAlign: "right" as const }
+                  : { fontSize: fontScale(14), textAlign: "right" as const },
               { color: colors.textAccent },
             ]}
           >
@@ -115,8 +120,8 @@ export const PositionBox: FC<stateBox> = (props) => {
               flexShrink: 1,
               minWidth: 0,
               ...(mode == 2
-                ? { fontSize: fontScale(18), textAlign: "right" as const }
-                : { fontSize: fontScale(25), textAlign: "right" as const }),
+                ? { fontSize: fontScale(16), textAlign: "right" as const }
+                : { fontSize: fontScale(23), textAlign: "right" as const }),
               fontSize: fontScale(10),
               color: colors.textAccent,
             }}

components/ActionSheetComponents/EachTrainInfo/TrainDataView.tsx

@@ -1,5 +1,12 @@
 import React, { useState, useEffect, FC } from "react";
-import { ScrollView, Text, View, TouchableOpacity, ViewStyle } from "react-native";
+import {
+  ScrollView,
+  Text,
+  View,
+  TouchableOpacity,
+  ViewStyle,
+  useWindowDimensions,
+} from "react-native";
 import { StateBox } from "./StateBox";
 import { PositionBox } from "./PositionBox";
 import { useCurrentTrainView } from "../../../stateBox/useCurrentTrain";
@@ -32,19 +39,10 @@ const TrainDataViewRow: FC<props> = ({
   mode = 0,
   navigate,
 }) => {
+  const { width} = useWindowDimensions();
   const { setInjectData } = useCurrentTrainView();
 
   const { allCustomTrainData } = useCustomTrainData();
-  const officialPosition = currentTrainData?.officialPosition;
-  const isStationPosition = officialPosition?.positionType === "station";
-  const platformNumber = isStationPosition
-    ? officialPosition?.platform
-    : undefined;
-  const lineNumber = isStationPosition ? officialPosition?.track : undefined;
-  // Notes describe the current position even when it is a prediction or a
-  // section between stations. Platform/track remain station-only fields, but
-  // the note itself must not be hidden by position_type.
-  const platformDescription = officialPosition?.note;
   const onLine = !!currentPosition?.toString().length;
   const lineLabel = lineDisplayName(currentTrainData?.Line);
 
@@ -61,10 +59,8 @@ const TrainDataViewRow: FC<props> = ({
     }
   }, [currentTrainData?.num, allCustomTrainData]);
   const columnStyle = {
-    width: "50%",
-    flexGrow: 0,
-    flexShrink: 0,
-    minWidth: 0,
+    width: width / 2,
+    display: "flex",
   } as const;
   const rightItemStyle: ViewStyle =
     mode === 2
@@ -90,15 +86,12 @@ const TrainDataViewRow: FC<props> = ({
     <View
       style={{
         flexDirection: "row",
-        //minHeight: 200,
-        //height: heightPercentageToDP("20%"),
         width: "100%",
         flex: 1,
+        display: "flex",
       }}
     >
-      <View
-        style={[columnStyle, { flexDirection: "row", alignItems: "stretch" }]}
-      >
+      <View style={{ flexDirection: "row",flex:1,...columnStyle }}>
         <TouchableOpacity
           style={{ flex: 1, minWidth: 0, flexDirection: "row" }}
           //disabled={!onLine}
@@ -128,9 +121,6 @@ const TrainDataViewRow: FC<props> = ({
             mode={mode}
             title={`現在地${showLineLabel && lineLabel ? ` (${lineLabel})` : ""} ${currentPosition?.toString()}${onLine ? "▶️" : ""}`}
             currentTrainData={currentTrainData}
-            platformNumber={platformNumber}
-            lineNumber={lineNumber}
-            platformDescription={platformDescription || ""}
             style={
               onLine
                 ? { borderWidth: 1, borderColor: "red", borderStyle: "solid" }
@@ -139,7 +129,7 @@ const TrainDataViewRow: FC<props> = ({
           />
           <View style={{ position: "absolute", right: 0, top: 0, zIndex: 10 }}>
             <OfficialPositionEditButton
-              positionId={officialPosition?.positionId}
+              positionId={currentTrainData?.officialPosition?.positionId}
               navigate={navigate}
               from="eachTrainInfo"
               closeEachTrainInfo
@@ -149,13 +139,14 @@ const TrainDataViewRow: FC<props> = ({
       </View>
 
       <View
-        style={[
-          columnStyle,
+        style={
           {
             flexDirection: mode == 2 ? "row" : "column",
-            ...(mode == 2 ? { overflow: "hidden" as const } : {}),
-          },
-        ]}
+            flex: 1,
+            ...columnStyle
+          }
+          
+        }
       >
         <View style={rightItemStyle}>
           <StateBox
@@ -254,7 +245,7 @@ export const TrainDataView: FC<props> = ({
         scrollEnabled={hasMultipleRows}
         nestedScrollEnabled
         showsHorizontalScrollIndicator={false}
-        style={{ flex: 1 }}
+        style={{ flex: 1, width: "100%" }}
         contentContainerStyle={{ flexGrow: 1, alignItems: "stretch" }}
         onMomentumScrollEnd={(event) => {
           const width = event.nativeEvent.layoutMeasurement.width || pageWidth;

components/Settings/SettingTopPage.tsx

@@ -17,7 +17,7 @@ import { useNotification } from "../../stateBox/useNotifications";
 import { SheetHeaderItem } from "@/components/atom/SheetHeaderItem";
 import { useThemeColors, type ColorThemePref } from "@/lib/theme/useThemeColors";
 import { useTrainMenu } from "@/stateBox/useTrainMenu";
-const versionCode = "7.2";
+const versionCode = "7.2.1";
 
 export const SettingTopPage = ({
   testNFC,