Update app.py

app.py

@@ -5,8 +5,8 @@ import logging
 import threading
 import time
 from datetime import datetime
-from huggingface_hub import HfApi, hf_hub_download, delete_file as hf_delete_file
-from huggingface_hub.utils import RepositoryNotFoundError, HfHubHTTPError, EntryNotFoundError
+from huggingface_hub import HfApi, hf_hub_download
+from huggingface_hub.utils import RepositoryNotFoundError, HfHubHTTPError
 from werkzeug.utils import secure_filename
 from dotenv import load_dotenv
 import uuid
@@ -19,197 +19,103 @@ load_dotenv()
 app = Flask(__name__)
 app.secret_key = os.getenv("FLASK_SECRET_KEY", 'tontalent_secret_key_for_flash_messages_only')
 DATA_FILE = 'tontalent_data.json'
-LOCAL_IMAGES_FOLDER = "uploaded_images"
-app.config['UPLOAD_FOLDER'] = LOCAL_IMAGES_FOLDER
-HF_IMAGES_FOLDER_PATH_IN_REPO = "uploaded_images"
-
+SYNC_FILES = [DATA_FILE]
+UPLOAD_FOLDER = 'tontalent_uploads'
+ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif'}
+app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
+app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024 
 
 REPO_ID = os.getenv("HF_REPO_ID", "Kgshop/tontalent2")
 HF_TOKEN_WRITE = os.getenv("HF_TOKEN_WRITE")
 HF_TOKEN_READ = os.getenv("HF_TOKEN_READ")
 
-TELEGRAM_BOT_TOKEN = "7549355625:AAGhdbf6x1JEzpH0mUtuxTF83Soi7MFVNZ8" # Replace with your actual bot token
+TELEGRAM_BOT_TOKEN = "7549355625:AAGhdbf6x1JEzpH0mUtuxTF83Soi7MFVNZ8"
 
 DOWNLOAD_RETRIES = 3
 DOWNLOAD_DELAY = 5
 
 logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(message)s')
 
-def ensure_images_folder_exists():
-    os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
+def allowed_file(filename):
+    return '.' in filename and \
+           filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
+
+def ensure_upload_folder():
+    if not os.path.exists(UPLOAD_FOLDER):
+        os.makedirs(UPLOAD_FOLDER)
+        logging.info(f"Created upload folder: {UPLOAD_FOLDER}")
 
-def download_data_file_from_hf(retries=DOWNLOAD_RETRIES, delay=DOWNLOAD_DELAY):
+def download_db_from_hf(specific_file=None, retries=DOWNLOAD_RETRIES, delay=DOWNLOAD_DELAY):
     if not HF_TOKEN_READ and not HF_TOKEN_WRITE:
         logging.warning("HF_TOKEN_READ/HF_TOKEN_WRITE not set. Download might fail for private repos.")
     token_to_use = HF_TOKEN_READ if HF_TOKEN_READ else HF_TOKEN_WRITE
-    logging.info(f"Attempting download for {DATA_FILE} from {REPO_ID}...")
-    success = False
-    for attempt in range(retries + 1):
-        try:
-            logging.info(f"Downloading {DATA_FILE} (Attempt {attempt + 1}/{retries + 1})...")
-            local_path = hf_hub_download(
-                repo_id=REPO_ID, filename=DATA_FILE, repo_type="dataset",
-                token=token_to_use, local_dir=".", local_dir_use_symlinks=False,
-                force_download=True, resume_download=False
-            )
-            logging.info(f"Successfully downloaded {DATA_FILE} to {local_path}.")
-            success = True
-            break
-        except RepositoryNotFoundError:
-             logging.error(f"Repository {REPO_ID} not found. Download cancelled for {DATA_FILE}.")
-             return False
-        except HfHubHTTPError as e:
-            if e.response.status_code == 404:
-                logging.warning(f"File {DATA_FILE} not found in repo {REPO_ID} (404).")
-                if attempt == 0 and not os.path.exists(DATA_FILE):
-                    try:
-                        with open(DATA_FILE, 'w', encoding='utf-8') as f:
-                            json.dump({'resumes': [], 'vacancies': [], 'freelance_offers': [], 'users': {}}, f)
-                        logging.info(f"Created empty local file {DATA_FILE} because it was not found on HF.")
-                    except Exception as create_e:
-                        logging.error(f"Failed to create empty local file {DATA_FILE}: {create_e}")
-                success = False 
-                break 
-            else:
-                logging.error(f"HTTP error downloading {DATA_FILE} (Attempt {attempt + 1}): {e}. Retrying in {delay}s...")
-        except Exception as e:
-             logging.error(f"Unexpected error downloading {DATA_FILE} (Attempt {attempt + 1}): {e}. Retrying in {delay}s...", exc_info=True)
-        if attempt < retries: time.sleep(delay)
-    if not success:
-        logging.error(f"Failed to download {DATA_FILE} after {retries + 1} attempts.")
-    return success
-
-def download_images_folder_from_hf(retries=DOWNLOAD_RETRIES, delay=DOWNLOAD_DELAY):
-    ensure_images_folder_exists()
-    if not HF_TOKEN_READ and not HF_TOKEN_WRITE:
-        logging.warning("HF_TOKEN_READ/WRITE not set, skipping images folder download from HF.")
-        return False
-    token_to_use = HF_TOKEN_READ if HF_TOKEN_READ else HF_TOKEN_WRITE
-    logging.info(f"Attempting download for images folder '{HF_IMAGES_FOLDER_PATH_IN_REPO}' from {REPO_ID}...")
-    success = False
-    for attempt in range(retries + 1):
-        try:
-            logging.info(f"Downloading images folder (Attempt {attempt + 1}/{retries + 1})...")
-            hf_hub_download(
-                repo_id=REPO_ID,
-                filename=HF_IMAGES_FOLDER_PATH_IN_REPO,
-                repo_type="dataset",
-                token=token_to_use,
-                local_dir=".", # This will download to ./<HF_IMAGES_FOLDER_PATH_IN_REPO>
-                local_dir_use_symlinks=False,
-                force_download=True, # Consider if this is always needed
-                resume_download=False,
-                repo_revision=None, # Or specify a branch/commit
-                allow_patterns= ["**/*"], # Ensure all files in folder are downloaded
-                ignore_patterns=None,
-            )
-            logging.info(f"Successfully downloaded/updated images folder to '{app.config['UPLOAD_FOLDER']}'.")
-            success = True
-            break
-        except RepositoryNotFoundError:
-            logging.error(f"Repository {REPO_ID} not found. Cannot download images folder.")
-            return False
-        except HfHubHTTPError as e:
-            if e.response.status_code == 404:
-                logging.warning(f"Images folder '{HF_IMAGES_FOLDER_PATH_IN_REPO}' not found in repo (404). Assuming no images or new setup.")
-                success = True # Not an error if folder doesn't exist yet
+    files_to_download = [specific_file] if specific_file else SYNC_FILES
+    logging.info(f"Attempting download for {files_to_download} from {REPO_ID}...")
+    all_successful = True
+    for file_name in files_to_download:
+        success = False
+        for attempt in range(retries + 1):
+            try:
+                logging.info(f"Downloading {file_name} (Attempt {attempt + 1}/{retries + 1})...")
+                local_path = hf_hub_download(
+                    repo_id=REPO_ID, filename=file_name, repo_type="dataset",
+                    token=token_to_use, local_dir=".", local_dir_use_symlinks=False,
+                    force_download=True, resume_download=False
+                )
+                logging.info(f"Successfully downloaded {file_name} to {local_path}.")
+                success = True
                 break
-            else:
-                logging.error(f"HTTP error downloading images folder (Attempt {attempt + 1}): {e}. Retrying in {delay}s...")
-        except Exception as e:
-            logging.error(f"Unexpected error downloading images folder (Attempt {attempt + 1}): {e}. Retrying in {delay}s...", exc_info=True)
-        if attempt < retries: time.sleep(delay)
-    if not success:
-        logging.error(f"Failed to download images folder after {retries + 1} attempts.")
-    return success
-
-def upload_data_file_to_hf():
-    if not HF_TOKEN_WRITE:
-        logging.warning("HF_TOKEN_WRITE not set. Skipping data file upload to Hugging Face.")
-        return
-    if not os.path.exists(DATA_FILE):
-        logging.warning(f"Data file {DATA_FILE} not found locally, skipping upload.")
-        return
-    try:
-        api = HfApi()
-        logging.info(f"Starting upload of {DATA_FILE} to HF repo {REPO_ID}...")
-        api.upload_file(
-            path_or_fileobj=DATA_FILE, path_in_repo=DATA_FILE, repo_id=REPO_ID,
-            repo_type="dataset", token=HF_TOKEN_WRITE,
-            commit_message=f"Sync {DATA_FILE} {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}"
-        )
-        logging.info(f"File {DATA_FILE} successfully uploaded to Hugging Face.")
-    except Exception as e:
-        logging.error(f"Error uploading file {DATA_FILE} to Hugging Face: {e}", exc_info=True)
-
-def upload_images_folder_to_hf():
-    ensure_images_folder_exists()
-    if not HF_TOKEN_WRITE:
-        logging.warning("HF_TOKEN_WRITE not set. Skipping images folder upload to Hugging Face.")
-        return
-    if not os.path.exists(app.config['UPLOAD_FOLDER']):
-        logging.info(f"Local images folder '{app.config['UPLOAD_FOLDER']}' does not exist. Skipping upload.")
-        return
-    try:
-        api = HfApi()
-        logging.info(f"Starting upload of images folder '{app.config['UPLOAD_FOLDER']}' to HF repo {REPO_ID} path '{HF_IMAGES_FOLDER_PATH_IN_REPO}'...")
-        api.upload_folder(
-            folder_path=app.config['UPLOAD_FOLDER'],
-            path_in_repo=HF_IMAGES_FOLDER_PATH_IN_REPO,
-            repo_id=REPO_ID,
-            repo_type="dataset",
-            token=HF_TOKEN_WRITE,
-            commit_message=f"Sync images folder {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}",
-            allow_patterns="*", # Upload all files in the folder
-        )
-        logging.info(f"Images folder '{app.config['UPLOAD_FOLDER']}' successfully uploaded to Hugging Face.")
-    except Exception as e:
-        logging.error(f"Error uploading images folder to Hugging Face: {e}", exc_info=True)
-
-def upload_single_image_to_hf(local_image_path, image_filename_in_repo):
+            except RepositoryNotFoundError:
+                 logging.error(f"Repository {REPO_ID} not found. Download cancelled for all files.")
+                 return False
+            except HfHubHTTPError as e:
+                if e.response.status_code == 404:
+                    logging.warning(f"File {file_name} not found in repo {REPO_ID} (404). Skipping this file.")
+                    if attempt == 0 and not os.path.exists(file_name):
+                        try:
+                            if file_name == DATA_FILE:
+                                with open(file_name, 'w', encoding='utf-8') as f:
+                                    json.dump({'resumes': [], 'vacancies': [], 'freelance_offers': [], 'users': {}}, f)
+                                logging.info(f"Created empty local file {file_name} because it was not found on HF.")
+                        except Exception as create_e:
+                            logging.error(f"Failed to create empty local file {file_name}: {create_e}")
+                    success = False 
+                    break 
+                else:
+                    logging.error(f"HTTP error downloading {file_name} (Attempt {attempt + 1}): {e}. Retrying in {delay}s...")
+            except Exception as e:
+                 logging.error(f"Unexpected error downloading {file_name} (Attempt {attempt + 1}): {e}. Retrying in {delay}s...", exc_info=True)
+            if attempt < retries: time.sleep(delay)
+        if not success:
+            logging.error(f"Failed to download {file_name} after {retries + 1} attempts.")
+            all_successful = False
+    logging.info(f"Download process finished. Overall success: {all_successful}")
+    return all_successful
+
+def upload_db_to_hf(specific_file=None):
     if not HF_TOKEN_WRITE:
-        logging.warning("HF_TOKEN_WRITE not set. Skipping single image upload.")
-        return
-    if not os.path.exists(local_image_path):
-        logging.warning(f"Local image {local_image_path} not found. Skipping upload.")
+        logging.warning("HF_TOKEN_WRITE not set. Skipping upload to Hugging Face.")
         return
     try:
         api = HfApi()
-        path_in_repo = f"{HF_IMAGES_FOLDER_PATH_IN_REPO}/{image_filename_in_repo}"
-        logging.info(f"Uploading single image {local_image_path} to {path_in_repo} in {REPO_ID}...")
-        api.upload_file(
-            path_or_fileobj=local_image_path,
-            path_in_repo=path_in_repo,
-            repo_id=REPO_ID,
-            repo_type="dataset",
-            token=HF_TOKEN_WRITE,
-            commit_message=f"Upload image {image_filename_in_repo} {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}"
-        )
-        logging.info(f"Image {image_filename_in_repo} successfully uploaded.")
-    except Exception as e:
-        logging.error(f"Error uploading single image {image_filename_in_repo} to HF: {e}", exc_info=True)
-
-def delete_image_from_hf(image_filename_in_repo):
-    if not HF_TOKEN_WRITE:
-        logging.warning("HF_TOKEN_WRITE not set. Skipping image deletion from HF.")
-        return
-    try:
-        api = HfApi() # Use HfApi() directly for delete_file
-        path_in_repo = f"{HF_IMAGES_FOLDER_PATH_IN_REPO}/{image_filename_in_repo}"
-        logging.info(f"Deleting image {path_in_repo} from HF repo {REPO_ID}...")
-        hf_delete_file( # Use the direct import
-            repo_id=REPO_ID,
-            path_in_repo=path_in_repo,
-            repo_type="dataset",
-            token=HF_TOKEN_WRITE,
-            commit_message=f"Delete image {image_filename_in_repo} {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}"
-        )
-        logging.info(f"Image {path_in_repo} successfully deleted from HF.")
-    except EntryNotFoundError:
-        logging.warning(f"Image {path_in_repo} not found in HF repo, skipping deletion.")
+        files_to_upload = [specific_file] if specific_file else SYNC_FILES
+        logging.info(f"Starting upload of {files_to_upload} to HF repo {REPO_ID}...")
+        for file_name in files_to_upload:
+            if os.path.exists(file_name):
+                try:
+                    api.upload_file(
+                        path_or_fileobj=file_name, path_in_repo=file_name, repo_id=REPO_ID,
+                        repo_type="dataset", token=HF_TOKEN_WRITE,
+                        commit_message=f"Sync {file_name} {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}"
+                    )
+                    logging.info(f"File {file_name} successfully uploaded to Hugging Face.")
+                except Exception as e:
+                     logging.error(f"Error uploading file {file_name} to Hugging Face: {e}")
+            else:
+                logging.warning(f"File {file_name} not found locally, skipping upload.")
+        logging.info("Finished uploading files to HF.")
     except Exception as e:
-        logging.error(f"Error deleting image {image_filename_in_repo} from HF: {e}", exc_info=True)
-
+        logging.error(f"General error during Hugging Face upload initialization or process: {e}", exc_info=True)
 
 def periodic_backup():
     backup_interval = 1800
@@ -217,8 +123,7 @@ def periodic_backup():
     while True:
         time.sleep(backup_interval)
         logging.info("Starting periodic backup...")
-        upload_data_file_to_hf()
-        upload_images_folder_to_hf()
+        upload_db_to_hf()
         logging.info("Periodic backup finished.")
 
 def load_data():
@@ -236,7 +141,7 @@ def load_data():
     except (FileNotFoundError, json.JSONDecodeError) as e:
         logging.warning(f"Error loading local data ({e}). Attempting download from HF.")
 
-    if download_data_file_from_hf():
+    if download_db_from_hf(specific_file=DATA_FILE):
         try:
             with open(DATA_FILE, 'r', encoding='utf-8') as file:
                 data = json.load(file)
@@ -272,7 +177,7 @@ def save_data(data):
         with open(DATA_FILE, 'w', encoding='utf-8') as file:
             json.dump(data, file, ensure_ascii=False, indent=4)
         logging.info(f"Data successfully saved to {DATA_FILE}")
-        upload_data_file_to_hf()
+        upload_db_to_hf(specific_file=DATA_FILE)
     except Exception as e:
         logging.error(f"Error saving data to {DATA_FILE}: {e}", exc_info=True)
 
@@ -304,13 +209,12 @@ def verify_telegram_auth_data(auth_data_str, bot_token):
             return False, None
     return False, None
 
-
 MAIN_APP_TEMPLATE = '''
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>TonTalent</title>
     <script src="https://telegram.org/js/telegram-web-app.js"></script>
     <style>
@@ -327,9 +231,17 @@ MAIN_APP_TEMPLATE = '''
             --tg-theme-section-header-text-color: #8e8e93;
             --tg-theme-destructive-text-color: #ff3b30;
             --tg-theme-accent-text-color: #007aff;
+            --system-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
+            --border-radius-s: 8px;
+            --border-radius-m: 12px;
+            --spacing-xs: 4px;
+            --spacing-s: 8px;
+            --spacing-m: 12px;
+            --spacing-l: 16px;
+            --spacing-xl: 20px;
         }
         body {
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
+            font-family: var(--system-font);
             margin: 0;
             padding: 0;
             background-color: var(--tg-theme-bg-color);
@@ -337,40 +249,46 @@ MAIN_APP_TEMPLATE = '''
             overscroll-behavior-y: none;
             -webkit-font-smoothing: antialiased;
             -moz-osx-font-smoothing: grayscale;
-            padding-top: env(safe-area-inset-top);
-            padding-bottom: env(safe-area-inset-bottom);
+            line-height: 1.4;
         }
         .app-container { display: flex; flex-direction: column; min-height: 100vh; }
         .header {
             background-color: var(--tg-theme-header-bg-color);
-            padding: 12px 15px;
+            padding: var(--spacing-m) var(--spacing-l);
             text-align: center;
             font-weight: 600;
-            font-size: 17px;
-            border-bottom: 0.5px solid var(--tg-theme-secondary-bg-color);
+            font-size: 18px;
+            border-bottom: 1px solid var(--tg-theme-secondary-bg-color);
             position: sticky;
             top: 0;
             z-index: 100;
         }
-        .user-info { 
-            padding: 15px; 
-            background-color: var(--tg-theme-secondary-bg-color); 
-            font-size: 14px; 
-            text-align: left; 
-            color: var(--tg-theme-text-color); 
-            display: flex; 
+        .user-info-bar {
+            display: flex;
             align-items: center;
-            border-bottom: 0.5px solid var(--tg-theme-secondary-bg-color);
+            padding: var(--spacing-s) var(--spacing-l);
+            background-color: var(--tg-theme-secondary-bg-color);
+            border-bottom: 1px solid var(--tg-theme-secondary-bg-color);
         }
-        .user-info img {
-            width: 40px; height: 40px; border-radius: 50%;
-            margin-right: 12px;
-            background-color: var(--tg-theme-hint-color); /* Placeholder bg */
+        .user-avatar {
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            margin-right: var(--spacing-m);
+            background-color: var(--tg-theme-hint-color); /* Placeholder */
+            object-fit: cover;
         }
-        .tabs { display: flex; background-color: var(--tg-theme-section-bg-color); padding: 5px 10px; border-bottom: 0.5px solid var(--tg-theme-secondary-bg-color); }
+        .user-details {
+            font-size: 14px;
+            color: var(--tg-theme-text-color);
+        }
+        .user-details strong { font-weight: 500; }
+        .user-details span { color: var(--tg-theme-hint-color); font-size: 12px; }
+
+        .tabs { display: flex; background-color: var(--tg-theme-bg-color); padding: var(--spacing-s); border-bottom: 1px solid var(--tg-theme-secondary-bg-color); }
         .tab-button {
             flex: 1;
-            padding: 12px 5px;
+            padding: var(--spacing-m);
             text-align: center;
             cursor: pointer;
             background: none;
@@ -378,93 +296,94 @@ MAIN_APP_TEMPLATE = '''
             color: var(--tg-theme-hint-color);
             font-size: 15px;
             font-weight: 500;
-            border-bottom: 2.5px solid transparent;
-            transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
-            -webkit-tap-highlight-color: transparent;
+            border-bottom: 3px solid transparent;
+            transition: color 0.2s ease, border-bottom-color 0.2s ease;
         }
         .tab-button.active { color: var(--tg-theme-link-color); border-bottom-color: var(--tg-theme-link-color); font-weight: 600; }
-        .content { 
-            flex-grow: 1; padding: 15px; 
-            opacity: 0;
-            transition: opacity 0.2s ease-in-out;
-        }
-        .content.content-visible { opacity: 1; }
+        .content { flex-grow: 1; padding: var(--spacing-l); overflow-x: hidden; }
+        .content.entering { animation: fadeIn 0.3s ease-out; }
+        .content.detail-view-entering { animation: slideInFromRight 0.3s ease-out; }
+        .content.form-view-entering { animation: slideInFromRight 0.3s ease-out; }
+        
+        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+        @keyframes slideInFromRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
+
         .list-item {
             background-color: var(--tg-theme-section-bg-color);
-            border-radius: 10px;
-            padding: 12px 15px;
-            margin-bottom: 12px;
-            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+            border-radius: var(--border-radius-m);
+            padding: var(--spacing-m) var(--spacing-l);
+            margin-bottom: var(--spacing-m);
+            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
             cursor: pointer;
-            transition: background-color 0.15s ease-out, transform 0.15s ease-out;
-            display: flex;
-            align-items: center;
+            transition: transform 0.15s ease-out, background-color 0.15s ease-out;
         }
-        .list-item:active { background-color: var(--tg-theme-secondary-bg-color); transform: scale(0.98); }
-        .list-item-image { width: 60px; height: 60px; border-radius: 8px; margin-right: 12px; object-fit: cover; background-color: var(--tg-theme-secondary-bg-color); }
-        .list-item-content h3 { margin: 0 0 4px 0; font-size: 17px; font-weight: 600; color: var(--tg-theme-text-color); }
-        .list-item-content p { margin: 0 0 3px 0; font-size: 14px; color: var(--tg-theme-hint-color); }
-        .list-item-content .meta { font-size: 13px; color: var(--tg-theme-hint-color); }
+        .list-item:active { transform: scale(0.98); background-color: var(--tg-theme-secondary-bg-color); }
+        .list-item-header { display: flex; align-items: center; margin-bottom: var(--spacing-s); }
+        .list-item-image { width: 50px; height: 50px; border-radius: var(--border-radius-s); object-fit: cover; margin-right: var(--spacing-m); background-color: var(--tg-theme-secondary-bg-color); }
+        .list-item-text h3 { margin: 0 0 var(--spacing-xs) 0; font-size: 17px; font-weight: 600; color: var(--tg-theme-text-color); }
+        .list-item-text p { margin: 0 0 var(--spacing-xs) 0; font-size: 14px; color: var(--tg-theme-hint-color); }
+        .list-item .meta { font-size: 12px; color: var(--tg-theme-hint-color); margin-top: var(--spacing-s); }
         
-        .form-container { padding: 15px; background-color: var(--tg-theme-section-bg-color); }
-        .form-group { margin-bottom: 18px; }
-        .form-group label { display: block; font-size: 14px; color: var(--tg-theme-section-header-text-color); margin-bottom: 6px; font-weight: 500; }
+        .form-container { padding: var(--spacing-l); background-color: var(--tg-theme-section-bg-color); }
+        .form-group { margin-bottom: var(--spacing-l); }
+        .form-group label { display: block; font-size: 14px; color: var(--tg-theme-section-header-text-color); margin-bottom: var(--spacing-s); font-weight: 500; }
         .form-group input, .form-group textarea, .form-group input[type="file"] {
             width: 100%;
-            padding: 12px;
+            padding: var(--spacing-m);
             border: 1px solid var(--tg-theme-secondary-bg-color);
-            border-radius: 8px;
+            border-radius: var(--border-radius-s);
             font-size: 16px;
             background-color: var(--tg-theme-bg-color);
             color: var(--tg-theme-text-color);
             box-sizing: border-box;
-            transition: border-color 0.2s, box-shadow 0.2s;
-        }
-        .form-group input:focus, .form-group textarea:focus {
-            border-color: var(--tg-theme-link-color);
-            box-shadow: 0 0 0 2px var(--tg-theme-link-color_0_3); /* Assuming a way to get transparent link color */
+            font-family: var(--system-font);
         }
+        .form-group input[type="file"] { padding: var(--spacing-s); }
         .form-group textarea { min-height: 100px; resize: vertical; }
-        .form-group input[type="file"] { padding: 8px; }
-        #image_preview_container img { max-width: 120px; max-height: 120px; margin-top: 10px; border-radius: 6px; border: 1px solid var(--tg-theme-secondary-bg-color); }
-
+        .form-group input:focus, .form-group textarea:focus { border-color: var(--tg-theme-link-color); box-shadow: 0 0 0 2px var(--tg-theme-link-color-alpha, rgba(0,122,255,0.2)); outline: none; }
+        
         .fab {
             position: fixed;
-            bottom: calc(20px + env(safe-area-inset-bottom)); /* Adjust for safe area */
-            right: 20px;
+            bottom: var(--spacing-xl);
+            right: var(--spacing-xl);
             width: 56px;
             height: 56px;
             background-color: var(--tg-theme-button-color);
             color: var(--tg-theme-button-text-color);
-            border-radius: 28px; /* iOS like rounded */
+            border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
             font-size: 28px;
             line-height: 1;
-            font-weight: 300;
             box-shadow: 0 4px 12px rgba(0,0,0,0.15);
             cursor: pointer;
             z-index: 1000;
             border: none;
-            transition: transform 0.15s ease-out;
+            transition: transform 0.2s ease;
         }
-        .fab:active { transform: scale(0.92); }
-        .detail-view { padding: 15px; background-color: var(--tg-theme-section-bg-color); }
-        .detail-view img.detail-image { width: 100%; max-height: 300px; object-fit: cover; border-radius: 10px; margin-bottom: 15px; background-color: var(--tg-theme-secondary-bg-color); }
-        .detail-view h2 { margin-top: 0; font-size: 22px; font-weight: 600; color: var(--tg-theme-text-color); }
-        .detail-view p { margin-bottom: 10px; line-height: 1.6; font-size: 16px; }
+        .fab:active { transform: scale(0.95); }
+
+        .detail-view { padding: var(--spacing-l); background-color: var(--tg-theme-section-bg-color); }
+        .detail-view img.item-image-large { width: 100%; max-height: 300px; object-fit: cover; border-radius: var(--border-radius-m); margin-bottom: var(--spacing-l); background-color: var(--tg-theme-secondary-bg-color); }
+        .detail-view h2 { margin-top: 0; font-size: 22px; font-weight: 600; color: var(--tg-theme-text-color); margin-bottom: var(--spacing-s); }
+        .detail-view p { margin-bottom: var(--spacing-m); line-height: 1.6; font-size: 16px; }
         .detail-view strong { font-weight: 500; color: var(--tg-theme-section-header-text-color); }
-        .loading, .empty-state { text-align: center; padding: 50px 15px; color: var(--tg-theme-hint-color); font-size: 16px; }
-        .error-message { color: var(--tg-theme-destructive-text-color); font-size: 14px; margin-top: 8px; }
+        .detail-view .meta { font-size: 13px; color: var(--tg-theme-hint-color); margin-top: var(--spacing-l); }
+        .detail-view a { color: var(--tg-theme-link-color); text-decoration: none; }
+        .detail-view a:hover { text-decoration: underline; }
+
+        .loading, .empty-state { text-align: center; padding: 50px var(--spacing-l); color: var(--tg-theme-hint-color); font-size: 16px; }
+        .error-message { color: var(--tg-theme-destructive-text-color); font-size: 14px; margin-top: var(--spacing-s); }
+        .image-preview { max-width: 100px; max-height: 100px; margin-top: var(--spacing-s); border-radius: var(--border-radius-s); }
     </style>
 </head>
 <body>
-    <div class="app-container" id="appContainer">
+    <div class="app-container">
         <div class="header">TonTalent</div>
-        <div class="user-info" id="userInfo">
-            <img src="" alt="avatar" id="userAvatar" style="display:none;">
-            <span id="userGreeting">Loading user...</span>
+        <div class="user-info-bar" id="userInfoContainer">
+            <img src="" alt="User Avatar" class="user-avatar" id="userAvatar" style="display:none;">
+            <div class="user-details" id="userInfo">Loading user...</div>
         </div>
         <div class="tabs">
             <button class="tab-button active" data-tab="resumes">Resumes</button>
@@ -485,100 +404,103 @@ MAIN_APP_TEMPLATE = '''
         const mainContentEl = document.getElementById('mainContent');
 
         function applyThemeParams() {
-            const rootStyle = document.documentElement.style;
-            rootStyle.setProperty('--tg-theme-bg-color', tg.themeParams.bg_color || '#ffffff');
-            rootStyle.setProperty('--tg-theme-text-color', tg.themeParams.text_color || '#000000');
-            rootStyle.setProperty('--tg-theme-hint-color', tg.themeParams.hint_color || '#999999');
-            rootStyle.setProperty('--tg-theme-link-color', tg.themeParams.link_color || '#007aff');
-            rootStyle.setProperty('--tg-theme-button-color', tg.themeParams.button_color || '#007aff');
-            rootStyle.setProperty('--tg-theme-button-text-color', tg.themeParams.button_text_color || '#ffffff');
-            rootStyle.setProperty('--tg-theme-secondary-bg-color', tg.themeParams.secondary_bg_color || '#f0f0f0');
-            rootStyle.setProperty('--tg-theme-header-bg-color', tg.themeParams.header_bg_color || tg.themeParams.secondary_bg_color || '#efeff4');
-            rootStyle.setProperty('--tg-theme-section-bg-color', tg.themeParams.section_bg_color || tg.themeParams.bg_color || '#ffffff');
-            rootStyle.setProperty('--tg-theme-section-header-text-color', tg.themeParams.section_header_text_color || tg.themeParams.hint_color || '#8e8e93');
-            rootStyle.setProperty('--tg-theme-destructive-text-color', tg.themeParams.destructive_text_color || '#ff3b30');
-            rootStyle.setProperty('--tg-theme-accent-text-color', tg.themeParams.accent_text_color || tg.themeParams.link_color || '#007aff');
-            
-            if(tg.themeParams.link_color) {
-                const lc = tg.themeParams.link_color;
-                const r = parseInt(lc.slice(1, 3), 16);
-                const g = parseInt(lc.slice(3, 5), 16);
-                const b = parseInt(lc.slice(5, 7), 16);
-                rootStyle.setProperty('--tg-theme-link-color_0_3', `rgba(${r}, ${g}, ${b}, 0.3)`);
-            } else {
-                 rootStyle.setProperty('--tg-theme-link-color_0_3', `rgba(0, 122, 255, 0.3)`);
-            }
+            const root = document.documentElement;
+            root.style.setProperty('--tg-theme-bg-color', tg.themeParams.bg_color || '#ffffff');
+            root.style.setProperty('--tg-theme-text-color', tg.themeParams.text_color || '#000000');
+            root.style.setProperty('--tg-theme-hint-color', tg.themeParams.hint_color || '#999999');
+            root.style.setProperty('--tg-theme-link-color', tg.themeParams.link_color || '#007aff');
+            root.style.setProperty('--tg-theme-button-color', tg.themeParams.button_color || '#007aff');
+            root.style.setProperty('--tg-theme-button-text-color', tg.themeParams.button_text_color || '#ffffff');
+            root.style.setProperty('--tg-theme-secondary-bg-color', tg.themeParams.secondary_bg_color || '#f0f0f0');
+            root.style.setProperty('--tg-theme-header-bg-color', tg.themeParams.header_bg_color || tg.themeParams.secondary_bg_color || '#efeff4');
+            root.style.setProperty('--tg-theme-section-bg-color', tg.themeParams.section_bg_color || tg.themeParams.bg_color || '#ffffff');
+            root.style.setProperty('--tg-theme-section-header-text-color', tg.themeParams.section_header_text_color || tg.themeParams.hint_color || '#8e8e93');
+            root.style.setProperty('--tg-theme-destructive-text-color', tg.themeParams.destructive_text_color || '#ff3b30');
+            root.style.setProperty('--tg-theme-accent-text-color', tg.themeParams.accent_text_color || tg.themeParams.link_color || '#007aff');
+            root.style.setProperty('--tg-theme-link-color-alpha', (tg.themeParams.link_color || '#007aff') + '33');
         }
         
-        async function apiCall(endpoint, method = 'GET', body = null, isFormData = false) {
+        async function apiCall(endpoint, method = 'GET', body = null) {
             const headers = {};
-            if (!isFormData) {
-                headers['Content-Type'] = 'application/json';
+            if (!(body instanceof FormData)) {
+                 headers['Content-Type'] = 'application/json';
             }
             if (tg.initData) {
                 headers['X-Telegram-Auth'] = tg.initData;
             }
             const options = { method, headers };
-            if (body) options.body = isFormData ? body : JSON.stringify(body);
-            
+            if (body) {
+                options.body = (body instanceof FormData) ? body : JSON.stringify(body);
+            }
+
+            tg.MainButton.showProgress();
             try {
                 const response = await fetch(endpoint, options);
                 if (!response.ok) {
-                    const errorData = await response.json().catch(() => ({ error: 'Request failed without JSON body' }));
+                    const errorData = await response.json().catch(() => ({ error: 'Request failed, server returned non-JSON response' }));
                     throw new Error(errorData.error || `HTTP error ${response.status}`);
                 }
                 return response.json();
             } catch (error) {
                 console.error('API Call Error:', error);
                 tg.showAlert(error.message || 'An API error occurred.');
+                tg.HapticFeedback.notificationOccurred('error');
                 throw error;
+            } finally {
+                tg.MainButton.hideProgress();
             }
         }
 
         function renderList(items, type) {
-            mainContentEl.classList.remove('content-visible');
-            setTimeout(() => {
-                if (!items || items.length === 0) {
-                    mainContentEl.innerHTML = `<div class="empty-state">No ${type} found. Be the first to add one!</div>`;
-                } else {
-                    mainContentEl.innerHTML = items.map(item => `
-                        <div class="list-item" onclick="showDetailView('${type}', '${item.id}')">
-                            ${item.image_filename ? `<img src="/uploads/${item.image_filename}" class="list-item-image" alt="${item.title || item.name || 'Item image'}">` : `<div class="list-item-image"></div>`}
-                            <div class="list-item-content">
-                                <h3>${item.title || item.name || 'Untitled'}</h3>
-                                ${type === 'vacancies' && item.company_name ? `<p><strong>Company:</strong> ${item.company_name}</p>` : ''}
-                                ${type === 'freelance_offers' && item.budget ? `<p><strong>Budget:</strong> ${item.budget}</p>` : ''}
-                                <p class="meta">Posted by: @${item.user_telegram_username || 'anonymous'} on ${new Date(item.timestamp).toLocaleDateString()}</p>
-                            </div>
+            mainContentEl.classList.remove('detail-view-entering', 'form-view-entering');
+            mainContentEl.classList.add('entering');
+            if (!items || items.length === 0) {
+                mainContentEl.innerHTML = `<div class="empty-state">No ${type} found. Be the first to add one!</div>`;
+                return;
+            }
+            mainContentEl.innerHTML = items.map(item => `
+                <div class="list-item" onclick="showDetailView('${type}', '${item.id}')">
+                    <div class="list-item-header">
+                        ${item.image_filename ? `<img src="/uploads/${item.image_filename}" class="list-item-image" alt="${item.title || item.name || 'Item image'}">` : `<div class="list-item-image"></div>`}
+                        <div class="list-item-text">
+                            <h3>${item.title || item.name || 'Untitled'}</h3>
+                            ${type === 'vacancies' && item.company_name ? `<p>${item.company_name}</p>` : ''}
+                            ${type === 'freelance_offers' && item.budget ? `<p>Budget: ${item.budget}</p>` : ''}
                         </div>
-                    `).join('');
-                }
-                mainContentEl.classList.add('content-visible');
-            }, 150);
+                    </div>
+                    <p class="meta">Posted by: @${item.user_telegram_username || 'anonymous'} on ${new Date(item.timestamp).toLocaleDateString()}</p>
+                </div>
+            `).join('');
+            setTimeout(() => mainContentEl.classList.remove('entering'), 300);
         }
 
         function showDetailView(type, id) {
             tg.BackButton.show();
-            tg.BackButton.onClick(() => { loadView(type); tg.HapticFeedback.impactOccurred('light'); });
+            tg.BackButton.onClick(() => {
+                loadView(type);
+                tg.HapticFeedback.impactOccurred('light');
+            });
             tg.MainButton.hide();
             document.getElementById('fabButton').style.display = 'none';
-            mainContentEl.classList.remove('content-visible');
+            mainContentEl.classList.remove('entering', 'form-view-entering');
+            mainContentEl.classList.add('detail-view-entering');
 
             apiCall(`/api/${type}/${id}`)
                 .then(item => {
                     currentItem = item;
                     let detailsHtml = `<div class="detail-view">`;
                     if (item.image_filename) {
-                        detailsHtml += `<img src="/uploads/${item.image_filename}" class="detail-image" alt="${item.title || item.name || 'Detail image'}">`;
+                        detailsHtml += `<img src="/uploads/${item.image_filename}" class="item-image-large" alt="${item.title || item.name}">`;
                     }
                     detailsHtml += `<h2>${item.title || item.name}</h2>`;
+                    
                     if (type === 'resumes') {
                         detailsHtml += `
                             <p><strong>Skills:</strong> ${item.skills || 'N/A'}</p>
                             <p><strong>Experience:</strong><br>${item.experience ? item.experience.replace(/\\n/g, '<br>') : 'N/A'}</p>
                             <p><strong>Education:</strong><br>${item.education ? item.education.replace(/\\n/g, '<br>') : 'N/A'}</p>
                             <p><strong>Contact:</strong> ${item.contact || `@${item.user_telegram_username}`}</p>
-                            ${item.portfolio_link ? `<p><strong>Portfolio:</strong> <a href="${item.portfolio_link}" target="_blank" style="color: var(--tg-theme-link-color);">${item.portfolio_link}</a></p>` : ''}
+                            ${item.portfolio_link ? `<p><strong>Portfolio:</strong> <a href="${item.portfolio_link}" target="_blank" rel="noopener noreferrer">${item.portfolio_link}</a></p>` : ''}
                         `;
                     } else if (type === 'vacancies') {
                         detailsHtml += `
@@ -599,23 +521,20 @@ MAIN_APP_TEMPLATE = '''
                         `;
                     }
                     detailsHtml += `<p class="meta">Posted by: @${item.user_telegram_username || 'anonymous'} on ${new Date(item.timestamp).toLocaleDateString()}</p></div>`;
-                    
-                    setTimeout(() => {
-                        mainContentEl.innerHTML = detailsHtml;
-                        mainContentEl.classList.add('content-visible');
-                    },150);
+                    mainContentEl.innerHTML = detailsHtml;
+                    setTimeout(() => mainContentEl.classList.remove('detail-view-entering'), 300);
 
-                    if (currentUser && item.user_id === currentUser.id) {
+                    if (currentUser && item.user_id === String(currentUser.id)) {
                         tg.MainButton.setText('Edit My Post');
-                        tg.MainButton.onClick(() => { showForm(type, item); tg.HapticFeedback.impactOccurred('light'); });
+                        tg.MainButton.onClick(() => {
+                            showForm(type, item);
+                            tg.HapticFeedback.impactOccurred('light');
+                        });
                         tg.MainButton.show();
                     }
                 })
                 .catch(err => {
-                     setTimeout(() => {
-                        mainContentEl.innerHTML = `<div class="empty-state">Error loading details.</div>`;
-                        mainContentEl.classList.add('content-visible');
-                     }, 150);
+                    mainContentEl.innerHTML = `<div class="empty-state">Error loading details. Please try again.</div>`;
                 });
         }
         
@@ -628,72 +547,115 @@ MAIN_APP_TEMPLATE = '''
                 tg.HapticFeedback.impactOccurred('light');
             });
             document.getElementById('fabButton').style.display = 'none';
-            mainContentEl.classList.remove('content-visible');
+            mainContentEl.classList.remove('entering', 'detail-view-entering');
+            mainContentEl.classList.add('form-view-entering');
 
-            let formHtml = `<div class="form-container"><h2>${itemToEdit ? 'Edit' : 'New'} ${type.slice(0, -1)}</h2>`;
+            let formHtml = `<div class="form-container"><h2>${itemToEdit ? 'Edit' : 'New'} ${type.charAt(0).toUpperCase() + type.slice(1, -1)}</h2>`;
+            
             const commonFields = `
                 <div class="form-group">
-                    <label for="item_image">Image (optional)</label>
-                    <input type="file" id="item_image" accept="image/*">
-                    <div id="image_preview_container">
-                        ${itemToEdit && itemToEdit.image_filename ? `<img src="/uploads/${itemToEdit.image_filename}" alt="Current image">` : ''}
-                    </div>
+                    <label for="item_image">Image (Optional)</label>
+                    <input type="file" id="item_image" name="item_image" accept="image/png, image/jpeg, image/gif">
+                    ${itemToEdit && itemToEdit.image_filename ? `<img src="/uploads/${itemToEdit.image_filename}" class="image-preview" alt="Current image">` : ''}
                 </div>
             `;
+
             if (type === 'resumes') {
                 formHtml += `
-                    <div class="form-group"><label for="name">Full Name</label><input type="text" id="name" value="${itemToEdit?.name || ''}" required></div>
-                    <div class="form-group"><label for="title">Job Title / Desired Position</label><input type="text" id="title" value="${itemToEdit?.title || ''}" required></div>
+                    <div class="form-group">
+                        <label for="name">Full Name*</label>
+                        <input type="text" id="name" value="${itemToEdit?.name || ''}" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="title">Job Title / Desired Position*</label>
+                        <input type="text" id="title" value="${itemToEdit?.title || ''}" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="skills">Skills (comma separated)</label>
+                        <textarea id="skills">${itemToEdit?.skills || ''}</textarea>
+                    </div>
+                    <div class="form-group">
+                        <label for="experience">Experience</label>
+                        <textarea id="experience">${itemToEdit?.experience || ''}</textarea>
+                    </div>
+                    <div class="form-group">
+                        <label for="education">Education</label>
+                        <textarea id="education">${itemToEdit?.education || ''}</textarea>
+                    </div>
+                    <div class="form-group">
+                        <label for="contact">Contact Info (e.g., email, or blank for Telegram)</label>
+                        <input type="text" id="contact" value="${itemToEdit?.contact || ''}">
+                    </div>
+                    <div class="form-group">
+                        <label for="portfolio_link">Portfolio Link (optional)</label>
+                        <input type="url" id="portfolio_link" value="${itemToEdit?.portfolio_link || ''}">
+                    </div>
                     ${commonFields}
-                    <div class="form-group"><label for="skills">Skills (comma separated)</label><textarea id="skills">${itemToEdit?.skills || ''}</textarea></div>
-                    <div class="form-group"><label for="experience">Experience</label><textarea id="experience">${itemToEdit?.experience || ''}</textarea></div>
-                    <div class="form-group"><label for="education">Education</label><textarea id="education">${itemToEdit?.education || ''}</textarea></div>
-                    <div class="form-group"><label for="contact">Contact Info</label><input type="text" id="contact" value="${itemToEdit?.contact || ''}"></div>
-                    <div class="form-group"><label for="portfolio_link">Portfolio Link</label><input type="url" id="portfolio_link" value="${itemToEdit?.portfolio_link || ''}"></div>
                 `;
             } else if (type === 'vacancies') {
                 formHtml += `
-                    <div class="form-group"><label for="company_name">Company Name</label><input type="text" id="company_name" value="${itemToEdit?.company_name || ''}" required></div>
-                    <div class="form-group"><label for="title">Job Title</label><input type="text" id="title" value="${itemToEdit?.title || ''}" required></div>
+                    <div class="form-group">
+                        <label for="company_name">Company Name*</label>
+                        <input type="text" id="company_name" value="${itemToEdit?.company_name || ''}" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="title">Job Title*</label>
+                        <input type="text" id="title" value="${itemToEdit?.title || ''}" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="description">Description</label>
+                        <textarea id="description">${itemToEdit?.description || ''}</textarea>
+                    </div>
+                    <div class="form-group">
+                        <label for="requirements">Requirements</label>
+                        <textarea id="requirements">${itemToEdit?.requirements || ''}</textarea>
+                    </div>
+                    <div class="form-group">
+                        <label for="salary">Salary/Compensation</label>
+                        <input type="text" id="salary" value="${itemToEdit?.salary || ''}">
+                    </div>
+                    <div class="form-group">
+                        <label for="location">Location (e.g., Remote, City)</label>
+                        <input type="text" id="location" value="${itemToEdit?.location || ''}">
+                    </div>
+                    <div class="form-group">
+                        <label for="contact">Contact Info / How to Apply</label>
+                        <textarea id="contact">${itemToEdit?.contact || ''}</textarea>
+                    </div>
                     ${commonFields}
-                    <div class="form-group"><label for="description">Description</label><textarea id="description">${itemToEdit?.description || ''}</textarea></div>
-                    <div class="form-group"><label for="requirements">Requirements</label><textarea id="requirements">${itemToEdit?.requirements || ''}</textarea></div>
-                    <div class="form-group"><label for="salary">Salary/Compensation</label><input type="text" id="salary" value="${itemToEdit?.salary || ''}"></div>
-                    <div class="form-group"><label for="location">Location</label><input type="text" id="location" value="${itemToEdit?.location || ''}"></div>
-                    <div class="form-group"><label for="contact">Contact Info / How to Apply</label><textarea id="contact">${itemToEdit?.contact || ''}</textarea></div>
                 `;
             } else if (type === 'freelance_offers') {
                 formHtml += `
-                    <div class="form-group"><label for="title">Project Title</label><input type="text" id="title" value="${itemToEdit?.title || ''}" required></div>
+                    <div class="form-group">
+                        <label for="title">Project Title*</label>
+                        <input type="text" id="title" value="${itemToEdit?.title || ''}" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="description">Description of Work</label>
+                        <textarea id="description">${itemToEdit?.description || ''}</textarea>
+                    </div>
+                    <div class="form-group">
+                        <label for="budget">Budget</label>
+                        <input type="text" id="budget" value="${itemToEdit?.budget || ''}">
+                    </div>
+                    <div class="form-group">
+                        <label for="deadline">Expected Deadline</label>
+                        <input type="text" id="deadline" value="${itemToEdit?.deadline || ''}">
+                    </div>
+                    <div class="form-group">
+                        <label for="skills_needed">Skills Needed (comma separated)</label>
+                        <textarea id="skills_needed">${itemToEdit?.skills_needed || ''}</textarea>
+                    </div>
+                     <div class="form-group">
+                        <label for="contact">Contact Info (or blank for Telegram)</label>
+                        <input type="text" id="contact" value="${itemToEdit?.contact || ''}">
+                    </div>
                     ${commonFields}
-                    <div class="form-group"><label for="description">Description of Work</label><textarea id="description">${itemToEdit?.description || ''}</textarea></div>
-                    <div class="form-group"><label for="budget">Budget</label><input type="text" id="budget" value="${itemToEdit?.budget || ''}"></div>
-                    <div class="form-group"><label for="deadline">Expected Deadline</label><input type="text" id="deadline" value="${itemToEdit?.deadline || ''}"></div>
-                    <div class="form-group"><label for="skills_needed">Skills Needed</label><textarea id="skills_needed">${itemToEdit?.skills_needed || ''}</textarea></div>
-                    <div class="form-group"><label for="contact">Contact Info</label><input type="text" id="contact" value="${itemToEdit?.contact || ''}"></div>
                 `;
             }
             formHtml += `<div id="formError" class="error-message"></div></div>`;
-            
-            setTimeout(() => {
-                mainContentEl.innerHTML = formHtml;
-                mainContentEl.classList.add('content-visible');
-                const fileInput = document.getElementById('item_image');
-                const imagePreview = document.getElementById('image_preview_container');
-                if (fileInput) {
-                    fileInput.addEventListener('change', function(event) {
-                        if (event.target.files && event.target.files[0]) {
-                            const reader = new FileReader();
-                            reader.onload = function(e) {
-                                imagePreview.innerHTML = `<img src="${e.target.result}" alt="Preview">`;
-                            }
-                            reader.readAsDataURL(event.target.files[0]);
-                        } else {
-                            imagePreview.innerHTML = itemToEdit && itemToEdit.image_filename ? `<img src="/uploads/${itemToEdit.image_filename}" alt="Current image">` : '';
-                        }
-                    });
-                }
-            }, 150);
+            mainContentEl.innerHTML = formHtml;
+            setTimeout(() => mainContentEl.classList.remove('form-view-entering'), 300);
 
             tg.MainButton.setText(itemToEdit ? 'Save Changes' : 'Post');
             tg.MainButton.show();
@@ -705,12 +667,6 @@ MAIN_APP_TEMPLATE = '''
             let isValid = true;
             document.getElementById('formError').textContent = '';
 
-            const formData = new FormData();
-            const imageFile = document.getElementById('item_image').files[0];
-            if (imageFile) {
-                formData.append('image', imageFile);
-            }
-
             if (type === 'resumes') {
                 payload.name = document.getElementById('name').value.trim();
                 payload.title = document.getElementById('title').value.trim();
@@ -740,150 +696,144 @@ MAIN_APP_TEMPLATE = '''
             }
 
             if (!isValid) {
-                document.getElementById('formError').textContent = 'Please fill in all required fields.';
+                document.getElementById('formError').textContent = 'Please fill in all required fields (marked with *).';
                 tg.HapticFeedback.notificationOccurred('error');
                 return;
             }
             
+            const formData = new FormData();
             for (const key in payload) {
                 formData.append(key, payload[key]);
             }
-            
-            tg.MainButton.showProgress();
+            const imageInput = document.getElementById('item_image');
+            if (imageInput && imageInput.files[0]) {
+                formData.append('item_image', imageInput.files[0]);
+            }
 
             const method = itemId ? 'PUT' : 'POST';
             const endpoint = itemId ? `/api/${type}/${itemId}` : `/api/${type}`;
 
-            apiCall(endpoint, method, formData, true)
+            apiCall(endpoint, method, formData)
                 .then(response => {
                     tg.HapticFeedback.notificationOccurred('success');
-                    tg.MainButton.hideProgress();
                     loadView(type); 
                 })
                 .catch(err => {
                     tg.HapticFeedback.notificationOccurred('error');
-                    tg.MainButton.hideProgress();
-                    document.getElementById('formError').textContent = err.message || 'Failed to submit.';
+                    document.getElementById('formError').textContent = err.message || 'Failed to submit. Please try again.';
                 });
         }
 
         function loadView(tabName) {
-            if (currentView === tabName && mainContentEl.innerHTML !== '' && !mainContentEl.querySelector('.loading')) {
-                 // If trying to load the same tab and it's already loaded, do nothing or maybe scroll to top
-                 // For now, allow reload by not returning early.
-            }
-
             currentView = tabName;
             document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
             document.querySelector(`.tab-button[data-tab="${tabName}"]`).classList.add('active');
             
-            mainContentEl.classList.remove('content-visible');
-            setTimeout(() => {
-                 mainContentEl.innerHTML = `<div class="loading">Loading ${tabName}...</div>`;
-                 mainContentEl.classList.add('content-visible'); // Show loading indicator
-            }, 0); // Start transition immediately for loading indicator
-
+            mainContentEl.innerHTML = `<div class="loading">Loading ${tabName}...</div>`;
             tg.BackButton.hide();
             tg.MainButton.hide();
             document.getElementById('fabButton').style.display = 'block';
 
             apiCall(`/api/${tabName}`)
-                .then(data => renderList(data, tabName)) // renderList handles its own fade-in
+                .then(data => renderList(data, tabName))
                 .catch(err => {
-                    mainContentEl.classList.remove('content-visible');
-                    setTimeout(() => {
-                        mainContentEl.innerHTML = `<div class="empty-state">Error loading ${tabName}.</div>`;
-                        mainContentEl.classList.add('content-visible');
-                    }, 150);
+                    mainContentEl.innerHTML = `<div class="empty-state">Error loading ${tabName}. Please check your connection.</div>`;
                 });
         }
-
-        function setupSwipeGestures() {
-            const appContainer = document.getElementById('appContainer');
-            let touchstartX = 0;
-            let touchendX = 0;
-            let touchstartY = 0;
-            let touchendY = 0;
-            const swipeThreshold = 75; 
-
-            appContainer.addEventListener('touchstart', function(event) {
-                if (event.target.closest('.form-container textarea, .form-container input, .detail-view')) {
-                    // Don't interfere with form inputs or scrollable detail views
-                    return;
-                }
-                touchstartX = event.changedTouches[0].screenX;
-                touchstartY = event.changedTouches[0].screenY;
-            }, {passive: true});
-
-            appContainer.addEventListener('touchend', function(event) {
-                 if (event.target.closest('.form-container textarea, .form-container input, .detail-view')) {
-                    return;
+        
+        let touchstartX = 0;
+        let touchendX = 0;
+        let touchstartY = 0;
+        let touchendY = 0;
+        const swipeThreshold = 75; 
+        const swipeArea = mainContentEl; 
+
+        swipeArea.addEventListener('touchstart', function(event) {
+            touchstartX = event.changedTouches[0].screenX;
+            touchstartY = event.changedTouches[0].screenY;
+        }, { passive: true });
+
+        swipeArea.addEventListener('touchend', function(event) {
+            touchendX = event.changedTouches[0].screenX;
+            touchendY = event.changedTouches[0].screenY;
+            handleSwipe();
+        }, { passive: true });
+
+        function handleSwipe() {
+            const deltaX = touchendX - touchstartX;
+            const deltaY = Math.abs(touchendY - touchstartY);
+
+            if (Math.abs(deltaX) > swipeThreshold && deltaY < Math.abs(deltaX) / 2) { // Horizontal swipe, not too vertical
+                const tabs = ['resumes', 'vacancies', 'freelance_offers'];
+                let currentIndex = tabs.indexOf(currentView);
+                if (deltaX < 0) { // Swiped left
+                    currentIndex = (currentIndex + 1) % tabs.length;
+                } else { // Swiped right
+                    currentIndex = (currentIndex - 1 + tabs.length) % tabs.length;
                 }
-                touchendX = event.changedTouches[0].screenX;
-                touchendY = event.changedTouches[0].screenY;
-                handleSwipe();
-            }, {passive: true});
-
-            function handleSwipe() {
-                const deltaX = touchendX - touchstartX;
-                const deltaY = touchendY - touchstartY;
-
-                if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > swipeThreshold) {
-                    const tabs = ['resumes', 'vacancies', 'freelance_offers'];
-                    const currentIndex = tabs.indexOf(currentView);
-                    
-                    if (deltaX < 0) { // Swiped left
-                        if (currentIndex < tabs.length - 1) {
-                            loadView(tabs[currentIndex + 1]);
-                            tg.HapticFeedback.selectionChanged();
-                        }
-                    } else { // Swiped right
-                        if (currentIndex > 0) {
-                            loadView(tabs[currentIndex - 1]);
-                            tg.HapticFeedback.selectionChanged();
-                        }
-                    }
+                if (tabs[currentIndex] !== currentView) {
+                    loadView(tabs[currentIndex]);
+                    tg.HapticFeedback.selectionChanged();
                 }
-                touchstartX = 0; touchendX = 0; touchstartY = 0; touchendY = 0; // Reset
             }
         }
+
+        function displayUserInfo(user) {
+            const userInfoDiv = document.getElementById('userInfo');
+            const userAvatarEl = document.getElementById('userAvatar');
+            let displayName = user.first_name || 'User';
+            if (user.last_name) displayName += ' ' + user.last_name;
+            let usernameString = user.username ? `(@${user.username})` : '(anonymous)';
+
+            if (user.photo_url) {
+                userAvatarEl.src = user.photo_url;
+                userAvatarEl.style.display = 'inline-block';
+            } else {
+                userAvatarEl.style.display = 'none';
+            }
+            userInfoDiv.innerHTML = `<strong>${displayName}</strong><br><span>${usernameString}</span>`;
+        }
         
         async function init() {
             tg.ready();
             applyThemeParams();
             tg.expand();
             tg.enableClosingConfirmation();
-            tg.setHeaderColor(tg.themeParams.secondary_bg_color || '#f0f0f0'); // Match user info bg
-
-            const greetingEl = document.getElementById('userGreeting');
-            const avatarEl = document.getElementById('userAvatar');
-            greetingEl.textContent = `Welcome, ${tg.initDataUnsafe.user?.first_name || 'User'}! (@${tg.initDataUnsafe.user?.username || 'anonymous'})`;
+            
+            const tgUser = tg.initDataUnsafe.user;
+            if (tgUser) {
+                displayUserInfo({
+                    first_name: tgUser.first_name,
+                    last_name: tgUser.last_name,
+                    username: tgUser.username,
+                    photo_url: tgUser.photo_url
+                });
+            }
             
             try {
                 const authResponse = await apiCall('/api/auth_user', 'POST', { init_data: tg.initData });
                 currentUser = authResponse.user;
                 if (currentUser) {
-                    greetingEl.textContent = `${currentUser.first_name || ''} ${currentUser.last_name || ''} (@${currentUser.username || 'anon'})`;
-                    if (currentUser.photo_url) {
-                        avatarEl.src = currentUser.photo_url;
-                        avatarEl.style.display = 'inline-block';
-                    } else {
-                        avatarEl.style.display = 'none';
-                    }
+                     displayUserInfo(currentUser);
                 }
             } catch (error) {
                 console.error("Auth error:", error);
-                greetingEl.textContent = `Auth failed. Limited functionality.`;
+                document.getElementById('userInfo').innerHTML = `<strong>Authentication Failed</strong><br><span>Limited functionality</span>`;
                 tg.showAlert("Authentication with the server failed. Some features might not work correctly.");
             }
 
             document.querySelectorAll('.tab-button').forEach(button => {
-                button.addEventListener('click', () => { loadView(button.dataset.tab); tg.HapticFeedback.selectionChanged(); });
+                button.addEventListener('click', () => {
+                    loadView(button.dataset.tab);
+                    tg.HapticFeedback.selectionChanged();
+                });
+            });
+            document.getElementById('fabButton').addEventListener('click', () => {
+                showForm(currentView);
+                tg.HapticFeedback.impactOccurred('medium');
             });
-            document.getElementById('fabButton').addEventListener('click', () => { showForm(currentView); tg.HapticFeedback.impactOccurred('medium'); });
             
-            setupSwipeGestures();
-            loadView('resumes'); // Load initial view
+            loadView('resumes');
         }
 
         init();
@@ -904,11 +854,11 @@ ADMIN_TEMPLATE = '''
         .container { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
         h1, h2 { color: #333; }
         .section { margin-bottom: 30px; padding: 15px; border: 1px solid #ddd; border-radius: 5px; background-color: #f9f9f9;}
-        .item { border-bottom: 1px solid #eee; padding: 10px 0; display: flex; align-items: flex-start; }
+        .item { border-bottom: 1px solid #eee; padding: 10px 0; }
         .item:last-child { border-bottom: none; }
-        .item-image { width: 50px; height: 50px; object-fit: cover; border-radius: 4px; margin-right: 10px; background-color: #e0e0e0; }
-        .item-details h3 { margin: 0 0 5px 0; }
-        .item-details p { margin: 3px 0; font-size: 0.9em; color: #555; }
+        .item h3 { margin: 0 0 5px 0; }
+        .item p { margin: 3px 0; font-size: 0.9em; color: #555; }
+        .item img { max-width: 100px; max-height: 100px; border-radius: 4px; margin-top: 5px;}
         .button { padding: 8px 15px; border: none; border-radius: 4px; cursor: pointer; font-size: 0.9em; margin-right: 5px; }
         .button-primary { background-color: #007bff; color: white; }
         .button-danger { background-color: #dc3545; color: white; }
@@ -935,43 +885,79 @@ ADMIN_TEMPLATE = '''
         <div class="section">
             <h2>Data Synchronization with Hugging Face</h2>
             <div class="sync-buttons">
-                <form method="POST" action="{{ url_for('force_upload_admin') }}" onsubmit="return confirm('Upload local data AND images to Hugging Face? This will overwrite server data.');">
-                    <button type="submit" class="button button-primary">Upload All to HF</button>
+                <form method="POST" action="{{ url_for('force_upload_admin') }}" onsubmit="return confirm('Upload local data to Hugging Face? This will overwrite server data.');">
+                    <button type="submit" class="button button-primary">Upload DB to HF</button>
                 </form>
-                <form method="POST" action="{{ url_for('force_download_admin') }}" onsubmit="return confirm('Download data AND images from Hugging Face? This will overwrite local data.');">
-                    <button type="submit" class="button button-secondary">Download All from HF</button>
+                <form method="POST" action="{{ url_for('force_download_admin') }}" onsubmit="return confirm('Download data from Hugging Face? This will overwrite local data.');">
+                    <button type="submit" class="button button-secondary">Download DB from HF</button>
                 </form>
             </div>
-            <p style="font-size: 0.8em; color: #666;">Automatic backup runs every 30 minutes if HF_TOKEN_WRITE is set.</p>
+            <p style="font-size: 0.8em; color: #666;">Automatic backup runs every 30 minutes if HF_TOKEN_WRITE is set. Images are NOT synced to HF, only their references in the database.</p>
         </div>
 
-        {% for item_type_plural, items_list in [('Resumes', resumes), ('Vacancies', vacancies), ('Freelance Offers', freelance_offers)] %}
         <div class="section">
-            <h2>{{ item_type_plural }} ({{ items_list|length }})</h2>
-            {% for item in items_list %}
+            <h2>Resumes ({{ resumes|length }})</h2>
+            {% for resume in resumes %}
             <div class="item">
-                {% if item.image_filename %}
-                <img src="{{ url_for('serve_uploaded_image', filename=item.image_filename) }}" class="item-image" alt="Image">
-                {% else %}
-                <div class="item-image"></div>
+                <h3>{{ resume.name }} - {{ resume.title }}</h3>
+                <p>User ID: {{ resume.user_id }} (@{{ resume.user_telegram_username }})</p>
+                <p>Posted: {{ resume.timestamp }}</p>
+                {% if resume.image_filename %}
+                    <img src="{{ url_for('uploaded_file', filename=resume.image_filename) }}" alt="Resume image">
                 {% endif %}
-                <div class="item-details">
-                    <h3>{{ item.title or item.name }} {% if item.company_name %}- {{ item.company_name }}{% endif %}</h3>
-                    <p>ID: {{ item.id }}</p>
-                    <p>User ID: {{ item.user_id }} (@{{ item.user_telegram_username }})</p>
-                    <p>Posted: {{ item.timestamp }}</p>
-                     <form method="POST" action="{{ url_for('admin_delete_item') }}" style="display:inline;" onsubmit="return confirm('Delete this item?');">
-                        <input type="hidden" name="item_type" value="{{ item_type_plural.lower().replace(' ', '_') }}">
-                        <input type="hidden" name="item_id" value="{{ item.id }}">
-                        <button type="submit" class="button button-danger">Delete</button>
-                    </form>
-                </div>
+                <form method="POST" action="{{ url_for('admin_delete_item') }}" style="display:inline;" onsubmit="return confirm('Delete this resume?');">
+                    <input type="hidden" name="item_type" value="resumes">
+                    <input type="hidden" name="item_id" value="{{ resume.id }}">
+                    <button type="submit" class="button button-danger">Delete</button>
+                </form>
             </div>
             {% else %}
-            <p>No {{ item_type_plural.lower() }} found.</p>
+            <p>No resumes found.</p>
+            {% endfor %}
+        </div>
+
+        <div class="section">
+            <h2>Vacancies ({{ vacancies|length }})</h2>
+            {% for vacancy in vacancies %}
+            <div class="item">
+                <h3>{{ vacancy.title }} - {{ vacancy.company_name }}</h3>
+                <p>User ID: {{ vacancy.user_id }} (@{{ vacancy.user_telegram_username }})</p>
+                <p>Posted: {{ vacancy.timestamp }}</p>
+                {% if vacancy.image_filename %}
+                    <img src="{{ url_for('uploaded_file', filename=vacancy.image_filename) }}" alt="Vacancy image">
+                {% endif %}
+                <form method="POST" action="{{ url_for('admin_delete_item') }}" style="display:inline;" onsubmit="return confirm('Delete this vacancy?');">
+                    <input type="hidden" name="item_type" value="vacancies">
+                    <input type="hidden" name="item_id" value="{{ vacancy.id }}">
+                    <button type="submit" class="button button-danger">Delete</button>
+                </form>
+            </div>
+            {% else %}
+            <p>No vacancies found.</p>
+            {% endfor %}
+        </div>
+
+        <div class="section">
+            <h2>Freelance Offers ({{ freelance_offers|length }})</h2>
+            {% for offer in freelance_offers %}
+            <div class="item">
+                <h3>{{ offer.title }}</h3>
+                <p>User ID: {{ offer.user_id }} (@{{ offer.user_telegram_username }})</p>
+                <p>Budget: {{ offer.budget }}</p>
+                <p>Posted: {{ offer.timestamp }}</p>
+                {% if offer.image_filename %}
+                    <img src="{{ url_for('uploaded_file', filename=offer.image_filename) }}" alt="Offer image">
+                {% endif %}
+                <form method="POST" action="{{ url_for('admin_delete_item') }}" style="display:inline;" onsubmit="return confirm('Delete this freelance offer?');">
+                    <input type="hidden" name="item_type" value="freelance_offers">
+                    <input type="hidden" name="item_id" value="{{ offer.id }}">
+                    <button type="submit" class="button button-danger">Delete</button>
+                </form>
+            </div>
+            {% else %}
+            <p>No freelance offers found.</p>
             {% endfor %}
         </div>
-        {% endfor %}
     </div>
 </body>
 </html>
@@ -981,8 +967,8 @@ ADMIN_TEMPLATE = '''
 def main_app_view():
     return render_template_string(MAIN_APP_TEMPLATE)
 
-@app.route('/uploads/<filename>')
-def serve_uploaded_image(filename):
+@app.route('/uploads/<path:filename>')
+def uploaded_file(filename):
     return send_from_directory(app.config['UPLOAD_FOLDER'], filename)
 
 @app.route('/api/auth_user', methods=['POST'])
@@ -1014,8 +1000,16 @@ def auth_user():
             'photo_url': user_data_from_tg.get('photo_url'),
             'first_seen': datetime.now().isoformat()
         }
+    else: # Update user data if it changed in TG
+        users[user_id_str].update({
+            'first_name': user_data_from_tg.get('first_name'),
+            'last_name': user_data_from_tg.get('last_name'),
+            'username': user_data_from_tg.get('username'),
+            'language_code': user_data_from_tg.get('language_code'),
+            'photo_url': user_data_from_tg.get('photo_url'),
+        })
+        
     users[user_id_str]['last_seen'] = datetime.now().isoformat()
-    users[user_id_str]['photo_url'] = user_data_from_tg.get('photo_url', users[user_id_str].get('photo_url')) # Update photo_url if changed
     data['users'] = users
     save_data(data)
     
@@ -1025,9 +1019,12 @@ def get_authenticated_user(request_obj):
     auth_data_str = request_obj.headers.get('X-Telegram-Auth')
     if not auth_data_str:
         return None
-    is_valid, user_data_from_tg = verify_telegram_auth_data(auth_data_str, TELEGRAM_BOT_TOKEN)
-    if is_valid and user_data_from_tg:
-        return user_data_from_tg
+    is_valid, user_data = verify_telegram_auth_data(auth_data_str, TELEGRAM_BOT_TOKEN)
+    if is_valid and user_data:
+        data = load_data()
+        # Return the user data stored in our system, which might have more/different info
+        # or fallback to TG provided data if user not in our DB (should not happen after auth_user)
+        return data.get('users', {}).get(str(user_data.get('id')), user_data)
     return None
 
 @app.route('/api/<item_type>', methods=['GET'])
@@ -1048,19 +1045,6 @@ def get_item(item_type, item_id):
         return jsonify(item), 200
     return jsonify({"error": "Item not found"}), 404
 
-def process_and_save_item_image(request_files, item_data):
-    if 'image' in request_files:
-        file = request_files['image']
-        if file and file.filename != '':
-            ensure_images_folder_exists()
-            filename = secure_filename(f"{uuid.uuid4()}_{file.filename}")
-            filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
-            file.save(filepath)
-            item_data['image_filename'] = filename
-            upload_single_image_to_hf(filepath, filename)
-            return filename
-    return None
-
 @app.route('/api/<item_type>', methods=['POST'])
 def create_item(item_type):
     user = get_authenticated_user(request)
@@ -1070,9 +1054,8 @@ def create_item(item_type):
     if item_type not in ['resumes', 'vacancies', 'freelance_offers']:
         return jsonify({"error": "Invalid item type"}), 400
     
-    req_data_form = request.form 
-    if not req_data_form:
-        return jsonify({"error": "No data provided"}), 400
+    if not request.form:
+        return jsonify({"error": "No form data provided"}), 400
 
     new_item = {
         "id": str(uuid.uuid4()),
@@ -1081,37 +1064,43 @@ def create_item(item_type):
         "timestamp": datetime.now().isoformat(),
         "image_filename": None
     }
+
+    image_file = request.files.get('item_image')
+    if image_file and allowed_file(image_file.filename):
+        filename = secure_filename(f"{new_item['id']}_{image_file.filename}")
+        image_file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
+        new_item["image_filename"] = filename
     
-    process_and_save_item_image(request.files, new_item)
+    req_data = request.form
 
     if item_type == 'resumes':
         required_fields = ['name', 'title']
         for field in required_fields:
-            if not req_data_form.get(field): return jsonify({"error": f"Missing field: {field}"}), 400
+            if not req_data.get(field): return jsonify({"error": f"Missing field: {field}"}), 400
         new_item.update({
-            "name": req_data_form.get('name'), "title": req_data_form.get('title'),
-            "skills": req_data_form.get('skills', ''), "experience": req_data_form.get('experience', ''),
-            "education": req_data_form.get('education', ''), "contact": req_data_form.get('contact', ''),
-            "portfolio_link": req_data_form.get('portfolio_link', '')
+            "name": req_data.get('name'), "title": req_data.get('title'),
+            "skills": req_data.get('skills', ''), "experience": req_data.get('experience', ''),
+            "education": req_data.get('education', ''), "contact": req_data.get('contact', ''),
+            "portfolio_link": req_data.get('portfolio_link', '')
         })
     elif item_type == 'vacancies':
         required_fields = ['company_name', 'title']
         for field in required_fields:
-            if not req_data_form.get(field): return jsonify({"error": f"Missing field: {field}"}), 400
+            if not req_data.get(field): return jsonify({"error": f"Missing field: {field}"}), 400
         new_item.update({
-            "company_name": req_data_form.get('company_name'), "title": req_data_form.get('title'),
-            "description": req_data_form.get('description', ''), "requirements": req_data_form.get('requirements', ''),
-            "salary": req_data_form.get('salary', ''), "location": req_data_form.get('location', ''),
-            "contact": req_data_form.get('contact', '')
+            "company_name": req_data.get('company_name'), "title": req_data.get('title'),
+            "description": req_data.get('description', ''), "requirements": req_data.get('requirements', ''),
+            "salary": req_data.get('salary', ''), "location": req_data.get('location', ''),
+            "contact": req_data.get('contact', '')
         })
     elif item_type == 'freelance_offers':
         required_fields = ['title']
         for field in required_fields:
-            if not req_data_form.get(field): return jsonify({"error": f"Missing field: {field}"}), 400
+            if not req_data.get(field): return jsonify({"error": f"Missing field: {field}"}), 400
         new_item.update({
-            "title": req_data_form.get('title'), "description": req_data_form.get('description', ''),
-            "budget": req_data_form.get('budget', ''), "deadline": req_data_form.get('deadline', ''),
-            "skills_needed": req_data_form.get('skills_needed', ''), "contact": req_data_form.get('contact', '')
+            "title": req_data.get('title'), "description": req_data.get('description', ''),
+            "budget": req_data.get('budget', ''), "deadline": req_data.get('deadline', ''),
+            "skills_needed": req_data.get('skills_needed', ''), "contact": req_data.get('contact', '')
         })
     
     data = load_data()
@@ -1127,8 +1116,7 @@ def update_item(item_type, item_id):
     if item_type not in ['resumes', 'vacancies', 'freelance_offers']:
         return jsonify({"error": "Invalid item type"}), 400
     
-    req_data_form = request.form
-    if not req_data_form: return jsonify({"error": "No data provided"}), 400
+    if not request.form: return jsonify({"error": "No form data provided"}), 400
 
     data = load_data()
     items_list = data.get(item_type, [])
@@ -1146,45 +1134,50 @@ def update_item(item_type, item_id):
 
     updated_item = original_item.copy()
     updated_item['updated_timestamp'] = datetime.now().isoformat()
+    
+    req_data = request.form
+    
+    image_file = request.files.get('item_image')
+    if image_file and allowed_file(image_file.filename):
+        if original_item.get("image_filename"):
+            try:
+                os.remove(os.path.join(app.config['UPLOAD_FOLDER'], original_item["image_filename"]))
+            except OSError as e:
+                logging.error(f"Error deleting old image {original_item['image_filename']}: {e}")
+        
+        filename = secure_filename(f"{item_id}_{image_file.filename}")
+        image_file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
+        updated_item["image_filename"] = filename
 
-    old_image_filename = original_item.get('image_filename')
-    new_image_filename = process_and_save_item_image(request.files, updated_item)
 
-    if new_image_filename and old_image_filename and new_image_filename != old_image_filename:
-        try:
-            os.remove(os.path.join(app.config['UPLOAD_FOLDER'], old_image_filename))
-            delete_image_from_hf(old_image_filename)
-        except OSError as e:
-            logging.error(f"Error deleting old local image {old_image_filename}: {e}")
-    
     if item_type == 'resumes':
         updated_item.update({
-            "name": req_data_form.get('name', original_item.get('name')), 
-            "title": req_data_form.get('title', original_item.get('title')),
-            "skills": req_data_form.get('skills', original_item.get('skills')), 
-            "experience": req_data_form.get('experience', original_item.get('experience')),
-            "education": req_data_form.get('education', original_item.get('education')), 
-            "contact": req_data_form.get('contact', original_item.get('contact')),
-            "portfolio_link": req_data_form.get('portfolio_link', original_item.get('portfolio_link'))
+            "name": req_data.get('name', original_item.get('name')), 
+            "title": req_data.get('title', original_item.get('title')),
+            "skills": req_data.get('skills', original_item.get('skills')), 
+            "experience": req_data.get('experience', original_item.get('experience')),
+            "education": req_data.get('education', original_item.get('education')), 
+            "contact": req_data.get('contact', original_item.get('contact')),
+            "portfolio_link": req_data.get('portfolio_link', original_item.get('portfolio_link'))
         })
     elif item_type == 'vacancies':
-         updated_item.update({
-            "company_name": req_data_form.get('company_name', original_item.get('company_name')), 
-            "title": req_data_form.get('title', original_item.get('title')),
-            "description": req_data_form.get('description', original_item.get('description')), 
-            "requirements": req_data_form.get('requirements', original_item.get('requirements')),
-            "salary": req_data_form.get('salary', original_item.get('salary')), 
-            "location": req_data_form.get('location', original_item.get('location')),
-            "contact": req_data_form.get('contact', original_item.get('contact'))
+        updated_item.update({
+            "company_name": req_data.get('company_name', original_item.get('company_name')), 
+            "title": req_data.get('title', original_item.get('title')),
+            "description": req_data.get('description', original_item.get('description')), 
+            "requirements": req_data.get('requirements', original_item.get('requirements')),
+            "salary": req_data.get('salary', original_item.get('salary')), 
+            "location": req_data.get('location', original_item.get('location')),
+            "contact": req_data.get('contact', original_item.get('contact'))
         })
     elif item_type == 'freelance_offers':
          updated_item.update({
-            "title": req_data_form.get('title', original_item.get('title')), 
-            "description": req_data_form.get('description', original_item.get('description')),
-            "budget": req_data_form.get('budget', original_item.get('budget')), 
-            "deadline": req_data_form.get('deadline', original_item.get('deadline')),
-            "skills_needed": req_data_form.get('skills_needed', original_item.get('skills_needed')), 
-            "contact": req_data_form.get('contact', original_item.get('contact'))
+            "title": req_data.get('title', original_item.get('title')), 
+            "description": req_data.get('description', original_item.get('description')),
+            "budget": req_data.get('budget', original_item.get('budget')), 
+            "deadline": req_data.get('deadline', original_item.get('deadline')),
+            "skills_needed": req_data.get('skills_needed', original_item.get('skills_needed')), 
+            "contact": req_data.get('contact', original_item.get('contact'))
         })
 
     data[item_type][item_index] = updated_item
@@ -1201,26 +1194,23 @@ def delete_item(item_type, item_id):
 
     data = load_data()
     items_list = data.get(item_type, [])
-    original_length = len(items_list)
     
     item_to_delete = next((i for i in items_list if i['id'] == item_id), None)
     if not item_to_delete: return jsonify({"error": "Item not found"}), 404
 
     if str(item_to_delete.get('user_id')) != str(user.get('id')):
         return jsonify({"error": "Forbidden: You can only delete your own items"}), 403
-
-    image_filename_to_delete = item_to_delete.get('image_filename')
-    if image_filename_to_delete:
-        try:
-            os.remove(os.path.join(app.config['UPLOAD_FOLDER'], image_filename_to_delete))
-            logging.info(f"Deleted local image: {image_filename_to_delete}")
-        except OSError as e:
-            logging.error(f"Error deleting local image {image_filename_to_delete}: {e}")
-        delete_image_from_hf(image_filename_to_delete)
-
+    
+    original_length = len(items_list)
     data[item_type] = [i for i in items_list if i['id'] != item_id]
     
     if len(data[item_type]) < original_length:
+        if item_to_delete.get("image_filename"):
+            try:
+                os.remove(os.path.join(app.config['UPLOAD_FOLDER'], item_to_delete["image_filename"]))
+                logging.info(f"Deleted image {item_to_delete['image_filename']} for item {item_id}")
+            except OSError as e:
+                logging.error(f"Error deleting image {item_to_delete['image_filename']}: {e}")
         save_data(data)
         return jsonify({"message": "Item deleted successfully"}), 200
     return jsonify({"error": "Item not found or deletion failed"}), 404
@@ -1229,63 +1219,50 @@ def delete_item(item_type, item_id):
 @app.route('/admin', methods=['GET'])
 def admin_panel():
     data = load_data()
-    # Map item_type_plural to the correct key in data
-    item_type_map = {
-        'resumes': 'resumes',
-        'vacancies': 'vacancies',
-        'freelance_offers': 'freelance_offers' # Key for freelance_offers in data
-    }
     return render_template_string(ADMIN_TEMPLATE,
-                                  resumes=sorted(data.get(item_type_map['resumes'], []), key=lambda x: x.get('timestamp', ''), reverse=True),
-                                  vacancies=sorted(data.get(item_type_map['vacancies'], []), key=lambda x: x.get('timestamp', ''), reverse=True),
-                                  freelance_offers=sorted(data.get(item_type_map['freelance_offers'], []), key=lambda x: x.get('timestamp', ''), reverse=True))
-
+                                  resumes=sorted(data.get('resumes', []), key=lambda x: x.get('timestamp', ''), reverse=True),
+                                  vacancies=sorted(data.get('vacancies', []), key=lambda x: x.get('timestamp', ''), reverse=True),
+                                  freelance_offers=sorted(data.get('freelance_offers', []), key=lambda x: x.get('timestamp', ''), reverse=True))
 
 @app.route('/admin/delete', methods=['POST'])
 def admin_delete_item():
-    item_type_form_value = request.form.get('item_type') # e.g., "resumes", "vacancies", "freelance_offers"
+    item_type = request.form.get('item_type')
     item_id = request.form.get('item_id')
 
-    # Ensure item_type_form_value is one of the valid keys for data dictionary
-    valid_item_types = ['resumes', 'vacancies', 'freelance_offers']
-    if not item_type_form_value or not item_id or item_type_form_value not in valid_item_types:
+    if not item_type or not item_id or item_type not in ['resumes', 'vacancies', 'freelance_offers']:
         flash('Invalid item type or ID for deletion.', 'error')
         return redirect(url_for('admin_panel'))
 
     data = load_data()
-    items_list = data.get(item_type_form_value, [])
-    original_length = len(items_list)
+    items_list = data.get(item_type, [])
     
     item_to_delete = next((i for i in items_list if i['id'] == item_id), None)
-    
-    if item_to_delete:
-        image_filename_to_delete = item_to_delete.get('image_filename')
-        if image_filename_to_delete:
+    if not item_to_delete:
+        flash('Item not found or already deleted.', 'warning')
+        return redirect(url_for('admin_panel'))
+
+    original_length = len(items_list)
+    data[item_type] = [i for i in items_list if i['id'] != item_id]
+
+    if len(data[item_type]) < original_length:
+        if item_to_delete.get("image_filename"):
             try:
-                os.remove(os.path.join(app.config['UPLOAD_FOLDER'], image_filename_to_delete))
-                logging.info(f"Admin deleted local image: {image_filename_to_delete}")
+                os.remove(os.path.join(app.config['UPLOAD_FOLDER'], item_to_delete["image_filename"]))
+                logging.info(f"Admin deleted image {item_to_delete['image_filename']} for item {item_id}")
             except OSError as e:
-                logging.error(f"Admin error deleting local image {image_filename_to_delete}: {e}")
-            delete_image_from_hf(image_filename_to_delete)
-
-        data[item_type_form_value] = [i for i in items_list if i['id'] != item_id]
-        if len(data[item_type_form_value]) < original_length:
-            save_data(data)
-            flash(f'{item_type_form_value.capitalize().replace("_", " ")[:-1]} deleted successfully.', 'success')
-        else:
-            flash('Item not found or already deleted.', 'warning') # Should not happen if item_to_delete was found
+                logging.error(f"Admin error deleting image {item_to_delete['image_filename']}: {e}")
+        save_data(data)
+        flash(f'{item_type.capitalize()[:-1]} deleted successfully.', 'success')
     else:
-        flash('Item not found.', 'warning')
-        
+        flash('Item not found or already deleted.', 'warning')
     return redirect(url_for('admin_panel'))
 
 @app.route('/admin/force_upload', methods=['POST'])
 def force_upload_admin():
     logging.info("Admin forcing upload to Hugging Face...")
     try:
-        upload_data_file_to_hf()
-        upload_images_folder_to_hf()
-        flash("Data and images successfully uploaded to Hugging Face.", 'success')
+        upload_db_to_hf()
+        flash("Data successfully uploaded to Hugging Face.", 'success')
     except Exception as e:
         logging.error(f"Error during forced upload: {e}", exc_info=True)
         flash(f"Error uploading to Hugging Face: {e}", 'error')
@@ -1295,17 +1272,11 @@ def force_upload_admin():
 def force_download_admin():
     logging.info("Admin forcing download from Hugging Face...")
     try:
-        data_download_ok = download_data_file_from_hf()
-        images_download_ok = download_images_folder_from_hf() # Call new function
-        if data_download_ok : # Check if data file download was specifically ok
-            flash("Data file successfully downloaded from Hugging Face. Local files updated.", 'success')
-            if images_download_ok:
-                 flash("Images folder also successfully downloaded/updated from Hugging Face.", 'success')
-            else:
-                 flash("Images folder download/update failed or was skipped. Check logs.", 'warning')
+        if download_db_from_hf():
+            flash("Data successfully downloaded from Hugging Face. Local files updated.", 'success')
             load_data() 
         else:
-            flash("Failed to download data file from Hugging Face. Check logs.", 'error')
+            flash("Failed to download data from Hugging Face. Check logs.", 'error')
     except Exception as e:
         logging.error(f"Error during forced download: {e}", exc_info=True)
         flash(f"Error downloading from Hugging Face: {e}", 'error')
@@ -1313,12 +1284,11 @@ def force_download_admin():
 
 
 if __name__ == '__main__':
-    ensure_images_folder_exists()
-    logging.info("Application starting up. Performing initial data and image sync...")
-    download_data_file_from_hf() 
-    download_images_folder_from_hf()
-    load_data() # This will load the data file, potentially creating a default if download failed
-    logging.info("Initial data load and image sync complete.")
+    ensure_upload_folder()
+    logging.info("Application starting up. Performing initial data load/download...")
+    download_db_from_hf() 
+    load_data()
+    logging.info("Initial data load complete.")
 
     if HF_TOKEN_WRITE:
         backup_thread = threading.Thread(target=periodic_backup, daemon=True)