From acd5d0bb882139379fe5e409f3b7f291a7a14dcf Mon Sep 17 00:00:00 2001
From: harukin-expo-dev-env <harukin@haruk.in>
Date: Fri, 18 Jul 2025 15:34:00 +0000
Subject: [PATCH] =?UTF-8?q?=E6=A4=9C=E7=B4=A2=E5=89=8A=E9=99=A4=E6=A9=9F?=
 =?UTF-8?q?=E8=83=BD=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Menu/RailScope/SearchUnitBox.tsx | 99 +++++++++++++--------
 1 file changed, 62 insertions(+), 37 deletions(-)

diff --git a/components/Menu/RailScope/SearchUnitBox.tsx b/components/Menu/RailScope/SearchUnitBox.tsx
index 2e7741c..01cf4be 100644
--- a/components/Menu/RailScope/SearchUnitBox.tsx
+++ b/components/Menu/RailScope/SearchUnitBox.tsx
@@ -79,6 +79,9 @@ export const SearchUnitBox = ({
                   paddingRight: 10,
                   paddingLeft: 10,
                   flex: 1,
+                  flexDirection: "row",
+                  alignItems: "center",
+                  justifyContent: "center",
                 }}
               >
                 <TextInput
@@ -88,46 +91,68 @@ export const SearchUnitBox = ({
                   value={input}
                   style={{ flex: 1 }}
                 />
+                {input && (
+                  <TouchableOpacity
+                    onPress={() => setInput("") }
+                    style={{
+                      padding: 3,
+                      borderRadius: 15,
+                      backgroundColor: "lightgray",
+                    }}
+                  >
+                    <Ionicons
+                      name="close"
+                      size={20}
+                      color="white"
+                    />
+                  </TouchableOpacity>
+                )}
               </View>
             </View>
-            {!input &&<View style={{ flexDirection: "row", alignItems: "center" }}>
-              {Object.keys(lineList_LineWebID).map((d) => (
-                <TouchableOpacity
-                  style={{
-                    flex: 1,
-                    backgroundColor:
-                      lineColorList[stationIDPair[lineList_LineWebID[d]]],
-                    padding: 5,
-                    marginHorizontal: 2,
-                    borderRadius: 10,
-                    borderColor: "white",
-                    borderWidth: 1,
-                    borderStyle: "solid",
-                    alignItems: "center",
-                    opacity:
-                      isSearchMode == stationIDPair[lineList_LineWebID[d]]
-                        ? 1
-                        : !isSearchMode
-                        ? 1
-                        : 0.5,
-                    zIndex: 10,
-                  }}
-                  onPress={() => {
-                    const id = stationIDPair[lineList_LineWebID[d]];
-                    const s = isSearchMode == id ? undefined : id;
-                    if (!s) return;
-                    setisSearchMode(s);
-                  }}
-                  key={stationIDPair[lineList_LineWebID[d]]}
-                >
-                  <Text
-                    style={{ color: "white", fontWeight: "bold", fontSize: 20 }}
+            {!input && (
+              <View style={{ flexDirection: "row", alignItems: "center" }}>
+                {Object.keys(lineList_LineWebID).map((d) => (
+                  <TouchableOpacity
+                    style={{
+                      flex: 1,
+                      backgroundColor:
+                        lineColorList[stationIDPair[lineList_LineWebID[d]]],
+                      padding: 5,
+                      marginHorizontal: 2,
+                      borderRadius: 10,
+                      borderColor: "white",
+                      borderWidth: 1,
+                      borderStyle: "solid",
+                      alignItems: "center",
+                      opacity:
+                        isSearchMode == stationIDPair[lineList_LineWebID[d]]
+                          ? 1
+                          : !isSearchMode
+                          ? 1
+                          : 0.5,
+                      zIndex: 10,
+                    }}
+                    onPress={() => {
+                      const id = stationIDPair[lineList_LineWebID[d]];
+                      const s = isSearchMode == id ? undefined : id;
+                      if (!s) return;
+                      setisSearchMode(s);
+                    }}
+                    key={stationIDPair[lineList_LineWebID[d]]}
                   >
-                    {stationIDPair[lineList_LineWebID[d]]}
-                  </Text>
-                </TouchableOpacity>
-              ))}
-            </View>}
+                    <Text
+                      style={{
+                        color: "white",
+                        fontWeight: "bold",
+                        fontSize: 20,
+                      }}
+                    >
+                      {stationIDPair[lineList_LineWebID[d]]}
+                    </Text>
+                  </TouchableOpacity>
+                ))}
+              </View>
+            )}
           </View>
         )}
       </TouchableOpacity>