Update dependency ts-proto to v2.12.0

.gitignore

@@ -1,2 +1,4 @@
 target/
 cache/
+tokens.bin
+.auth_key

backend/Cargo.toml

@@ -6,17 +6,20 @@ default-run = "backend"
 
 
 [dependencies]
-prost = "0.14.1"
-prost-types = "0.14.1"
+prost = "0.14"
+prost-types = "0.14"
 rocket = { git = "https://github.com/rwf2/Rocket", rev = "504efef179622df82ba1dbd37f2e0d9ed2b7c9e4" }
 bytes = "1"
 rocket_prost_responder_derive = { path = "rocket_prost_responder_derive" }
-uuid = { version = "1.19.0", features = ["v4"] }
+uuid = { version = "1.19", features = ["v4"] }
 bcrypt = "0.17.1"
-bincode = "2.0.1"
+bincode = "2.0"
 serde = { version = "1.0", features = ["derive"] }
 serde_json = "1.0"
-reqwest = { version = "0.12.24", features = ["json"] }
+reqwest = { version = "0.13", features = ["json"] }
+aes-gcm = "0.10"
+base64 = "0.22"
+rand = "0.9.2"
 
 [build-dependencies]
-prost-build = "0.14.1"
+prost-build = "0.14"

backend/src/auth.rs

@@ -1,3 +1,4 @@
+use crate::auth_persistence::AuthStorage;
 use crate::items;
 use crate::proto_utils::Proto;
 use rocket::State;
@@ -6,14 +7,17 @@ use std::collections::{HashMap, HashSet};
 use uuid::Uuid;
 
 pub struct AuthState {
-    // Map token -> username
     tokens: Mutex<HashMap<String, String>>,
+    storage: AuthStorage,
 }
 
 impl AuthState {
     pub fn new() -> Self {
+        let storage = AuthStorage::new();
+        let tokens = storage.load_tokens();
         Self {
-            tokens: Mutex::new(HashMap::new()),
+            tokens: Mutex::new(tokens),
+            storage,
         }
     }
 }
@@ -60,7 +64,6 @@ impl<'r> rocket::request::FromRequest<'r> for Token {
 
         match token {
             Some(token) => {
-                // Check if token starts with "Bearer "
                 if let Some(token) = token.strip_prefix("Bearer ") {
                     let state = request.guard::<&State<AuthState>>().await.unwrap();
                     let tokens = state.tokens.lock().await;
@@ -138,7 +141,8 @@ pub async fn login(
     {
         let token = Uuid::new_v4().to_string();
         let mut tokens = state.tokens.lock().await;
-        tokens.insert(token.clone(), req.username);
+        tokens.insert(token.clone(), req.username.clone());
+        state.storage.save_tokens(&tokens);
 
         return items::LoginResponse {
             token,
@@ -163,6 +167,7 @@ pub async fn logout(
     let mut tokens = state.tokens.lock().await;
 
     if tokens.remove(&req.token).is_some() {
+        state.storage.save_tokens(&tokens);
         items::LogoutResponse {
             success: true,
             message: "Logged out successfully".to_string(),

backend/src/auth_persistence.rs

@@ -0,0 +1,227 @@
+use aes_gcm::{
+    Aes256Gcm, Nonce,
+    aead::{Aead, KeyInit},
+};
+use base64::{Engine, engine::general_purpose::STANDARD};
+use bincode::{config, decode_from_slice, encode_to_vec};
+use serde::{Deserialize, Serialize};
+use std::collections::HashMap;
+use std::fs::File;
+use std::io::{self, BufReader, BufWriter, Write};
+use std::os::unix::fs::PermissionsExt;
+
+#[derive(Debug, Serialize, Deserialize, bincode::Encode, bincode::Decode)]
+pub struct TokenEntry {
+    pub token: String,
+    pub username: String,
+    pub created_at: u64,
+}
+
+const AUTH_KEY_FILE: &str = ".auth_key";
+const TOKENS_FILE: &str = "tokens.bin";
+const NONCE_SIZE: usize = 12;
+const KEY_SIZE: usize = 32;
+
+pub struct AuthStorage {
+    cipher: Aes256Gcm,
+}
+
+impl Default for AuthStorage {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+impl AuthStorage {
+    pub fn new() -> Self {
+        let key = Self::load_or_create_key();
+        let cipher = Aes256Gcm::new_from_slice(&key).expect("Invalid key length");
+        Self { cipher }
+    }
+
+    fn load_or_create_key() -> Vec<u8> {
+        if let Ok(existing_key) = Self::load_key_from_file() {
+            return existing_key;
+        }
+
+        let key = Self::generate_key();
+        if let Err(e) = Self::save_key_to_file(&key) {
+            eprintln!("Warning: Failed to save auth key to file: {}", e);
+        }
+        key
+    }
+
+    fn generate_key() -> Vec<u8> {
+        use std::time::{SystemTime, UNIX_EPOCH};
+        let mut key = [0u8; KEY_SIZE];
+
+        let timestamp = SystemTime::now()
+            .duration_since(UNIX_EPOCH)
+            .unwrap_or_default()
+            .as_nanos();
+
+        let mut seed = timestamp as u64;
+        for byte in key.iter_mut() {
+            seed = seed.wrapping_mul(1103515245).wrapping_add(12345);
+            *byte = (seed >> (seed % 8)) as u8;
+        }
+
+        key.to_vec()
+    }
+
+    fn load_key_from_file() -> io::Result<Vec<u8>> {
+        let file = File::open(AUTH_KEY_FILE)?;
+        let reader = BufReader::new(file);
+        let encoded = std::io::read_to_string(reader)?;
+        let key = STANDARD.decode(encoded).map_err(|e| {
+            io::Error::new(
+                io::ErrorKind::InvalidData,
+                format!("Base64 decode error: {}", e),
+            )
+        })?;
+
+        if key.len() != KEY_SIZE {
+            return Err(io::Error::new(
+                io::ErrorKind::InvalidData,
+                "Invalid key length",
+            ));
+        }
+
+        Ok(key)
+    }
+
+    fn save_key_to_file(key: &[u8]) -> io::Result<()> {
+        let encoded = STANDARD.encode(key);
+        let mut file = File::create(AUTH_KEY_FILE)?;
+
+        let mut permissions = file.metadata()?.permissions();
+        permissions.set_mode(0o600);
+        file.set_permissions(permissions)?;
+
+        file.write_all(encoded.as_bytes())?;
+        file.sync_all()?;
+
+        Ok(())
+    }
+
+    pub fn load_tokens(&self) -> HashMap<String, String> {
+        let file = match File::open(TOKENS_FILE) {
+            Ok(f) => f,
+            Err(_) => {
+                eprintln!("Warning: No existing tokens file, starting with empty token list");
+                return HashMap::new();
+            }
+        };
+
+        let reader = BufReader::new(file);
+        let encrypted_data = match std::io::read_to_string(reader) {
+            Ok(data) => data,
+            Err(_) => {
+                eprintln!("Warning: Failed to read tokens file, starting with empty token list");
+                return HashMap::new();
+            }
+        };
+
+        let decoded = match STANDARD.decode(&encrypted_data) {
+            Ok(data) => data,
+            Err(_) => {
+                eprintln!("Warning: Failed to decode tokens file, starting with empty token list");
+                return HashMap::new();
+            }
+        };
+
+        if decoded.len() <= NONCE_SIZE {
+            eprintln!("Warning: Invalid tokens file format, starting with empty token list");
+            return HashMap::new();
+        }
+
+        let (nonce_bytes, ciphertext) = decoded.split_at(NONCE_SIZE);
+        let nonce = Nonce::from_slice(nonce_bytes);
+
+        let plaintext = match self.cipher.decrypt(nonce, ciphertext.as_ref()) {
+            Ok(p) => p,
+            Err(_) => {
+                eprintln!("Warning: Failed to decrypt tokens file, starting with empty token list");
+                return HashMap::new();
+            }
+        };
+
+        let config = config::standard();
+        let (entries, _): (Vec<TokenEntry>, usize) = match decode_from_slice(&plaintext, config) {
+            Ok(e) => e,
+            Err(_) => {
+                eprintln!("Warning: Failed to deserialize tokens, starting with empty token list");
+                return HashMap::new();
+            }
+        };
+
+        entries
+            .into_iter()
+            .map(|entry| (entry.token, entry.username))
+            .collect()
+    }
+
+    pub fn save_tokens(&self, tokens: &HashMap<String, String>) {
+        use std::time::{SystemTime, UNIX_EPOCH};
+
+        let entries: Vec<TokenEntry> = tokens
+            .iter()
+            .map(|(token, username)| TokenEntry {
+                token: token.clone(),
+                username: username.clone(),
+                created_at: SystemTime::now()
+                    .duration_since(UNIX_EPOCH)
+                    .unwrap_or_default()
+                    .as_secs(),
+            })
+            .collect();
+
+        let config = config::standard();
+        let plaintext: Vec<u8> = match encode_to_vec(&entries, config) {
+            Ok(data) => data,
+            Err(e) => {
+                eprintln!("Warning: Failed to serialize tokens: {}", e);
+                return;
+            }
+        };
+
+        let nonce_bytes: [u8; NONCE_SIZE] = rand::random();
+        let nonce = Nonce::from_slice(&nonce_bytes);
+        let ciphertext = match self.cipher.encrypt(nonce, plaintext.as_ref()) {
+            Ok(encrypted) => encrypted,
+            Err(e) => {
+                eprintln!("Warning: Failed to encrypt tokens: {}", e);
+                return;
+            }
+        };
+
+        let mut encrypted_data = nonce_bytes.to_vec();
+        encrypted_data.extend_from_slice(&ciphertext);
+
+        let encoded = STANDARD.encode(&encrypted_data);
+
+        match File::create(TOKENS_FILE) {
+            Ok(file) => {
+                if let Ok(metadata) = file.metadata() {
+                    let mut permissions = metadata.permissions();
+                    permissions.set_mode(0o600);
+                    if let Err(e) = file.set_permissions(permissions) {
+                        eprintln!("Warning: Failed to set permissions on tokens file: {}", e);
+                    }
+                }
+
+                let mut writer = BufWriter::new(file);
+
+                if let Err(e) = writer.write_all(encoded.as_bytes()) {
+                    eprintln!("Warning: Failed to write tokens file: {}", e);
+                }
+                if let Err(e) = writer.flush() {
+                    eprintln!("Warning: Failed to flush tokens file: {}", e);
+                }
+            }
+            Err(e) => {
+                eprintln!("Warning: Failed to create tokens file: {}", e);
+            }
+        }
+    }
+}

backend/src/lib.rs

@@ -6,8 +6,12 @@ pub mod items {
 }
 
 pub mod auth;
+pub mod auth_persistence;
 pub mod proto_utils;
+pub mod security_headers;
 pub mod store;
+pub mod validation;
 
 pub use auth::AdminState;
+pub use security_headers::SecurityHeaders;
 pub use store::User;

backend/src/main.rs

@@ -3,9 +3,12 @@ use rocket::fs::FileServer;
 use rocket::futures::lock::Mutex;
 
 use backend::auth;
+use backend::auth::AdminState;
 use backend::items::{self, Game};
 use backend::proto_utils;
+use backend::security_headers::SecurityHeaders;
 use backend::store::{self, User, save_state};
+use backend::validation;
 
 #[macro_use]
 extern crate rocket;
@@ -16,6 +19,10 @@ async fn get_user(
     user_list: &rocket::State<Mutex<Vec<User>>>,
     name: &str,
 ) -> Option<items::Person> {
+    if validation::validate_username(name).is_err() {
+        return None;
+    }
+
     let users = user_list.lock().await;
     users
         .iter()
@@ -40,6 +47,10 @@ async fn get_game(
     game_list: &rocket::State<Mutex<Vec<Game>>>,
     title: &str,
 ) -> Option<items::Game> {
+    if validation::validate_game_title(title).is_err() {
+        return None;
+    }
+
     let games = game_list.lock().await;
     games
         .iter()
@@ -52,12 +63,16 @@ async fn get_games_batch(
     _token: auth::Token,
     game_list: &rocket::State<Mutex<Vec<Game>>>,
     req: proto_utils::Proto<items::GetGameInfoRequest>,
-) -> items::GameList {
-    let games = game_list.lock().await;
+) -> Result<items::GameList, String> {
     let req = req.into_inner();
+
+    let games_set: std::collections::HashSet<String> = req.games.into_iter().collect();
+    validation::validate_game_titles_batch(&games_set)?;
+
+    let games = game_list.lock().await;
     let mut games = games.clone();
-    games.retain(|g| req.games.contains(&g.title));
-    items::GameList { games }
+    games.retain(|g| games_set.contains(&g.title));
+    Ok(items::GameList { games })
 }
 
 #[get("/games")]
@@ -71,57 +86,94 @@ async fn get_games(
     }
 }
 
-#[post("/game", data = "<game>")]
+#[post("/game", data = "<game>", rank = 1)]
 async fn add_game(
     _token: auth::Token,
     game_list: &rocket::State<Mutex<Vec<Game>>>,
     user_list: &rocket::State<Mutex<Vec<User>>>,
     game: proto_utils::Proto<items::Game>,
-) -> Option<items::Game> {
-    let mut games = game_list.lock().await;
+) -> Result<Option<items::Game>, String> {
     let mut game = game.into_inner();
 
     game.title = game.title.trim().to_string();
 
-    if game.remote_id == 0 {
-        return None;
+    validation::validate_game_title(&game.title)?;
+    validation::validate_remote_id(game.remote_id)?;
+    validation::validate_player_count(game.min_players, game.max_players)?;
+    validation::validate_price(game.price)?;
+
+    if game.title.len() > validation::MAX_GAME_TITLE_TRIMMED_LENGTH {
+        game.title = game
+            .title
+            .chars()
+            .take(validation::MAX_GAME_TITLE_TRIMMED_LENGTH)
+            .collect();
     }
 
+    let users = user_list.lock().await;
+    let mut games = game_list.lock().await;
+
     if let Some(existing) = games.iter().find(|g| {
         g.title == game.title || (g.remote_id == game.remote_id && g.source == game.source)
     }) {
-        return Some(existing.clone());
+        return Ok(Some(existing.clone()));
     }
 
     games.push(game.clone());
 
     games.sort_unstable_by(|g1, g2| g1.title.cmp(&g2.title));
 
-    let users = user_list.lock().await;
     save_state(&games, &users);
 
-    Some(game)
+    Ok(Some(game))
 }
 
-#[patch("/game", data = "<game>")]
+#[patch("/game", data = "<game>", rank = 1)]
 async fn update_game(
     _token: auth::AdminToken,
     game_list: &rocket::State<Mutex<Vec<Game>>>,
     user_list: &rocket::State<Mutex<Vec<User>>>,
     game: proto_utils::Proto<items::Game>,
-) -> Option<items::Game> {
-    let mut games = game_list.lock().await;
+) -> Result<Option<items::Game>, String> {
     let mut game = game.into_inner();
 
     game.title = game.title.trim().to_string();
 
-    if game.remote_id == 0 {
-        return None;
+    validation::validate_game_title(&game.title)?;
+    validation::validate_remote_id(game.remote_id)?;
+    validation::validate_player_count(game.min_players, game.max_players)?;
+    validation::validate_price(game.price)?;
+
+    if game.title.len() > validation::MAX_GAME_TITLE_TRIMMED_LENGTH {
+        game.title = game
+            .title
+            .chars()
+            .take(validation::MAX_GAME_TITLE_TRIMMED_LENGTH)
+            .collect();
     }
 
+    let mut users = user_list.lock().await;
+    let mut games = game_list.lock().await;
+
     let mut r_existing = None;
 
-    if let Some(existing) = games.iter_mut().find(|g| g.title == game.title) {
+    if let Some(existing) = games.iter_mut().find(|g| {
+        (g.remote_id == game.remote_id && g.source == game.source) || (g.title == game.title)
+    }) {
+        if existing.title != game.title {
+            let old_title = existing.title.clone();
+            for person in users.iter_mut() {
+                let opinion = person
+                    .person
+                    .opinion
+                    .iter_mut()
+                    .find(|o| o.title == old_title);
+                if let Some(opinion) = opinion {
+                    opinion.title = game.title.clone();
+                }
+            }
+        }
+        existing.title = game.title.clone();
         existing.source = game.source;
         existing.min_players = game.min_players;
         existing.max_players = game.max_players;
@@ -130,19 +182,24 @@ async fn update_game(
 
         r_existing = Some(existing.clone());
     }
-    let users = user_list.lock().await;
+
+    games.sort_unstable_by(|g1, g2| g1.title.cmp(&g2.title));
+
     save_state(&games, &users);
 
-    r_existing
+    Ok(r_existing)
 }
 
-#[delete("/game/<title>")]
+#[delete("/game/<title>", rank = 1)]
 async fn delete_game(
     _token: auth::AdminToken,
     game_list: &rocket::State<Mutex<Vec<Game>>>,
     user_list: &rocket::State<Mutex<Vec<User>>>,
     title: &str,
-) -> Option<items::Game> {
+) -> Result<Option<items::Game>, String> {
+    validation::validate_game_title(title)?;
+
+    let mut users = user_list.lock().await;
     let mut games = game_list.lock().await;
 
     if let Some(pos) = games
@@ -151,27 +208,33 @@ async fn delete_game(
     {
         let game = games.remove(pos);
 
-        let users = user_list.lock().await;
-        save_state(&games, &users);
-
-        return Some(game);
+        for person in users.iter_mut() {
+            person.person.opinion.retain_mut(|o| o.title != game.title);
         }
 
-    None
+        save_state(&games, &users);
+
+        return Ok(Some(game));
+    }
+
+    Ok(None)
 }
 
-#[post("/refresh")]
+#[post("/refresh", rank = 1)]
 async fn refresh_state(
     _token: auth::AdminToken,
     game_list: &rocket::State<Mutex<Vec<Game>>>,
     user_list: &rocket::State<Mutex<Vec<User>>>,
+    admin_state: &rocket::State<AdminState>,
 ) -> items::RefreshResponse {
     if let Some((new_games, new_users)) = store::load_state() {
-        let mut games = game_list.lock().await;
         let mut users = user_list.lock().await;
+        let mut games = game_list.lock().await;
+        let mut admins = admin_state.admins.lock().await;
 
         *games = new_games;
         *users = new_users;
+        *admins = store::load_admins();
 
         items::RefreshResponse {
             success: true,
@@ -185,20 +248,21 @@ async fn refresh_state(
     }
 }
 
-#[post("/opinion", data = "<req>")]
+#[post("/opinion", data = "<req>", rank = 1)]
 async fn add_opinion(
     token: auth::Token,
-    user_list: &rocket::State<Mutex<Vec<User>>>,
     game_list: &rocket::State<Mutex<Vec<Game>>>,
+    user_list: &rocket::State<Mutex<Vec<User>>>,
     req: proto_utils::Proto<items::AddOpinionRequest>,
-) -> Option<items::Person> {
-    let mut users = user_list.lock().await;
+) -> Result<Option<items::Person>, String> {
+    validation::validate_username(&token.username)?;
+
     let games = game_list.lock().await;
+    let mut users = user_list.lock().await;
     let mut result = None;
 
-    // Validate game exists
     if !games.iter().any(|g| g.title == req.game_title) {
-        return None;
+        return Err("Game not found".to_string());
     }
 
     if let Some(user) = users
@@ -206,6 +270,8 @@ async fn add_opinion(
         .find(|u| u.person.name.to_lowercase() == token.username.to_lowercase())
     {
         let req = req.into_inner();
+        validation::validate_game_title(&req.game_title)?;
+
         let opinion = items::Opinion {
             title: req.game_title.clone(),
             would_play: req.would_play,
@@ -231,18 +297,20 @@ async fn add_opinion(
     if result.is_some() {
         save_state(&games, &users);
     }
-    result
+    Ok(result)
 }
 
-#[patch("/opinion", data = "<req>")]
+#[patch("/opinion", data = "<req>", rank = 1)]
 async fn remove_opinion(
     token: auth::Token,
-    user_list: &rocket::State<Mutex<Vec<User>>>,
     game_list: &rocket::State<Mutex<Vec<Game>>>,
+    user_list: &rocket::State<Mutex<Vec<User>>>,
     req: proto_utils::Proto<items::RemoveOpinionRequest>,
-) -> Option<items::Person> {
-    let mut users = user_list.lock().await;
+) -> Result<Option<items::Person>, String> {
+    validation::validate_username(&token.username)?;
+
     let games = game_list.lock().await;
+    let mut users = user_list.lock().await;
     let mut result = None;
 
     if let Some(user) = users
@@ -250,6 +318,7 @@ async fn remove_opinion(
         .find(|u| u.person.name.to_lowercase() == token.username.to_lowercase())
     {
         let req = req.into_inner();
+        validation::validate_game_title(&req.game_title)?;
 
         if let Some(existing) = user
             .person
@@ -265,7 +334,7 @@ async fn remove_opinion(
     if result.is_some() {
         save_state(&games, &users);
     }
-    result
+    Ok(result)
 }
 
 mod cached_option;
@@ -316,9 +385,13 @@ async fn get_game_thumbnail(
                     .json::<serde_json::Value>()
                     .await
                     .ok()?
-                    .get("universeId")?
-                    .as_u64()
-                    .unwrap()
+                    .get("universeId")
+                    .and_then(|v| v.as_u64())
+            };
+
+            let universe_id = match universe_id {
+                Some(id) => id,
+                None => return None.into(),
             };
 
             let api_url = format!(
@@ -414,6 +487,7 @@ async fn main() -> Result<(), std::io::Error> {
     });
 
     rocket::build()
+        .attach(SecurityHeaders)
         .manage(Mutex::new(user_list))
         .manage(auth::AuthState::new())
         .manage(auth::AdminState::new())

backend/src/security_headers.rs

@@ -0,0 +1,33 @@
+use rocket::fairing::{Fairing, Info, Kind};
+use rocket::http::Header;
+use rocket::{Request, Response};
+
+pub struct SecurityHeaders;
+
+#[rocket::async_trait]
+impl Fairing for SecurityHeaders {
+    fn info(&self) -> Info {
+        Info {
+            name: "Security Headers",
+            kind: Kind::Response,
+        }
+    }
+
+    async fn on_response<'r>(&self, _request: &'r Request<'_>, response: &mut Response<'r>) {
+        response.set_header(Header::new("X-Content-Type-Options", "nosniff"));
+        response.set_header(Header::new("X-Frame-Options", "DENY"));
+        response.set_header(Header::new("X-XSS-Protection", "1; mode=block"));
+        response.set_header(Header::new(
+            "Referrer-Policy",
+            "strict-origin-when-cross-origin",
+        ));
+        response.set_header(Header::new(
+            "Content-Security-Policy",
+            "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self' data:; connect-src 'self'; frame-ancestors 'none';",
+        ));
+        response.set_header(Header::new(
+            "Permissions-Policy",
+            "geolocation=(), microphone=(), camera=()",
+        ));
+    }
+}

backend/src/validation.rs

@@ -0,0 +1,108 @@
+use std::collections::HashSet;
+
+pub const MAX_USERNAME_LENGTH: usize = 50;
+pub const MIN_USERNAME_LENGTH: usize = 2;
+pub const MAX_GAME_TITLE_LENGTH: usize = 200;
+const MIN_GAME_TITLE_LENGTH: usize = 1;
+pub const MAX_GAME_TITLE_TRIMMED_LENGTH: usize = 200;
+pub const MAX_PRICE: u32 = 1_000_000;
+pub const MAX_PLAYERS: u32 = 10_000;
+
+const VALID_USERNAME_CHARS: &str =
+    "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789_-";
+
+pub fn validate_username(username: &str) -> Result<(), String> {
+    let trimmed = username.trim();
+
+    if trimmed.is_empty() {
+        return Err("Username cannot be empty".to_string());
+    }
+
+    if trimmed.len() < MIN_USERNAME_LENGTH {
+        return Err(format!(
+            "Username must be at least {} characters long",
+            MIN_USERNAME_LENGTH
+        ));
+    }
+
+    if trimmed.len() > MAX_USERNAME_LENGTH {
+        return Err(format!(
+            "Username must not exceed {} characters",
+            MAX_USERNAME_LENGTH
+        ));
+    }
+
+    for c in trimmed.chars() {
+        if !VALID_USERNAME_CHARS.contains(c) {
+            return Err(format!(
+                "Username contains invalid character '{}'. Only alphanumeric characters, underscores and hyphens are allowed",
+                c
+            ));
+        }
+    }
+
+    Ok(())
+}
+
+pub fn validate_game_title(title: &str) -> Result<(), String> {
+    if title.trim().is_empty() {
+        return Err("Game title cannot be empty".to_string());
+    }
+
+    if title.len() > MAX_GAME_TITLE_LENGTH {
+        return Err(format!(
+            "Game title must not exceed {} characters",
+            MAX_GAME_TITLE_LENGTH
+        ));
+    }
+
+    Ok(())
+}
+
+pub fn validate_remote_id(remote_id: u64) -> Result<(), String> {
+    if remote_id == 0 {
+        return Err("Remote ID cannot be zero".to_string());
+    }
+
+    Ok(())
+}
+
+pub fn validate_player_count(min_players: u32, max_players: u32) -> Result<(), String> {
+    if min_players == 0 {
+        return Err("Minimum players must be at least 1".to_string());
+    }
+
+    if min_players > max_players {
+        return Err("Minimum players cannot be greater than maximum players".to_string());
+    }
+
+    if max_players > MAX_PLAYERS {
+        return Err(format!("Maximum players cannot exceed {}", MAX_PLAYERS));
+    }
+
+    Ok(())
+}
+
+pub fn validate_price(price: u32) -> Result<(), String> {
+    if price > MAX_PRICE {
+        return Err(format!("Price cannot exceed ${}", MAX_PRICE));
+    }
+
+    Ok(())
+}
+
+pub fn validate_game_titles_batch(titles: &HashSet<String>) -> Result<(), String> {
+    if titles.is_empty() {
+        return Ok(());
+    }
+
+    if titles.len() > 100 {
+        return Err("Cannot request more than 100 games at once".to_string());
+    }
+
+    for title in titles {
+        validate_game_title(title)?;
+    }
+
+    Ok(())
+}

frontend/items.ts

@@ -1,6 +1,6 @@
 // Code generated by protoc-gen-ts_proto. DO NOT EDIT.
 // versions:
-//   protoc-gen-ts_proto  v2.8.3
+//   protoc-gen-ts_proto  v2.10.1
 //   protoc               v6.33.1
 // source: items.proto
 

frontend/package.json

@@ -11,24 +11,24 @@
     "gen:proto": "protoc --plugin=./node_modules/.bin/protoc-gen-ts_proto --ts_proto_out=. -I ../protobuf items.proto"
   },
   "dependencies": {
-    "@bufbuild/protobuf": "^2.10.1",
-    "react": "^19.2.1",
-    "react-dom": "^19.2.1",
-    "react-router-dom": "^7.10.1"
+    "@bufbuild/protobuf": "^2.10.2",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "react-router-dom": "^7.12.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.1",
-    "@types/node": "^24.10.1",
-    "@types/react": "^19.2.7",
+    "@eslint/js": "^9.39.2",
+    "@types/node": "^24.10.7",
+    "@types/react": "^19.2.8",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.2",
-    "eslint": "^9.39.1",
+    "eslint": "^9.39.2",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.24",
+    "eslint-plugin-react-refresh": "^0.4.26",
     "globals": "^16.5.0",
-    "ts-proto": "^2.8.3",
+    "ts-proto": "^2.10.1",
     "typescript": "~5.9.3",
-    "typescript-eslint": "^8.48.1",
+    "typescript-eslint": "^8.53.0",
     "vite": "npm:rolldown-vite@7.2.5"
   },
   "pnpm": {

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { Person, PersonList as PersonListProto } from "../items";
 import { Login } from "./Login";
 import { PersonList } from "./PersonList";
@@ -41,6 +41,15 @@ function App() {
     _setTheme(ev.data as string);
   };
 
+  const addToast = useCallback((message: string, type: ToastType = "info") => {
+    const id = Date.now();
+    setToasts((prev) => [...prev, { id, message, type }]);
+  }, []);
+
+  const removeToast = (id: number) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  };
+
   useEffect(() => {
     if (theme !== "default" && theme !== "sakura") {
       document.body.classList.remove("sakura-theme");
@@ -62,14 +71,16 @@ function App() {
     }
   }, [theme]);
 
-  const addToast = (message: string, type: ToastType = "info") => {
-    const id = Date.now();
-    setToasts((prev) => [...prev, { id, message, type }]);
+  useEffect(() => {
+    const handleUnauthorized = () => {
+      setToken("");
+      setPeople([]);
+      addToast("Session expired. Please log in again.", "info");
     };
 
-  const removeToast = (id: number) => {
-    setToasts((prev) => prev.filter((t) => t.id !== id));
-  };
+    window.addEventListener("unauthorized", handleUnauthorized);
+    return () => window.removeEventListener("unauthorized", handleUnauthorized);
+  }, [addToast]);
 
   const fetchPeople = () => {
     if (!token) return;

frontend/src/EditGame.tsx

@@ -333,9 +333,9 @@ export function EditGame({ onShowToast }: Props) {
                   <input
                     type="number"
                     value={price}
-                    onChange={(e) => setPrice(Number(e.target.value))}
+                    onChange={(e) => setPrice(Math.ceil(Number(e.target.value.replace(',', '.'))))}
                     min="0"
-                    step="0.01"
+                    step="1"
                     style={inputStyles}
                     className="add-game-input"
                   />

frontend/src/GameDetails.tsx

@@ -67,7 +67,7 @@ export function GameDetails({ onShowToast }: Props) {
   };
 
   if (loading) return <LoadingState message="Loading game details..." />;
-  if (error) return <ErrorState message={error} onRetry={() => window.location.reload()} />;
+  if (error) return <ErrorState message={error} onRetry={() => navigate(0)} />;
   if (!game) return <EmptyState icon="🎮" title="Game not found" description="This game doesn't exist or has been deleted" />;
 
   const getExternalLink = () => {

frontend/src/GameFilter.css

@@ -12,3 +12,81 @@
 .gamefilter-entry:hover {
     background-color: var(--primary-bg);
 }
+
+.filter-controls {
+    background-color: var(--secondary-alt-bg);
+    border-radius: 8px;
+    padding: 1.5rem;
+    margin-bottom: 2rem;
+    border: 1px solid var(--border-color);
+}
+
+.filter-controls h3 {
+    margin: 0 0 1rem 0;
+    font-size: 1.1rem;
+    color: var(--text-color);
+}
+
+.filter-groups {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+}
+
+.filter-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.filter-group label {
+    font-size: 0.9rem;
+    color: var(--text-color);
+    font-weight: 500;
+}
+
+.checkbox-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+}
+
+.checkbox-wrapper input[type="checkbox"] {
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+    accent-color: var(--accent-color);
+}
+
+.checkbox-wrapper span {
+    font-size: 0.9rem;
+    color: var(--text-color);
+}
+
+.price-input {
+    padding: 0.5rem;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background-color: var(--primary-bg);
+    color: var(--text-color);
+    width: 120px;
+    font-size: 0.9rem;
+}
+
+.price-input:focus {
+    outline: none;
+    border-color: var(--accent-color);
+}
+
+.tooltip-icon {
+    display: inline-block;
+    margin-left: 0.3rem;
+    cursor: help;
+    font-size: 0.9rem;
+    opacity: 0.6;
+}
+
+.tooltip-icon:hover {
+    opacity: 1;
+}

frontend/src/GameFilter.tsx

@@ -11,10 +11,16 @@ export function GameFilter() {
   const [people, setPeople] = useState<Person[]>([]);
   const [loading, setLoading] = useState(true);
   const [selectedPeople, setSelectedPeople] = useState<Set<string>>(new Set());
+  const [freeGamesOnly, setFreeGamesOnly] = useState(false);
+  const [maxPrice, setMaxPrice] = useState<number | null>(null);
+  const [ownershipMode, setOwnershipMode] = useState(false);
 
-  const { filteredGames, gameToPositive } = useGameFilter(
+  const { filteredGames, gameToPositive, games } = useGameFilter(
     people,
-    selectedPeople
+    selectedPeople,
+    freeGamesOnly,
+    maxPrice,
+    ownershipMode
   );
 
   useEffect(() => {
@@ -57,10 +63,62 @@ export function GameFilter() {
         onTogglePerson={togglePerson}
       />
 
+      <div className="filter-controls">
+        <h3>Additional Filters</h3>
+        <div className="filter-groups">
+          <div className="filter-group">
+            <label className="checkbox-wrapper">
+              <input
+                type="checkbox"
+                checked={freeGamesOnly}
+                onChange={(e) => setFreeGamesOnly(e.target.checked)}
+              />
+              <span>Free games only</span>
+            </label>
+          </div>
+
+          <div className="filter-group">
+            <label htmlFor="max-price">Maximum price (€)</label>
+            <input
+              id="max-price"
+              type="number"
+              className="price-input"
+              min="0"
+              placeholder="No limit"
+              value={maxPrice ?? ""}
+              onChange={(e) => {
+                const value = e.target.value;
+                setMaxPrice(value === "" ? null : parseInt(value, 10));
+              }}
+            />
+          </div>
+
+          <div className="filter-group">
+            <label className="checkbox-wrapper">
+              <input
+                type="checkbox"
+                checked={ownershipMode}
+                onChange={(e) => setOwnershipMode(e.target.checked)}
+              />
+              <span>
+                Ownership mode
+                <span
+                  className="tooltip-icon"
+                  title="For paid games, only show if ALL selected people have marked it as wouldPlay"
+                >
+                  ?
+                </span>
+              </span>
+            </label>
+          </div>
+        </div>
+      </div>
+
       <FilteredGamesList
         filteredGames={filteredGames}
         gameToPositive={gameToPositive}
         selectedPeopleCount={selectedPeople.size}
+        games={games}
       />
     </div>
   );

frontend/src/GameList.tsx

@@ -463,9 +463,9 @@ export function GameList({ onShowToast }: Props) {
                   <input
                     type="number"
                     value={price}
-                    onChange={(e) => setPrice(Number(e.target.value))}
+                    onChange={(e) => setPrice(Math.ceil(Number(e.target.value.replace(',', '.'))))}
                     min="0"
-                    step="0.01"
+                    step="1"
                     style={inputStyles}
                     className="add-game-input"
                   />

frontend/src/Login.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useRef, useEffect } from "react";
 import { LoginRequest, LoginResponse } from "../items";
 
 interface LoginProps {
@@ -6,11 +6,18 @@ interface LoginProps {
 }
 
 export function Login({ onLogin }: LoginProps) {
+  const usernameInputRef = useRef<HTMLInputElement>(null);
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [fieldErrors, setFieldErrors] = useState<{ username?: string, password?: string }>({});
+  const [isSuccess, setIsSuccess] = useState(false);
+  const [shakeCard, setShakeCard] = useState(false);
+
+  useEffect(() => {
+    usernameInputRef.current?.focus();
+  }, []);
 
   const validateForm = () => {
     const errors: { username?: string, password?: string } = {};
@@ -24,7 +31,11 @@ export function Login({ onLogin }: LoginProps) {
     e.preventDefault();
     setError("");
 
-    if (!validateForm()) return;
+    if (!validateForm()) {
+      setShakeCard(true);
+      setTimeout(() => setShakeCard(false), 500);
+      return;
+    }
 
     setIsSubmitting(true);
 
@@ -44,45 +55,232 @@ export function Login({ onLogin }: LoginProps) {
       const response = LoginResponse.decode(new Uint8Array(buffer));
 
       if (response.success) {
+        setIsSuccess(true);
         onLogin(response.token);
       } else {
         setError(response.message || "Login failed");
+        setShakeCard(true);
+        setTimeout(() => setShakeCard(false), 500);
       }
     } catch (err) {
       console.error("Login error:", err);
       setError("An unexpected error occurred. Please try again.");
+      setShakeCard(true);
+      setTimeout(() => setShakeCard(false), 500);
     } finally {
       setIsSubmitting(false);
     }
   };
 
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      handleSubmit(e);
+    }
+  };
+
   return (
-    <div className="card" style={{ maxWidth: "400px", margin: "4rem auto" }}>
-      <h2 style={{ textAlign: "center", marginBottom: "2rem" }}>🎮 Login</h2>
+    <div
+      className="card login-card"
+      style={{
+        maxWidth: "420px",
+        margin: "6rem auto",
+        padding: "2.5rem",
+        background: "linear-gradient(135deg, var(--secondary-bg) 0%, var(--secondary-alt-bg) 100%)",
+        position: "relative"
+      }}
+    >
+      {isSubmitting && (
+        <div
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: "rgba(0, 0, 0, 0.5)",
+            borderRadius: "16px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            zIndex: 10,
+            backdropFilter: "blur(2px)"
+          }}
+        >
+          <div
+            style={{
+              width: "48px",
+              height: "48px",
+              border: "4px solid rgba(255, 255, 255, 0.2)",
+              borderTopColor: "white",
+              borderRadius: "50%",
+              animation: "spin 0.8s linear infinite"
+            }}
+          />
+        </div>
+      )}
+
+      {isSuccess && (
+        <div
+          style={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: "1rem",
+            animation: "fadeInScale 0.5s ease forwards",
+            zIndex: 10
+          }}
+        >
+          <div
+            style={{
+              width: "64px",
+              height: "64px",
+              borderRadius: "50%",
+              backgroundColor: "#4caf50",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: "2rem",
+              color: "white",
+              boxShadow: "0 0 20px rgba(76, 175, 80, 0.5)"
+            }}
+          >
+            ✓
+          </div>
+          <span style={{ color: "#4caf50", fontWeight: 600, fontSize: "1.1rem" }}>
+            Success!
+          </span>
+        </div>
+      )}
+
+      <h2
+        style={{
+          textAlign: "center",
+          marginBottom: "0.5rem",
+          fontSize: "2rem",
+          fontWeight: 700
+        }}
+      >
+        🎮 Login
+      </h2>
+      <p
+        style={{
+          textAlign: "center",
+          color: "var(--text-muted)",
+          marginBottom: "2rem",
+          fontSize: "0.95rem"
+        }}
+      >
+        Welcome back! Please sign in to continue.
+      </p>
+
       <form onSubmit={handleSubmit} className="form-group">
-        <div className="form-group">
-          <label>Username</label>
+        <div className="form-group" style={{ marginBottom: "1.5rem" }}>
+          <label
+            style={{
+              display: "block",
+              marginBottom: "0.5rem",
+              fontWeight: 500,
+              color: "var(--text-color)",
+              fontSize: "0.95rem"
+            }}
+          >
+            Username
+          </label>
+          <div
+            style={{
+              position: "relative",
+              display: "flex",
+              alignItems: "center"
+            }}
+          >
+            <span
+              style={{
+                position: "absolute",
+                left: "0.75rem",
+                color: "var(--text-muted)",
+                pointerEvents: "none",
+                fontSize: "1.1rem"
+              }}
+            >
+              👤
+            </span>
             <input
+              ref={usernameInputRef}
               type="text"
               value={username}
               onChange={(e) => {
                 setUsername(e.target.value);
                 if (fieldErrors.username) setFieldErrors({ ...fieldErrors, username: undefined });
               }}
+              onKeyDown={handleKeyDown}
               placeholder="Enter your username"
+              aria-label="Username"
+              aria-invalid={!!fieldErrors.username}
+              aria-describedby={fieldErrors.username ? "username-error" : undefined}
               style={{
+                width: "100%",
+                paddingLeft: "2.75rem",
+                paddingRight: "0.75rem",
+                paddingTop: "0.75rem",
+                paddingBottom: "0.75rem",
                 borderColor: fieldErrors.username ? "#f44336" : undefined,
-              borderWidth: fieldErrors.username ? "2px" : undefined
+                borderWidth: fieldErrors.username ? "2px" : "1px",
+                fontSize: "1rem"
               }}
             />
+          </div>
           {fieldErrors.username && (
-            <span style={{ color: "#f44336", fontSize: "0.85rem", marginTop: "0.25rem", display: "block" }}>
-              {fieldErrors.username}
+            <span
+              id="username-error"
+              role="alert"
+              style={{
+                color: "#ff6b6b",
+                fontSize: "0.85rem",
+                marginTop: "0.5rem",
+                display: "flex",
+                alignItems: "center",
+                gap: "0.25rem"
+              }}
+            >
+              ⚠️ {fieldErrors.username}
             </span>
           )}
         </div>
-        <div className="form-group">
-          <label>Password</label>
+
+        <div className="form-group" style={{ marginBottom: "2rem" }}>
+          <label
+            style={{
+              display: "block",
+              marginBottom: "0.5rem",
+              fontWeight: 500,
+              color: "var(--text-color)",
+              fontSize: "0.95rem"
+            }}
+          >
+            Password
+          </label>
+          <div
+            style={{
+              position: "relative",
+              display: "flex",
+              alignItems: "center"
+            }}
+          >
+            <span
+              style={{
+                position: "absolute",
+                left: "0.75rem",
+                color: "var(--text-muted)",
+                pointerEvents: "none",
+                fontSize: "1.1rem"
+              }}
+            >
+              🔒
+            </span>
             <input
               type="password"
               value={password}
@@ -90,64 +288,131 @@ export function Login({ onLogin }: LoginProps) {
                 setPassword(e.target.value);
                 if (fieldErrors.password) setFieldErrors({ ...fieldErrors, password: undefined });
               }}
+              onKeyDown={handleKeyDown}
               placeholder="Enter your password"
+              aria-label="Password"
+              aria-invalid={!!fieldErrors.password}
+              aria-describedby={fieldErrors.password ? "password-error" : undefined}
               style={{
+                width: "100%",
+                paddingLeft: "2.75rem",
+                paddingRight: "0.75rem",
+                paddingTop: "0.75rem",
+                paddingBottom: "0.75rem",
                 borderColor: fieldErrors.password ? "#f44336" : undefined,
-              borderWidth: fieldErrors.password ? "2px" : undefined
+                borderWidth: fieldErrors.password ? "2px" : "1px",
+                fontSize: "1rem"
               }}
             />
+          </div>
           {fieldErrors.password && (
-            <span style={{ color: "#f44336", fontSize: "0.85rem", marginTop: "0.25rem", display: "block" }}>
-              {fieldErrors.password}
+            <span
+              id="password-error"
+              role="alert"
+              style={{
+                color: "#ff6b6b",
+                fontSize: "0.85rem",
+                marginTop: "0.5rem",
+                display: "flex",
+                alignItems: "center",
+                gap: "0.25rem"
+              }}
+            >
+              ⚠️ {fieldErrors.password}
             </span>
           )}
         </div>
+
         <button
           type="submit"
-          style={{ marginTop: "1rem", width: "100%", opacity: isSubmitting ? 0.7 : 1, cursor: isSubmitting ? "not-allowed" : "pointer" }}
-          disabled={isSubmitting}
-        >
-          {isSubmitting ? (
-            <>
-              <span
           style={{
-                  width: "14px",
-                  height: "14px",
-                  border: "2px solid rgba(255,255,255,0.3)",
-                  borderTopColor: "white",
-                  borderRadius: "50%",
-                  animation: "spin 0.8s linear infinite",
-                  display: "inline-block",
-                  marginRight: "0.5rem"
+            marginTop: "0.5rem",
+            width: "100%",
+            padding: "0.875rem",
+            fontSize: "1rem",
+            fontWeight: 600,
+            opacity: isSubmitting ? 0.7 : 1,
+            cursor: isSubmitting ? "not-allowed" : "pointer",
+            background: "linear-gradient(135deg, var(--accent-color) 0%, var(--secondary-accent) 100%)",
+            border: "none",
+            transition: "transform 0.1s, box-shadow 0.2s"
           }}
-              ></span>
-              Logging in...
-            </>
-          ) : (
-            "Login"
-          )}
+          disabled={isSubmitting}
+          onMouseEnter={(e) => {
+            if (!isSubmitting) {
+              e.currentTarget.style.transform = "translateY(-1px)";
+              e.currentTarget.style.boxShadow = "0 4px 12px rgba(9, 109, 192, 0.4)";
+            }
+          }}
+          onMouseLeave={(e) => {
+            if (!isSubmitting) {
+              e.currentTarget.style.transform = "translateY(0)";
+              e.currentTarget.style.boxShadow = "none";
+            }
+          }}
+          onMouseDown={(e) => {
+            if (!isSubmitting) {
+              e.currentTarget.style.transform = "translateY(0)";
+            }
+          }}
+        >
+          Login
         </button>
       </form>
+
       {error && (
         <div
+          role="alert"
           style={{
-            backgroundColor: "rgba(244, 67, 54, 0.1)",
-            border: "1px solid rgba(244, 67, 54, 0.3)",
+            backgroundColor: "rgba(244, 67, 54, 0.15)",
+            border: "1px solid rgba(244, 67, 54, 0.4)",
             color: "#ff6b6b",
-            padding: "1rem",
+            padding: "0.875rem 1rem",
             borderRadius: "8px",
-            marginTop: "1rem",
+            marginTop: "1.5rem",
             textAlign: "center",
-            fontSize: "0.9rem"
+            fontSize: "0.9rem",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: "0.5rem"
           }}
         >
           ⚠️ {error}
         </div>
       )}
+
       <style>{`
         @keyframes spin {
           to { transform: rotate(360deg); }
         }
+
+        @keyframes fadeInScale {
+          from {
+            opacity: 0;
+            transform: translate(-50%, -40%) scale(0.8);
+          }
+          to {
+            opacity: 1;
+            transform: translate(-50%, -50%) scale(1);
+          }
+        }
+
+        .login-card {
+          animation: ${shakeCard ? "shake 0.5s ease" : "none"};
+        }
+
+        @keyframes shake {
+          0%, 100% {
+            transform: translateX(0);
+          }
+          20%, 60% {
+            transform: translateX(-8px);
+          }
+          40%, 80% {
+            transform: translateX(8px);
+          }
+        }
       `}</style>
     </div>
   );

frontend/src/api.ts

@@ -22,7 +22,7 @@ export const apiFetch = async (
     if (response.status == 401) {
       localStorage.removeItem("token");
       localStorage.removeItem("isAdmin");
-      window.location.href = "/";
+      window.dispatchEvent(new CustomEvent("unauthorized"));
     }
     throw new Error(`Request failed with status ${response.status}`);
   }

frontend/src/components/FilteredGamesList.tsx

@@ -1,17 +1,20 @@
 import { Link } from "react-router-dom";
 import { GameImage } from "../GameImage";
 import { EmptyState } from "./EmptyState";
+import { Game as GameProto } from "../../items";
 
 interface FilteredGamesListProps {
   filteredGames: string[];
   gameToPositive: Map<string, Set<string>>;
   selectedPeopleCount: number;
+  games: Map<string, GameProto>;
 }
 
 export function FilteredGamesList({
   filteredGames,
   gameToPositive,
   selectedPeopleCount,
+  games,
 }: FilteredGamesListProps) {
   if (selectedPeopleCount === 0) {
     return (
@@ -31,6 +34,12 @@ export function FilteredGamesList({
           {filteredGames.map((game) => {
             const positiveCount = gameToPositive.get(game)?.size || 0;
             const neutralCount = selectedPeopleCount - positiveCount;
+            const gameData = games.get(game);
+            if (!gameData) {
+              console.error("no data", game);
+              return null;
+            }
+            const price = gameData.price;
 
             return (
               <Link
@@ -68,6 +77,24 @@ export function FilteredGamesList({
                       {neutralCount > 1 ? "are" : "is"} neutral
                     </div>
                   )}
+                  <div
+                    className="price-badge"
+                    style={{
+                      fontSize: "0.85em",
+                      marginTop: "0.5rem",
+                      padding: "0.2rem 0.6rem",
+                      borderRadius: "4px",
+                      display: "inline-block",
+                      backgroundColor:
+                        price === 0
+                          ? "rgba(76, 175, 80, 0.2)"
+                          : "rgba(255, 152, 0, 0.2)",
+                      color: price === 0 ? "#4caf50" : "#ff9800",
+                      fontWeight: 600,
+                    }}
+                  >
+                    {price === 0 ? "0€ (Free)" : `${price}€`}
+                  </div>
                 </div>
                 <GameImage game={game} />
               </Link>

frontend/src/hooks/useGameFilter.ts

@@ -7,10 +7,22 @@ import {
 } from "../../items";
 import { apiFetch } from "../api";
 
-export function useGameFilter(people: Person[], selectedPeople: Set<string>) {
+export function useGameFilter(
+  people: Person[],
+  selectedPeople: Set<string>,
+  freeGamesOnly: boolean,
+  maxPrice: number | null,
+  ownershipMode: boolean
+) {
   const [fetchedTitles, setFetchedTitles] = useState<string[]>([]);
   const metaDataRef = useRef<{ [key: string]: GameProto }>({});
 
+  useEffect(() => {
+    return () => {
+      metaDataRef.current = {};
+    };
+  }, []);
+
   const { gameToNegative, gameToPositiveOpinion } = useMemo(() => {
     const gameToNegative = new Map<string, Set<string>>();
     const gameToPositiveOpinion = new Map<string, Set<string>>();
@@ -79,20 +91,61 @@ export function useGameFilter(people: Person[], selectedPeople: Set<string>) {
       .filter((title) => metaDataRef.current[title])
       .map((title) => metaDataRef.current[title]);
 
-    return filterByPlayerCount(games, selectedPeople.size);
+    return filterGames(
+      games,
+      selectedPeople.size,
+      freeGamesOnly,
+      maxPrice,
+      ownershipMode,
+      selectedPeople,
+      people
+    );
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [titlesEveryoneWouldPlay, selectedPeople.size, fetchedTitles]);
+  }, [
+    titlesEveryoneWouldPlay,
+    selectedPeople.size,
+    fetchedTitles,
+    freeGamesOnly,
+    maxPrice,
+    ownershipMode,
+    people,
+    selectedPeople,
+  ]);
 
-  return { filteredGames, gameToPositive: gameToPositiveOpinion };
+  const gamesMap = new Map(Object.entries(metaDataRef.current));
+
+  return { filteredGames, gameToPositive: gameToPositiveOpinion, games: gamesMap };
 }
 
-function filterByPlayerCount(
+function filterGames(
   games: GameProto[],
-  playerCount: number
+  playerCount: number,
+  freeGamesOnly: boolean,
+  maxPrice: number | null,
+  ownershipMode: boolean,
+  selectedPeople: Set<string>,
+  people: Person[]
 ): string[] {
+  const selectedPersons = people.filter((p) => selectedPeople.has(p.name));
+
   return games
     .filter(
       (game) => game.maxPlayers >= playerCount && game.minPlayers <= playerCount
     )
+    .filter((game) => {
+      if (freeGamesOnly) return game.price === 0;
+      if (maxPrice !== null) return game.price <= maxPrice;
+      return true;
+    })
+    .filter((game) => {
+      if (!ownershipMode) return true;
+      if (game.price === 0) return true;
+
+      return selectedPersons.every((person) =>
+        person.opinion.some(
+          (op) => op.title === game.title && op.wouldPlay
+        )
+      );
+    })
     .map((game) => game.title);
 }

frontend/src/index.css

@@ -129,10 +129,9 @@ ul {
   --secondary-bg: rgb(0, 0, 0, 0.7); /* Translucent cards */
   --secondary-alt-bg: rgb(20, 20, 20, 0.6); /* Translucent inputs */
   --tertiary-bg: rgb(40, 40, 40, 0.8);
-  --border-color: rgb(255, 255, 255, 0.15);
   --text-color: #ffffff;
-  --accent-color: #121212;
-  --secondary-accent: #212121;
+  --accent-color: #FF9500;
+  --secondary-accent: #FF6B00;
 }
 
 .sakura-theme {