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, login
-from huggingface_hub.utils import RepositoryNotFoundError, HfHubHTTPError, HfFolder
+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,50 +19,28 @@ 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'
-UPLOADS_FOLDER_NAME = 'uploads' 
-MAX_IMAGES = 10
+SYNC_FILES = [DATA_FILE] 
+UPLOAD_FOLDER_HF = "uploads" 
 
 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 = os.getenv("TELEGRAM_BOT_TOKEN", "YOUR_TELEGRAM_BOT_TOKEN") # Replace with your actual token or ensure it's in .env
+TELEGRAM_BOT_TOKEN = os.getenv("TELEGRAM_BOT_TOKEN", "YOUR_TELEGRAM_BOT_TOKEN") # Ensure this is set in .env
 
 DOWNLOAD_RETRIES = 3
 DOWNLOAD_DELAY = 5
 
 logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(message)s')
 
-if HF_TOKEN_WRITE:
-    try:
-        login(token=HF_TOKEN_WRITE)
-        logging.info("Successfully logged in to Hugging Face Hub with write token.")
-    except Exception as e:
-        logging.error(f"Failed to login to Hugging Face Hub with write token: {e}")
-elif HF_TOKEN_READ:
-     try:
-        login(token=HF_TOKEN_READ)
-        logging.info("Successfully logged in to Hugging Face Hub with read token (write operations will fail).")
-     except Exception as e:
-        logging.error(f"Failed to login to Hugging Face Hub with read token: {e}")
-else:
-    logging.warning("No Hugging Face token provided. HF Hub operations might fail for private repos or be anonymous.")
-
-
-def ensure_uploads_folder_exists():
-    path = os.path.join(app.root_path, UPLOADS_FOLDER_NAME)
-    if not os.path.exists(path):
-        os.makedirs(path)
-        logging.info(f"Created local uploads folder: {path}")
-
-ensure_uploads_folder_exists()
+if not TELEGRAM_BOT_TOKEN or TELEGRAM_BOT_TOKEN == "YOUR_TELEGRAM_BOT_TOKEN":
+    logging.warning("TELEGRAM_BOT_TOKEN is not set or is using the default placeholder. Telegram authentication will likely fail.")
 
 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
-    if not token_to_use and "HF_TOKEN" not in os.environ and not HfFolder.get_token(): # Check if anonymous
-        logging.warning("HF_TOKEN_READ/HF_TOKEN_WRITE not set, and no global HF login found. Download might fail for private repos.")
-
-    files_to_download = [specific_file] if specific_file else [DATA_FILE]
+    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:
@@ -90,11 +68,9 @@ def download_db_from_hf(specific_file=None, retries=DOWNLOAD_RETRIES, delay=DOWN
                                 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.")
-                                success = True # If we create it, it's a form of success for this step
                         except Exception as create_e:
                             logging.error(f"Failed to create empty local file {file_name}: {create_e}")
-                    else: # if it's not the first attempt or file already exists locally, a 404 is a failure for this file.
-                        success = False 
+                    success = True 
                     break 
                 else:
                     logging.error(f"HTTP error downloading {file_name} (Attempt {attempt + 1}): {e}. Retrying in {delay}s...")
@@ -107,41 +83,38 @@ def download_db_from_hf(specific_file=None, retries=DOWNLOAD_RETRIES, delay=DOWN
     logging.info(f"Download process finished. Overall success: {all_successful}")
     return all_successful
 
-def upload_file_to_hf_direct(local_file_path, path_in_repo, commit_msg_prefix="Upload"):
+def upload_db_to_hf(specific_file=None):
     if not HF_TOKEN_WRITE:
-        logging.warning(f"HF_TOKEN_WRITE not set. Skipping upload of {local_file_path} to Hugging Face.")
-        return False
+        logging.warning("HF_TOKEN_WRITE not set. Skipping upload to Hugging Face.")
+        return
     try:
-        api = HfApi()
-        logging.info(f"Starting upload of {local_file_path} to {path_in_repo} in HF repo {REPO_ID}...")
-        api.upload_file(
-            path_or_fileobj=local_file_path,
-            path_in_repo=path_in_repo,
-            repo_id=REPO_ID,
-            repo_type="dataset",
-            token=HF_TOKEN_WRITE,
-            commit_message=f"{commit_msg_prefix} {os.path.basename(path_in_repo)} {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}"
-        )
-        logging.info(f"File {local_file_path} successfully uploaded to {path_in_repo} in Hugging Face.")
-        return True
+        api = HfApi(token=HF_TOKEN_WRITE)
+        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",
+                        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 uploading file {local_file_path} to Hugging Face: {e}", exc_info=True)
-        return False
-
-def upload_data_file_to_hf():
-    if not os.path.exists(DATA_FILE):
-        logging.warning(f"Data file {DATA_FILE} not found locally, skipping upload.")
-        return
-    return upload_file_to_hf_direct(DATA_FILE, DATA_FILE, commit_msg_prefix="Sync data_file")
-
+        logging.error(f"General error during Hugging Face upload initialization or process: {e}", exc_info=True)
 
 def periodic_backup():
-    backup_interval = 1800 
+    backup_interval = 1800
     logging.info(f"Setting up periodic backup every {backup_interval} seconds.")
     while True:
         time.sleep(backup_interval)
         logging.info("Starting periodic backup...")
-        upload_data_file_to_hf()
+        upload_db_to_hf()
         logging.info("Periodic backup finished.")
 
 def load_data():
@@ -195,13 +168,16 @@ 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)
 
 def verify_telegram_auth_data(auth_data_str, bot_token):
     if not auth_data_str:
         return False, None
+    if not bot_token:
+        logging.error("Telegram Bot Token is not configured for verification.")
+        return False, None
     
     params = dict(urllib.parse.parse_qsl(auth_data_str))
     if 'hash' not in params:
@@ -236,8 +212,6 @@ MAIN_APP_TEMPLATE = '''
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
     <title>TonTalent</title>
     <script src="https://telegram.org/js/telegram-web-app.js"></script>
-    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
-    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
     <style>
         :root {
             --tg-theme-bg-color: #ffffff;
@@ -262,12 +236,8 @@ MAIN_APP_TEMPLATE = '''
             overscroll-behavior-y: none;
             -webkit-font-smoothing: antialiased;
             -moz-osx-font-smoothing: grayscale;
-            display: flex;
-            flex-direction: column;
-            height: 100vh; /* Use vh for full viewport height */
-            overflow: hidden; /* Prevent body scroll, manage scroll in content */
         }
-        .app-container { display: flex; flex-direction: column; flex-grow: 1; min-height: 0; /* For flexbox scroll */ }
+        .app-container { display: flex; flex-direction: column; min-height: 100vh; }
         .header {
             background-color: var(--tg-theme-header-bg-color);
             padding: 10px 15px;
@@ -279,7 +249,7 @@ MAIN_APP_TEMPLATE = '''
             top: 0;
             z-index: 100;
         }
-        .tabs { display: flex; background-color: var(--tg-theme-secondary-bg-color); padding: 5px; flex-shrink: 0; }
+        .tabs { display: flex; background-color: var(--tg-theme-secondary-bg-color); padding: 5px; }
         .tab-button {
             flex: 1;
             padding: 10px;
@@ -294,18 +264,7 @@ 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-swiper-container {
-            flex-grow: 1;
-            width: 100%;
-            overflow: hidden; /* Swiper handles its own overflow */
-        }
-        .swiper-slide {
-            overflow-y: auto; /* Allow vertical scroll within each slide */
-            -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
-            padding: 15px;
-            box-sizing: border-box;
-        }
+        .content { flex-grow: 1; padding: 15px; overflow-x: hidden; }
         .list-item {
             background-color: var(--tg-theme-section-bg-color);
             border-radius: 8px;
@@ -314,14 +273,19 @@ MAIN_APP_TEMPLATE = '''
             box-shadow: 0 1px 3px rgba(0,0,0,0.05);
             cursor: pointer;
             transition: background-color 0.2s;
+            display: flex; /* For thumbnail alignment */
+            align-items: flex-start; /* Align items to the top */
         }
         .list-item:active { background-color: var(--tg-theme-secondary-bg-color); }
+        .list-item-content { flex-grow: 1; }
         .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-image-preview { width: 60px; height: 60px; object-fit: cover; border-radius: 4px; margin-right: 10px; float: left; }
-
-        .form-container { padding: 0; /* Padding handled by swiper-slide */ background-color: var(--tg-theme-section-bg-color); }
+        .thumbnail-image {
+            width: 50px; height: 50px; object-fit: cover; border-radius: 4px;
+            margin-right: 12px; border: 1px solid var(--tg-theme-secondary-bg-color);
+        }
+        .form-container { padding: 15px; background-color: var(--tg-theme-section-bg-color); }
         .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 input, .form-group textarea, .form-group input[type="file"] {
@@ -334,17 +298,16 @@ MAIN_APP_TEMPLATE = '''
             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-container { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
-        .image-preview-item { position: relative; }
-        .image-preview-item img { width: 80px; height: 80px; object-fit: cover; border-radius: 4px; border: 1px solid var(--tg-theme-secondary-bg-color); }
-        .remove-image-btn {
+        .image-previews { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
+        .preview-image-container { position: relative; }
+        .preview-image { width: 80px; height: 80px; object-fit: cover; border-radius: 4px; border: 1px solid var(--tg-theme-secondary-bg-color); }
+        .remove-preview-btn {
             position: absolute; top: -5px; right: -5px; background: var(--tg-theme-destructive-text-color); color: white;
-            border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
-            font-size: 12px; cursor: pointer; border: none;
+            border-radius: 50%; width: 20px; height: 20px; font-size: 12px; text-align: center; line-height: 18px;
+            border: none; cursor: pointer; box-shadow: 0 0 5px rgba(0,0,0,0.2); z-index: 1;
         }
-
         .fab {
             position: fixed;
             bottom: 20px;
@@ -363,17 +326,25 @@ MAIN_APP_TEMPLATE = '''
             z-index: 1000;
             border: none;
         }
-        .detail-view { padding: 0; /* Padding handled by swiper-slide */ background-color: var(--tg-theme-section-bg-color); }
+        .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-images-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; margin-bottom: 15px; }
-        .detail-image-item img { width: 100%; height: auto; max-height: 200px; object-fit: cover; border-radius: 6px; }
-        
+        .image-gallery { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; margin-bottom: 10px; }
+        .gallery-image {
+            width: calc(33.333% - 7px); /* Adjust for gap */
+            aspect-ratio: 1 / 1;
+            object-fit: cover; border-radius: 6px;
+            border: 1px solid var(--tg-theme-secondary-bg-color);
+            cursor: zoom-in;
+        }
+        @media (max-width: 400px) {
+            .gallery-image { width: calc(50% - 5px); }
+        }
         .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); flex-shrink: 0; }
+        .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); }
         .error-message { color: var(--tg-theme-destructive-text-color); font-size: 14px; margin-top: 5px; }
-        .main-content-area { flex-grow: 1; overflow: hidden; position: relative; /* for fab */}
+        .max-images-note { font-size: 12px; color: var(--tg-theme-hint-color); margin-top: 5px; }
     </style>
 </head>
 <body>
@@ -381,42 +352,25 @@ MAIN_APP_TEMPLATE = '''
         <div class="header">TonTalent</div>
         <div class="user-info" id="userInfo">Loading user...</div>
         <div class="tabs">
-            <button class="tab-button active" data-tab-id="resumes" data-tab-index="0">Resumes</button>
-            <button class="tab-button" data-tab-id="vacancies" data-tab-index="1">Vacancies</button>
-            <button class="tab-button" data-tab-id="freelance_offers" data-tab-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 class="main-content-area">
-            <div class="content-swiper-container" id="contentSwiper">
-                <div class="swiper-wrapper">
-                    <div class="swiper-slide" id="resumesContent"><div class="loading">Loading resumes...</div></div>
-                    <div class="swiper-slide" id="vacanciesContent"><div class="loading">Loading vacancies...</div></div>
-                    <div class="swiper-slide" id="freelance_offersContent"><div class="loading">Loading freelance offers...</div></div>
-                </div>
-            </div>
-             <button class="fab" id="fabButton" title="Add New Item">+</button>
+        <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;
-        const HF_REPO_ID = "{{ HF_REPO_ID_JS }}"; 
-        const MAX_IMAGES_ALLOWED = {{ MAX_IMAGES }};
+        const HF_REPO_ID = "{{ HF_REPO_ID }}";
+        const MAX_IMAGES = 10;
         let currentUser = null;
-        let currentViewType = 'resumes'; 
-        let currentItem = null; 
-        let contentSwiper;
-        let fabButton;
-
-        const tabConfig = {
-            0: 'resumes',
-            1: 'vacancies',
-            2: 'freelance_offers'
-        };
-        const tabNameToIndex = {
-            'resumes': 0,
-            'vacancies': 1,
-            'freelance_offers': 2
-        };
+        let currentView = 'resumes';
+        let currentItem = null;
+        let selectedFilesForUpload = [];
+        let existingImagePaths = [];
 
         function applyThemeParams() {
             document.documentElement.style.setProperty('--tg-theme-bg-color', tg.themeParams.bg_color || '#ffffff');
@@ -433,16 +387,13 @@ MAIN_APP_TEMPLATE = '''
             document.documentElement.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) {
-            const headers = {};
-            if (!isFormData) {
-                headers['Content-Type'] = 'application/json';
-            }
+        async function apiCall(endpoint, method = 'GET', body = null) {
+            const 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 = JSON.stringify(body);
             try {
                 const response = await fetch(endpoint, options);
                 if (!response.ok) {
@@ -457,64 +408,68 @@ MAIN_APP_TEMPLATE = '''
             }
         }
 
-        function getHfImageUrl(pathInRepo) {
-            if (!pathInRepo) return '';
-            return `https://huggingface.co/datasets/${HF_REPO_ID}/resolve/main/${pathInRepo}`;
-        }
-
         function renderList(items, type) {
-            const contentDiv = document.getElementById(`${type}Content`);
+            const contentDiv = document.getElementById('mainContent');
             if (!items || items.length === 0) {
                 contentDiv.innerHTML = `<div class="empty-state">No ${type} found. Be the first to add one!</div>`;
                 return;
             }
-            contentDiv.innerHTML = items.map(item => `
-                <div class="list-item" onclick="showDetailViewWrapper('${type}', '${item.id}')">
-                    ${item.images && item.images.length > 0 ? `<img src="${getHfImageUrl(item.images[0])}" class="list-item-image-preview" alt="Preview">` : ''}
-                    <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 style="clear:both;"></div>
-                </div>
-            `).join('');
+            contentDiv.innerHTML = items.map(item => {
+                let thumbnailHtml = '';
+                if (item.images && item.images.length > 0) {
+                    const imageUrl = `https://huggingface.co/datasets/${HF_REPO_ID}/resolve/main/${item.images[0]}`;
+                    thumbnailHtml = `<img src="${imageUrl}" class="thumbnail-image" alt="Thumbnail">`;
+                }
+                return `
+                <div class="list-item" onclick="handleListItemClick('${type}', '${item.id}')">
+                    ${thumbnailHtml}
+                    <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>
+                </div>`;
+            }).join('');
         }
-        
-        function showDetailViewWrapper(type, id) {
+
+        function handleListItemClick(type, id) {
             tg.HapticFeedback.impactOccurred('light');
-            currentViewType = type; 
             showDetailView(type, id);
         }
 
-
         function showDetailView(type, id) {
             tg.BackButton.show();
-            tg.BackButton.onClick(() => loadView(type, false));
+            tg.BackButton.onClick(() => {
+                tg.HapticFeedback.selectionChanged();
+                loadView(type);
+            });
             tg.MainButton.hide();
-            fabButton.style.display = 'none';
-            contentSwiper.enabled = false; 
-
-            const targetSlide = document.getElementById(`${type}Content`);
-            targetSlide.innerHTML = `<div class="loading">Loading details...</div>`;
+            document.getElementById('fabButton').style.display = 'none';
 
             apiCall(`/api/${type}/${id}`)
                 .then(item => {
                     currentItem = item;
-                    let imagesHtml = '';
+                    const contentDiv = document.getElementById('mainContent');
+                    let imageGalleryHtml = '';
                     if (item.images && item.images.length > 0) {
-                        imagesHtml = `<div class="detail-images-container">
-                            ${item.images.map(imgPath => `<div class="detail-image-item"><img src="${getHfImageUrl(imgPath)}" alt="Image"></div>`).join('')}
-                        </div>`;
+                        imageGalleryHtml = '<div class="image-gallery">';
+                        item.images.forEach(imgPath => {
+                            const imageUrl = `https://huggingface.co/datasets/${HF_REPO_ID}/resolve/main/${imgPath}`;
+                            imageGalleryHtml += `<img src="${imageUrl}" class="gallery-image" alt="Item image" onclick="tg.openLink('${imageUrl}')">`;
+                        });
+                        imageGalleryHtml += '</div>';
                     }
 
-                    let detailsHtml = `<div class="detail-view"><h2>${item.title || item.name}</h2>${imagesHtml}`;
+                    let detailsHtml = `<div class="detail-view"><h2>${item.title || item.name}</h2>`;
+                    detailsHtml += imageGalleryHtml;
                     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">${item.portfolio_link}</a></p>` : ''}
+                            ${item.portfolio_link ? `<p><strong>Portfolio:</strong> <a href="${item.portfolio_link}" target="_blank" onclick="tg.openLink('${item.portfolio_link}'); return false;">${item.portfolio_link}</a></p>` : ''}
                         `;
                     } else if (type === 'vacancies') {
                         detailsHtml += `
@@ -535,222 +490,147 @@ MAIN_APP_TEMPLATE = '''
                         `;
                     }
                     detailsHtml += `<p class="meta">Posted by: @${item.user_telegram_username || 'anonymous'} on ${new Date(item.timestamp).toLocaleDateString()}</p></div>`;
-                    targetSlide.innerHTML = detailsHtml;
+                    contentDiv.innerHTML = detailsHtml;
 
                     if (currentUser && item.user_id === currentUser.id) {
                         tg.MainButton.setText('Edit My Post');
-                        tg.MainButton.onClick(() => {
-                            tg.HapticFeedback.impactOccurred('medium');
-                            showForm(type, item);
-                        });
+                        tg.MainButton.onClick(() => showForm(type, item));
                         tg.MainButton.show();
                     }
                 })
                 .catch(err => {
-                    targetSlide.innerHTML = `<div class="empty-state">Error loading details.</div>`;
+                    document.getElementById('mainContent').innerHTML = `<div class="empty-state">Error loading details.</div>`;
                 });
         }
         
-        let currentFiles = []; 
-        let existingImageUrls = [];
-
-        function renderImagePreviews() {
-            const previewContainer = document.getElementById('imagePreviewContainer');
-            if (!previewContainer) return;
-            previewContainer.innerHTML = '';
-
-            existingImageUrls.forEach((url, index) => {
-                const itemDiv = document.createElement('div');
-                itemDiv.className = 'image-preview-item';
-                const img = document.createElement('img');
-                img.src = getHfImageUrl(url);
-                const removeBtn = document.createElement('button');
-                removeBtn.className = 'remove-image-btn';
-                removeBtn.innerHTML = '×';
-                removeBtn.onclick = () => {
-                    existingImageUrls.splice(index, 1);
-                    renderImagePreviews();
-                };
-                itemDiv.appendChild(img);
-                itemDiv.appendChild(removeBtn);
-                previewContainer.appendChild(itemDiv);
-            });
-            
-            currentFiles.forEach((file, index) => {
-                const itemDiv = document.createElement('div');
-                itemDiv.className = 'image-preview-item';
-                const img = document.createElement('img');
-                img.src = URL.createObjectURL(file);
-                img.onload = () => URL.revokeObjectURL(img.src);
-                const removeBtn = document.createElement('button');
-                removeBtn.className = 'remove-image-btn';
-                removeBtn.innerHTML = '×';
-                removeBtn.onclick = () => {
-                    currentFiles.splice(index, 1);
-                    document.getElementById('images').files = new FileListItems(currentFiles); // Update file input
-                    renderImagePreviews();
-                };
-                itemDiv.appendChild(img);
-                itemDiv.appendChild(removeBtn);
-                previewContainer.appendChild(itemDiv);
-            });
-        }
-
-        function FileListItems (files) {
-            var b = new ClipboardEvent("").clipboardData || new DataTransfer()
-            for (var i = 0, len = files.length; i<len; i++) b.items.add(files[i])
-            return b.files
-        }
-
-        function handleFileSelect(event) {
-            const files = Array.from(event.target.files);
-            const totalImages = existingImageUrls.length + currentFiles.length + files.length;
-            if (totalImages > MAX_IMAGES_ALLOWED) {
-                tg.showAlert(`You can upload a maximum of ${MAX_IMAGES_ALLOWED} images.`);
-                 // Reset file input to avoid issues with re-selecting same files after error
-                event.target.value = null; 
-                return;
-            }
-            currentFiles.push(...files.slice(0, MAX_IMAGES_ALLOWED - (existingImageUrls.length + currentFiles.length)));
-            renderImagePreviews();
-        }
-
         function showForm(type, itemToEdit = null) {
-            tg.HapticFeedback.impactOccurred('light');
             currentItem = itemToEdit;
-            currentFiles = [];
-            existingImageUrls = itemToEdit && itemToEdit.images ? [...itemToEdit.images] : [];
+            selectedFilesForUpload = [];
+            existingImagePaths = itemToEdit?.images || [];
 
             tg.BackButton.show();
             tg.BackButton.onClick(() => {
+                tg.HapticFeedback.selectionChanged();
                 if (itemToEdit) showDetailView(type, itemToEdit.id);
-                else loadView(type, false); 
+                else loadView(type);
             });
-            fabButton.style.display = 'none';
-            contentSwiper.enabled = false;
+            document.getElementById('fabButton').style.display = 'none';
 
-            const targetSlide = document.getElementById(`${type}Content`);
+            const contentDiv = document.getElementById('mainContent');
             let formHtml = `<div class="form-container"><h2>${itemToEdit ? 'Edit' : 'New'} ${type.slice(0, -1)}</h2>`;
             
-            const commonImageFields = `
-                <div class="form-group">
-                    <label for="images">Images (up to ${MAX_IMAGES_ALLOWED})</label>
-                    <input type="file" id="images" multiple accept="image/*">
-                    <div id="imagePreviewContainer" class="image-preview-container"></div>
-                </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>
-                    ${commonImageFields}
-                    <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 leave blank to use 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>
+                    <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</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>
-                    ${commonImageFields}
-                    <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>
+                    <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</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>
-                    ${commonImageFields}
-                    <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 leave blank to use Telegram)</label>
-                        <input type="text" id="contact" value="${itemToEdit?.contact || ''}">
-                    </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</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 class="form-group">
+                    <label for="itemImages">Images (up to ${MAX_IMAGES} total)</label>
+                    <input type="file" id="itemImages" multiple accept="image/*" onchange="handleFileSelect(event)">
+                    <div class="max-images-note">Current: <span id="currentImageCount">${existingImagePaths.length}</span>, Max: ${MAX_IMAGES}</div>
+                    <div id="imagePreviews" class="image-previews"></div>
+                </div>
+            `;
             formHtml += `<div id="formError" class="error-message"></div></div>`;
-            targetSlide.innerHTML = formHtml;
-            document.getElementById('images').addEventListener('change', handleFileSelect);
+            contentDiv.innerHTML = formHtml;
             renderImagePreviews();
 
-
             tg.MainButton.setText(itemToEdit ? 'Save Changes' : 'Post');
             tg.MainButton.show();
-            tg.MainButton.onClick(() => {
-                tg.HapticFeedback.impactOccurred('medium');
-                handleSubmit(type, itemToEdit ? itemToEdit.id : null);
+            tg.MainButton.onClick(() => handleSubmit(type, itemToEdit ? itemToEdit.id : null));
+        }
+
+        function handleFileSelect(event) {
+            const files = event.target.files;
+            const totalAfterAdd = existingImagePaths.length + selectedFilesForUpload.length + files.length;
+            if (totalAfterAdd > MAX_IMAGES) {
+                tg.showAlert(`You can select a maximum of ${MAX_IMAGES} images in total. You already have ${existingImagePaths.length + selectedFilesForUpload.length} and tried to add ${files.length}.`);
+                event.target.value = ''; // Clear selection
+                return;
+            }
+            for (let i = 0; i < files.length; i++) {
+                selectedFilesForUpload.push(files[i]);
+            }
+            renderImagePreviews();
+        }
+
+        function renderImagePreviews() {
+            const previewContainer = document.getElementById('imagePreviews');
+            if (!previewContainer) return;
+            previewContainer.innerHTML = '';
+
+            existingImagePaths.forEach((path, index) => {
+                const imgContainer = document.createElement('div');
+                imgContainer.className = 'preview-image-container';
+                const img = document.createElement('img');
+                img.src = `https://huggingface.co/datasets/${HF_REPO_ID}/resolve/main/${path}`;
+                img.className = 'preview-image';
+                const removeBtn = document.createElement('button');
+                removeBtn.innerHTML = '×';
+                removeBtn.className = 'remove-preview-btn';
+                removeBtn.onclick = () => {
+                    existingImagePaths.splice(index, 1);
+                    renderImagePreviews();
+                };
+                imgContainer.appendChild(img);
+                imgContainer.appendChild(removeBtn);
+                previewContainer.appendChild(imgContainer);
+            });
+
+            selectedFilesForUpload.forEach((file, index) => {
+                const imgContainer = document.createElement('div');
+                imgContainer.className = 'preview-image-container';
+                const reader = new FileReader();
+                const img = document.createElement('img');
+                img.className = 'preview-image';
+                reader.onload = e => img.src = e.target.result;
+                reader.readAsDataURL(file);
+                const removeBtn = document.createElement('button');
+                removeBtn.innerHTML = '×';
+                removeBtn.className = 'remove-preview-btn';
+                removeBtn.onclick = () => {
+                    selectedFilesForUpload.splice(index, 1);
+                    document.getElementById('itemImages').value = ''; // Reset file input to allow re-selection of same file if needed
+                    renderImagePreviews();
+                };
+                imgContainer.appendChild(img);
+                imgContainer.appendChild(removeBtn);
+                previewContainer.appendChild(imgContainer);
             });
+             document.getElementById('currentImageCount').textContent = existingImagePaths.length + selectedFilesForUpload.length;
         }
 
-        async function handleSubmit(type, itemId = null) {
+        function handleSubmit(type, itemId = null) {
             const payload = {};
             let isValid = true;
-            document.getElementById('formError').textContent = '';
+            const formErrorDiv = document.getElementById('formError');
+            formErrorDiv.textContent = '';
 
             if (type === 'resumes') {
                 payload.name = document.getElementById('name').value.trim();
@@ -781,41 +661,54 @@ MAIN_APP_TEMPLATE = '''
             }
 
             if (!isValid) {
-                document.getElementById('formError').textContent = 'Please fill in all required fields.';
+                formErrorDiv.textContent = 'Please fill in all required fields.';
                 tg.HapticFeedback.notificationOccurred('error');
                 return;
             }
             
             tg.MainButton.showProgress();
-            
-            const uploadedImageUrls = [...existingImageUrls];
-            if (currentFiles.length > 0) {
-                document.getElementById('formError').textContent = 'Uploading images...';
-                for (const file of currentFiles) {
-                    const formData = new FormData();
-                    formData.append('file', file);
-                    try {
-                        const uploadResponse = await apiCall('/api/upload_image', 'POST', formData, true);
-                        uploadedImageUrls.push(uploadResponse.url);
-                    } catch (uploadError) {
-                        tg.HapticFeedback.notificationOccurred('error');
-                        tg.MainButton.hideProgress();
-                        document.getElementById('formError').textContent = `Image upload failed: ${uploadError.message}`;
-                        return;
+
+            if (selectedFilesForUpload.length > 0) {
+                formErrorDiv.textContent = 'Uploading images...';
+                const formData = new FormData();
+                selectedFilesForUpload.forEach(file => formData.append('images', file));
+
+                fetch('/api/upload_image', {
+                    method: 'POST',
+                    headers: { 'X-Telegram-Auth': tg.initData },
+                    body: formData
+                })
+                .then(response => {
+                    if (!response.ok) {
+                         return response.json().then(err => { throw new Error(err.error || 'Image upload failed'); });
                     }
-                }
+                    return response.json();
+                })
+                .then(uploadResponse => {
+                    payload.images = [...existingImagePaths, ...uploadResponse.image_paths];
+                    submitItemData(type, itemId, payload);
+                })
+                .catch(err => {
+                    tg.HapticFeedback.notificationOccurred('error');
+                    tg.MainButton.hideProgress();
+                    formErrorDiv.textContent = err.message || 'Failed to upload images.';
+                });
+            } else {
+                payload.images = existingImagePaths;
+                submitItemData(type, itemId, payload);
             }
-            payload.images = uploadedImageUrls;
-
+        }
 
+        function submitItemData(type, itemId, payload) {
             const method = itemId ? 'PUT' : 'POST';
             const endpoint = itemId ? `/api/${type}/${itemId}` : `/api/${type}`;
+            document.getElementById('formError').textContent = itemId ? 'Saving changes...' : 'Posting...';
 
             apiCall(endpoint, method, payload)
                 .then(response => {
                     tg.HapticFeedback.notificationOccurred('success');
                     tg.MainButton.hideProgress();
-                    loadView(type, false); 
+                    loadView(type); 
                 })
                 .catch(err => {
                     tg.HapticFeedback.notificationOccurred('error');
@@ -824,44 +717,83 @@ MAIN_APP_TEMPLATE = '''
                 });
         }
 
-        function updateActiveTab(tabName) {
+        function loadView(tabName) {
+            currentView = tabName;
             document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
-            const activeButton = document.querySelector(`.tab-button[data-tab-id="${tabName}"]`);
-            if (activeButton) {
-                activeButton.classList.add('active');
-            }
-        }
-
-        function loadView(tabName, fromUserInteraction = true) {
-            currentViewType = tabName;
-            if(fromUserInteraction) tg.HapticFeedback.selectionChanged();
-            updateActiveTab(tabName);
-            
-            const targetSlide = document.getElementById(`${tabName}Content`);
-            targetSlide.innerHTML = `<div class="loading">Loading ${tabName}...</div>`;
+            document.querySelector(`.tab-button[data-tab="${tabName}"]`).classList.add('active');
             
+            document.getElementById('mainContent').innerHTML = `<div class="loading">Loading ${tabName}...</div>`;
             tg.BackButton.hide();
             tg.MainButton.hide();
-            fabButton.style.display = 'block';
-            contentSwiper.enabled = true;
-            if (fromUserInteraction) {
-                contentSwiper.slideTo(tabNameToIndex[tabName]);
-            }
-
+            document.getElementById('fabButton').style.display = 'block';
 
             apiCall(`/api/${tabName}`)
                 .then(data => renderList(data, tabName))
                 .catch(err => {
-                    targetSlide.innerHTML = `<div class="empty-state">Error loading ${tabName}.</div>`;
+                    document.getElementById('mainContent').innerHTML = `<div class="empty-state">Error loading ${tabName}.</div>`;
                 });
         }
         
+        function setupSwipeNavigation() {
+            const contentElement = document.getElementById('mainContent');
+            let touchstartX = 0;
+            let touchstartY = 0;
+            let touchendX = 0;
+            let touchendY = 0;
+            const swipeThreshold = 75; 
+            let isSwiping = false;
+
+            contentElement.addEventListener('touchstart', function(event) {
+                touchstartX = event.changedTouches[0].screenX;
+                touchstartY = event.changedTouches[0].screenY;
+                isSwiping = false;
+            }, { passive: true });
+
+            contentElement.addEventListener('touchmove', function(event) {
+                if (isSwiping) return;
+                const deltaX = event.changedTouches[0].screenX - touchstartX;
+                const deltaY = event.changedTouches[0].screenY - touchstartY;
+                if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 10) { // Prioritize horizontal swipe
+                     isSwiping = true; // Mark that we started a horizontal swipe
+                }
+            }, { passive: false });
+
+
+            contentElement.addEventListener('touchend', function(event) {
+                touchendX = event.changedTouches[0].screenX;
+                touchendY = event.changedTouches[0].screenY;
+                handleSwipe();
+                isSwiping = false;
+            }, { passive: true });
+
+            function handleSwipe() {
+                const deltaX = touchendX - touchstartX;
+                const deltaY = touchendY - touchstartY;
+                
+                if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > swipeThreshold) {
+                    const tabButtons = Array.from(document.querySelectorAll('.tab-button'));
+                    const currentTabIndex = tabButtons.findIndex(btn => btn.classList.contains('active'));
+                    
+                    if (touchendX < touchstartX) { // Swiped left
+                        if (currentTabIndex < tabButtons.length - 1) {
+                            loadView(tabButtons[currentTabIndex + 1].dataset.tab);
+                            tg.HapticFeedback.selectionChanged();
+                        }
+                    } else { // Swiped right
+                        if (currentTabIndex > 0) {
+                            loadView(tabButtons[currentTabIndex - 1].dataset.tab);
+                            tg.HapticFeedback.selectionChanged();
+                        }
+                    }
+                }
+            }
+        }
+
         async function init() {
             tg.ready();
             applyThemeParams();
             tg.expand();
             tg.enableClosingConfirmation();
-            fabButton = document.getElementById('fabButton');
 
             document.getElementById('userInfo').textContent = `Welcome, ${tg.initDataUnsafe.user?.first_name || 'User'}! (@${tg.initDataUnsafe.user?.username || 'anonymous'})`;
             
@@ -869,55 +801,26 @@ MAIN_APP_TEMPLATE = '''
                 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})`;
+                     document.getElementById('userInfo').textContent = `Logged in as: ${currentUser.first_name} (@${currentUser.username || 'id'+currentUser.id})`;
                 }
             } catch (error) {
                 console.error("Auth error:", error);
                 document.getElementById('userInfo').textContent = `Auth failed. Limited functionality.`;
-                tg.showAlert("Authentication with the server failed. Some features might not work correctly.");
             }
 
-            contentSwiper = new Swiper('#contentSwiper', {
-                initialSlide: 0,
-                autoHeight: false, // Important: slides manage their own height and scroll
-                on: {
-                    slideChange: function () {
-                        const newTabIndex = this.activeIndex;
-                        const newTabName = tabConfig[newTabIndex];
-                        if (newTabName && currentViewType !== newTabName) {
-                             // Only call loadView if the content for this tab isn't already being displayed or hasn't been loaded yet.
-                            // For simplicity, we might just always call it or check if the slide is empty.
-                            const targetSlide = document.getElementById(`${newTabName}Content`);
-                            if (targetSlide.querySelector('.loading') || targetSlide.querySelector('.empty-state') || currentViewType !== newTabName) {
-                                loadView(newTabName, false); // fromUserInteraction is false as swiper initiated it
-                            } else {
-                                // If content already loaded, just update tab state
-                                currentViewType = newTabName;
-                                updateActiveTab(newTabName);
-                                tg.BackButton.hide();
-                                tg.MainButton.hide();
-                                fabButton.style.display = 'block';
-                                contentSwiper.enabled = true;
-                            }
-                        }
-                    },
-                },
-            });
-
-
             document.querySelectorAll('.tab-button').forEach(button => {
                 button.addEventListener('click', () => {
-                    const tabId = button.dataset.tabId;
-                    contentSwiper.slideTo(parseInt(button.dataset.tabIndex));
-                    // Swiper's slideChange event will handle calling loadView or updating state
+                    tg.HapticFeedback.selectionChanged();
+                    loadView(button.dataset.tab);
                 });
             });
-            fabButton.addEventListener('click', () => {
+            document.getElementById('fabButton').addEventListener('click', () => {
                 tg.HapticFeedback.impactOccurred('medium');
-                showForm(currentViewType);
+                showForm(currentView);
             });
             
-            loadView('resumes', false); // Initial load
+            setupSwipeNavigation();
+            loadView('resumes');
         }
 
         init();
@@ -942,8 +845,6 @@ 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-images { margin-top: 5px; }
-        .item-images img { max-width: 50px; max-height: 50px; margin-right: 5px; border-radius: 3px; border: 1px solid #ccc; }
         .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; }
@@ -969,16 +870,16 @@ ADMIN_TEMPLATE = '''
 
         <div class="section">
             <h2>Data Synchronization with Hugging Face</h2>
-            <p><strong>Repo ID:</strong> {{ HF_REPO_ID_JS }}</p>
             <div class="sync-buttons">
-                <form method="POST" action="{{ url_for('force_upload_admin') }}" onsubmit="return confirm('Upload local data file ({{ DATA_FILE_JS }}) to Hugging Face? This will overwrite the remote data file.');">
-                    <button type="submit" class="button button-primary">Upload {{ DATA_FILE_JS }} 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 file ({{ DATA_FILE_JS }}) from Hugging Face? This will overwrite the local data file.');">
-                    <button type="submit" class="button button-secondary">Download {{ DATA_FILE_JS }} 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;">Image files are uploaded individually when items are created/edited. The buttons above only sync the main JSON data file. Automatic backup of {{ DATA_FILE_JS }} 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.</p>
+            <p style="font-size: 0.8em; color: #666;">Image files are stored in the '{{ UPLOAD_FOLDER_HF }}' directory in the HF repository.</p>
         </div>
 
         <div class="section">
@@ -987,16 +888,8 @@ ADMIN_TEMPLATE = '''
             <div class="item">
                 <h3>{{ resume.name }} - {{ resume.title }}</h3>
                 <p>User ID: {{ resume.user_id }} (@{{ resume.user_telegram_username }})</p>
-                <p>Posted: {{ resume.timestamp }}</p>
-                {% if resume.images %}
-                <div class="item-images">
-                    {% for img_path in resume.images %}
-                    <a href="https://huggingface.co/datasets/{{ HF_REPO_ID_JS }}/resolve/main/{{ img_path }}" target="_blank">
-                        <img src="https://huggingface.co/datasets/{{ HF_REPO_ID_JS }}/resolve/main/{{ img_path }}" alt="Image">
-                    </a>
-                    {% endfor %}
-                </div>
-                {% endif %}
+                <p>Images: {{ resume.images|length if resume.images else 0 }}</p>
+                <p>Posted: {{ resume.timestamp|format_datetime }}</p>
                 <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 }}">
@@ -1014,16 +907,8 @@ ADMIN_TEMPLATE = '''
             <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.images %}
-                <div class="item-images">
-                    {% for img_path in vacancy.images %}
-                     <a href="https://huggingface.co/datasets/{{ HF_REPO_ID_JS }}/resolve/main/{{ img_path }}" target="_blank">
-                        <img src="https://huggingface.co/datasets/{{ HF_REPO_ID_JS }}/resolve/main/{{ img_path }}" alt="Image">
-                    </a>
-                    {% endfor %}
-                </div>
-                {% endif %}
+                <p>Images: {{ vacancy.images|length if vacancy.images else 0 }}</p>
+                <p>Posted: {{ vacancy.timestamp|format_datetime }}</p>
                 <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 }}">
@@ -1042,16 +927,8 @@ ADMIN_TEMPLATE = '''
                 <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.images %}
-                <div class="item-images">
-                    {% for img_path in offer.images %}
-                     <a href="https://huggingface.co/datasets/{{ HF_REPO_ID_JS }}/resolve/main/{{ img_path }}" target="_blank">
-                        <img src="https://huggingface.co/datasets/{{ HF_REPO_ID_JS }}/resolve/main/{{ img_path }}" alt="Image">
-                    </a>
-                    {% endfor %}
-                </div>
-                {% endif %}
+                <p>Images: {{ offer.images|length if offer.images else 0 }}</p>
+                <p>Posted: {{ offer.timestamp|format_datetime }}</p>
                 <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 }}">
@@ -1067,9 +944,20 @@ ADMIN_TEMPLATE = '''
 </html>
 '''
 
+@app.template_filter('format_datetime')
+def format_datetime_filter(s):
+    if not s:
+        return "N/A"
+    try:
+        dt = datetime.fromisoformat(s)
+        return dt.strftime("%Y-%m-%d %H:%M:%S")
+    except:
+        return s
+
+
 @app.route('/')
 def main_app_view():
-    return render_template_string(MAIN_APP_TEMPLATE, HF_REPO_ID_JS=REPO_ID, MAX_IMAGES=MAX_IMAGES)
+    return render_template_string(MAIN_APP_TEMPLATE, HF_REPO_ID=REPO_ID)
 
 @app.route('/api/auth_user', methods=['POST'])
 def auth_user():
@@ -1081,42 +969,40 @@ def auth_user():
         else:
             return jsonify({"error": "Authentication data not provided"}), 401
 
-    is_valid, user_data_tg = verify_telegram_auth_data(auth_data_str, TELEGRAM_BOT_TOKEN)
+    is_valid, user_data = verify_telegram_auth_data(auth_data_str, TELEGRAM_BOT_TOKEN)
 
-    if not is_valid or not user_data_tg:
+    if not is_valid or not user_data:
+        logging.warning(f"Invalid auth data. Valid: {is_valid}, UserData: {user_data is not None}")
         return jsonify({"error": "Invalid authentication data"}), 403
 
     data = load_data()
     users = data.get('users', {})
-    user_id_str = str(user_data_tg.get('id'))
+    user_id_str = str(user_data.get('id'))
 
     if user_id_str not in users:
         users[user_id_str] = {
-            'id': user_data_tg.get('id'),
-            'first_name': user_data_tg.get('first_name'),
-            'last_name': user_data_tg.get('last_name'),
-            'username': user_data_tg.get('username'),
-            'language_code': user_data_tg.get('language_code'),
-            'photo_url': user_data_tg.get('photo_url'),
+            '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'),
             'first_seen': datetime.now().isoformat()
         }
     users[user_id_str]['last_seen'] = datetime.now().isoformat()
-    if user_data_tg.get('username'): users[user_id_str]['username'] = user_data_tg.get('username') # Update username if changed
-    
     data['users'] = users
     save_data(data)
     
     return jsonify({"message": "User authenticated", "user": users[user_id_str]}), 200
 
-def get_authenticated_user(request_obj): # Changed to pass request object
+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_tg = verify_telegram_auth_data(auth_data_str, TELEGRAM_BOT_TOKEN)
-    if is_valid and user_data_tg:
-        data = load_data() # Load current user data from our DB
-        user_id_str = str(user_data_tg.get('id'))
-        return data.get('users', {}).get(user_id_str) # Return our stored user object
+    is_valid, user_data = verify_telegram_auth_data(auth_data_str, TELEGRAM_BOT_TOKEN)
+    if is_valid and user_data:
+        return user_data
+    logging.warning(f"get_authenticated_user failed. Valid: {is_valid}, UserData: {user_data is not None}")
     return None
 
 @app.route('/api/upload_image', methods=['POST'])
@@ -1125,42 +1011,45 @@ def upload_image():
     if not user:
         return jsonify({"error": "Authentication required"}), 401
 
-    if 'file' not in request.files:
-        return jsonify({"error": "No file part"}), 400
+    if not HF_TOKEN_WRITE:
+        return jsonify({"error": "Image upload service not configured (no write token)."}), 500
+
+    if 'images' not in request.files:
+        return jsonify({"error": "No image files provided"}), 400
+
+    files = request.files.getlist('images')
+    if not files or all(f.filename == '' for f in files):
+        return jsonify({"error": "No selected files"}), 400
     
-    file = request.files['file']
-    if file.filename == '':
-        return jsonify({"error": "No selected file"}), 400
-
-    if file:
-        original_filename = secure_filename(file.filename)
-        file_extension = os.path.splitext(original_filename)[1]
-        unique_filename = f"{uuid.uuid4()}{file_extension}"
-        
-        local_folder_path = os.path.join(app.root_path, UPLOADS_FOLDER_NAME)
-        ensure_uploads_folder_exists() # Make sure it exists
-        local_file_path = os.path.join(local_folder_path, unique_filename)
-        
-        try:
-            file.save(local_file_path)
-            
-            path_in_repo = f"{UPLOADS_FOLDER_NAME}/{unique_filename}"
+    if len(files) > 10: # Max 10 images per upload request
+         return jsonify({"error": f"Cannot upload more than 10 images at once."}), 400
+
+
+    uploaded_image_paths = []
+    api = HfApi(token=HF_TOKEN_WRITE)
+
+    for file in files:
+        if file:
+            filename = secure_filename(file.filename)
+            unique_filename = f"{uuid.uuid4()}_{filename}"
+            path_in_repo = f"{UPLOAD_FOLDER_HF}/{unique_filename}"
             
-            if upload_file_to_hf_direct(local_file_path, path_in_repo, commit_msg_prefix="Upload image"):
-                os.remove(local_file_path) # Clean up local file after successful HF upload
-                return jsonify({"message": "File uploaded successfully to HF", "url": path_in_repo}), 201
-            else:
-                # If HF upload fails, still try to clean up local file, but report error
-                if os.path.exists(local_file_path):
-                    os.remove(local_file_path)
-                return jsonify({"error": "Failed to upload file to Hugging Face"}), 500
-        except Exception as e:
-            logging.error(f"Error during image upload process: {e}", exc_info=True)
-            if os.path.exists(local_file_path): # Cleanup if error occurred after save but before/during HF upload
-                 os.remove(local_file_path)
-            return jsonify({"error": f"An error occurred: {str(e)}"}), 500
-        
-    return jsonify({"error": "File processing failed"}), 500
+            try:
+                file.seek(0) 
+                api.upload_file(
+                    path_or_fileobj=file,
+                    path_in_repo=path_in_repo,
+                    repo_id=REPO_ID,
+                    repo_type="dataset",
+                    commit_message=f"Upload image {unique_filename} by user {user.get('id')}"
+                )
+                uploaded_image_paths.append(path_in_repo)
+                logging.info(f"Successfully uploaded {path_in_repo} by user {user.get('id')}")
+            except Exception as e:
+                logging.error(f"Failed to upload {unique_filename} to HF: {e}")
+                return jsonify({"error": f"Failed to upload image {filename}. Error: {str(e)}"}), 500
+    
+    return jsonify({"message": "Images uploaded successfully", "image_paths": uploaded_image_paths}), 200
 
 
 @app.route('/api/<item_type>', methods=['GET'])
@@ -1194,21 +1083,16 @@ def create_item(item_type):
     if not req_data:
         return jsonify({"error": "No data provided"}), 400
 
-    image_urls = req_data.get('images', [])
-    if not isinstance(image_urls, list) or len(image_urls) > MAX_IMAGES:
-        return jsonify({"error": f"Invalid image data or too many images (max {MAX_IMAGES})"}), 400
-    
-    # Sanitize image URLs (basic check for now)
-    valid_image_urls = [url for url in image_urls if isinstance(url, str) and url.startswith(UPLOADS_FOLDER_NAME + "/")]
-
-
     new_item = {
         "id": str(uuid.uuid4()),
-        "user_id": user.get('id'), 
-        "user_telegram_username": user.get('username', 'unknown'),
+        "user_id": str(user.get('id')),
+        "user_telegram_username": user.get('username', f"id{user.get('id')}"),
         "timestamp": datetime.now().isoformat(),
-        "images": valid_image_urls 
+        "images": req_data.get('images', []) 
     }
+    if len(new_item["images"]) > 10:
+        return jsonify({"error": "Cannot associate more than 10 images."}), 400
+
 
     if item_type == 'resumes':
         required_fields = ['name', 'title']
@@ -1256,12 +1140,6 @@ def update_item(item_type, item_id):
     req_data = request.json
     if not req_data: return jsonify({"error": "No data provided"}), 400
 
-    image_urls = req_data.get('images', [])
-    if not isinstance(image_urls, list) or len(image_urls) > MAX_IMAGES:
-        return jsonify({"error": f"Invalid image data or too many images (max {MAX_IMAGES})"}), 400
-    valid_image_urls = [url for url in image_urls if isinstance(url, str) and url.startswith(UPLOADS_FOLDER_NAME + "/")]
-
-
     data = load_data()
     items_list = data.get(item_type, [])
     item_index = -1
@@ -1278,7 +1156,10 @@ def update_item(item_type, item_id):
 
     updated_item = original_item.copy()
     updated_item['updated_timestamp'] = datetime.now().isoformat()
-    updated_item['images'] = valid_image_urls # Update images
+    updated_item['images'] = req_data.get('images', original_item.get('images', []))
+    if len(updated_item["images"]) > 10:
+        return jsonify({"error": "Cannot associate more than 10 images."}), 400
+
 
     if item_type == 'resumes':
         updated_item.update({
@@ -1330,11 +1211,11 @@ def delete_item(item_type, item_id):
     if not item_to_delete: return jsonify({"error": "Item not found"}), 404
 
     if str(item_to_delete.get('user_id')) != str(user.get('id')):
-        # Allow admin to delete later if needed by checking a role, for now, only owner.
+        # Allow admin deletion from here in future if needed by checking role
         return jsonify({"error": "Forbidden: You can only delete your own items"}), 403
-
-    # Note: Image files on HF are not deleted here. This would require more complex logic.
-    # For now, they will be orphaned.
+    
+    # Image deletion from HF is not implemented here to keep it simpler
+    # For full cleanup, one would iterate item_to_delete.get('images', []) and call api.delete_file()
 
     data[item_type] = [i for i in items_list if i['id'] != item_id]
     
@@ -1351,9 +1232,7 @@ def admin_panel():
                                   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),
-                                  HF_REPO_ID_JS=REPO_ID,
-                                  DATA_FILE_JS=DATA_FILE
-                                  )
+                                  UPLOAD_FOLDER_HF=UPLOAD_FOLDER_HF)
 
 @app.route('/admin/delete', methods=['POST'])
 def admin_delete_item():
@@ -1368,9 +1247,18 @@ def admin_delete_item():
     items_list = data.get(item_type, [])
     original_length = len(items_list)
     
+    # Future: If deleting images from HF is desired for admin delete:
     # item_to_delete = next((i for i in items_list if i['id'] == item_id), None)
-    # Images associated with this item are NOT deleted from HF in this admin action.
-    
+    # if item_to_delete and item_to_delete.get('images') and HF_TOKEN_WRITE:
+    #     api = HfApi(token=HF_TOKEN_WRITE)
+    #     for img_path in item_to_delete['images']:
+    #         try:
+    #             api.delete_file(path_in_repo=img_path, repo_id=REPO_ID, repo_type="dataset")
+    #             logging.info(f"Admin deleted image {img_path} from HF.")
+    #         except Exception as e:
+    #             logging.error(f"Admin failed to delete image {img_path} from HF: {e}")
+
+
     data[item_type] = [i for i in items_list if i['id'] != item_id]
 
     if len(data[item_type]) < original_length:
@@ -1382,12 +1270,10 @@ def admin_delete_item():
 
 @app.route('/admin/force_upload', methods=['POST'])
 def force_upload_admin():
-    logging.info("Admin forcing upload of data file to Hugging Face...")
+    logging.info("Admin forcing upload to Hugging Face...")
     try:
-        if upload_data_file_to_hf():
-            flash(f"Data file {DATA_FILE} successfully uploaded to Hugging Face.", 'success')
-        else:
-            flash(f"Failed to upload {DATA_FILE} to Hugging Face. Check logs.", 'error')
+        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')
@@ -1395,13 +1281,13 @@ def force_upload_admin():
 
 @app.route('/admin/force_download', methods=['POST'])
 def force_download_admin():
-    logging.info("Admin forcing download of data file from Hugging Face...")
+    logging.info("Admin forcing download from Hugging Face...")
     try:
-        if download_db_from_hf(specific_file=DATA_FILE):
-            flash(f"Data file {DATA_FILE} successfully downloaded from Hugging Face. Local file updated.", 'success')
+        if download_db_from_hf():
+            flash("Data successfully downloaded from Hugging Face. Local files updated.", 'success')
             load_data() 
         else:
-            flash(f"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')
@@ -1409,23 +1295,18 @@ def force_download_admin():
 
 
 if __name__ == '__main__':
-    logging.info("Application starting up...")
-    
-    ensure_uploads_folder_exists()
-    
-    logging.info("Performing initial data file download (if available on HF)...")
-    download_db_from_hf(specific_file=DATA_FILE) 
-    
-    logging.info("Loading initial data...")
+    logging.info("Application starting up. Performing initial data load/download...")
+    if not os.path.exists(DATA_FILE):
+        download_db_from_hf(specific_file=DATA_FILE) 
     load_data()
-    logging.info("Initial data load sequence complete.")
+    logging.info("Initial data load complete.")
 
     if HF_TOKEN_WRITE:
         backup_thread = threading.Thread(target=periodic_backup, daemon=True)
         backup_thread.start()
-        logging.info("Periodic backup thread for data file started.")
+        logging.info("Periodic backup thread started.")
     else:
-        logging.warning(f"Periodic backup of {DATA_FILE} will NOT run (HF_TOKEN_WRITE not set).")
+        logging.warning("Periodic backup will NOT run (HF_TOKEN_WRITE not set).")
 
     port = int(os.environ.get('PORT', 7860))
     logging.info(f"Starting Flask app on host 0.0.0.0 and port {port}")