add more validation

backend/src/main.rs

@@ -83,6 +83,10 @@ async fn add_game(
 
     game.title = game.title.trim().to_string();
 
+    if game.remote_id == 0 {
+        return None;
+    }
+
     if let Some(existing) = games.iter().find(|g| {
         g.title == game.title || (g.remote_id == game.remote_id && g.source == game.source)
     }) {

frontend/src/GameList.tsx

@@ -26,6 +26,7 @@ export function GameList({ onShowToast }: Props) {
   const [price, setPrice] = useState(0);
   const [remoteId, setRemoteId] = useState(0);
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [remoteIdError, setRemoteIdError] = useState("");
   const [opinions, setOpinions] = useState<Opinion[]>([]);
 
   const fetchGames = () => {
@@ -79,6 +80,13 @@ export function GameList({ onShowToast }: Props) {
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
+
+    if (remoteId === 0) {
+      setRemoteIdError("Remote ID must be greater than 0");
+      return;
+    }
+
+    setRemoteIdError("");
     setIsSubmitting(true);
     const game = {
       title,
@@ -391,11 +399,28 @@ export function GameList({ onShowToast }: Props) {
                   <input
                     type="number"
                     value={remoteId}
-                    onChange={(e) => setRemoteId(Number(e.target.value))}
+                    onChange={(e) => {
+                      setRemoteId(Number(e.target.value));
+                      setRemoteIdError("");
+                    }}
                     min="0"
-                    style={inputStyles}
+                    style={{
+                      ...inputStyles,
+                      borderColor: remoteIdError ? "#f44336" : undefined,
+                    }}
                     className="add-game-input"
                   />
+                  {remoteIdError && (
+                    <div
+                      style={{
+                        color: "#f44336",
+                        fontSize: "0.75rem",
+                        marginTop: "0.25rem",
+                      }}
+                    >
+                      {remoteIdError}
+                    </div>
+                  )}
                 </div>
               </div>
             </div>