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,34 +19,57 @@ 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'
-UPLOAD_DIR = 'uploads' # Directory to store uploaded images
-os.makedirs(UPLOAD_DIR, exist_ok=True)
+UPLOADS_DIR_NAME = 'uploads'
+app.config['UPLOADS_DIR'] = os.path.join(app.root_path, UPLOADS_DIR_NAME)
 
-# SYNC_FILES now primarily refers to the main JSON data file. Images are handled separately.
-SYNC_FILES = [DATA_FILE] 
+SYNC_FILES = [DATA_FILE]
 
 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") # Can be same as 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" # Placeholder, use actual token
 
 DOWNLOAD_RETRIES = 3
 DOWNLOAD_DELAY = 5
+ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif'}
 
 logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(message)s')
 
+if not os.path.exists(app.config['UPLOADS_DIR']):
+    os.makedirs(app.config['UPLOADS_DIR'], exist_ok=True)
+for item_type_subdir in ['resumes', 'vacancies', 'freelance_offers']:
+    path = os.path.join(app.config['UPLOADS_DIR'], item_type_subdir)
+    os.makedirs(path, exist_ok=True)
+
+def allowed_file(filename):
+    return '.' in filename and \
+           filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
+
+def delete_existing_image(image_url):
+    if not image_url:
+        return
+    try:
+        image_path_parts = image_url.split('/')
+        if len(image_path_parts) == 4 and image_path_parts[1] == UPLOADS_DIR_NAME:
+            # ['', 'uploads', 'item_type_subdir', 'filename.ext']
+            item_type_subdir = image_path_parts[2]
+            img_filename = image_path_parts[3]
+            local_image_path = os.path.join(app.config['UPLOADS_DIR'], item_type_subdir, img_filename)
+            if os.path.exists(local_image_path):
+                os.remove(local_image_path)
+                logging.info(f"Deleted old image: {local_image_path}")
+    except Exception as e:
+        logging.error(f"Error deleting image from URL {image_url}: {e}")
+
+
 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
-    
     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
-
-    data_file_downloaded_this_run = False
-
     for file_name in files_to_download:
         success = False
         for attempt in range(retries + 1):
@@ -58,8 +81,6 @@ def download_db_from_hf(specific_file=None, retries=DOWNLOAD_RETRIES, delay=DOWN
                     force_download=True, resume_download=False
                 )
                 logging.info(f"Successfully downloaded {file_name} to {local_path}.")
-                if file_name == DATA_FILE:
-                    data_file_downloaded_this_run = True
                 success = True
                 break
             except RepositoryNotFoundError:
@@ -68,15 +89,16 @@ def download_db_from_hf(specific_file=None, retries=DOWNLOAD_RETRIES, delay=DOWN
             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 file_name == DATA_FILE and attempt == 0 and not os.path.exists(file_name):
+                    if attempt == 0 and not os.path.exists(file_name):
                         try:
-                            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.")
+                            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 
+                    success = False
+                    break
                 else:
                     logging.error(f"HTTP error downloading {file_name} (Attempt {attempt + 1}): {e}. Retrying in {delay}s...")
             except Exception as e:
@@ -85,133 +107,33 @@ def download_db_from_hf(specific_file=None, retries=DOWNLOAD_RETRIES, delay=DOWN
         if not success:
             logging.error(f"Failed to download {file_name} after {retries + 1} attempts.")
             all_successful = False
-
-    if data_file_downloaded_this_run and all_successful: # Download associated images only if DATA_FILE was successfully downloaded
-        logging.info(f"Data file {DATA_FILE} downloaded. Attempting to download associated images.")
-        try:
-            with open(DATA_FILE, 'r', encoding='utf-8') as f:
-                data = json.load(f)
-            
-            os.makedirs(UPLOAD_DIR, exist_ok=True)
-            image_filenames = set()
-            for item_type in ['resumes', 'vacancies', 'freelance_offers']:
-                for item in data.get(item_type, []):
-                    if item.get('image_filename'):
-                        image_filenames.add(item['image_filename'])
-            
-            logging.info(f"Found {len(image_filenames)} unique image references in {DATA_FILE}.")
-            for img_filename in image_filenames:
-                repo_img_path = f"{UPLOAD_DIR}/{img_filename}" 
-                local_img_path = os.path.join(UPLOAD_DIR, img_filename)
-                img_success = False
-                for attempt in range(retries + 1):
-                    try:
-                        logging.info(f"Downloading image {repo_img_path} (Attempt {attempt + 1})...")
-                        # This will save to UPLOAD_DIR/img_filename if filename in repo is UPLOAD_DIR/img_filename
-                        # Correct way is to download 'uploads/image.jpg' to local './uploads/image.jpg'
-                        downloaded_path = hf_hub_download(
-                            repo_id=REPO_ID, filename=repo_img_path, repo_type="dataset",
-                            token=token_to_use, local_dir=".", local_dir_use_symlinks=False, # Download relative to project root
-                            force_download=True, resume_download=False
-                        )
-                        # Ensure the downloaded file is where we expect it
-                        expected_local_path = os.path.abspath(os.path.join(".", repo_img_path)) # e.g. /app/uploads/image.jpg
-                        if os.path.abspath(downloaded_path) == expected_local_path:
-                             logging.info(f"Successfully downloaded image {repo_img_path} to {downloaded_path}.")
-                        else:
-                            # This case should ideally not happen if paths are constructed correctly.
-                            # If it does, we might need to move the file.
-                            os.makedirs(os.path.dirname(local_img_path), exist_ok=True)
-                            if os.path.exists(local_img_path): os.remove(local_img_path) # remove if it exists from previous failed attempt
-                            os.rename(downloaded_path, local_img_path)
-                            logging.info(f"Downloaded image {repo_img_path} and moved to {local_img_path}.")
-
-                        img_success = True
-                        break
-                    except HfHubHTTPError as e_img:
-                        if e_img.response.status_code == 404:
-                            logging.warning(f"Image {repo_img_path} not found in repo {REPO_ID} (404). Skipping.")
-                            break 
-                        else:
-                            logging.error(f"HTTP error downloading image {repo_img_path} (Attempt {attempt + 1}): {e_img}. Retrying in {delay}s...")
-                    except Exception as e_img:
-                        logging.error(f"Unexpected error downloading image {repo_img_path} (Attempt {attempt + 1}): {e_img}. Retrying in {delay}s...", exc_info=True)
-                    if attempt < retries: time.sleep(delay)
-                if not img_success:
-                    logging.error(f"Failed to download image {repo_img_path} after {retries + 1} attempts.")
-                    # Not setting all_successful to False for image failures, as core data might be usable.
-        except Exception as e:
-            logging.error(f"Error processing images after downloading {DATA_FILE}: {e}", exc_info=True)
-
-    logging.info(f"Download process finished. Overall success for core files: {all_successful}")
+    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 upload to Hugging Face.")
         return
-    
-    api = HfApi()
-    
-    # Handle main data file
-    files_to_upload_main = [specific_file] if specific_file and specific_file == DATA_FILE else ([DATA_FILE] if not specific_file else [])
-    
-    for file_name in files_to_upload_main:
-        if os.path.exists(file_name):
-            try:
-                logging.info(f"Uploading main data file {file_name} to HF repo {REPO_ID}...")
-                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.")
-
-    # Handle associated image files if DATA_FILE was part of the upload scope
-    if DATA_FILE in files_to_upload_main or not specific_file:
-        logging.info(f"Checking for images to upload based on {DATA_FILE} content...")
-        try:
-            if not os.path.exists(DATA_FILE):
-                logging.warning(f"{DATA_FILE} not found locally. Cannot determine images to upload.")
-                return
-
-            with open(DATA_FILE, 'r', encoding='utf-8') as f:
-                data = json.load(f)
-            
-            image_filenames = set()
-            for item_type in ['resumes', 'vacancies', 'freelance_offers']:
-                for item in data.get(item_type, []):
-                    if item.get('image_filename'):
-                        image_filenames.add(item['image_filename'])
-            
-            logging.info(f"Found {len(image_filenames)} unique image references in {DATA_FILE} for potential upload.")
-            for img_filename in image_filenames:
-                local_img_path = os.path.join(UPLOAD_DIR, img_filename)
-                repo_img_path = f"{UPLOAD_DIR}/{img_filename}" # Path in HF repo, e.g., "uploads/image.jpg"
-                
-                if os.path.exists(local_img_path):
-                    try:
-                        logging.info(f"Uploading image {local_img_path} to {repo_img_path} in HF repo {REPO_ID}...")
-                        api.upload_file(
-                            path_or_fileobj=local_img_path, path_in_repo=repo_img_path, repo_id=REPO_ID,
-                            repo_type="dataset", token=HF_TOKEN_WRITE,
-                            commit_message=f"Sync image {img_filename} {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}"
-                        )
-                        logging.info(f"Image {img_filename} successfully uploaded to Hugging Face.")
-                    except Exception as e:
-                        logging.error(f"Error uploading image {img_filename} to Hugging Face: {e}")
-                else:
-                    logging.warning(f"Image {local_img_path} referenced in {DATA_FILE} but not found locally. Skipping upload.")
-        except Exception as e:
-            logging.error(f"Error processing images for upload: {e}", exc_info=True)
-    
-    logging.info("Finished Hugging Face upload process.")
-
+    try:
+        api = HfApi()
+        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"General error during Hugging Face upload initialization or process: {e}", exc_info=True)
 
 def periodic_backup():
     backup_interval = 1800
@@ -219,7 +141,7 @@ def periodic_backup():
     while True:
         time.sleep(backup_interval)
         logging.info("Starting periodic backup...")
-        upload_db_to_hf() # This will now also handle images based on DATA_FILE
+        upload_db_to_hf()
         logging.info("Periodic backup finished.")
 
 def load_data():
@@ -230,14 +152,13 @@ def load_data():
         logging.info(f"Local data loaded successfully from {DATA_FILE}")
         if not isinstance(data, dict):
              logging.warning(f"Local {DATA_FILE} is not a dictionary. Attempting download.")
-             raise FileNotFoundError # Trigger download logic
+             raise FileNotFoundError
         for key in default_data:
             if key not in data: data[key] = default_data[key]
         return data
     except (FileNotFoundError, json.JSONDecodeError) as e:
         logging.warning(f"Error loading local data ({e}). Attempting download from HF.")
 
-    # This download_db_from_hf will also handle images if DATA_FILE is downloaded
     if download_db_from_hf(specific_file=DATA_FILE):
         try:
             with open(DATA_FILE, 'r', encoding='utf-8') as file:
@@ -274,8 +195,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 and any referenced images
-        upload_db_to_hf(specific_file=DATA_FILE) 
+        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)
 
@@ -340,9 +260,9 @@ MAIN_APP_TEMPLATE = '''
             overscroll-behavior-y: none;
             -webkit-font-smoothing: antialiased;
             -moz-osx-font-smoothing: grayscale;
-            overflow-x: hidden; /* Prevent horizontal scroll from swipe */
+            transition: background-color 0.3s, color 0.3s;
         }
-        .app-container { display: flex; flex-direction: column; min-height: 100vh; width: 100%; overflow: hidden;}
+        .app-container { display: flex; flex-direction: column; min-height: 100vh; }
         .header {
             background-color: var(--tg-theme-header-bg-color);
             padding: 10px 15px;
@@ -353,8 +273,9 @@ MAIN_APP_TEMPLATE = '''
             position: sticky;
             top: 0;
             z-index: 100;
+            transition: background-color 0.3s, border-bottom-color 0.3s;
         }
-        .tabs { display: flex; background-color: var(--tg-theme-secondary-bg-color); padding: 5px; }
+        .tabs { display: flex; background-color: var(--tg-theme-secondary-bg-color); padding: 5px; transition: background-color 0.3s; }
         .tab-button {
             flex: 1;
             padding: 10px;
@@ -369,38 +290,38 @@ MAIN_APP_TEMPLATE = '''
             transition: color 0.2s, border-bottom-color 0.2s;
         }
         .tab-button.active { color: var(--tg-theme-link-color); border-bottom-color: var(--tg-theme-link-color); }
-        .content-wrapper { flex-grow: 1; display: flex; width: 300%; /* For 3 tabs */ transition: transform 0.3s ease-in-out; }
-        .content-pane { width: calc(100% / 3); padding: 15px; box-sizing: border-box; overflow-y: auto;}
+        .content { flex-grow: 1; padding: 15px; transition: opacity 0.3s ease-in-out; }
         .list-item {
             background-color: var(--tg-theme-section-bg-color);
-            border-radius: 8px;
+            border-radius: 12px;
             padding: 12px 15px;
             margin-bottom: 10px;
-            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
             cursor: pointer;
-            transition: background-color 0.2s;
+            transition: background-color 0.2s, transform 0.1s;
         }
-        .list-item:active { background-color: var(--tg-theme-secondary-bg-color); }
+        .list-item:active { background-color: var(--tg-theme-secondary-bg-color); transform: scale(0.98); }
         .list-item h3 { margin: 0 0 5px 0; font-size: 16px; font-weight: 600; color: var(--tg-theme-text-color); }
         .list-item p { margin: 0 0 3px 0; font-size: 14px; color: var(--tg-theme-hint-color); }
         .list-item .meta { font-size: 12px; color: var(--tg-theme-hint-color); }
-        .list-item img.item-image-thumbnail { max-width: 100px; max-height: 100px; border-radius: 4px; margin-top: 5px; object-fit: cover;}
-        .form-container { padding: 15px; background-color: var(--tg-theme-section-bg-color); }
+        .list-item-image { width: 60px; height: 60px; border-radius: 8px; object-fit: cover; margin-right: 12px; background-color: var(--tg-theme-secondary-bg-color); }
+        .list-item-content { display: flex; align-items: center; }
+
+        .form-container { padding: 15px; background-color: var(--tg-theme-section-bg-color); border-radius: 12px; margin-bottom: 15px;}
         .form-group { margin-bottom: 15px; }
-        .form-group label { display: block; font-size: 14px; color: var(--tg-theme-section-header-text-color); margin-bottom: 5px; }
+        .form-group label { display: block; font-size: 14px; color: var(--tg-theme-section-header-text-color); margin-bottom: 5px; font-weight: 500;}
         .form-group input, .form-group textarea, .form-group input[type="file"] {
             width: 100%;
             padding: 10px;
             border: 1px solid var(--tg-theme-secondary-bg-color);
-            border-radius: 6px;
+            border-radius: 8px;
             font-size: 16px;
             background-color: var(--tg-theme-bg-color);
             color: var(--tg-theme-text-color);
             box-sizing: border-box;
         }
-        .form-group input[type="file"] { padding: 3px;}
+        .form-group input[type="file"] { padding: 5px; }
         .form-group textarea { min-height: 80px; resize: vertical; }
-        .image-preview { max-width: 200px; max-height: 200px; margin-top: 10px; border-radius: 4px; border: 1px solid var(--tg-theme-secondary-bg-color); }
         .fab {
             position: fixed;
             bottom: 20px;
@@ -413,168 +334,137 @@ MAIN_APP_TEMPLATE = '''
             display: flex;
             align-items: center;
             justify-content: center;
-            font-size: 24px;
+            font-size: 28px;
+            line-height: 28px;
             box-shadow: 0 4px 12px rgba(0,0,0,0.15);
             cursor: pointer;
             z-index: 1000;
             border: none;
+            transition: background-color 0.3s, transform 0.2s;
         }
-        .detail-view { padding: 15px; background-color: var(--tg-theme-section-bg-color); }
-        .detail-view h2 { margin-top: 0; font-size: 20px; color: var(--tg-theme-text-color); }
-        .detail-view p { margin-bottom: 8px; line-height: 1.5; font-size: 16px; }
-        .detail-view strong { font-weight: 600; color: var(--tg-theme-section-header-text-color); }
-        .detail-view img.item-image-detail { max-width: 100%; height: auto; border-radius: 8px; margin-bottom: 10px; border: 1px solid var(--tg-theme-secondary-bg-color); }
+        .fab:active { transform: scale(0.9); }
+        .detail-view { padding: 15px; background-color: var(--tg-theme-section-bg-color); border-radius: 12px; }
+        .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; }
+        .detail-view strong { font-weight: 500; color: var(--tg-theme-section-header-text-color); }
+        .detail-image { max-width: 100%; border-radius: 8px; margin-bottom: 15px; background-color: var(--tg-theme-secondary-bg-color); }
         .loading, .empty-state { text-align: center; padding: 40px 15px; color: var(--tg-theme-hint-color); font-size: 16px; }
-        .user-info { padding: 10px 15px; background-color: var(--tg-theme-secondary-bg-color); font-size: 13px; text-align: center; color: var(--tg-theme-hint-color); }
+        .user-info { padding: 10px 15px; background-color: var(--tg-theme-secondary-bg-color); font-size: 14px; text-align: center; color: var(--tg-theme-hint-color); display: flex; align-items: center; justify-content: center; transition: background-color 0.3s, color 0.3s; }
+        .user-info img { width: 28px; height: 28px; border-radius: 50%; vertical-align: middle; margin-right: 10px; object-fit: cover; }
         .error-message { color: var(--tg-theme-destructive-text-color); font-size: 14px; margin-top: 5px; }
-        #mainContent { overflow-x: hidden; } /* Used for single view content like form/detail */
-        .content-pane-container { /* Parent for panes when in list view */
-             flex-grow: 1; display: flex; width: 100%; overflow: hidden;
-        }
-        .content-panes-wrapper { /* The sliding div */
-            display: flex; width: 300%; transition: transform 0.3s ease-in-out; height: 100%;
-        }
-        .pane {
-            width: calc(100% / 3); box-sizing: border-box; padding: 15px; overflow-y: auto; height: 100%;
-        }
-
+        .view-transition { opacity: 0; transform: translateY(10px); transition: opacity 0.3s ease-out, transform 0.3s ease-out; }
+        .view-transition.visible { opacity: 1; transform: translateY(0); }
     </style>
 </head>
 <body>
     <div class="app-container">
         <div class="header">TonTalent</div>
-        <div class="user-info" id="userInfo">Loading user...</div>
+        <div class="user-info" id="userInfo">
+            <img id="userAvatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="User Avatar" style="display:none;">
+            <span id="userText">Loading user...</span>
+        </div>
         <div class="tabs">
-            <button class="tab-button active" data-tab="resumes" data-index="0">Resumes</button>
-            <button class="tab-button" data-tab="vacancies" data-index="1">Vacancies</button>
-            <button class="tab-button" data-tab="freelance_offers" data-index="2">Freelance</button>
+            <button class="tab-button active" data-tab="resumes">Resumes</button>
+            <button class="tab-button" data-tab="vacancies">Vacancies</button>
+            <button class="tab-button" data-tab="freelance_offers">Freelance</button>
         </div>
-
-        <div id="viewContainer" class="content-pane-container">
-            <!-- This div will hold either mainContent (for forms/details) or contentPanesWrapper (for lists) -->
+        <div class="content" id="mainContent">
+            <div class="loading">Loading content...</div>
         </div>
-
         <button class="fab" id="fabButton" title="Add New Item">+</button>
     </div>
 
     <script>
         const tg = window.Telegram.WebApp;
         let currentUser = null;
-        let currentView = 'resumes'; // The string name of the tab
-        let currentItem = null; // For detail or edit
-        let currentDisplayMode = 'list'; // 'list', 'form', 'detail'
-        
+        let currentView = 'resumes';
+        let currentItem = null;
         const tabOrder = ['resumes', 'vacancies', 'freelance_offers'];
-        let currentTabIndex = 0;
-
-        const viewContainer = document.getElementById('viewContainer');
-        let contentPanesWrapper = null; // Will be created for list view
-        let mainContentDiv = null; // Will be created for form/detail view
-
 
         function applyThemeParams() {
-            document.documentElement.style.setProperty('--tg-theme-bg-color', tg.themeParams.bg_color || '#ffffff');
-            document.documentElement.style.setProperty('--tg-theme-text-color', tg.themeParams.text_color || '#000000');
-            document.documentElement.style.setProperty('--tg-theme-hint-color', tg.themeParams.hint_color || '#999999');
-            document.documentElement.style.setProperty('--tg-theme-link-color', tg.themeParams.link_color || '#007aff');
-            document.documentElement.style.setProperty('--tg-theme-button-color', tg.themeParams.button_color || '#007aff');
-            document.documentElement.style.setProperty('--tg-theme-button-text-color', tg.themeParams.button_text_color || '#ffffff');
-            document.documentElement.style.setProperty('--tg-theme-secondary-bg-color', tg.themeParams.secondary_bg_color || '#f0f0f0');
-            document.documentElement.style.setProperty('--tg-theme-header-bg-color', tg.themeParams.header_bg_color || tg.themeParams.secondary_bg_color || '#efeff4');
-            document.documentElement.style.setProperty('--tg-theme-section-bg-color', tg.themeParams.section_bg_color || tg.themeParams.bg_color || '#ffffff');
-            document.documentElement.style.setProperty('--tg-theme-section-header-text-color', tg.themeParams.section_header_text_color || tg.themeParams.hint_color || '#8e8e93');
-            document.documentElement.style.setProperty('--tg-theme-destructive-text-color', tg.themeParams.destructive_text_color || '#ff3b30');
-            document.documentElement.style.setProperty('--tg-theme-accent-text-color', tg.themeParams.accent_text_color || tg.themeParams.link_color || '#007aff');
+            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');
         }
         
-        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 (tg.initData) {
                 headers['X-Telegram-Auth'] = tg.initData;
             }
             const options = { method, headers };
-            if (body) options.body = isFormData ? body : JSON.stringify(body);
-            
+            if (body) {
+                if (body instanceof FormData) {
+                    options.body = body;
+                } else {
+                    headers['Content-Type'] = 'application/json';
+                    options.body = JSON.stringify(body);
+                }
+            }
             try {
                 const response = await fetch(endpoint, options);
                 if (!response.ok) {
-                    const errorData = await response.json().catch(() => ({ error: 'Request failed' }));
+                    const errorData = await response.json().catch(() => ({ error: 'Request failed with status ' + response.status }));
                     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;
             }
         }
 
-        function setupListViewStructure() {
-            viewContainer.innerHTML = ''; // Clear previous structure
-            contentPanesWrapper = document.createElement('div');
-            contentPanesWrapper.className = 'content-panes-wrapper';
-            tabOrder.forEach(tabName => {
-                const pane = document.createElement('div');
-                pane.className = 'pane';
-                pane.id = `pane-${tabName}`;
-                pane.innerHTML = `<div class="loading">Loading ${tabName}...</div>`;
-                contentPanesWrapper.appendChild(pane);
-            });
-            viewContainer.appendChild(contentPanesWrapper);
-            setupSwipeGestures();
-            currentDisplayMode = 'list';
-        }
-
-        function setupSingleViewStructure() {
-            viewContainer.innerHTML = ''; // Clear previous structure
-            mainContentDiv = document.createElement('div');
-            mainContentDiv.className = 'content'; // Use existing 'content' class styling for padding etc.
-            mainContentDiv.id = 'mainContent';
-            viewContainer.appendChild(mainContentDiv);
-            currentDisplayMode = 'formOrDetail'; // Could be 'form' or 'detail'
-        }
-
-
         function renderList(items, type) {
-            const paneId = `pane-${type}`;
-            const paneDiv = document.getElementById(paneId);
-            if (!paneDiv) {
-                console.error(`Pane ${paneId} not found for rendering list.`);
-                return;
-            }
-            if (!items || items.length === 0) {
-                paneDiv.innerHTML = `<div class="empty-state">No ${type} found. Be the first to add one!</div>`;
-                return;
-            }
-            paneDiv.innerHTML = items.map(item => `
-                <div class="list-item" onclick="showDetailView('${type}', '${item.id}')">
-                    ${item.image_filename ? `<img src="/uploads/${item.image_filename}" class="item-image-thumbnail" alt="${item.title || item.name || 'Item image'}">` : ''}
-                    <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>
-            `).join('');
+            const contentDiv = document.getElementById('mainContent');
+            contentDiv.classList.remove('visible');
+            
+            setTimeout(() => {
+                if (!items || items.length === 0) {
+                    contentDiv.innerHTML = `<div class="empty-state">No ${type} found. Be the first to add one!</div>`;
+                } else {
+                    contentDiv.innerHTML = items.map(item => `
+                        <div class="list-item" onclick="showDetailView('${type}', '${item.id}')">
+                            <div class="list-item-content">
+                                ${item.image_url ? `<img src="${item.image_url}" alt="Image" class="list-item-image">` : `<div class="list-item-image" style="display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--tg-theme-hint-color);">🖼️</div>`}
+                                <div>
+                                    <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>
+                            </div>
+                        </div>
+                    `).join('');
+                }
+                contentDiv.classList.add('visible');
+            }, 100); 
         }
 
         function showDetailView(type, id) {
-            setupSingleViewStructure();
-            currentDisplayMode = 'detail';
             tg.BackButton.show();
-            tg.BackButton.onClick(() => loadListView(type, false)); // false: don't force data reload
+            tg.BackButton.onClick(() => { loadView(type); tg.HapticFeedback.impactOccurred('light'); });
             tg.MainButton.hide();
             document.getElementById('fabButton').style.display = 'none';
+            const contentDiv = document.getElementById('mainContent');
+            contentDiv.classList.remove('visible');
 
             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="item-image-detail" alt="${item.title || item.name || 'Item image'}">`;
+                    if (item.image_url) {
+                        detailsHtml += `<img src="${item.image_url}" alt="${item.title || item.name}" class="detail-image">`;
                     }
                     detailsHtml += `<h2>${item.title || item.name}</h2>`;
                     
@@ -584,7 +474,7 @@ MAIN_APP_TEMPLATE = '''
                             <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" style="color:var(--tg-theme-link-color);">${item.portfolio_link}</a></p>` : ''}
                         `;
                     } else if (type === 'vacancies') {
                         detailsHtml += `
@@ -605,37 +495,45 @@ MAIN_APP_TEMPLATE = '''
                         `;
                     }
                     detailsHtml += `<p class="meta">Posted by: @${item.user_telegram_username || 'anonymous'} on ${new Date(item.timestamp).toLocaleDateString()}</p></div>`;
-                    mainContentDiv.innerHTML = detailsHtml;
+                    
+                    setTimeout(() => {
+                        contentDiv.innerHTML = detailsHtml;
+                        contentDiv.classList.add('visible');
+                    },100);
 
                     if (currentUser && item.user_id === currentUser.id) {
                         tg.MainButton.setText('Edit My Post');
-                        tg.MainButton.onClick(() => showForm(type, item));
+                        tg.MainButton.onClick(() => { showForm(type, item); tg.HapticFeedback.impactOccurred('light'); });
                         tg.MainButton.show();
                     }
                 })
                 .catch(err => {
-                    mainContentDiv.innerHTML = `<div class="empty-state">Error loading details.</div>`;
+                    setTimeout(() => {
+                        contentDiv.innerHTML = `<div class="empty-state">Error loading details.</div>`;
+                        contentDiv.classList.add('visible');
+                    }, 100);
                 });
         }
         
         function showForm(type, itemToEdit = null) {
-            setupSingleViewStructure();
-            currentDisplayMode = 'form';
             currentItem = itemToEdit;
             tg.BackButton.show();
             tg.BackButton.onClick(() => {
                 if (itemToEdit) showDetailView(type, itemToEdit.id);
-                else loadListView(type, false);
+                else loadView(type);
+                tg.HapticFeedback.impactOccurred('light');
             });
             document.getElementById('fabButton').style.display = 'none';
+            const contentDiv = document.getElementById('mainContent');
+            contentDiv.classList.remove('visible');
 
-            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.slice(0, -1).replace('_',' ')}</h2>`;
             
-            formHtml += `
+            const commonFields = `
                 <div class="form-group">
-                    <label for="image">Image (optional)</label>
+                    <label for="image">Image (Optional)</label>
                     <input type="file" id="image" accept="image/*">
-                    ${itemToEdit && itemToEdit.image_filename ? `<img src="/uploads/${itemToEdit.image_filename}" class="image-preview" id="imagePreview">` : '<img src="#" class="image-preview" id="imagePreview" style="display:none;">'}
+                    ${itemToEdit && itemToEdit.image_url ? `<p style="font-size:0.8em; margin-top:5px;">Current image: <a href="${itemToEdit.image_url}" target="_blank" style="color:var(--tg-theme-link-color);">View</a>. Upload new to replace.</p>` : ''}
                 </div>
             `;
 
@@ -649,6 +547,7 @@ MAIN_APP_TEMPLATE = '''
                         <label for="title">Job Title / Desired Position</label>
                         <input type="text" id="title" value="${itemToEdit?.title || ''}" required>
                     </div>
+                    ${commonFields}
                     <div class="form-group">
                         <label for="skills">Skills (comma separated)</label>
                         <textarea id="skills">${itemToEdit?.skills || ''}</textarea>
@@ -680,6 +579,7 @@ MAIN_APP_TEMPLATE = '''
                         <label for="title">Job Title</label>
                         <input type="text" id="title" value="${itemToEdit?.title || ''}" required>
                     </div>
+                    ${commonFields}
                     <div class="form-group">
                         <label for="description">Description</label>
                         <textarea id="description">${itemToEdit?.description || ''}</textarea>
@@ -707,6 +607,7 @@ MAIN_APP_TEMPLATE = '''
                         <label for="title">Project Title</label>
                         <input type="text" id="title" value="${itemToEdit?.title || ''}" required>
                     </div>
+                    ${commonFields}
                     <div class="form-group">
                         <label for="description">Description of Work</label>
                         <textarea id="description">${itemToEdit?.description || ''}</textarea>
@@ -730,22 +631,11 @@ MAIN_APP_TEMPLATE = '''
                 `;
             }
             formHtml += `<div id="formError" class="error-message"></div></div>`;
-            mainContentDiv.innerHTML = formHtml;
-
-            document.getElementById('image').addEventListener('change', function(event) {
-                const preview = document.getElementById('imagePreview');
-                if (event.target.files && event.target.files[0]) {
-                    const reader = new FileReader();
-                    reader.onload = function(e) {
-                        preview.src = e.target.result;
-                        preview.style.display = 'block';
-                    }
-                    reader.readAsDataURL(event.target.files[0]);
-                } else {
-                    preview.style.display = 'none';
-                    preview.src = '#';
-                }
-            });
+            
+            setTimeout(() => {
+                contentDiv.innerHTML = formHtml;
+                contentDiv.classList.add('visible');
+            }, 100);
 
             tg.MainButton.setText(itemToEdit ? 'Save Changes' : 'Post');
             tg.MainButton.show();
@@ -757,11 +647,6 @@ MAIN_APP_TEMPLATE = '''
             let isValid = true;
             document.getElementById('formError').textContent = '';
 
-            const imageFile = document.getElementById('image').files[0];
-            if (imageFile) {
-                formData.append('image', imageFile);
-            }
-
             if (type === 'resumes') {
                 const name = document.getElementById('name').value.trim();
                 const title = document.getElementById('title').value.trim();
@@ -795,6 +680,11 @@ MAIN_APP_TEMPLATE = '''
                 formData.append('contact', document.getElementById('contact').value.trim());
             }
 
+            const imageInput = document.getElementById('image');
+            if (imageInput && imageInput.files[0]) {
+                formData.append('image', imageInput.files[0]);
+            }
+
             if (!isValid) {
                 document.getElementById('formError').textContent = 'Please fill in all required fields.';
                 tg.HapticFeedback.notificationOccurred('error');
@@ -806,11 +696,11 @@ MAIN_APP_TEMPLATE = '''
             const method = itemId ? 'PUT' : 'POST';
             const endpoint = itemId ? `/api/${type}/${itemId}` : `/api/${type}`;
 
-            apiCall(endpoint, method, formData, true) // true for FormData
+            apiCall(endpoint, method, formData)
                 .then(response => {
                     tg.HapticFeedback.notificationOccurred('success');
                     tg.MainButton.hideProgress();
-                    loadListView(type, true); // Force reload data for the list
+                    loadView(type); 
                 })
                 .catch(err => {
                     tg.HapticFeedback.notificationOccurred('error');
@@ -818,119 +708,120 @@ MAIN_APP_TEMPLATE = '''
                     document.getElementById('formError').textContent = err.message || 'Failed to submit.';
                 });
         }
-        
-        function switchToTab(newTabIndex, fromSwipe = false) {
-            if (newTabIndex < 0 || newTabIndex >= tabOrder.length) return;
-
-            currentTabIndex = newTabIndex;
-            currentView = tabOrder[currentTabIndex];
 
+        function loadView(tabName) {
+            currentView = tabName;
             document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
-            document.querySelector(`.tab-button[data-tab="${currentView}"]`).classList.add('active');
+            document.querySelector(`.tab-button[data-tab="${tabName}"]`).classList.add('active');
+            
+            const contentDiv = document.getElementById('mainContent');
+            contentDiv.classList.remove('visible');
+            contentDiv.innerHTML = `<div class="loading">Loading ${tabName}...</div>`;
             
-            if (contentPanesWrapper) {
-                 contentPanesWrapper.style.transform = `translateX(-${currentTabIndex * (100 / tabOrder.length)}%)`;
-            }
-            if (fromSwipe) {
-                 tg.HapticFeedback.impactOccurred('light');
-            }
-
-            // Load data for the new tab if its pane is empty or marked for reload
-            const pane = document.getElementById(`pane-${currentView}`);
-            if (pane && (pane.innerHTML.includes('class="loading"') || pane.innerHTML.includes('class="empty-state"') || pane.dataset.needsReload === 'true')) {
-                 pane.innerHTML = `<div class="loading">Loading ${currentView}...</div>`; // Show loading again
-                 apiCall(`/api/${currentView}`)
-                    .then(data => {
-                        renderList(data, currentView);
-                        pane.dataset.needsReload = 'false';
-                    })
-                    .catch(err => {
-                         pane.innerHTML = `<div class="empty-state">Error loading ${currentView}.</div>`;
-                    });
-            }
-        }
-        
-        // Called when clicking a tab or after form submission/detail view back
-        function loadListView(tabName, forceDataReload = true) {
-            if (currentDisplayMode !== 'list') { // Transitioning from form/detail to list
-                setupListViewStructure();
-                 // Load all tabs' initial data or mark them for reload
-                tabOrder.forEach((name, index) => {
-                    const pane = document.getElementById(`pane-${name}`);
-                    if (pane) pane.dataset.needsReload = 'true'; // Mark for reload
-                });
-            }
-            currentView = tabName;
-            currentTabIndex = tabOrder.indexOf(tabName);
-
-            switchToTab(currentTabIndex); // This will handle rendering and data loading if needed
-
             tg.BackButton.hide();
             tg.MainButton.hide();
             document.getElementById('fabButton').style.display = 'block';
-        }
-
 
-        function setupSwipeGestures() {
-            if (!contentPanesWrapper) return;
-            let touchStartX = 0;
-            let touchEndX = 0;
-            const swipeThreshold = 50; // Minimum distance for a swipe
-
-            contentPanesWrapper.addEventListener('touchstart', (event) => {
-                touchStartX = event.changedTouches[0].screenX;
-            }, { passive: true });
-
-            contentPanesWrapper.addEventListener('touchend', (event) => {
-                touchEndX = event.changedTouches[0].screenX;
-                handleSwipe();
-            }, { passive: true });
-
-            function handleSwipe() {
-                const deltaX = touchEndX - touchStartX;
-                if (Math.abs(deltaX) > swipeThreshold) {
-                    if (deltaX < 0) { // Swiped left (next tab)
-                        switchToTab(currentTabIndex + 1, true);
-                    } else { // Swiped right (previous tab)
-                        switchToTab(currentTabIndex - 1, true);
-                    }
-                }
-            }
+            apiCall(`/api/${tabName}`)
+                .then(data => {
+                    renderList(data, tabName)
+                })
+                .catch(err => {
+                    setTimeout(() => {
+                        contentDiv.innerHTML = `<div class="empty-state">Error loading ${tabName}.</div>`;
+                        contentDiv.classList.add('visible');
+                    }, 100);
+                });
         }
         
+        function updateUserDisplay(user) {
+            const userAvatar = document.getElementById('userAvatar');
+            const userText = document.getElementById('userText');
+            if (user && user.photo_url) {
+                userAvatar.src = user.photo_url;
+                userAvatar.style.display = 'inline-block';
+            } else if (tg.initDataUnsafe.user?.photo_url) {
+                 userAvatar.src = tg.initDataUnsafe.user.photo_url;
+                 userAvatar.style.display = 'inline-block';
+            }
+            else {
+                userAvatar.style.display = 'none';
+            }
+            
+            if (user) {
+                 userText.textContent = `Logged in as: ${user.first_name} (@${user.username})`;
+            } else {
+                 userText.textContent = `Welcome, ${tg.initDataUnsafe.user?.first_name || 'User'}! (@${tg.initDataUnsafe.user?.username || 'anonymous'})`;
+            }
+        }
+
         async function init() {
             tg.ready();
             applyThemeParams();
+            tg.onEvent('themeChanged', applyThemeParams);
             tg.expand();
             tg.enableClosingConfirmation();
 
-            document.getElementById('userInfo').textContent = `Welcome, ${tg.initDataUnsafe.user?.first_name || 'User'}! (@${tg.initDataUnsafe.user?.username || 'anonymous'})`;
+            updateUserDisplay(null); // Initial display with unsafe data
             
             try {
                 const authResponse = await apiCall('/api/auth_user', 'POST', { init_data: tg.initData });
                 currentUser = authResponse.user;
                 if (currentUser) {
-                     document.getElementById('userInfo').textContent = `Logged in as: ${currentUser.first_name} (@${currentUser.username})`;
+                     updateUserDisplay(currentUser);
                 }
             } catch (error) {
                 console.error("Auth error:", error);
-                document.getElementById('userInfo').textContent = `Auth failed. Limited functionality.`;
+                document.getElementById('userText').textContent = `Auth failed. Limited functionality.`;
+                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.impactOccurred('light');
-                    loadListView(button.dataset.tab);
                 });
             });
             document.getElementById('fabButton').addEventListener('click', () => {
-                tg.HapticFeedback.impactOccurred('medium');
                 showForm(currentView);
+                tg.HapticFeedback.impactOccurred('medium');
             });
             
-            loadListView('resumes'); // Initial load, will set up panes
+            initSwipeNavigation();
+            loadView('resumes');
         }
+        
+        function initSwipeNavigation() {
+            let touchstartX = 0;
+            let touchendX = 0;
+            const swipeThreshold = 75; 
+            const mainContentEl = document.getElementById('mainContent');
+
+            mainContentEl.addEventListener('touchstart', e => {
+                touchstartX = e.changedTouches[0].screenX;
+            }, {passive: true});
+
+            mainContentEl.addEventListener('touchend', e => {
+                touchendX = e.changedTouches[0].screenX;
+                handleSwipe();
+            });
 
+            function handleSwipe() {
+                const currentTabIndex = tabOrder.indexOf(currentView);
+                if (touchendX < touchstartX - swipeThreshold) { 
+                    if (currentTabIndex < tabOrder.length - 1) {
+                        loadView(tabOrder[currentTabIndex + 1]);
+                        tg.HapticFeedback.impactOccurred('light');
+                    }
+                }
+                if (touchendX > touchstartX + swipeThreshold) { 
+                    if (currentTabIndex > 0) {
+                        loadView(tabOrder[currentTabIndex - 1]);
+                        tg.HapticFeedback.impactOccurred('light');
+                    }
+                }
+            }
+        }
         init();
     </script>
 </body>
@@ -953,7 +844,7 @@ ADMIN_TEMPLATE = '''
         .item:last-child { border-bottom: none; }
         .item h3 { margin: 0 0 5px 0; }
         .item p { margin: 3px 0; font-size: 0.9em; color: #555; }
-        .item img.admin-thumb { max-width: 80px; max-height: 80px; border-radius: 4px; float: left; margin-right: 10px; }
+        .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; }
@@ -963,7 +854,6 @@ ADMIN_TEMPLATE = '''
         .message.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
         .message.warning { background-color: #fff3cd; color: #856404; border: 1px solid #ffeeba; }
         .sync-buttons form { display: inline-block; margin-right: 10px; }
-        .clearfix::after { content: ""; clear: both; display: table; }
     </style>
 </head>
 <body>
@@ -981,24 +871,22 @@ 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 & images to Hugging Face? This will overwrite server data.');">
-                    <button type="submit" class="button button-primary">Upload DB & Images 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 & images from Hugging Face? This will overwrite local data.');">
-                    <button type="submit" class="button button-secondary">Download DB & Images 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. Image files are not currently synced via this mechanism.</p>
         </div>
 
         <div class="section">
             <h2>Resumes ({{ resumes|length }})</h2>
             {% for resume in resumes %}
-            <div class="item clearfix">
-                {% if resume.image_filename %}
-                <img src="{{ url_for('serve_uploaded_file', filename=resume.image_filename) }}" alt="Resume Image" class="admin-thumb">
-                {% endif %}
+            <div class="item">
                 <h3>{{ resume.name }} - {{ resume.title }}</h3>
+                {% if resume.image_url %}<img src="{{ resume.image_url }}" alt="Resume Image">{% endif %}
                 <p>User ID: {{ resume.user_id }} (@{{ resume.user_telegram_username }})</p>
                 <p>Posted: {{ resume.timestamp }}</p>
                 <form method="POST" action="{{ url_for('admin_delete_item') }}" style="display:inline;" onsubmit="return confirm('Delete this resume?');">
@@ -1015,11 +903,9 @@ ADMIN_TEMPLATE = '''
         <div class="section">
             <h2>Vacancies ({{ vacancies|length }})</h2>
             {% for vacancy in vacancies %}
-            <div class="item clearfix">
-                {% if vacancy.image_filename %}
-                <img src="{{ url_for('serve_uploaded_file', filename=vacancy.image_filename) }}" alt="Vacancy Image" class="admin-thumb">
-                {% endif %}
+            <div class="item">
                 <h3>{{ vacancy.title }} - {{ vacancy.company_name }}</h3>
+                {% if vacancy.image_url %}<img src="{{ vacancy.image_url }}" alt="Vacancy Image">{% endif %}
                 <p>User ID: {{ vacancy.user_id }} (@{{ vacancy.user_telegram_username }})</p>
                 <p>Posted: {{ vacancy.timestamp }}</p>
                 <form method="POST" action="{{ url_for('admin_delete_item') }}" style="display:inline;" onsubmit="return confirm('Delete this vacancy?');">
@@ -1036,11 +922,9 @@ ADMIN_TEMPLATE = '''
         <div class="section">
             <h2>Freelance Offers ({{ freelance_offers|length }})</h2>
             {% for offer in freelance_offers %}
-            <div class="item clearfix">
-                {% if offer.image_filename %}
-                <img src="{{ url_for('serve_uploaded_file', filename=offer.image_filename) }}" alt="Offer Image" class="admin-thumb">
-                {% endif %}
+            <div class="item">
                 <h3>{{ offer.title }}</h3>
+                {% if offer.image_url %}<img src="{{ offer.image_url }}" alt="Freelance Offer Image">{% endif %}
                 <p>User ID: {{ offer.user_id }} (@{{ offer.user_telegram_username }})</p>
                 <p>Budget: {{ offer.budget }}</p>
                 <p>Posted: {{ offer.timestamp }}</p>
@@ -1063,10 +947,18 @@ ADMIN_TEMPLATE = '''
 def main_app_view():
     return render_template_string(MAIN_APP_TEMPLATE)
 
-@app.route('/uploads/<filename>')
-def serve_uploaded_file(filename):
-    return send_from_directory(UPLOAD_DIR, filename)
+@app.route('/uploads/<item_type_subdir>/<filename>')
+def uploaded_file_typed(item_type_subdir, filename):
+    if item_type_subdir not in ['resumes', 'vacancies', 'freelance_offers']:
+        return jsonify({"error": "Invalid category"}), 404
+    
+    directory = os.path.join(app.config['UPLOADS_DIR'], item_type_subdir)
+    # Security: Ensure filename is safe and does not try to escape the directory
+    safe_filename = secure_filename(filename)
+    if safe_filename != filename: # Check if secure_filename changed it (e.g. '../' was present)
+        return jsonify({"error": "Invalid filename"}), 400
 
+    return send_from_directory(directory, safe_filename)
 
 @app.route('/api/auth_user', methods=['POST'])
 def auth_user():
@@ -1078,26 +970,28 @@ def auth_user():
         else:
             return jsonify({"error": "Authentication data not provided"}), 401
 
-    is_valid, user_data = verify_telegram_auth_data(auth_data_str, TELEGRAM_BOT_TOKEN)
+    is_valid, user_data_dict = verify_telegram_auth_data(auth_data_str, TELEGRAM_BOT_TOKEN)
 
-    if not is_valid or not user_data:
+    if not is_valid or not user_data_dict:
         return jsonify({"error": "Invalid authentication data"}), 403
 
     data = load_data()
     users = data.get('users', {})
-    user_id_str = str(user_data.get('id'))
+    user_id_str = str(user_data_dict.get('id'))
 
     if user_id_str not in users:
         users[user_id_str] = {
-            'id': user_data.get('id'),
-            'first_name': user_data.get('first_name'),
-            'last_name': user_data.get('last_name'),
-            'username': user_data.get('username'),
-            'language_code': user_data.get('language_code'),
-            'photo_url': user_data.get('photo_url'),
+            'id': user_data_dict.get('id'),
+            'first_name': user_data_dict.get('first_name'),
+            'last_name': user_data_dict.get('last_name'),
+            'username': user_data_dict.get('username'),
+            'language_code': user_data_dict.get('language_code'),
+            'photo_url': user_data_dict.get('photo_url'),
             'first_seen': datetime.now().isoformat()
         }
     users[user_id_str]['last_seen'] = datetime.now().isoformat()
+    if user_data_dict.get('photo_url'): # Update photo_url if it changed
+         users[user_id_str]['photo_url'] = user_data_dict.get('photo_url')
     data['users'] = users
     save_data(data)
     
@@ -1112,7 +1006,6 @@ def get_authenticated_user(request_headers):
         return user_data
     return None
 
-# Generic GET all items
 @app.route('/api/<item_type>', methods=['GET'])
 def get_items(item_type):
     if item_type not in ['resumes', 'vacancies', 'freelance_offers']:
@@ -1121,7 +1014,6 @@ def get_items(item_type):
     items = sorted(data.get(item_type, []), key=lambda x: x.get('timestamp', ''), reverse=True)
     return jsonify(items), 200
 
-# Generic GET single item
 @app.route('/api/<item_type>/<item_id>', methods=['GET'])
 def get_item(item_type, item_id):
     if item_type not in ['resumes', 'vacancies', 'freelance_offers']:
@@ -1132,35 +1024,6 @@ def get_item(item_type, item_id):
         return jsonify(item), 200
     return jsonify({"error": "Item not found"}), 404
 
-def _handle_image_upload(request_files, current_item_data=None):
-    image_filename = current_item_data.get('image_filename') if current_item_data else None
-    old_image_filename = image_filename # Keep track if it's an update with a new image
-
-    if 'image' in request_files:
-        file = request_files['image']
-        if file and file.filename != '':
-            # Delete old image if it exists and a new one is uploaded
-            if old_image_filename and os.path.exists(os.path.join(UPLOAD_DIR, old_image_filename)):
-                try:
-                    os.remove(os.path.join(UPLOAD_DIR, old_image_filename))
-                    logging.info(f"Deleted old local image: {old_image_filename}")
-                    if HF_TOKEN_WRITE:
-                        hf_delete_file(path_in_repo=f"{UPLOAD_DIR}/{old_image_filename}", repo_id=REPO_ID, repo_type="dataset", token=HF_TOKEN_WRITE)
-                        logging.info(f"Attempted deletion of old image {old_image_filename} from HF.")
-                except EntryNotFoundError:
-                    logging.warning(f"Old image {old_image_filename} not found on HF for deletion.")
-                except Exception as e_del_img:
-                    logging.error(f"Error deleting old image {old_image_filename} from local or HF: {e_del_img}")
-            
-            filename = secure_filename(file.filename)
-            unique_filename = f"{uuid.uuid4()}_{filename}"
-            file.save(os.path.join(UPLOAD_DIR, unique_filename))
-            image_filename = unique_filename
-            logging.info(f"New image saved: {image_filename}")
-    return image_filename, old_image_filename # Return new and potentially old (if replaced)
-
-
-# Generic POST new item
 @app.route('/api/<item_type>', methods=['POST'])
 def create_item(item_type):
     user = get_authenticated_user(request.headers)
@@ -1170,58 +1033,66 @@ def create_item(item_type):
     if item_type not in ['resumes', 'vacancies', 'freelance_offers']:
         return jsonify({"error": "Invalid item type"}), 400
     
-    # request.form for text fields, request.files for files (multipart/form-data)
-    req_data = request.form 
-    if not req_data:
+    form_data = request.form
+    if not form_data:
         return jsonify({"error": "No data provided"}), 400
 
+    new_item_id = str(uuid.uuid4())
     new_item = {
-        "id": str(uuid.uuid4()),
+        "id": new_item_id,
         "user_id": str(user.get('id')),
         "user_telegram_username": user.get('username', 'unknown'),
         "timestamp": datetime.now().isoformat(),
+        "image_url": None
     }
+    
+    image_file = request.files.get('image')
+    if image_file and allowed_file(image_file.filename):
+        try:
+            file_ext = os.path.splitext(image_file.filename)[1].lower()
+            image_filename = f"{new_item_id}{file_ext}"
+            image_save_path = os.path.join(app.config['UPLOADS_DIR'], item_type, image_filename)
+            image_file.save(image_save_path)
+            new_item['image_url'] = f"/{UPLOADS_DIR_NAME}/{item_type}/{image_filename}"
+        except Exception as e:
+            logging.error(f"Error saving image for new item: {e}")
 
-    image_filename, _ = _handle_image_upload(request.files)
-    if image_filename:
-        new_item['image_filename'] = image_filename
 
     if item_type == 'resumes':
         required_fields = ['name', 'title']
         for field in required_fields:
-            if not req_data.get(field): return jsonify({"error": f"Missing field: {field}"}), 400
+            if not form_data.get(field): return jsonify({"error": f"Missing field: {field}"}), 400
         new_item.update({
-            "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', '')
+            "name": form_data.get('name'), "title": form_data.get('title'),
+            "skills": form_data.get('skills', ''), "experience": form_data.get('experience', ''),
+            "education": form_data.get('education', ''), "contact": form_data.get('contact', ''),
+            "portfolio_link": form_data.get('portfolio_link', '')
         })
     elif item_type == 'vacancies':
         required_fields = ['company_name', 'title']
         for field in required_fields:
-            if not req_data.get(field): return jsonify({"error": f"Missing field: {field}"}), 400
+            if not form_data.get(field): return jsonify({"error": f"Missing field: {field}"}), 400
         new_item.update({
-            "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', '')
+            "company_name": form_data.get('company_name'), "title": form_data.get('title'),
+            "description": form_data.get('description', ''), "requirements": form_data.get('requirements', ''),
+            "salary": form_data.get('salary', ''), "location": form_data.get('location', ''),
+            "contact": form_data.get('contact', '')
         })
     elif item_type == 'freelance_offers':
         required_fields = ['title']
         for field in required_fields:
-            if not req_data.get(field): return jsonify({"error": f"Missing field: {field}"}), 400
+            if not form_data.get(field): return jsonify({"error": f"Missing field: {field}"}), 400
         new_item.update({
-            "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', '')
+            "title": form_data.get('title'), "description": form_data.get('description', ''),
+            "budget": form_data.get('budget', ''), "deadline": form_data.get('deadline', ''),
+            "skills_needed": form_data.get('skills_needed', ''), "contact": form_data.get('contact', '')
         })
     
     data = load_data()
     data[item_type].append(new_item)
-    save_data(data) # This will also trigger image upload to HF if HF_TOKEN_WRITE is set
+    save_data(data)
     return jsonify(new_item), 201
 
-# Generic PUT update item
 @app.route('/api/<item_type>/<item_id>', methods=['PUT'])
 def update_item(item_type, item_id):
     user = get_authenticated_user(request.headers)
@@ -1230,67 +1101,73 @@ 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 = request.form
-    if not req_data: return jsonify({"error": "No data provided"}), 400
+    form_data = request.form
+    if not form_data: return jsonify({"error": "No data provided"}), 400
 
     data = load_data()
     items_list = data.get(item_type, [])
     item_index = -1
-    original_item = None
     for idx, i in enumerate(items_list):
         if i['id'] == item_id:
             item_index = idx
-            original_item = i
             break
     
-    if item_index == -1 or not original_item: return jsonify({"error": "Item not found"}), 404
+    if item_index == -1: return jsonify({"error": "Item not found"}), 404
     
+    original_item = items_list[item_index]
     if str(original_item.get('user_id')) != str(user.get('id')):
         return jsonify({"error": "Forbidden: You can only edit your own items"}), 403
 
     updated_item = original_item.copy()
     updated_item['updated_timestamp'] = datetime.now().isoformat()
 
-    new_image_filename, old_image_filename_if_replaced = _handle_image_upload(request.files, original_item)
-    if new_image_filename: # This means a new image was uploaded OR existing one was kept (if no new file)
-        updated_item['image_filename'] = new_image_filename
-    # If no new image was uploaded, image_filename remains as is or is None if it wasn't there.
+    image_file = request.files.get('image')
+    if image_file and allowed_file(image_file.filename):
+        delete_existing_image(original_item.get('image_url'))
+        try:
+            file_ext = os.path.splitext(image_file.filename)[1].lower()
+            image_filename = f"{item_id}{file_ext}"
+            image_save_path = os.path.join(app.config['UPLOADS_DIR'], item_type, image_filename)
+            image_file.save(image_save_path)
+            updated_item['image_url'] = f"/{UPLOADS_DIR_NAME}/{item_type}/{image_filename}"
+        except Exception as e:
+            logging.error(f"Error saving image for updated item {item_id}: {e}")
+
 
     if item_type == 'resumes':
         updated_item.update({
-            "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'))
+            "name": form_data.get('name', original_item.get('name')), 
+            "title": form_data.get('title', original_item.get('title')),
+            "skills": form_data.get('skills', original_item.get('skills')), 
+            "experience": form_data.get('experience', original_item.get('experience')),
+            "education": form_data.get('education', original_item.get('education')), 
+            "contact": form_data.get('contact', original_item.get('contact')),
+            "portfolio_link": form_data.get('portfolio_link', original_item.get('portfolio_link'))
         })
     elif item_type == 'vacancies':
         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'))
+            "company_name": form_data.get('company_name', original_item.get('company_name')), 
+            "title": form_data.get('title', original_item.get('title')),
+            "description": form_data.get('description', original_item.get('description')), 
+            "requirements": form_data.get('requirements', original_item.get('requirements')),
+            "salary": form_data.get('salary', original_item.get('salary')), 
+            "location": form_data.get('location', original_item.get('location')),
+            "contact": form_data.get('contact', original_item.get('contact'))
         })
     elif item_type == 'freelance_offers':
          updated_item.update({
-            "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'))
+            "title": form_data.get('title', original_item.get('title')), 
+            "description": form_data.get('description', original_item.get('description')),
+            "budget": form_data.get('budget', original_item.get('budget')), 
+            "deadline": form_data.get('deadline', original_item.get('deadline')),
+            "skills_needed": form_data.get('skills_needed', original_item.get('skills_needed')), 
+            "contact": form_data.get('contact', original_item.get('contact'))
         })
 
     data[item_type][item_index] = updated_item
     save_data(data)
     return jsonify(updated_item), 200
 
-# Generic DELETE item (can be restricted to admin or item owner)
 @app.route('/api/<item_type>/<item_id>', methods=['DELETE'])
 def delete_item(item_type, item_id):
     user = get_authenticated_user(request.headers)
@@ -1301,48 +1178,25 @@ 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')): # Add admin check here if needed
+    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')
     
+    delete_existing_image(item_to_delete.get('image_url'))
     data[item_type] = [i for i in items_list if i['id'] != item_id]
     
-    save_data(data) # Save JSON first
-
-    if image_filename_to_delete:
-        local_image_path = os.path.join(UPLOAD_DIR, image_filename_to_delete)
-        if os.path.exists(local_image_path):
-            try:
-                os.remove(local_image_path)
-                logging.info(f"Deleted local image: {image_filename_to_delete}")
-            except Exception as e:
-                logging.error(f"Error deleting local image {image_filename_to_delete}: {e}")
-        
-        if HF_TOKEN_WRITE:
-            try:
-                hf_delete_file(
-                    path_in_repo=f"{UPLOAD_DIR}/{image_filename_to_delete}",
-                    repo_id=REPO_ID,
-                    repo_type="dataset",
-                    token=HF_TOKEN_WRITE
-                )
-                logging.info(f"Attempted deletion of image {image_filename_to_delete} from HF.")
-            except EntryNotFoundError:
-                 logging.warning(f"Image {image_filename_to_delete} not found on HF for deletion.")
-            except Exception as e:
-                logging.error(f"Error deleting image {image_filename_to_delete} from HF: {e}")
-                
-    return jsonify({"message": "Item deleted successfully"}), 200
+    if len(data[item_type]) < original_length:
+        save_data(data)
+        return jsonify({"message": "Item deleted successfully"}), 200
+    return jsonify({"error": "Item not found or deletion failed"}), 404
 
 
 @app.route('/admin', methods=['GET'])
 def admin_panel():
-    # Add authentication for admin here if needed
     data = load_data()
     return render_template_string(ADMIN_TEMPLATE,
                                   resumes=sorted(data.get('resumes', []), key=lambda x: x.get('timestamp', ''), reverse=True),
@@ -1351,7 +1205,6 @@ def admin_panel():
 
 @app.route('/admin/delete', methods=['POST'])
 def admin_delete_item():
-    # Add authentication for admin here if needed
     item_type = request.form.get('item_type')
     item_id = request.form.get('item_id')
 
@@ -1361,48 +1214,30 @@ def admin_delete_item():
 
     data = load_data()
     items_list = data.get(item_type, [])
-    
     item_to_delete = next((i for i in items_list if i['id'] == item_id), None)
-    image_filename_to_delete = None
-    if item_to_delete:
-        image_filename_to_delete = item_to_delete.get('image_filename')
-    
     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:
-        save_data(data) # Save JSON first
+    
+    if item_to_delete:
+        delete_existing_image(item_to_delete.get('image_url'))
+        data[item_type] = [i for i in items_list if i['id'] != item_id]
+    else:
+        flash('Item not found.', 'warning')
+        return redirect(url_for('admin_panel'))
 
-        if image_filename_to_delete:
-            local_image_path = os.path.join(UPLOAD_DIR, image_filename_to_delete)
-            if os.path.exists(local_image_path):
-                try:
-                    os.remove(local_image_path)
-                    logging.info(f"Admin deleted local image: {image_filename_to_delete}")
-                except Exception as e:
-                    logging.error(f"Admin: Error deleting local image {image_filename_to_delete}: {e}")
-            
-            if HF_TOKEN_WRITE:
-                try:
-                    hf_delete_file(path_in_repo=f"{UPLOAD_DIR}/{image_filename_to_delete}", repo_id=REPO_ID, repo_type="dataset", token=HF_TOKEN_WRITE)
-                    logging.info(f"Admin: Attempted deletion of image {image_filename_to_delete} from HF.")
-                except EntryNotFoundError:
-                    logging.warning(f"Admin: Image {image_filename_to_delete} not found on HF for deletion.")
-                except Exception as e:
-                    logging.error(f"Admin: Error deleting image {image_filename_to_delete} from HF: {e}")
 
-        flash(f'{item_type.capitalize()[:-1]} deleted successfully.', 'success')
+    if len(data[item_type]) < original_length:
+        save_data(data)
+        flash(f'{item_type.capitalize().replace("_", " ")[:-1]} deleted successfully.', 'success')
     else:
         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():
-    # Add authentication for admin here
     logging.info("Admin forcing upload to Hugging Face...")
     try:
-        upload_db_to_hf() # This now handles both DATA_FILE and associated images
-        flash("Data and referenced 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')
@@ -1410,15 +1245,13 @@ def force_upload_admin():
 
 @app.route('/admin/force_download', methods=['POST'])
 def force_download_admin():
-    # Add authentication for admin here
     logging.info("Admin forcing download from Hugging Face...")
     try:
-        # This now handles both DATA_FILE and associated images
-        if download_db_from_hf(): 
-            flash("Data and referenced images successfully downloaded from Hugging Face. Local files updated.", 'success')
+        if download_db_from_hf():
+            flash("Data successfully downloaded from Hugging Face. Local files updated.", 'success')
             load_data() 
         else:
-            flash("Failed to download data/images 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')
@@ -1427,9 +1260,8 @@ def force_download_admin():
 
 if __name__ == '__main__':
     logging.info("Application starting up. Performing initial data load/download...")
-    # Initial download will also try to fetch images referenced in DATA_FILE
     download_db_from_hf() 
-    load_data() # Load data into memory after potential download
+    load_data()
     logging.info("Initial data load complete.")
 
     if HF_TOKEN_WRITE: