Update dependency @bufbuild/protobuf to v2.13.0

.gitignore

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

admins.json

@@ -0,0 +1 @@
+["Code002Lover","HoherGeist"]

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,19 +1,23 @@
+use crate::auth_persistence::AuthStorage;
 use crate::items;
 use crate::proto_utils::Proto;
 use rocket::State;
 use rocket::futures::lock::Mutex;
-use std::collections::HashMap;
+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,
         }
     }
 }
@@ -24,6 +28,24 @@ impl Default for AuthState {
     }
 }
 
+pub struct AdminState {
+    pub admins: Mutex<HashSet<String>>,
+}
+
+impl AdminState {
+    pub fn new() -> Self {
+        Self {
+            admins: Mutex::new(crate::store::load_admins()),
+        }
+    }
+}
+
+impl Default for AdminState {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
 #[derive(Debug)]
 #[allow(dead_code)]
 pub struct Token {
@@ -42,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;
@@ -62,6 +83,48 @@ impl<'r> rocket::request::FromRequest<'r> for Token {
     }
 }
 
+#[derive(Debug)]
+pub struct AdminToken {
+    pub token: String,
+    pub username: String,
+}
+
+#[rocket::async_trait]
+impl<'r> rocket::request::FromRequest<'r> for AdminToken {
+    type Error = ();
+
+    async fn from_request(
+        request: &'r rocket::Request<'_>,
+    ) -> rocket::request::Outcome<Self, Self::Error> {
+        let token = request.headers().get_one("Authorization");
+
+        match token {
+            Some(token) => {
+                if let Some(token) = token.strip_prefix("Bearer ") {
+                    let auth_state = request.guard::<&State<AuthState>>().await.unwrap();
+                    let tokens = auth_state.tokens.lock().await;
+
+                    if let Some(username) = tokens.get(token) {
+                        let admin_state =
+                            request.guard::<&State<crate::AdminState>>().await.unwrap();
+                        let admins = admin_state.admins.lock().await;
+
+                        if crate::store::is_admin(username, &admins) {
+                            return rocket::request::Outcome::Success(AdminToken {
+                                token: token.to_string(),
+                                username: username.clone(),
+                            });
+                        }
+                    }
+                }
+
+                rocket::request::Outcome::Error((rocket::http::Status::Forbidden, ()))
+            }
+            None => rocket::request::Outcome::Error((rocket::http::Status::Unauthorized, ())),
+        }
+    }
+}
+
 #[post("/login", data = "<request>")]
 pub async fn login(
     state: &State<AuthState>,
@@ -78,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,
@@ -103,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(),
@@ -118,22 +183,28 @@ pub async fn logout(
 #[post("/get_auth_status", data = "<request>")]
 pub async fn get_auth_status(
     state: &State<AuthState>,
+    admin_state: &State<AdminState>,
     request: Proto<items::AuthStatusRequest>,
 ) -> items::AuthStatusResponse {
     let req = request.into_inner();
     let tokens = state.tokens.lock().await;
 
     if let Some(username) = tokens.get(&req.token) {
+        let admins = admin_state.admins.lock().await;
+        let is_admin = crate::store::is_admin(username, &admins);
+
         items::AuthStatusResponse {
             authenticated: true,
             username: username.clone(),
             message: "Authenticated".to_string(),
+            is_admin,
         }
     } else {
         items::AuthStatusResponse {
             authenticated: false,
             username: "".to_string(),
             message: "Not authenticated".to_string(),
+            is_admin: false,
         }
     }
 }

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,7 +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,48 +86,183 @@ 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();
 
+    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))
 }
 
-#[post("/opinion", data = "<req>")]
+#[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>,
+) -> Result<Option<items::Game>, String> {
+    let mut game = game.into_inner();
+
+    game.title = game.title.trim().to_string();
+
+    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.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;
+        existing.price = game.price;
+        existing.remote_id = game.remote_id;
+
+        r_existing = Some(existing.clone());
+    }
+
+    games.sort_unstable_by(|g1, g2| g1.title.cmp(&g2.title));
+
+    save_state(&games, &users);
+
+    Ok(r_existing)
+}
+
+#[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,
+) -> 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
+        .iter()
+        .position(|g| g.title.to_lowercase() == title.to_lowercase())
+    {
+        let game = games.remove(pos);
+
+        for person in users.iter_mut() {
+            person.person.opinion.retain_mut(|o| o.title != game.title);
+        }
+
+        save_state(&games, &users);
+
+        return Ok(Some(game));
+    }
+
+    Ok(None)
+}
+
+#[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 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,
+            message: "State refreshed from file".to_string(),
+        }
+    } else {
+        items::RefreshResponse {
+            success: false,
+            message: "Failed to load state from file".to_string(),
+        }
+    }
+}
+
+#[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
@@ -120,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,
@@ -145,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
@@ -164,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
@@ -179,7 +334,7 @@ async fn remove_opinion(
     if result.is_some() {
         save_state(&games, &users);
     }
-    result
+    Ok(result)
 }
 
 mod cached_option;
@@ -230,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!(
@@ -328,8 +487,10 @@ async fn main() -> Result<(), std::io::Error> {
     });
 
     rocket::build()
+        .attach(SecurityHeaders)
         .manage(Mutex::new(user_list))
         .manage(auth::AuthState::new())
+        .manage(auth::AdminState::new())
         .manage(Mutex::new(game_list))
         .mount(
             "/api",
@@ -341,6 +502,9 @@ async fn main() -> Result<(), std::io::Error> {
                 add_opinion,
                 remove_opinion,
                 add_game,
+                update_game,
+                delete_game,
+                refresh_state,
                 get_game_thumbnail,
                 get_games_batch
             ],

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/store.rs

@@ -1,5 +1,6 @@
 use crate::items::{Game, Person};
 use serde::{Deserialize, Serialize};
+use std::collections::HashSet;
 use std::fs::File;
 use std::io::BufReader;
 
@@ -30,6 +31,7 @@ pub struct PersistentState {
 }
 
 pub const STATE_FILE: &str = "state.json";
+pub const ADMINS_FILE: &str = "admins.json";
 
 pub fn save_state(games: &[Game], users: &[User]) {
     let mut games = games.to_vec();
@@ -57,3 +59,17 @@ pub fn load_state() -> Option<(Vec<Game>, Vec<User>)> {
     }
     None
 }
+
+pub fn load_admins() -> HashSet<String> {
+    if let Ok(file) = File::open(ADMINS_FILE) {
+        let reader = BufReader::new(file);
+        if let Ok(admins) = serde_json::from_reader::<_, Vec<String>>(reader) {
+            return admins.into_iter().map(|s| s.to_lowercase()).collect();
+        }
+    }
+    HashSet::new()
+}
+
+pub fn is_admin(username: &str, admins: &HashSet<String>) -> bool {
+    admins.contains(&username.to_lowercase())
+}

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
 
@@ -90,6 +90,11 @@ export interface LogoutResponse {
   message: string;
 }
 
+export interface RefreshResponse {
+  success: boolean;
+  message: string;
+}
+
 export interface AuthStatusRequest {
   token: string;
 }
@@ -98,6 +103,7 @@ export interface AuthStatusResponse {
   authenticated: boolean;
   username: string;
   message: string;
+  isAdmin: boolean;
 }
 
 export interface GameRequest {
@@ -836,6 +842,82 @@ export const LogoutResponse: MessageFns<LogoutResponse> = {
   },
 };
 
+function createBaseRefreshResponse(): RefreshResponse {
+  return { success: false, message: "" };
+}
+
+export const RefreshResponse: MessageFns<RefreshResponse> = {
+  encode(message: RefreshResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.success !== false) {
+      writer.uint32(8).bool(message.success);
+    }
+    if (message.message !== "") {
+      writer.uint32(18).string(message.message);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): RefreshResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseRefreshResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 8) {
+            break;
+          }
+
+          message.success = reader.bool();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.message = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): RefreshResponse {
+    return {
+      success: isSet(object.success) ? globalThis.Boolean(object.success) : false,
+      message: isSet(object.message) ? globalThis.String(object.message) : "",
+    };
+  },
+
+  toJSON(message: RefreshResponse): unknown {
+    const obj: any = {};
+    if (message.success !== false) {
+      obj.success = message.success;
+    }
+    if (message.message !== "") {
+      obj.message = message.message;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<RefreshResponse>, I>>(base?: I): RefreshResponse {
+    return RefreshResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<RefreshResponse>, I>>(object: I): RefreshResponse {
+    const message = createBaseRefreshResponse();
+    message.success = object.success ?? false;
+    message.message = object.message ?? "";
+    return message;
+  },
+};
+
 function createBaseAuthStatusRequest(): AuthStatusRequest {
   return { token: "" };
 }
@@ -895,7 +977,7 @@ export const AuthStatusRequest: MessageFns<AuthStatusRequest> = {
 };
 
 function createBaseAuthStatusResponse(): AuthStatusResponse {
-  return { authenticated: false, username: "", message: "" };
+  return { authenticated: false, username: "", message: "", isAdmin: false };
 }
 
 export const AuthStatusResponse: MessageFns<AuthStatusResponse> = {
@@ -909,6 +991,9 @@ export const AuthStatusResponse: MessageFns<AuthStatusResponse> = {
     if (message.message !== "") {
       writer.uint32(26).string(message.message);
     }
+    if (message.isAdmin !== false) {
+      writer.uint32(32).bool(message.isAdmin);
+    }
     return writer;
   },
 
@@ -943,6 +1028,14 @@ export const AuthStatusResponse: MessageFns<AuthStatusResponse> = {
           message.message = reader.string();
           continue;
         }
+        case 4: {
+          if (tag !== 32) {
+            break;
+          }
+
+          message.isAdmin = reader.bool();
+          continue;
+        }
       }
       if ((tag & 7) === 4 || tag === 0) {
         break;
@@ -957,6 +1050,7 @@ export const AuthStatusResponse: MessageFns<AuthStatusResponse> = {
       authenticated: isSet(object.authenticated) ? globalThis.Boolean(object.authenticated) : false,
       username: isSet(object.username) ? globalThis.String(object.username) : "",
       message: isSet(object.message) ? globalThis.String(object.message) : "",
+      isAdmin: isSet(object.isAdmin) ? globalThis.Boolean(object.isAdmin) : false,
     };
   },
 
@@ -971,6 +1065,9 @@ export const AuthStatusResponse: MessageFns<AuthStatusResponse> = {
     if (message.message !== "") {
       obj.message = message.message;
     }
+    if (message.isAdmin !== false) {
+      obj.isAdmin = message.isAdmin;
+    }
     return obj;
   },
 
@@ -982,6 +1079,7 @@ export const AuthStatusResponse: MessageFns<AuthStatusResponse> = {
     message.authenticated = object.authenticated ?? false;
     message.username = object.username ?? "";
     message.message = object.message ?? "";
+    message.isAdmin = object.isAdmin ?? false;
     return message;
   },
 };

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";
@@ -6,6 +6,7 @@ import { PersonDetails } from "./PersonDetails";
 import { GameList } from "./GameList";
 import { GameFilter } from "./GameFilter";
 import { GameDetails } from "./GameDetails";
+import { EditGame } from "./EditGame";
 import { ShaderBackground } from "./ShaderBackground";
 import { BrowserRouter, Routes, Route, NavLink } from "react-router-dom";
 import "./App.css";
@@ -40,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");
@@ -61,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;
@@ -88,7 +100,9 @@ function App() {
   };
 
   useEffect(() => {
+    if (token) {
       fetchPeople();
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [token]);
 
@@ -102,6 +116,7 @@ function App() {
     setToken("");
     setPeople([]);
     localStorage.removeItem("token");
+    localStorage.removeItem("isAdmin");
     addToast("Logged out successfully", "info");
   };
 
@@ -168,11 +183,18 @@ function App() {
         </div>
         <ShaderBackground theme={theme} />
         <Routes>
-          <Route path="/" element={<PersonList people={people} />} />
+          <Route path="/" element={<PersonList people={people} loading={isLoading} onShowToast={addToast} />} />
           <Route path="/games" element={<GameList onShowToast={addToast} />} />
           <Route path="/filter" element={<GameFilter />} />
           <Route path="/person/:name" element={<PersonDetails />} />
-          <Route path="/game/:title" element={<GameDetails />} />
+          <Route
+            path="/game/:title"
+            element={<GameDetails onShowToast={addToast} />}
+          />
+          <Route
+            path="/game/:title/edit"
+            element={<EditGame onShowToast={addToast} />}
+          />
         </Routes>
       </div>
     </BrowserRouter>

frontend/src/EditGame.tsx

@@ -0,0 +1,403 @@
+import { useState, useEffect } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { Game, Source } from "../items";
+import { apiFetch } from "./api";
+import type { ToastType } from "./Toast";
+
+interface Props {
+  onShowToast?: (message: string, type?: ToastType) => void;
+}
+
+export function EditGame({ onShowToast }: Props) {
+  const { title } = useParams<{ title: string }>();
+  const navigate = useNavigate();
+  const [game, setGame] = useState<Game | null>(null);
+  const [newTitle, setNewTitle] = useState("");
+  const [source, setSource] = useState<Source>(Source.STEAM);
+  const [minPlayers, setMinPlayers] = useState(1);
+  const [maxPlayers, setMaxPlayers] = useState(1);
+  const [price, setPrice] = useState(0);
+  const [remoteId, setRemoteId] = useState(0);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [remoteIdError, setRemoteIdError] = useState("");
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!title) return;
+
+    apiFetch(`/api/game/${encodeURIComponent(title)}`)
+      .then(async (res) => {
+        if (!res.ok) throw new Error("Game not found");
+        return Game.decode(new Uint8Array(await res.arrayBuffer()));
+      })
+      .then((data) => {
+        setGame(data);
+        setNewTitle(data.title);
+        setSource(data.source);
+        setMinPlayers(data.minPlayers);
+        setMaxPlayers(data.maxPlayers);
+        setPrice(data.price);
+        setRemoteId(data.remoteId);
+        setLoading(false);
+      })
+      .catch((err) => {
+        console.error(err);
+        onShowToast?.("Failed to load game", "error");
+        setLoading(false);
+      });
+  }, [title, onShowToast]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (remoteId === 0) {
+      setRemoteIdError("Remote ID must be greater than 0");
+      return;
+    }
+
+    if (!newTitle.trim()) {
+      onShowToast?.("Game title is required", "error");
+      return;
+    }
+
+    setRemoteIdError("");
+    setIsSubmitting(true);
+    const updatedGame = {
+      title: newTitle.trim(),
+      source,
+      minPlayers,
+      maxPlayers,
+      price,
+      remoteId,
+    };
+
+    try {
+      const encoded = Game.encode(updatedGame).finish();
+      const res = await apiFetch("/api/game", {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/octet-stream",
+        },
+        body: encoded,
+      });
+
+      if (res.ok) {
+        onShowToast?.("Game updated successfully!", "success");
+        navigate(`/game/${encodeURIComponent(newTitle.trim())}`);
+      } else {
+        onShowToast?.("Failed to update game. Please try again.", "error");
+      }
+    } catch (err) {
+      console.error(err);
+      onShowToast?.("An error occurred while updating the game.", "error");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  if (loading) return <div>Loading...</div>;
+  if (!game) return <div>Game not found</div>;
+
+  const formCardStyles: React.CSSProperties = {
+    background:
+      "linear-gradient(135deg, var(--secondary-bg) 0%, var(--secondary-alt-bg) 100%)",
+    borderRadius: "20px",
+    padding: "0",
+    maxWidth: "520px",
+    margin: "0 auto",
+    boxShadow: "0 20px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--border-color)",
+    overflow: "hidden",
+  };
+
+  const formHeaderStyles: React.CSSProperties = {
+    background:
+      "linear-gradient(135deg, var(--accent-color) 0%, var(--secondary-accent) 100%)",
+    padding: "1.5rem 2rem",
+    display: "flex",
+    alignItems: "center",
+    gap: "1rem",
+  };
+
+  const formBodyStyles: React.CSSProperties = {
+    padding: "2rem",
+  };
+
+  const sectionStyles: React.CSSProperties = {
+    marginBottom: "1.5rem",
+  };
+
+  const sectionTitleStyles: React.CSSProperties = {
+    fontSize: "0.75rem",
+    textTransform: "uppercase",
+    letterSpacing: "0.1em",
+    color: "var(--text-muted)",
+    marginBottom: "1rem",
+    display: "flex",
+    alignItems: "center",
+    gap: "0.5rem",
+  };
+
+  const inputGroupStyles: React.CSSProperties = {
+    position: "relative",
+    marginBottom: "1rem",
+  };
+
+  const labelStyles: React.CSSProperties = {
+    fontSize: "0.85rem",
+    color: "var(--text-muted)",
+    marginBottom: "0.5rem",
+    display: "block",
+    fontWeight: 500,
+  };
+
+  const inputStyles: React.CSSProperties = {
+    width: "100%",
+    padding: "0.875rem 1rem",
+    backgroundColor: "var(--tertiary-bg)",
+    border: "2px solid var(--border-color)",
+    borderRadius: "12px",
+    color: "var(--text-color)",
+    fontSize: "1rem",
+    transition: "all 0.2s ease",
+    boxSizing: "border-box",
+  };
+
+  const gridStyles: React.CSSProperties = {
+    display: "grid",
+    gridTemplateColumns: "1fr 1fr",
+    gap: "1rem",
+  };
+
+  const dividerStyles: React.CSSProperties = {
+    height: "1px",
+    background:
+      "linear-gradient(90deg, transparent, var(--border-color), transparent)",
+    margin: "1.5rem 0",
+  };
+
+  const buttonStyles: React.CSSProperties = {
+    padding: "1rem",
+    background:
+      "linear-gradient(135deg, var(--accent-color) 0%, var(--secondary-accent) 100%)",
+    border: "none",
+    borderRadius: "12px",
+    color: "white",
+    fontSize: "1rem",
+    fontWeight: 600,
+    cursor: isSubmitting ? "not-allowed" : "pointer",
+    transition: "all 0.3s ease",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "0.5rem",
+    opacity: isSubmitting ? 0.7 : 1,
+    transform: isSubmitting ? "none" : undefined,
+  };
+
+  const cancelStyles: React.CSSProperties = {
+    ...buttonStyles,
+    background: "var(--tertiary-bg)",
+    color: "var(--text-color)",
+    border: "2px solid var(--border-color)",
+  };
+
+  return (
+    <div>
+      <div style={formCardStyles}>
+        <div style={formHeaderStyles}>
+          <div
+            style={{
+              width: "48px",
+              height: "48px",
+              borderRadius: "14px",
+              backgroundColor: "rgba(255, 255, 255, 0.2)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: "1.5rem",
+            }}
+          >
+            ✏️
+          </div>
+          <div>
+            <h2
+              style={{
+                margin: 0,
+                fontSize: "1.5rem",
+                fontWeight: 700,
+                color: "white",
+              }}
+            >
+              Edit Game
+            </h2>
+            <p
+              style={{
+                margin: 0,
+                fontSize: "0.9rem",
+                color: "rgba(255, 255, 255, 0.8)",
+              }}
+            >
+              Update game information
+            </p>
+          </div>
+        </div>
+
+        <div style={formBodyStyles}>
+          <form onSubmit={handleSubmit}>
+            <div style={sectionStyles}>
+              <div style={sectionTitleStyles}>
+                <span>📝</span>
+                Basic Information
+              </div>
+
+              <div style={inputGroupStyles}>
+                <label style={labelStyles}>Game Title</label>
+                <input
+                  type="text"
+                  value={newTitle}
+                  onChange={(e) => setNewTitle(e.target.value)}
+                  required
+                  placeholder="Enter game title..."
+                  style={inputStyles}
+                  className="add-game-input"
+                />
+              </div>
+
+              <div style={inputGroupStyles}>
+                <label style={labelStyles}>Platform Source</label>
+                <select
+                  value={source}
+                  onChange={(e) => setSource(Number(e.target.value))}
+                  style={{
+                    ...inputStyles,
+                    cursor: "pointer",
+                    appearance: "none",
+                    backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23a0a0a0' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E")`,
+                    backgroundRepeat: "no-repeat",
+                    backgroundPosition: "right 1rem center",
+                    paddingRight: "2.5rem",
+                  }}
+                  className="add-game-input"
+                >
+                  <option value={Source.STEAM}>🎮 Steam</option>
+                  <option value={Source.ROBLOX}>🟢 Roblox</option>
+                </select>
+              </div>
+            </div>
+
+            <div style={dividerStyles}></div>
+
+            <div style={sectionStyles}>
+              <div style={sectionTitleStyles}>
+                <span>👥</span>
+                Player Count
+              </div>
+
+              <div style={gridStyles}>
+                <div style={inputGroupStyles}>
+                  <label style={labelStyles}>Minimum Players</label>
+                  <input
+                    type="number"
+                    value={minPlayers}
+                    onChange={(e) => setMinPlayers(Number(e.target.value))}
+                    min="1"
+                    style={inputStyles}
+                    className="add-game-input"
+                  />
+                </div>
+                <div style={inputGroupStyles}>
+                  <label style={labelStyles}>Maximum Players</label>
+                  <input
+                    type="number"
+                    value={maxPlayers}
+                    onChange={(e) => setMaxPlayers(Number(e.target.value))}
+                    min="1"
+                    style={inputStyles}
+                    className="add-game-input"
+                  />
+                </div>
+              </div>
+            </div>
+
+            <div style={dividerStyles}></div>
+
+            <div style={sectionStyles}>
+              <div style={sectionTitleStyles}>
+                <span>💰</span>
+                Additional Details
+              </div>
+
+              <div style={gridStyles}>
+                <div style={inputGroupStyles}>
+                  <label style={labelStyles}>Price (€)</label>
+                  <input
+                    type="number"
+                    value={price}
+                    onChange={(e) => setPrice(Math.ceil(Number(e.target.value.replace(',', '.'))))}
+                    min="0"
+                    step="1"
+                    style={inputStyles}
+                    className="add-game-input"
+                  />
+                </div>
+                <div style={inputGroupStyles}>
+                  <label style={labelStyles}>Remote ID</label>
+                  <input
+                    type="number"
+                    value={remoteId}
+                    onChange={(e) => {
+                      setRemoteId(Number(e.target.value));
+                      setRemoteIdError("");
+                    }}
+                    min="0"
+                    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>
+
+            <div style={gridStyles}>
+              <button
+                type="button"
+                onClick={() => navigate(`/game/${encodeURIComponent(game.title)}`)}
+                disabled={isSubmitting}
+                style={cancelStyles}
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                disabled={isSubmitting}
+                style={buttonStyles}
+              >
+                {isSubmitting ? (
+                  <>Updating...</>
+                ) : (
+                  <>
+                    <span style={{ fontSize: "1.1rem" }}>💾</span>
+                    Save Changes
+                  </>
+                )}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/ErrorBoundary.tsx

@@ -0,0 +1,48 @@
+import { Component, type ErrorInfo, type ReactNode } from "react";
+import { ErrorState } from "./components/EmptyState";
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false,
+    error: null
+  };
+
+  public static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error("ErrorBoundary caught an error:", error, errorInfo);
+  }
+
+  public handleReset = () => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  public render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <ErrorState
+          message={this.state.error?.message || "An unexpected error occurred"}
+          onRetry={this.handleReset}
+        />
+      );
+    }
+
+    return this.props.children;
+  }
+}

frontend/src/GameDetails.tsx

@@ -1,33 +1,74 @@
 import { useState, useEffect } from "react";
-import { useParams } from "react-router-dom";
+import { useParams, useNavigate } from "react-router-dom";
 import { Game, Source } from "../items";
-import { apiFetch } from "./api";
+import { apiFetch, get_is_admin } from "./api";
+import { LoadingState, EmptyState, ErrorState } from "./components/EmptyState";
 
-export function GameDetails() {
+interface Props {
+  onShowToast?: (message: string, type?: "success" | "error" | "info") => void;
+}
+
+export function GameDetails({ onShowToast }: Props) {
   const { title } = useParams<{ title: string }>();
+  const navigate = useNavigate();
   const [game, setGame] = useState<Game | null>(null);
-  const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(!!title);
+  const [error, setError] = useState<string | null>(title ? null : "Game title is missing");
+
+  const isAdmin = get_is_admin();
 
   useEffect(() => {
     if (!title) return;
 
-    apiFetch(`/api/game/${encodeURIComponent(title)}`)
-      .then(async (res) => {
-        if (!res.ok) throw new Error("Game not found");
-        return Game.decode(new Uint8Array(await res.arrayBuffer()));
-      })
-      .then((data) => {
-        setGame(data);
-        setLoading(false);
-      })
-      .catch((err) => {
+    (async () => {
+      try {
+        const res = await apiFetch(`/api/game/${encodeURIComponent(title)}`);
+        if (!res.ok) {
+          if (res.status === 404) {
+            throw new Error("Game not found");
+          }
+          throw new Error("Failed to load game");
+        }
+        const buffer = await res.arrayBuffer();
+        setGame(Game.decode(new Uint8Array(buffer)));
+      } catch (err) {
         console.error(err);
+        setError(err instanceof Error ? err.message : "Failed to load game");
+      } finally {
         setLoading(false);
-      });
+      }
+    })();
   }, [title]);
 
-  if (loading) return <div>Loading...</div>;
-  if (!game) return <div>Game not found</div>;
+  const handleDelete = async () => {
+    if (
+      !confirm(
+        `Are you sure you want to delete "${game?.title}"? This action cannot be undone.`
+      )
+    ) {
+      return;
+    }
+
+    try {
+      const res = await apiFetch(`/api/game/${encodeURIComponent(title || "")}`, {
+        method: "DELETE",
+      });
+
+      if (res.ok) {
+        onShowToast?.(`"${game?.title}" deleted successfully`, "success");
+        navigate("/games");
+      } else {
+        onShowToast?.("Failed to delete game", "error");
+      }
+    } catch (err) {
+      console.error(err);
+      onShowToast?.("An error occurred while deleting the game", "error");
+    }
+  };
+
+  if (loading) return <LoadingState message="Loading game details..." />;
+  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 = () => {
     if (game.source === Source.STEAM) {
@@ -40,7 +81,39 @@ export function GameDetails() {
 
   return (
     <div className="card" style={{ maxWidth: "600px", margin: "0 auto" }}>
-      <h2>{game.title}</h2>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          marginBottom: "1rem",
+        }}
+      >
+        <h2 style={{ margin: 0 }}>{game.title}</h2>
+        {isAdmin && (
+          <div style={{ display: "flex", gap: "0.5rem" }}>
+            <button
+              onClick={() => navigate(`/game/${encodeURIComponent(game.title)}/edit`)}
+              className="btn-secondary"
+              style={{ padding: "0.5rem 1rem", fontSize: "0.9rem" }}
+            >
+              ✏️ Edit
+            </button>
+            <button
+              onClick={handleDelete}
+              className="btn-primary"
+              style={{
+                padding: "0.5rem 1rem",
+                fontSize: "0.9rem",
+                background: "#f44336",
+                border: "none",
+              }}
+            >
+              🗑️ Delete
+            </button>
+          </div>
+        )}
+      </div>
       <div style={{ display: "grid", gap: "1rem", marginTop: "1rem" }}>
         <div>
           <strong>Source:</strong>{" "}

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

@@ -5,26 +5,41 @@ import "./GameFilter.css";
 import { useGameFilter } from "./hooks/useGameFilter";
 import { PersonSelector } from "./components/PersonSelector";
 import { FilteredGamesList } from "./components/FilteredGamesList";
+import { LoadingState } from "./components/EmptyState";
 
 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(() => {
-    apiFetch("/api")
-      .then((res) => res.arrayBuffer())
-      .then((buffer) => {
+    (async () => {
+      try {
+        const res = await apiFetch("/api");
+        const buffer = await res.arrayBuffer();
         const list = PersonListProto.decode(new Uint8Array(buffer));
         setPeople(list.person);
-      })
-      .catch((err) => console.error("Failed to fetch people:", err));
+      } catch (err) {
+        console.error("Failed to fetch people:", err);
+      } finally {
+        setLoading(false);
+      }
+    })();
   }, []);
 
+  if (loading) return <LoadingState message="Loading people..." />;
+
   const togglePerson = (name: string) => {
     const newSelected = new Set(selectedPeople);
     if (newSelected.has(name)) {
@@ -48,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

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo, useCallback } from "react";
 import {
   Game,
   Source,
@@ -12,6 +12,7 @@ import { Link, useLocation } from "react-router-dom";
 import { apiFetch, get_auth_status } from "./api";
 import { GameImage } from "./GameImage";
 import type { ToastType } from "./Toast";
+import { EmptyState } from "./components/EmptyState";
 
 interface Props {
   onShowToast?: (message: string, type?: ToastType) => void;
@@ -26,9 +27,22 @@ export function GameList({ onShowToast }: Props) {
   const [price, setPrice] = useState(0);
   const [remoteId, setRemoteId] = useState(0);
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [titleError, setTitleError] = useState("");
+  const [playersError, setPlayersError] = useState("");
+  const [remoteIdError, setRemoteIdError] = useState("");
   const [opinions, setOpinions] = useState<Opinion[]>([]);
+  const [gamesLoading, setGamesLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState("");
 
-  const fetchGames = () => {
+  const filteredGames = useMemo(() => {
+    if (!searchQuery) return games;
+    return games.filter(game =>
+      game.title.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+  }, [games, searchQuery]);
+
+  const fetchGames = useCallback(() => {
+    setGamesLoading(true);
     apiFetch("/api/games")
       .then((res) => res.arrayBuffer())
       .then((buffer) => {
@@ -37,10 +51,15 @@ export function GameList({ onShowToast }: Props) {
           setGames(list.games);
         } catch (e) {
           console.error("Failed to decode games:", e);
+          onShowToast?.("Failed to load games", "error");
         }
       })
-      .catch(console.error);
-  };
+      .catch((err) => {
+        console.error(err);
+        onShowToast?.("Failed to fetch games", "error");
+      })
+      .finally(() => setGamesLoading(false));
+  }, [onShowToast]);
 
   useEffect(() => {
     get_auth_status().then((user) => {
@@ -75,13 +94,42 @@ export function GameList({ onShowToast }: Props) {
 
   useEffect(() => {
     fetchGames();
-  }, []);
+  }, [fetchGames]);
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
+
+    setTitleError("");
+    setPlayersError("");
+    setRemoteIdError("");
+
+    let hasErrors = false;
+
+    if (!title.trim()) {
+      setTitleError("Game title is required");
+      hasErrors = true;
+    }
+
+    if (minPlayers < 1) {
+      setPlayersError("Minimum players must be at least 1");
+      hasErrors = true;
+    }
+
+    if (maxPlayers < minPlayers) {
+      setPlayersError("Maximum players cannot be less than minimum players");
+      hasErrors = true;
+    }
+
+    if (remoteId === 0) {
+      setRemoteIdError("Remote ID must be greater than 0");
+      hasErrors = true;
+    }
+
+    if (hasErrors) return;
+
     setIsSubmitting(true);
     const game = {
-      title,
+      title: title.trim(),
       source,
       minPlayers,
       maxPlayers,
@@ -101,14 +149,11 @@ export function GameList({ onShowToast }: Props) {
 
       if (res.ok) {
         onShowToast?.("Game added successfully!", "success");
-        setTitle("");
-        setMinPlayers(1);
-        setMaxPlayers(1);
-        setPrice(0);
-        setRemoteId(0);
+        clearForm();
         fetchGames();
       } else {
-        onShowToast?.("Failed to add game. Please try again.", "error");
+        const errorText = await res.text();
+        onShowToast?.(errorText || "Failed to add game. Please try again.", "error");
       }
     } catch (err) {
       console.error(err);
@@ -118,6 +163,17 @@ export function GameList({ onShowToast }: Props) {
     }
   };
 
+  const clearForm = () => {
+    setTitle("");
+    setMinPlayers(1);
+    setMaxPlayers(1);
+    setPrice(0);
+    setRemoteId(0);
+    setTitleError("");
+    setPlayersError("");
+    setRemoteIdError("");
+  };
+
   const formCardStyles: React.CSSProperties = {
     background:
       "linear-gradient(135deg, var(--secondary-bg) 0%, var(--secondary-alt-bg) 100%)",
@@ -299,12 +355,23 @@ export function GameList({ onShowToast }: Props) {
                 <input
                   type="text"
                   value={title}
-                  onChange={(e) => setTitle(e.target.value)}
+                  onChange={(e) => {
+                    setTitle(e.target.value);
+                    if (titleError) setTitleError("");
+                  }}
                   required
                   placeholder="Enter game title..."
-                  style={inputStyles}
+                  style={{
+                    ...inputStyles,
+                    borderColor: titleError ? "#f44336" : undefined
+                  }}
                   className="add-game-input"
                 />
+                {titleError && (
+                  <div style={{ color: "#f44336", fontSize: "0.75rem", marginTop: "0.25rem" }}>
+                    {titleError}
+                  </div>
+                )}
               </div>
 
               <div style={inputGroupStyles}>
@@ -344,9 +411,15 @@ export function GameList({ onShowToast }: Props) {
                   <input
                     type="number"
                     value={minPlayers}
-                    onChange={(e) => setMinPlayers(Number(e.target.value))}
+                    onChange={(e) => {
+                      setMinPlayers(Number(e.target.value));
+                      if (playersError) setPlayersError("");
+                    }}
                     min="1"
-                    style={inputStyles}
+                    style={{
+                      ...inputStyles,
+                      borderColor: playersError ? "#f44336" : undefined
+                    }}
                     className="add-game-input"
                   />
                 </div>
@@ -355,13 +428,24 @@ export function GameList({ onShowToast }: Props) {
                   <input
                     type="number"
                     value={maxPlayers}
-                    onChange={(e) => setMaxPlayers(Number(e.target.value))}
+                    onChange={(e) => {
+                      setMaxPlayers(Number(e.target.value));
+                      if (playersError) setPlayersError("");
+                    }}
                     min="1"
-                    style={inputStyles}
+                    style={{
+                      ...inputStyles,
+                      borderColor: playersError ? "#f44336" : undefined
+                    }}
                     className="add-game-input"
                   />
                 </div>
               </div>
+              {playersError && (
+                <div style={{ color: "#f44336", fontSize: "0.75rem", marginTop: "0.25rem" }}>
+                  {playersError}
+                </div>
+              )}
             </div>
 
             <div style={dividerStyles}></div>
@@ -379,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"
                   />
@@ -391,15 +475,45 @@ 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>
 
+            <div style={{ display: "flex", gap: "0.75rem", marginTop: "1rem" }}>
+              <button
+                type="button"
+                onClick={clearForm}
+                disabled={isSubmitting || (!title && minPlayers === 1 && maxPlayers === 1 && price === 0 && remoteId === 0)}
+                style={{
+                  ...submitButtonStyles,
+                  background: "var(--tertiary-bg)",
+                  flex: 1
+                }}
+              >
+                Clear
+              </button>
               <button
                 type="submit"
                 disabled={isSubmitting}
@@ -427,6 +541,7 @@ export function GameList({ onShowToast }: Props) {
                   </>
                 )}
               </button>
+            </div>
           </form>
         </div>
       </div>
@@ -440,16 +555,89 @@ export function GameList({ onShowToast }: Props) {
       </style>
 
       <div style={{ marginTop: "3rem" }}>
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            marginBottom: "1rem",
+            flexWrap: "wrap",
+            gap: "1rem"
+          }}
+        >
           <h3
             id="existing-games"
             style={{
               scrollMarginBottom: "0",
+              margin: 0
             }}
           >
-          Existing Games
+            Existing Games {filteredGames.length > 0 && <span style={{ fontSize: "0.7em", color: "var(--text-muted)" }}>({filteredGames.length})</span>}
           </h3>
+          <input
+            type="text"
+            placeholder="🔍 Search games..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            style={{
+              padding: "0.5rem 1rem",
+              fontSize: "0.9rem",
+              minWidth: "200px"
+            }}
+          />
+        </div>
+        {gamesLoading ? (
+          <div className="grid-container">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <div
+                key={i}
+                style={{
+                  backgroundColor: "var(--secondary-alt-bg)",
+                  border: "1px solid var(--border-color)",
+                  borderRadius: "5px",
+                  padding: "1rem",
+                  minHeight: "100px",
+                  animation: "shimmer 1.5s infinite"
+                }}
+              >
+                <div
+                  style={{
+                    width: "70%",
+                    height: "20px",
+                    backgroundColor: "var(--tertiary-bg)",
+                    borderRadius: "4px",
+                    marginBottom: "0.75rem",
+                    animation: "shimmer 1.5s infinite"
+                  }}
+                ></div>
+                <div
+                  style={{
+                    width: "40%",
+                    height: "40px",
+                    backgroundColor: "var(--tertiary-bg)",
+                    borderRadius: "8px",
+                    marginTop: "0.5rem",
+                    animation: "shimmer 1.5s infinite 0.2s"
+                  }}
+                ></div>
+              </div>
+            ))}
+            <style>{`
+              @keyframes shimmer {
+                0%, 100% { opacity: 0.5; }
+                50% { opacity: 1; }
+              }
+            `}</style>
+          </div>
+        ) : filteredGames.length === 0 ? (
+          <EmptyState
+            icon="🎮"
+            title={searchQuery ? "No games found" : "No games yet"}
+            description={searchQuery ? "Try a different search term" : "Add your first game to get started"}
+          />
+        ) : (
           <ul className="grid-container">
-          {games.map((game) => {
+          {filteredGames.map((game) => {
             const opinion = opinions.find((op) => op.title === game.title);
             function handleOpinion(title: string, number: number): void {
               if (number == 2) {
@@ -603,6 +791,7 @@ export function GameList({ onShowToast }: Props) {
             );
           })}
         </ul>
+        )}
       </div>
     </div>
   );

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,16 +6,41 @@ 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 } = {};
+    if (!username.trim()) errors.username = "Username is required";
+    if (!password) errors.password = "Password is required";
+    setFieldErrors(errors);
+    return Object.keys(errors).length === 0;
+  };
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError("");
 
+    if (!validateForm()) {
+      setShakeCard(true);
+      setTimeout(() => setShakeCard(false), 500);
+      return;
+    }
+
+    setIsSubmitting(true);
+
     try {
-      const req = LoginRequest.create({ username, password });
+      const req = LoginRequest.create({ username: username.trim(), password });
       const body = LoginRequest.encode(req).finish();
 
       const res = await fetch("/auth/login", {
@@ -30,47 +55,365 @@ export function Login({ onLogin }: LoginProps) {
       const response = LoginResponse.decode(new Uint8Array(buffer));
 
       if (response.success) {
+        setIsSuccess(true);
         onLogin(response.token);
       } else {
-        setError(response.message);
+        setError(response.message || "Login failed");
+        setShakeCard(true);
+        setTimeout(() => setShakeCard(false), 500);
       }
     } catch (err) {
       console.error("Login error:", err);
-      setError("Failed to login");
+      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>
-      <form onSubmit={handleSubmit} className="form-group">
-        <div className="form-group">
-          <label>Username</label>
-          <input
-            type="text"
-            value={username}
-            onChange={(e) => setUsername(e.target.value)}
-            placeholder="Enter your username"
+    <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>
-        <div className="form-group">
-          <label>Password</label>
+      )}
+
+      {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" 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" : "1px",
+                fontSize: "1rem"
+              }}
+            />
+          </div>
+          {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" 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}
-            onChange={(e) => setPassword(e.target.value)}
+              onChange={(e) => {
+                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" : "1px",
+                fontSize: "1rem"
+              }}
             />
           </div>
-        <button type="submit" style={{ marginTop: "1rem" }}>
+          {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: "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"
+          }}
+          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 && (
-        <p style={{ color: "#ff6b6b", marginTop: "1rem", textAlign: "center" }}>
-          {error}
-        </p>
+        <div
+          role="alert"
+          style={{
+            backgroundColor: "rgba(244, 67, 54, 0.15)",
+            border: "1px solid rgba(244, 67, 54, 0.4)",
+            color: "#ff6b6b",
+            padding: "0.875rem 1rem",
+            borderRadius: "8px",
+            marginTop: "1.5rem",
+            textAlign: "center",
+            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/PersonDetails.tsx

@@ -3,32 +3,49 @@ import { Link, useParams } from "react-router-dom";
 import { Person } from "../items";
 import { apiFetch } from "./api";
 import { GameImage } from "./GameImage";
+import { LoadingState, EmptyState } from "./components/EmptyState";
 
 export const PersonDetails = () => {
   const { name } = useParams<{ name: string }>();
   const [person, setPerson] = useState<Person | null>(null);
+  const [loading, setLoading] = useState(!!name);
+  const [error, setError] = useState<string | null>(name ? null : "Person name is missing");
 
   useEffect(() => {
-    if (name) {
-      apiFetch(`/api/${name}`)
-        .then((res) => res.arrayBuffer())
-        .then((buffer) => {
+    if (!name) return;
+
+    (async () => {
       try {
+        const res = await apiFetch(`/api/${name}`);
+        if (!res.ok) {
+          throw new Error("Person not found");
+        }
+        const buffer = await res.arrayBuffer();
         setPerson(Person.decode(new Uint8Array(buffer)));
       } catch (e) {
         console.error("Failed to decode person:", e);
+        setError(e instanceof Error ? e.message : "Failed to load person data");
+      } finally {
+        setLoading(false);
       }
-        })
-        .catch(console.error);
-    }
+    })();
   }, [name]);
 
-  if (!person) return <div>Loading...</div>;
+  if (loading) return <LoadingState message="Loading person details..." />;
+  if (error) return <EmptyState icon="⚠️" title="Error" description={error} />;
+  if (!person) return <EmptyState icon="👤" title="Person not found" description="This person doesn't exist" />;
 
   return (
     <div>
       <div style={{ marginBottom: "2rem" }}>
         <h2>{person.name}</h2>
+        {person.opinion.length === 0 ? (
+          <EmptyState
+            icon="🎮"
+            title="No opinions yet"
+            description={`${person.name} hasn't shared any game opinions`}
+          />
+        ) : (
           <ul className="grid-container">
             {person.opinion.map((op, i) => (
               <Link
@@ -50,6 +67,7 @@ export const PersonDetails = () => {
               </Link>
             ))}
           </ul>
+        )}
       </div>
     </div>
   );

frontend/src/PersonList.tsx

@@ -1,20 +1,53 @@
 import { Person } from "../items";
 import { Link } from "react-router-dom";
-import { useState } from "react";
-import { get_auth_status } from "./api";
+import { useState, useEffect, useMemo } from "react";
+import { get_auth_status, refresh_state, get_is_admin } from "./api";
+import type { ToastType } from "./Toast";
+import { EmptyState } from "./components/EmptyState";
 import "./PersonList.css"
 
 interface Props {
   people: Person[];
+  loading?: boolean;
+  onShowToast?: (message: string, type?: ToastType) => void;
 }
 
-export const PersonList = ({ people }: Props) => {
+export const PersonList = ({ people, loading = false, onShowToast }: Props) => {
   const [current_user, set_current_user] = useState<string>("");
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+
+  useEffect(() => {
     get_auth_status().then((res) => {
       if (res) {
         set_current_user(res.username);
       }
     });
+  }, []);
+
+  const filteredPeople = useMemo(() => {
+    if (!searchQuery) return people;
+    return people.filter(person =>
+      person.name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+  }, [people, searchQuery]);
+
+  const handleRefresh = async () => {
+    setIsRefreshing(true);
+    try {
+      await refresh_state();
+      onShowToast?.("State refreshed from file successfully", "success");
+      window.location.reload();
+    } catch (err) {
+      console.error(err);
+      onShowToast?.("Failed to refresh state from file", "error");
+    } finally {
+      setIsRefreshing(false);
+    }
+  };
+
+  const isAdmin = get_is_admin();
+
   return (
     <div>
       <div
@@ -23,12 +56,113 @@ export const PersonList = ({ people }: Props) => {
           justifyContent: "space-between",
           alignItems: "center",
           marginBottom: "1rem",
+          flexWrap: "wrap",
+          gap: "1rem"
         }}
       >
-        <h2>People List</h2>
+        <h2>People List {filteredPeople.length > 0 && <span style={{ fontSize: "0.8em", color: "var(--text-muted)" }}>({filteredPeople.length})</span>}</h2>
+        <div style={{ display: "flex", gap: "0.75rem", alignItems: "center" }}>
+          <input
+            type="text"
+            placeholder="🔍 Search people..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            style={{
+              padding: "0.5rem 1rem",
+              fontSize: "0.9rem",
+              minWidth: "200px"
+            }}
+          />
+          {isAdmin && (
+            <button
+              onClick={handleRefresh}
+              disabled={isRefreshing}
+              className="btn-secondary"
+              style={{
+                padding: "0.5rem 1rem",
+                fontSize: "0.9rem",
+                display: "flex",
+                alignItems: "center",
+                gap: "0.5rem",
+                opacity: isRefreshing ? 0.7 : 1,
+                cursor: isRefreshing ? "not-allowed" : "pointer",
+              }}
+            >
+              {isRefreshing ? (
+                <>
+                  <span
+                    style={{
+                      width: "14px",
+                      height: "14px",
+                      border: "2px solid rgba(255,255,255,0.3)",
+                      borderTopColor: "currentColor",
+                      borderRadius: "50%",
+                      animation: "spin 0.8s linear infinite",
+                    }}
+                  ></span>
+                  Refreshing...
+                </>
+              ) : (
+                <>
+                  <span>🔄</span>
+                  Refresh from File
+                </>
+              )}
+            </button>
+          )}
         </div>
+      </div>
+      {loading ? (
         <div className="grid-container">
-        {people.map((person, index) => {
+          {Array.from({ length: 6 }).map((_, i) => (
+            <div
+              key={i}
+              style={{
+                backgroundColor: "var(--secondary-alt-bg)",
+                border: "1px solid var(--border-color)",
+                borderRadius: "5px",
+                padding: "10px",
+                minHeight: "60px",
+                animation: "shimmer 1.5s infinite"
+              }}
+            >
+              <div
+                style={{
+                  width: "60%",
+                  height: "20px",
+                  backgroundColor: "var(--tertiary-bg)",
+                  borderRadius: "4px",
+                  marginBottom: "0.5rem",
+                  animation: "shimmer 1.5s infinite"
+                }}
+              ></div>
+              <div
+                style={{
+                  width: "40%",
+                  height: "16px",
+                  backgroundColor: "var(--tertiary-bg)",
+                  borderRadius: "4px",
+                  animation: "shimmer 1.5s infinite 0.2s"
+                }}
+              ></div>
+            </div>
+          ))}
+          <style>{`
+            @keyframes shimmer {
+              0%, 100% { opacity: 0.5; }
+              50% { opacity: 1; }
+            }
+          `}</style>
+        </div>
+      ) : filteredPeople.length === 0 ? (
+        <EmptyState
+          icon="👥"
+          title={searchQuery ? "No people found" : "No people in list"}
+          description={searchQuery ? "Try a different search term" : "Add people to get started"}
+        />
+      ) : (
+        <div className="grid-container">
+          {filteredPeople.map((person, index) => {
             if (person.name.toLowerCase() === current_user.toLowerCase()) {
               return (
                 <Link
@@ -42,6 +176,9 @@ export const PersonList = ({ people }: Props) => {
                   }}
                 >
                   <h3>{person.name}</h3>
+                  <div style={{ fontSize: "0.85em", color: "var(--text-muted)", marginTop: "0.25rem" }}>
+                    {person.opinion.length} opinion(s)
+                  </div>
                 </Link>
               );
             }
@@ -58,10 +195,14 @@ export const PersonList = ({ people }: Props) => {
                 }}
               >
                 <h3>{person.name}</h3>
+                <div style={{ fontSize: "0.85em", color: "var(--text-muted)", marginTop: "0.25rem" }}>
+                  {person.opinion.length} opinion(s)
+                </div>
               </Link>
             );
           })}
         </div>
+      )}
     </div>
   );
 };

frontend/src/api.ts

@@ -21,7 +21,8 @@ export const apiFetch = async (
   if (!response.ok) {
     if (response.status == 401) {
       localStorage.removeItem("token");
-      window.location.href = "/";
+      localStorage.removeItem("isAdmin");
+      window.dispatchEvent(new CustomEvent("unauthorized"));
     }
     throw new Error(`Request failed with status ${response.status}`);
   }
@@ -43,9 +44,20 @@ export const get_auth_status = async (): Promise<AuthStatusResponse | null> => {
   const buffer = await response.arrayBuffer();
   try {
     const response = AuthStatusResponse.decode(new Uint8Array(buffer));
+    localStorage.setItem("isAdmin", String(response.isAdmin));
     return response;
   } catch (e) {
     console.error("Failed to decode auth status:", e);
     return null;
   }
 };
+
+export const get_is_admin = (): boolean => {
+  return localStorage.getItem("isAdmin") === "true";
+};
+
+export const refresh_state = async (): Promise<void> => {
+  await apiFetch("/api/refresh", {
+    method: "POST",
+  });
+};

frontend/src/components/EmptyState.tsx

@@ -0,0 +1,91 @@
+import type { ReactNode } from "react";
+
+interface EmptyStateProps {
+  icon?: string;
+  title: string;
+  description?: string;
+  action?: ReactNode;
+}
+
+export function EmptyState({ icon = "📭", title, description, action }: EmptyStateProps) {
+  return (
+    <div
+      style={{
+        padding: "3rem 2rem",
+        textAlign: "center",
+        background: "var(--secondary-alt-bg)",
+        borderRadius: "16px",
+        border: "1px dashed var(--border-color)",
+        color: "var(--text-muted)"
+      }}
+    >
+      <div style={{ fontSize: "3rem", marginBottom: "1rem" }}>{icon}</div>
+      <h3 style={{ margin: "0 0 0.5rem 0", color: "var(--text-color)" }}>{title}</h3>
+      {description && <p style={{ margin: "0 0 1.5rem 0", fontSize: "0.95rem" }}>{description}</p>}
+      {action}
+    </div>
+  );
+}
+
+export function LoadingState({ message = "Loading..." }: { message?: string }) {
+  return (
+    <div
+      style={{
+        padding: "3rem 2rem",
+        textAlign: "center"
+      }}
+    >
+      <div
+        style={{
+          width: "40px",
+          height: "40px",
+          border: "4px solid rgba(255, 255, 255, 0.2)",
+          borderTopColor: "currentColor",
+          borderRadius: "50%",
+          animation: "spin 0.8s linear infinite",
+          margin: "0 auto 1rem"
+        }}
+      ></div>
+      <p style={{ color: "var(--text-muted)", margin: 0 }}>{message}</p>
+      <style>{`
+        @keyframes spin {
+          to { transform: rotate(360deg); }
+        }
+      `}</style>
+    </div>
+  );
+}
+
+export function ErrorState({ message, onRetry }: { message: string, onRetry?: () => void }) {
+  return (
+    <div
+      style={{
+        padding: "3rem 2rem",
+        textAlign: "center",
+        background: "rgba(244, 67, 54, 0.1)",
+        borderRadius: "16px",
+        border: "1px solid rgba(244, 67, 54, 0.3)"
+      }}
+    >
+      <div style={{ fontSize: "3rem", marginBottom: "1rem" }}>⚠️</div>
+      <h3 style={{ margin: "0 0 0.5rem 0", color: "var(--text-color)" }}>Something went wrong</h3>
+      <p style={{ margin: "0 0 1.5rem 0", color: "var(--text-muted)", fontSize: "0.95rem" }}>{message}</p>
+      {onRetry && (
+        <button
+          onClick={onRetry}
+          style={{
+            background: "var(--accent-color)",
+            border: "none",
+            padding: "0.75rem 1.5rem",
+            borderRadius: "8px",
+            color: "white",
+            fontWeight: 600,
+            cursor: "pointer"
+          }}
+        >
+          🔄 Try Again
+        </button>
+      )}
+    </div>
+  );
+}

frontend/src/components/FilteredGamesList.tsx

@@ -1,18 +1,30 @@
 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 null;
+  if (selectedPeopleCount === 0) {
+    return (
+      <EmptyState
+        icon="👥"
+        title="Select people to find games"
+        description="Choose one or more people from the list above to see games they would play"
+      />
+    );
+  }
 
   return (
     <div>
@@ -22,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
@@ -59,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>
@@ -66,29 +102,12 @@ export function FilteredGamesList({
           })}
         </ul>
       ) : (
-        <EmptyState />
+        <EmptyState
+          icon="🔍"
+          title="No games found"
+          description="Try selecting fewer people or adding more opinions"
+        />
       )}
     </div>
   );
 }
-
-function EmptyState() {
-  return (
-    <div
-      style={{
-        padding: "3rem",
-        textAlign: "center",
-        background: "var(--secondary-alt-bg)",
-        borderRadius: "16px",
-        border: "1px dashed var(--border-color)",
-        color: "var(--text-muted)",
-      }}
-    >
-      <div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🔍</div>
-      <p>No games found where all selected people would play.</p>
-      <p style={{ fontSize: "0.9rem" }}>
-        Try selecting fewer people or adding more opinions!
-      </p>
-    </div>
-  );
-}

frontend/src/components/LoadingSpinner.tsx

@@ -0,0 +1,28 @@
+export function LoadingSpinner({ size = "medium", text }: { size?: "small" | "medium" | "large", text?: string }) {
+  const sizeMap = {
+    small: "16px",
+    medium: "24px",
+    large: "32px"
+  };
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "1rem" }}>
+      <div
+        style={{
+          width: sizeMap[size],
+          height: sizeMap[size],
+          border: `${parseInt(sizeMap[size]) / 4}px solid rgba(255, 255, 255, 0.2)`,
+          borderTopColor: "currentColor",
+          borderRadius: "50%",
+          animation: "spin 0.8s linear infinite"
+        }}
+      ></div>
+      {text && <span style={{ color: "var(--text-muted)", fontSize: "0.9rem" }}>{text}</span>}
+      <style>{`
+        @keyframes spin {
+          to { transform: rotate(360deg); }
+        }
+      `}</style>
+    </div>
+  );
+}

frontend/src/components/SkeletonLoader.tsx

@@ -0,0 +1,65 @@
+export function SkeletonLoader({ width, height, count = 1 }: { width?: string | number, height?: string | number, count?: number }) {
+  return (
+    <>
+      {Array.from({ length: count }).map((_, i) => (
+        <div
+          key={i}
+          style={{
+            width: width || "100%",
+            height: height || "60px",
+            backgroundColor: "var(--secondary-alt-bg)",
+            borderRadius: "8px",
+            animation: "shimmer 1.5s infinite",
+            marginBottom: count > 1 ? "1rem" : undefined
+          }}
+        ></div>
+      ))}
+      <style>{`
+        @keyframes shimmer {
+          0%, 100% { opacity: 0.5; }
+          50% { opacity: 1; }
+        }
+      `}</style>
+    </>
+  );
+}
+
+export function CardSkeleton() {
+  return (
+    <div
+      style={{
+        backgroundColor: "var(--secondary-alt-bg)",
+        border: "1px solid var(--border-color)",
+        borderRadius: "5px",
+        padding: "10px",
+        minHeight: "80px"
+      }}
+    >
+      <div
+        style={{
+          width: "60%",
+          height: "20px",
+          backgroundColor: "var(--tertiary-bg)",
+          borderRadius: "4px",
+          marginBottom: "0.5rem",
+          animation: "shimmer 1.5s infinite"
+        }}
+      ></div>
+      <div
+        style={{
+          width: "40%",
+          height: "16px",
+          backgroundColor: "var(--tertiary-bg)",
+          borderRadius: "4px",
+          animation: "shimmer 1.5s infinite 0.2s"
+        }}
+      ></div>
+      <style>{`
+        @keyframes shimmer {
+          0%, 100% { opacity: 0.5; }
+          50% { opacity: 1; }
+        }
+      `}</style>
+    </div>
+  );
+}

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

@@ -13,7 +13,7 @@
   --secondary-bg: rgb(var(--secondary-bg-rgb));
   --secondary-alt-bg: rgb(var(--tertiary-bg-rgb));
   --tertiary-bg: rgb(var(--border-color-rgb));
-  --border-color: rgb(var(--text-color-rgb));
+  --border-color: rgb(var(--border-color-rgb));
 
   font-family: "Inter", system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.6;
@@ -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 {

frontend/src/main.tsx

@@ -2,9 +2,12 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.tsx'
+import { ErrorBoundary } from './ErrorBoundary'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
+    <ErrorBoundary>
       <App />
+    </ErrorBoundary>
   </StrictMode>,
 )

protobuf/items.proto

@@ -50,12 +50,18 @@ message LogoutResponse {
   string message = 2;
 }
 
+message RefreshResponse {
+  bool   success = 1;
+  string message = 2;
+}
+
 message AuthStatusRequest { string token = 1; }
 
 message AuthStatusResponse {
   bool   authenticated = 1;
   string username      = 2;
   string message       = 3;
+  bool   isAdmin       = 4;
 }
 
 // Authentication service