Update app.py

app.py

@@ -1,5 +1,3 @@
-# --- START OF FILE app (20).py ---
-
 from flask import Flask, render_template_string, request, redirect, url_for, jsonify, flash, send_from_directory
 import json
 import os
@@ -40,7 +38,7 @@ logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)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', 'profile_pictures']:
+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)
 
@@ -52,13 +50,11 @@ def delete_existing_image(image_url):
     if not image_url:
         return
     try:
-        parsed_url = urllib.parse.urlparse(image_url)
-        path_parts = parsed_url.path.strip('/').split('/')
-        
-        if len(path_parts) == 3 and path_parts[0] == UPLOADS_DIR_NAME:
-            item_type_subdir = path_parts[1]
-            img_filename = path_parts[2]
-            local_image_path = os.path.join(app.config['UPLOADS_DIR'], item_type_subdir, secure_filename(img_filename))
+        image_path_parts = image_url.split('/')
+        if len(image_path_parts) == 4 and image_path_parts[1] == UPLOADS_DIR_NAME:
+            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}")
@@ -100,8 +96,8 @@ def download_db_from_hf(specific_file=None, retries=DOWNLOAD_RETRIES, delay=DOWN
                                 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 = True
-                    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:
@@ -253,6 +249,10 @@ MAIN_APP_TEMPLATE = '''
             --tg-theme-section-header-text-color: #8e8e93;
             --tg-theme-destructive-text-color: #ff3b30;
             --tg-theme-accent-text-color: #007aff;
+            --border-radius-s: 8px;
+            --border-radius-m: 12px;
+            --padding-s: 10px;
+            --padding-m: 15px;
         }
         body {
             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
@@ -264,54 +264,45 @@ MAIN_APP_TEMPLATE = '''
             -webkit-font-smoothing: antialiased;
             -moz-osx-font-smoothing: grayscale;
             transition: background-color 0.3s, color 0.3s;
-            display: flex;
-            flex-direction: column;
             min-height: 100vh;
-            min-height: 100dvh; 
+            min-height: calc(100vh - env(safe-area-inset-bottom));
+            padding-bottom: env(safe-area-inset-bottom);
         }
-        .app-container { display: flex; flex-direction: column; flex-grow: 1; }
+        .app-container { display: flex; flex-direction: column; min-height: 100vh; }
         .header {
             background-color: var(--tg-theme-header-bg-color);
-            padding: 10px 15px;
+            padding: var(--padding-s) var(--padding-m);
             text-align: center;
             font-weight: 600;
-            font-size: 18px;
+            font-size: 17px;
             border-bottom: 1px solid var(--tg-theme-secondary-bg-color);
             position: sticky;
             top: 0;
             z-index: 100;
             transition: background-color 0.3s, border-bottom-color 0.3s;
-            backdrop-filter: blur(10px);
-            -webkit-backdrop-filter: blur(10px);
         }
         .user-info { 
-            padding: 12px 15px; 
+            padding: var(--padding-s) var(--padding-m); 
             background-color: var(--tg-theme-secondary-bg-color); 
-            font-size: 14px; 
-            text-align: center; 
+            font-size: 14px; text-align: center; 
             color: var(--tg-theme-hint-color); 
-            display: flex; 
-            align-items: center; 
-            justify-content: center; 
-            gap: 8px;
-            border-bottom: 1px solid var(--tg-theme-bg-color);
+            display: flex; align-items: center; justify-content: center; 
             transition: background-color 0.3s, color 0.3s; 
+            border-bottom: 1px solid var(--tg-theme-secondary-bg-color);
         }
-        .user-info img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
-        
+        .user-info img { width: 28px; height: 28px; border-radius: 50%; vertical-align: middle; margin-right: 10px; object-fit: cover; }
         .tabs { 
             display: flex; 
-            background-color: var(--tg-theme-header-bg-color); 
-            padding: 5px;
-            gap: 5px;
-            transition: background-color 0.3s;
+            background-color: var(--tg-theme-secondary-bg-color); 
+            padding: 5px; 
+            transition: background-color 0.3s; 
             position: sticky;
-            top: 48px; /* Adjust if header height changes */
+            top: calc(env(safe-area-inset-top) + 47px); /* Approx header height */
             z-index: 99;
         }
         .tab-button {
             flex: 1;
-            padding: 12px 8px;
+            padding: var(--padding-s);
             text-align: center;
             cursor: pointer;
             background: none;
@@ -320,60 +311,65 @@ MAIN_APP_TEMPLATE = '''
             font-size: 15px;
             font-weight: 500;
             border-bottom: 3px solid transparent;
-            transition: color 0.25s ease, border-bottom-color 0.25s ease;
-            border-radius: 6px 6px 0 0;
+            transition: color 0.2s, border-bottom-color 0.2s, background-color 0.2s;
+            border-radius: var(--border-radius-s) var(--border-radius-s) 0 0;
         }
-        .tab-button.active { color: var(--tg-theme-link-color); border-bottom-color: var(--tg-theme-link-color); font-weight: 600; }
-        .content { flex-grow: 1; padding: 15px; transition: opacity 0.3s ease-in-out; }
+        .tab-button:hover { background-color: rgba(0,0,0,0.05); }
+        .tab-button.active { color: var(--tg-theme-link-color); border-bottom-color: var(--tg-theme-link-color); font-weight: 600;}
         
-        .view-transition { opacity: 0; transform: translateY(15px); transition: opacity 0.3s ease-out, transform 0.3s ease-out; }
-        .view-transition.visible { opacity: 1; transform: translateY(0); }
+        .content { 
+            flex-grow: 1; 
+            padding: var(--padding-m); 
+        }
+        .content-inner {
+            opacity: 0;
+            transform: translateY(15px);
+            transition: opacity 0.3s ease-out, transform 0.3s ease-out;
+        }
+        .content-inner.visible {
+            opacity: 1;
+            transform: translateY(0);
+        }
 
         .list-item {
             background-color: var(--tg-theme-section-bg-color);
-            border-radius: 12px;
-            padding: 15px;
+            border-radius: var(--border-radius-m);
+            padding: 12px var(--padding-m);
             margin-bottom: 12px;
             box-shadow: 0 4px 12px rgba(0,0,0,0.08);
             cursor: pointer;
-            transition: background-color 0.2s, transform 0.15s ease-out;
+            transition: background-color 0.2s, transform 0.15s ease-out, box-shadow 0.2s;
+            overflow: hidden;
         }
-        .list-item:active { background-color: var(--tg-theme-secondary-bg-color); transform: scale(0.97); }
-        .list-item-content { display: flex; align-items: flex-start; gap: 15px; }
-        .list-item-image { 
-            width: 60px; height: 60px; 
-            border-radius: 10px; 
-            object-fit: cover; 
-            background-color: var(--tg-theme-secondary-bg-color); 
-            flex-shrink: 0;
-            display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--tg-theme-hint-color);
-        }
-        .list-item-text h3 { margin: 0 0 6px 0; font-size: 17px; font-weight: 600; color: var(--tg-theme-text-color); line-height: 1.3; }
-        .list-item-text p { margin: 0 0 4px 0; font-size: 14px; color: var(--tg-theme-hint-color); line-height: 1.4; }
-        .list-item-text .meta { font-size: 13px; color: var(--tg-theme-hint-color); margin-top: 6px; }
-        .list-item-actions { margin-top: 10px; display: flex; gap: 10px; }
-        .list-item-actions button {
-            padding: 6px 12px; font-size: 13px; border-radius: 6px; border: none; cursor: pointer;
-            background-color: var(--tg-theme-button-color); color: var(--tg-theme-button-text-color);
-        }
-        .list-item-actions .delete-btn { background-color: var(--tg-theme-destructive-text-color); }
-
-
-        .form-container { padding: 20px; background-color: var(--tg-theme-section-bg-color); border-radius: 12px; margin-bottom: 15px;}
-        .form-group { margin-bottom: 18px; }
-        .form-group label { display: block; font-size: 15px; color: var(--tg-theme-section-header-text-color); margin-bottom: 6px; font-weight: 500;}
+        .list-item:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.12); transform: translateY(-2px); }
+        .list-item:active { background-color: var(--tg-theme-secondary-bg-color); transform: scale(0.98) translateY(0); }
+        .list-item h3 { margin: 0 0 6px 0; font-size: 17px; font-weight: 600; color: var(--tg-theme-text-color); line-height: 1.3; }
+        .list-item p { margin: 0 0 4px 0; font-size: 14px; color: var(--tg-theme-hint-color); line-height: 1.4; }
+        .list-item .meta { font-size: 13px; color: var(--tg-theme-hint-color); margin-top: 8px; }
+        .list-item-image { width: 60px; height: 60px; border-radius: var(--border-radius-s); object-fit: cover; margin-right: 12px; background-color: var(--tg-theme-secondary-bg-color); flex-shrink: 0; }
+        .list-item-content { display: flex; align-items: center; }
+        .list-item-text-content { flex-grow: 1; min-width: 0; /* Fix for text overflow */ }
+
+
+        .form-container { padding: var(--padding-m); background-color: var(--tg-theme-section-bg-color); border-radius: var(--border-radius-m); margin-bottom: var(--padding-m);}
+        .form-group { margin-bottom: var(--padding-m); }
+        .form-group label { display: block; font-size: 14px; color: var(--tg-theme-section-header-text-color); margin-bottom: 6px; font-weight: 500;}
         .form-group input, .form-group textarea, .form-group input[type="file"] {
             width: 100%;
             padding: 12px;
             border: 1px solid var(--tg-theme-secondary-bg-color);
-            border-radius: 10px;
+            border-radius: var(--border-radius-s);
             font-size: 16px;
             background-color: var(--tg-theme-bg-color);
             color: var(--tg-theme-text-color);
             box-sizing: border-box;
-            transition: border-color 0.2s;
+            transition: border-color 0.2s, box-shadow 0.2s;
+        }
+        .form-group input:focus, .form-group textarea:focus {
+            border-color: var(--tg-theme-link-color);
+            box-shadow: 0 0 0 2px var(--tg-theme-link-color_alpha_0_3, rgba(0,122,255,0.3)); /* Use alpha if available */
+            outline: none;
         }
-        .form-group input:focus, .form-group textarea:focus { border-color: var(--tg-theme-link-color); outline: none; }
         .form-group input[type="file"] { padding: 8px; }
         .form-group textarea { min-height: 100px; resize: vertical; }
         
@@ -381,39 +377,70 @@ MAIN_APP_TEMPLATE = '''
             position: fixed;
             bottom: calc(20px + env(safe-area-inset-bottom));
             right: 20px;
-            width: 60px;
-            height: 60px;
+            width: 56px;
+            height: 56px;
             background-color: var(--tg-theme-button-color);
             color: var(--tg-theme-button-text-color);
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
-            font-size: 32px;
-            line-height: 32px;
-            box-shadow: 0 6px 16px rgba(0,0,0,0.2);
+            font-size: 28px;
+            line-height: 28px;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
             cursor: pointer;
             z-index: 1000;
             border: none;
-            transition: background-color 0.3s, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+            transition: background-color 0.3s, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s;
         }
-        .fab:active { transform: scale(0.92); }
+        .fab:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.25); transform: translateY(-2px); }
+        .fab:active { transform: scale(0.9); box-shadow: 0 2px 10px rgba(0,0,0,0.2); }
         
-        .detail-view { padding: 20px; background-color: var(--tg-theme-section-bg-color); border-radius: 12px; }
-        .detail-view h2 { margin-top: 0; font-size: 24px; font-weight: 700; color: var(--tg-theme-text-color); margin-bottom: 15px; }
+        .detail-view { padding: var(--padding-m); background-color: var(--tg-theme-section-bg-color); border-radius: var(--border-radius-m); margin-bottom: var(--padding-m); }
+        .detail-view h2 { margin-top: 0; font-size: 24px; font-weight: 600; color: var(--tg-theme-text-color); margin-bottom: 15px; }
         .detail-view p { margin-bottom: 12px; line-height: 1.65; font-size: 16px; }
-        .detail-view strong { font-weight: 600; color: var(--tg-theme-section-header-text-color); }
-        .detail-image { width: 100%; max-height: 300px; border-radius: 10px; margin-bottom: 20px; background-color: var(--tg-theme-secondary-bg-color); object-fit: cover; }
-        .detail-meta { font-size: 13px; color: var(--tg-theme-hint-color); margin-top: 20px; }
-        .button-destructive {
-             background-color: var(--tg-theme-destructive-text-color) !important; 
-             color: var(--tg-theme-button-text-color) !important;
-             padding: 12px 15px; border: none; border-radius: 8px; font-size: 16px; width: 100%;
-             cursor: pointer; margin-top: 15px;
+        .detail-view strong { font-weight: 500; color: var(--tg-theme-section-header-text-color); }
+        .detail-image { width: 100%; max-height: 300px; object-fit: cover; border-radius: var(--border-radius-s); margin-bottom: var(--padding-m); background-color: var(--tg-theme-secondary-bg-color); }
+        .detail-actions { margin-top: 20px; display: flex; gap: 10px; }
+        .action-button {
+            flex: 1;
+            padding: 12px 15px;
+            border-radius: var(--border-radius-s);
+            font-size: 16px;
+            font-weight: 500;
+            cursor: pointer;
+            text-align: center;
+            transition: background-color 0.2s, transform 0.1s;
+            border: none;
         }
+        .action-button-edit { background-color: var(--tg-theme-button-color); color: var(--tg-theme-button-text-color); }
+        .action-button-delete { background-color: var(--tg-theme-destructive-text-color); color: var(--tg-theme-button-text-color); }
+        .action-button:active { transform: scale(0.98); }
 
-        .loading, .empty-state { text-align: center; padding: 50px 20px; color: var(--tg-theme-hint-color); font-size: 17px; }
+        .loading, .empty-state { text-align: center; padding: 50px var(--padding-m); color: var(--tg-theme-hint-color); font-size: 17px; }
+        
         .error-message { color: var(--tg-theme-destructive-text-color); font-size: 14px; margin-top: 8px; }
+        .profile-item {
+            background-color: var(--tg-theme-section-bg-color);
+            border-radius: var(--border-radius-m);
+            padding: var(--padding-m);
+            margin-bottom: 12px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+        }
+        .profile-item h4 { margin: 0 0 8px 0; font-size: 16px; font-weight: 600; }
+        .profile-item p { margin: 0 0 10px 0; font-size: 14px; color: var(--tg-theme-hint-color); }
+        .profile-item-actions { display: flex; gap: 10px; margin-top: 10px; }
+        .profile-item-actions button {
+            padding: 8px 12px;
+            border-radius: var(--border-radius-s);
+            font-size: 14px;
+            cursor: pointer;
+            border: none;
+            transition: background-color 0.2s;
+        }
+        .profile-button-view { background-color: var(--tg-theme-button-color); color: var(--tg-theme-button-text-color); }
+        .profile-button-delete { background-color: var(--tg-theme-destructive-text-color); color: var(--tg-theme-button-text-color); }
+
     </style>
 </head>
 <body>
@@ -427,10 +454,12 @@ MAIN_APP_TEMPLATE = '''
             <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>
-            <button class="tab-button" data-tab="profile">Profile</button>
+            <button class="tab-button" data-tab="profile">My Profile</button>
         </div>
-        <div class="content view-transition" id="mainContent">
-            <div class="loading">Loading content...</div>
+        <div class="content" id="mainContentWrapper">
+            <div id="mainContent" class="content-inner">
+                 <div class="loading">Loading content...</div>
+            </div>
         </div>
         <button class="fab" id="fabButton" title="Add New Item">+</button>
     </div>
@@ -441,26 +470,37 @@ MAIN_APP_TEMPLATE = '''
         let currentView = 'resumes';
         let currentItem = null;
         const tabOrder = ['resumes', 'vacancies', 'freelance_offers', 'profile'];
-        const mainContentEl = document.getElementById('mainContent');
+        const mainContentWrapper = document.getElementById('mainContentWrapper');
+        const mainContent = document.getElementById('mainContent');
 
         function applyThemeParams() {
             const root = document.documentElement;
-            const theme = tg.themeParams;
-            root.style.setProperty('--tg-theme-bg-color', theme.bg_color || '#ffffff');
-            root.style.setProperty('--tg-theme-text-color', theme.text_color || '#000000');
-            root.style.setProperty('--tg-theme-hint-color', theme.hint_color || '#999999');
-            root.style.setProperty('--tg-theme-link-color', theme.link_color || '#007aff');
-            root.style.setProperty('--tg-theme-button-color', theme.button_color || '#007aff');
-            root.style.setProperty('--tg-theme-button-text-color', theme.button_text_color || '#ffffff');
-            root.style.setProperty('--tg-theme-secondary-bg-color', theme.secondary_bg_color || '#f0f0f0');
-            root.style.setProperty('--tg-theme-header-bg-color', theme.header_bg_color || theme.secondary_bg_color || '#efeff4');
-            root.style.setProperty('--tg-theme-section-bg-color', theme.section_bg_color || theme.bg_color || '#ffffff');
-            root.style.setProperty('--tg-theme-section-header-text-color', theme.section_header_text_color || theme.hint_color || '#8e8e93');
-            root.style.setProperty('--tg-theme-destructive-text-color', theme.destructive_text_color || '#ff3b30');
-            root.style.setProperty('--tg-theme-accent-text-color', theme.accent_text_color || theme.link_color || '#007aff');
+            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');
             
-            if (tg.colorScheme) {
-                document.body.setAttribute('data-color-scheme', tg.colorScheme);
+            const headerBg = tg.themeParams.header_bg_color || tg.themeParams.secondary_bg_color || '#efeff4';
+            root.style.setProperty('--tg-theme-header-bg-color', headerBg);
+            
+            const sectionBg = tg.themeParams.section_bg_color || tg.themeParams.bg_color || '#ffffff';
+            root.style.setProperty('--tg-theme-section-bg-color', sectionBg);
+
+            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');
+
+            if (tg.themeParams.link_color) {
+                 // For input focus box-shadow
+                 try {
+                    let r = parseInt(tg.themeParams.link_color.slice(1,3), 16);
+                    let g = parseInt(tg.themeParams.link_color.slice(3,5), 16);
+                    let b = parseInt(tg.themeParams.link_color.slice(5,7), 16);
+                    root.style.setProperty('--tg-theme-link-color_alpha_0_3', `rgba(${r},${g},${b},0.3)`);
+                 } catch(e) { /*ignore*/ }
             }
         }
         
@@ -481,9 +521,10 @@ MAIN_APP_TEMPLATE = '''
             try {
                 const response = await fetch(endpoint, options);
                 if (!response.ok) {
-                    const errorData = await response.json().catch(() => ({ error: 'Request failed: ' + response.status }));
+                    const errorData = await response.json().catch(() => ({ error: 'Request failed with status ' + response.status }));
                     throw new Error(errorData.error || `HTTP error ${response.status}`);
                 }
+                if (response.status === 204) return null; // No content for DELETE
                 return response.json();
             } catch (error) {
                 console.error('API Call Error:', error);
@@ -491,64 +532,44 @@ MAIN_APP_TEMPLATE = '''
                 throw error;
             }
         }
+        
+        function setContent(htmlContent, isLoading = false) {
+            mainContent.classList.remove('visible');
+            mainContentWrapper.scrollTop = 0; // Scroll to top on content change
 
-        function renderList(items, type) {
-            mainContentEl.classList.remove('visible');
             setTimeout(() => {
-                if (!items || items.length === 0) {
-                    mainContentEl.innerHTML = `<div class="empty-state">No ${type.replace('_', ' ')} found. Be the first to add one!</div>`;
-                } else {
-                    mainContentEl.innerHTML = items.map(item => `
-                        <div class="list-item" onclick="showDetailView('${type}', '${item.id}')">
-                            <div class="list-item-content">
-                                <div class="list-item-image">${item.image_url ? `<img src="${item.image_url}" alt="Image" style="width:100%;height:100%;object-fit:cover;">` : '🖼️'}</div>
-                                <div class="list-item-text">
-                                    <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">By: @${item.user_telegram_username || 'anonymous'} on ${new Date(item.timestamp).toLocaleDateString()}</p>
-                                </div>
-                            </div>
-                        </div>
-                    `).join('');
-                }
-                mainContentEl.classList.add('visible');
-            }, 150); 
+                mainContent.innerHTML = isLoading ? `<div class="loading">${htmlContent}</div>` : htmlContent;
+                mainContent.classList.add('visible');
+            }, 100); // Short delay for transition effect
         }
-        
-        function renderProfileList(items) {
-            mainContentEl.classList.remove('visible');
-            setTimeout(() => {
-                if (!items || items.length === 0) {
-                    mainContentEl.innerHTML = `<div class="empty-state">You haven't posted anything yet.</div>`;
-                } else {
-                    mainContentEl.innerHTML = items.map(item => `
-                        <div class="list-item">
-                            <div class="list-item-content" onclick="showDetailView('${item.original_type}', '${item.id}')">
-                                <div class="list-item-image">${item.image_url ? `<img src="${item.image_url}" alt="Image" style="width:100%;height:100%;object-fit:cover;">` : '📝'}</div>
-                                <div class="list-item-text">
-                                    <h3>${item.title || item.name || 'Untitled'} (${item.original_type.slice(0,-1).replace('_', ' ')})</h3>
-                                    <p class="meta">Posted on ${new Date(item.timestamp).toLocaleDateString()}</p>
-                                </div>
-                            </div>
-                            <div class="list-item-actions">
-                                <button onclick="event.stopPropagation(); showForm('${item.original_type}', '${item.id}')">Edit</button>
-                                <button class="delete-btn" onclick="event.stopPropagation(); handleDeleteItem('${item.original_type}', '${item.id}', true)">Delete</button>
+
+        function renderList(items, type) {
+            if (!items || items.length === 0) {
+                setContent(`<div class="empty-state">No ${type.replace('_', ' ')} found. Be the first to add one!</div>`);
+            } else {
+                const listHtml = 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 class="list-item-text-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('');
-                }
-                mainContentEl.classList.add('visible');
-            }, 150);
+                    </div>
+                `).join('');
+                setContent(listHtml);
+            }
         }
 
-
         function showDetailView(type, id) {
             tg.BackButton.show();
-            tg.BackButton.onClick(() => { loadView(currentView === 'profile' ? 'profile' : type); tg.HapticFeedback.impactOccurred('light'); });
+            tg.BackButton.onClick(() => { loadView(currentView); tg.HapticFeedback.impactOccurred('light'); });
             tg.MainButton.hide();
             document.getElementById('fabButton').style.display = 'none';
-            mainContentEl.classList.remove('visible');
+            setContent(`Loading details...`, true);
 
             apiCall(`/api/${type}/${id}`)
                 .then(item => {
@@ -559,81 +580,61 @@ MAIN_APP_TEMPLATE = '''
                     }
                     detailsHtml += `<h2>${item.title || item.name}</h2>`;
                     
-                    const nl2br = (str) => str ? str.replace(/\\n/g, '<br>').replace(/\n/g, '<br>') : 'N/A';
-
                     if (type === 'resumes') {
                         detailsHtml += `
                             <p><strong>Skills:</strong> ${item.skills || 'N/A'}</p>
-                            <p><strong>Experience:</strong><br>${nl2br(item.experience)}</p>
-                            <p><strong>Education:</strong><br>${nl2br(item.education)}</p>
+                            <p><strong>Experience:</strong><br>${item.experience ? item.experience.replace(/\\n/g, '<br>') : 'N/A'}</p>
+                            <p><strong>Education:</strong><br>${item.education ? item.education.replace(/\\n/g, '<br>') : 'N/A'}</p>
                             <p><strong>Contact:</strong> ${item.contact || `@${item.user_telegram_username}`}</p>
                             ${item.portfolio_link ? `<p><strong>Portfolio:</strong> <a href="${item.portfolio_link}" target="_blank" style="color:var(--tg-theme-link-color);">${item.portfolio_link}</a></p>` : ''}
                         `;
                     } else if (type === 'vacancies') {
                         detailsHtml += `
                             <p><strong>Company:</strong> ${item.company_name || 'N/A'}</p>
-                            <p><strong>Description:</strong><br>${nl2br(item.description)}</p>
-                            <p><strong>Requirements:</strong><br>${nl2br(item.requirements)}</p>
+                            <p><strong>Description:</strong><br>${item.description ? item.description.replace(/\\n/g, '<br>') : 'N/A'}</p>
+                            <p><strong>Requirements:</strong><br>${item.requirements ? item.requirements.replace(/\\n/g, '<br>') : 'N/A'}</p>
                             <p><strong>Salary:</strong> ${item.salary || 'N/A'}</p>
                             <p><strong>Location:</strong> ${item.location || 'N/A'}</p>
-                            <p><strong>Contact/Apply:</strong> ${nl2br(item.contact) || `@${item.user_telegram_username}`}</p>
+                            <p><strong>Contact/Apply:</strong> ${item.contact || `@${item.user_telegram_username}`}</p>
                         `;
                     } else if (type === 'freelance_offers') {
                         detailsHtml += `
-                            <p><strong>Description:</strong><br>${nl2br(item.description)}</p>
+                            <p><strong>Description:</strong><br>${item.description ? item.description.replace(/\\n/g, '<br>') : 'N/A'}</p>
                             <p><strong>Budget:</strong> ${item.budget || 'N/A'}</p>
                             <p><strong>Deadline:</strong> ${item.deadline || 'N/A'}</p>
                             <p><strong>Skills Needed:</strong> ${item.skills_needed || 'N/A'}</p>
                             <p><strong>Contact:</strong> ${item.contact || `@${item.user_telegram_username}`}</p>
                         `;
                     }
-                    detailsHtml += `<p class="detail-meta">Posted by: @${item.user_telegram_username || 'anonymous'} on ${new Date(item.timestamp).toLocaleDateString()}</p>`;
-                    
+                    detailsHtml += `<p class="meta">Posted by: @${item.user_telegram_username || 'anonymous'} on ${new Date(item.timestamp).toLocaleDateString()}</p>`;
+
                     if (currentUser && item.user_id === currentUser.id) {
-                        detailsHtml += `<button class="button-destructive" onclick="handleDeleteItem('${type}', '${item.id}')">Delete This Post</button>`;
-                        tg.MainButton.setText('Edit My Post');
-                        tg.MainButton.onClick(() => { showForm(type, item.id); tg.HapticFeedback.impactOccurred('light'); });
-                        tg.MainButton.show();
+                        detailsHtml += `
+                            <div class="detail-actions">
+                                <button class="action-button action-button-edit" onclick="showForm('${type}', currentItem)">Edit Post</button>
+                                <button class="action-button action-button-delete" onclick="handleDeleteItem('${type}', '${item.id}')">Delete Post</button>
+                            </div>
+                        `;
                     }
                     detailsHtml += `</div>`;
-                    
-                    setTimeout(() => {
-                        mainContentEl.innerHTML = detailsHtml;
-                        mainContentEl.classList.add('visible');
-                    },150);
+                    setContent(detailsHtml);
                 })
                 .catch(err => {
-                    setTimeout(() => {
-                        mainContentEl.innerHTML = `<div class="empty-state">Error loading details. Please try again.</div>`;
-                        mainContentEl.classList.add('visible');
-                    }, 150);
+                    setContent(`<div class="empty-state">Error loading details.</div>`);
                 });
         }
         
-        async function showForm(type, itemIdToEdit = null) {
-            let itemToEdit = null;
-            if(itemIdToEdit){
-                try {
-                    itemToEdit = await apiCall(`/api/${type}/${itemIdToEdit}`);
-                } catch(e) {
-                    tg.showAlert("Failed to load item data for editing.");
-                    loadView(currentView); // Go back to list
-                    return;
-                }
-            }
+        function showForm(type, itemToEdit = null) {
             currentItem = itemToEdit;
-
             tg.BackButton.show();
             tg.BackButton.onClick(() => {
                 if (itemToEdit) showDetailView(type, itemToEdit.id);
-                else loadView(currentView); // currentView should be the tab from which form was opened
+                else loadView(type);
                 tg.HapticFeedback.impactOccurred('light');
             });
             document.getElementById('fabButton').style.display = 'none';
-            mainContentEl.classList.remove('visible');
-
-            let formHtml = `<div class="form-container"><h2>${itemToEdit ? 'Edit' : 'New'} ${type.slice(0, -1).replace('_',' ')}</h2>`;
             
+            let formHtml = `<div class="form-container"><h2>${itemToEdit ? 'Edit' : 'New'} ${type.slice(0, -1).replace('_',' ')}</h2>`;
             const commonFields = `
                 <div class="form-group">
                     <label for="image">Image (Optional)</label>
@@ -644,103 +645,39 @@ MAIN_APP_TEMPLATE = '''
 
             if (type === 'resumes') {
                 formHtml += `
-                    <div class="form-group">
-                        <label for="name">Full Name*</label>
-                        <input type="text" id="name" value="${itemToEdit?.name || ''}" required>
-                    </div>
-                    <div class="form-group">
-                        <label for="title">Job Title / Desired Position*</label>
-                        <input type="text" id="title" value="${itemToEdit?.title || ''}" required>
-                    </div>
+                    <div class="form-group"> <label for="name">Full Name</label> <input type="text" id="name" value="${itemToEdit?.name || ''}" required> </div>
+                    <div class="form-group"> <label for="title">Job Title / Desired Position</label> <input type="text" id="title" value="${itemToEdit?.title || ''}" required> </div>
                     ${commonFields}
-                    <div class="form-group">
-                        <label for="skills">Skills (comma separated)</label>
-                        <textarea id="skills">${itemToEdit?.skills || ''}</textarea>
-                    </div>
-                    <div class="form-group">
-                        <label for="experience">Experience</label>
-                        <textarea id="experience">${itemToEdit?.experience || ''}</textarea>
-                    </div>
-                    <div class="form-group">
-                        <label for="education">Education</label>
-                        <textarea id="education">${itemToEdit?.education || ''}</textarea>
-                    </div>
-                    <div class="form-group">
-                        <label for="contact">Contact Info (e.g., email, or blank for Telegram)</label>
-                        <input type="text" id="contact" value="${itemToEdit?.contact || ''}">
-                    </div>
-                    <div class="form-group">
-                        <label for="portfolio_link">Portfolio Link (optional)</label>
-                        <input type="url" id="portfolio_link" value="${itemToEdit?.portfolio_link || ''}">
-                    </div>
+                    <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>
                 `;
             } else if (type === 'vacancies') {
                 formHtml += `
-                    <div class="form-group">
-                        <label for="company_name">Company Name*</label>
-                        <input type="text" id="company_name" value="${itemToEdit?.company_name || ''}" required>
-                    </div>
-                    <div class="form-group">
-                        <label for="title">Job Title*</label>
-                        <input type="text" id="title" value="${itemToEdit?.title || ''}" required>
-                    </div>
+                    <div class="form-group"> <label for="company_name">Company Name</label> <input type="text" id="company_name" value="${itemToEdit?.company_name || ''}" required> </div>
+                    <div class="form-group"> <label for="title">Job Title</label> <input type="text" id="title" value="${itemToEdit?.title || ''}" required> </div>
                     ${commonFields}
-                    <div class="form-group">
-                        <label for="description">Description</label>
-                        <textarea id="description">${itemToEdit?.description || ''}</textarea>
-                    </div>
-                    <div class="form-group">
-                        <label for="requirements">Requirements</label>
-                        <textarea id="requirements">${itemToEdit?.requirements || ''}</textarea>
-                    </div>
-                    <div class="form-group">
-                        <label for="salary">Salary/Compensation</label>
-                        <input type="text" id="salary" value="${itemToEdit?.salary || ''}">
-                    </div>
-                    <div class="form-group">
-                        <label for="location">Location (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="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>
                 `;
             } else if (type === 'freelance_offers') {
                 formHtml += `
-                    <div class="form-group">
-                        <label for="title">Project Title*</label>
-                        <input type="text" id="title" value="${itemToEdit?.title || ''}" required>
-                    </div>
+                    <div class="form-group"> <label for="title">Project Title</label> <input type="text" id="title" value="${itemToEdit?.title || ''}" required> </div>
                     ${commonFields}
-                    <div class="form-group">
-                        <label for="description">Description of Work</label>
-                        <textarea id="description">${itemToEdit?.description || ''}</textarea>
-                    </div>
-                    <div class="form-group">
-                        <label for="budget">Budget</label>
-                        <input type="text" id="budget" value="${itemToEdit?.budget || ''}">
-                    </div>
-                    <div class="form-group">
-                        <label for="deadline">Expected Deadline</label>
-                        <input type="text" id="deadline" value="${itemToEdit?.deadline || ''}">
-                    </div>
-                    <div class="form-group">
-                        <label for="skills_needed">Skills Needed (comma separated)</label>
-                        <textarea id="skills_needed">${itemToEdit?.skills_needed || ''}</textarea>
-                    </div>
-                     <div class="form-group">
-                        <label for="contact">Contact Info (or blank for Telegram)</label>
-                        <input type="text" id="contact" value="${itemToEdit?.contact || ''}">
-                    </div>
+                    <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>
                 `;
             }
             formHtml += `<div id="formError" class="error-message"></div></div>`;
-            
-            setTimeout(() => {
-                mainContentEl.innerHTML = formHtml;
-                mainContentEl.classList.add('visible');
-            }, 150);
+            setContent(formHtml);
 
             tg.MainButton.setText(itemToEdit ? 'Save Changes' : 'Post');
             tg.MainButton.show();
@@ -756,8 +693,7 @@ MAIN_APP_TEMPLATE = '''
                 const name = document.getElementById('name').value.trim();
                 const title = document.getElementById('title').value.trim();
                 if (!name || !title) isValid = false;
-                formData.append('name', name);
-                formData.append('title', title);
+                formData.append('name', name); formData.append('title', title);
                 formData.append('skills', document.getElementById('skills').value.trim());
                 formData.append('experience', document.getElementById('experience').value.trim());
                 formData.append('education', document.getElementById('education').value.trim());
@@ -767,8 +703,7 @@ MAIN_APP_TEMPLATE = '''
                 const company_name = document.getElementById('company_name').value.trim();
                 const title = document.getElementById('title').value.trim();
                 if (!company_name || !title) isValid = false;
-                formData.append('company_name', company_name);
-                formData.append('title', title);
+                formData.append('company_name', company_name); formData.append('title', title);
                 formData.append('description', document.getElementById('description').value.trim());
                 formData.append('requirements', document.getElementById('requirements').value.trim());
                 formData.append('salary', document.getElementById('salary').value.trim());
@@ -786,18 +721,15 @@ MAIN_APP_TEMPLATE = '''
             }
 
             const imageInput = document.getElementById('image');
-            if (imageInput && imageInput.files[0]) {
-                formData.append('image', imageInput.files[0]);
-            }
+            if (imageInput && imageInput.files[0]) { formData.append('image', imageInput.files[0]); }
 
             if (!isValid) {
-                document.getElementById('formError').textContent = 'Please fill in all required fields (marked with *).';
+                document.getElementById('formError').textContent = 'Please fill in all required fields.';
                 tg.HapticFeedback.notificationOccurred('error');
                 return;
             }
             
             tg.MainButton.showProgress();
-
             const method = itemId ? 'PUT' : 'POST';
             const endpoint = itemId ? `/api/${type}/${itemId}` : `/api/${type}`;
 
@@ -810,94 +742,122 @@ MAIN_APP_TEMPLATE = '''
                 .catch(err => {
                     tg.HapticFeedback.notificationOccurred('error');
                     tg.MainButton.hideProgress();
-                    document.getElementById('formError').textContent = err.message || 'Failed to submit. Please try again.';
+                    document.getElementById('formError').textContent = err.message || 'Failed to submit.';
                 });
         }
-        
-        function handleDeleteItem(type, id, fromProfile = false) {
-            tg.showConfirm("Are you sure you want to delete this post? This action cannot be undone.", (confirmed) => {
+
+        function handleDeleteItem(itemType, itemId) {
+            tg.showConfirm("Are you sure you want to delete this item? This action cannot be undone.", (confirmed) => {
                 if (confirmed) {
-                    tg.MainButton.showProgress();
-                    apiCall(`/api/${type}/${id}`, 'DELETE')
+                    tg.showPopup({
+                        title: "Deleting...",
+                        message: "Please wait while the item is being deleted.",
+                        buttons: []
+                    });
+                    apiCall(`/api/${itemType}/${itemId}`, 'DELETE')
                         .then(() => {
                             tg.HapticFeedback.notificationOccurred('success');
-                            tg.MainButton.hideProgress();
-                            tg.showAlert("Post deleted successfully.");
-                            if(fromProfile || currentView === 'profile'){
-                                loadView('profile');
+                            tg.closePopup();
+                            tg.showAlert("Item deleted successfully!");
+                            if (currentView === 'profile') {
+                                loadMyProfileView(); // Refresh profile view
                             } else {
-                                loadView(type);
+                                loadView(itemType); // Refresh the list view if deleting from detail
                             }
                         })
                         .catch(err => {
                             tg.HapticFeedback.notificationOccurred('error');
-                            tg.MainButton.hideProgress();
-                            tg.showAlert(err.message || "Failed to delete post.");
+                            tg.closePopup();
+                            tg.showAlert(err.message || "Failed to delete item.");
                         });
                 }
             });
         }
+        
+        function loadMyProfileView() {
+            setContent("Loading your profile...", true);
+            tg.BackButton.hide();
+            tg.MainButton.hide();
+            document.getElementById('fabButton').style.display = 'none'; // Hide FAB on profile
+
+            if (!currentUser) {
+                setContent('<div class="empty-state">Please log in to see your profile. Authentication might have failed. Try reloading.</div>');
+                return;
+            }
+            
+            apiCall('/api/my_items')
+                .then(data => {
+                    let profileHtml = '<h2>My Publications</h2>';
+                    let itemCount = 0;
+                    ['resumes', 'vacancies', 'freelance_offers'].forEach(type => {
+                        if (data[type] && data[type].length > 0) {
+                            profileHtml += `<h3>My ${type.replace('_', ' ')}</h3>`;
+                            data[type].forEach(item => {
+                                itemCount++;
+                                profileHtml += `
+                                    <div class="profile-item">
+                                        <h4>${item.title || item.name}</h4>
+                                        <p>Posted: ${new Date(item.timestamp).toLocaleDateString()}</p>
+                                        <div class="profile-item-actions">
+                                            <button class="profile-button-view" onclick="showDetailView('${type}', '${item.id}')">View</button>
+                                            <button class="profile-button-delete" onclick="handleDeleteItem('${type}', '${item.id}')">Delete</button>
+                                        </div>
+                                    </div>
+                                `;
+                            });
+                        }
+                    });
+                    if (itemCount === 0) {
+                        profileHtml += '<div class="empty-state">You have not posted anything yet.</div>';
+                    }
+                    setContent(profileHtml);
+                })
+                .catch(err => {
+                    setContent('<div class="empty-state">Error loading your profile.</div>');
+                });
+        }
+
 
         function loadView(tabName) {
             currentView = tabName;
             document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
             document.querySelector(`.tab-button[data-tab="${tabName}"]`).classList.add('active');
             
-            mainContentEl.classList.remove('visible');
-            mainContentEl.innerHTML = `<div class="loading">Loading ${tabName.replace('_',' ')}...</div>`;
-            
             tg.BackButton.hide();
             tg.MainButton.hide();
 
             if (tabName === 'profile') {
                 document.getElementById('fabButton').style.display = 'none';
-                apiCall(`/api/user/items`)
-                    .then(data => renderProfileList(data.items))
-                    .catch(err => {
-                        setTimeout(() => {
-                            mainContentEl.innerHTML = `<div class="empty-state">Error loading your items.</div>`;
-                            mainContentEl.classList.add('visible');
-                        }, 150);
-                    });
+                loadMyProfileView();
             } else {
                 document.getElementById('fabButton').style.display = 'flex';
+                setContent(`Loading ${tabName}...`, true);
                 apiCall(`/api/${tabName}`)
                     .then(data => renderList(data, tabName))
-                    .catch(err => {
-                        setTimeout(() => {
-                            mainContentEl.innerHTML = `<div class="empty-state">Error loading ${tabName.replace('_',' ')}.</div>`;
-                            mainContentEl.classList.add('visible');
-                        }, 150);
-                    });
+                    .catch(err => setContent(`<div class="empty-state">Error loading ${tabName}.</div>`));
             }
         }
         
         function updateUserDisplay(user) {
             const userAvatar = document.getElementById('userAvatar');
             const userText = document.getElementById('userText');
-            const defaultAvatar = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
-
-            let photoUrlToUse = defaultAvatar;
-            let displayName = "User";
-            let username = "anonymous";
-
             if (user && user.photo_url) {
-                photoUrlToUse = user.photo_url;
+                userAvatar.src = user.photo_url;
+                userAvatar.style.display = 'inline-block';
             } else if (tg.initDataUnsafe.user?.photo_url) {
-                 photoUrlToUse = tg.initDataUnsafe.user.photo_url;
+                 userAvatar.src = tg.initDataUnsafe.user.photo_url;
+                 userAvatar.style.display = 'inline-block';
+            } else {
+                userAvatar.style.display = 'none';
             }
             
             if (user) {
-                 displayName = user.first_name || "User";
-                 username = user.username || "unknown_user";
+                 userText.textContent = `Logged in as: ${user.first_name} (@${user.username})`;
             } else if (tg.initDataUnsafe.user) {
-                 displayName = tg.initDataUnsafe.user.first_name || "User";
-                 username = tg.initDataUnsafe.user.username || "anonymous";
+                 userText.textContent = `Welcome, ${tg.initDataUnsafe.user?.first_name || 'User'}! (@${tg.initDataUnsafe.user?.username || 'anonymous'})`;
+            } else {
+                 userText.textContent = `User not identified.`;
             }
-
-            userAvatar.src = photoUrlToUse;
-            userAvatar.style.display = (photoUrlToUse !== defaultAvatar) ? 'inline-block' : 'none';
-            userText.textContent = `${displayName} (@${username})`;
         }
 
         async function init() {
@@ -914,10 +874,14 @@ MAIN_APP_TEMPLATE = '''
                 currentUser = authResponse.user;
                 if (currentUser) {
                      updateUserDisplay(currentUser);
+                } else {
+                     document.getElementById('userText').textContent = `Auth failed. Limited functionality.`;
+                     tg.showAlert("Authentication with the server failed. Some features might not work correctly.");
                 }
             } catch (error) {
                 console.error("Auth error:", error);
-                document.getElementById('userText').textContent = `Welcome! (Limited access)`;
+                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 => {
@@ -927,7 +891,7 @@ MAIN_APP_TEMPLATE = '''
                 });
             });
             document.getElementById('fabButton').addEventListener('click', () => {
-                if(currentView === 'profile') return; 
+                if (currentView === 'profile') return; // Should not happen as FAB is hidden
                 showForm(currentView);
                 tg.HapticFeedback.impactOccurred('medium');
             });
@@ -941,52 +905,34 @@ MAIN_APP_TEMPLATE = '''
             let touchendX = 0;
             const swipeThreshold = 75; 
 
-            mainContentEl.addEventListener('touchstart', e => {
-                if (e.touches.length === 1) { // Single touch
+            mainContentWrapper.addEventListener('touchstart', e => {
+                // Only listen for swipes if not scrolling vertically
+                if (mainContentWrapper.scrollHeight <= mainContentWrapper.clientHeight) {
                     touchstartX = e.changedTouches[0].screenX;
+                } else {
+                    touchstartX = 0; // Disable swipe if content is scrollable
                 }
             }, {passive: true});
 
-            mainContentEl.addEventListener('touchend', e => {
-                if (e.changedTouches.length === 1) { // Single touch
-                    touchendX = e.changedTouches[0].screenX;
-                    handleSwipe();
-                }
+            mainContentWrapper.addEventListener('touchend', e => {
+                if (touchstartX === 0) return; // Swipe disabled
+                touchendX = e.changedTouches[0].screenX;
+                handleSwipe();
             });
 
             function handleSwipe() {
-                if (document.querySelector('.detail-view') || document.querySelector('.form-container')) {
-                    return; // Disable swipe in detail or form views
-                }
-
                 const currentTabIndex = tabOrder.indexOf(currentView);
-                let newView = null;
-
                 if (touchendX < touchstartX - swipeThreshold) { 
                     if (currentTabIndex < tabOrder.length - 1) {
-                        newView = tabOrder[currentTabIndex + 1];
+                        loadView(tabOrder[currentTabIndex + 1]);
+                        tg.HapticFeedback.impactOccurred('light');
                     }
                 }
                 if (touchendX > touchstartX + swipeThreshold) { 
                     if (currentTabIndex > 0) {
-                        newView = tabOrder[currentTabIndex - 1];
-                    }
-                }
-
-                if(newView){
-                    mainContentEl.style.transition = 'opacity 0.2s ease-out, transform 0.2s ease-out';
-                    mainContentEl.style.transform = `translateX(${touchendX < touchstartX ? '-' : ''}30px)`;
-                    mainContentEl.style.opacity = '0';
-                    setTimeout(() => {
-                        loadView(newView);
+                        loadView(tabOrder[currentTabIndex - 1]);
                         tg.HapticFeedback.impactOccurred('light');
-                        mainContentEl.style.transform = `translateX(${touchendX < touchstartX ? '' : '-'}30px)`; // From opposite direction
-                         setTimeout(() => { // Stagger for smooth transition in
-                            mainContentEl.style.transition = 'opacity 0.3s ease-out, transform 0.3s ease-out';
-                            mainContentEl.style.transform = 'translateX(0px)';
-                            mainContentEl.style.opacity = '1';
-                        }, 20);
-                    }, 200);
+                    }
                 }
             }
         }
@@ -1117,7 +1063,7 @@ def main_app_view():
 
 @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', 'profile_pictures']:
+    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)
@@ -1157,11 +1103,8 @@ def auth_user():
             'first_seen': datetime.now().isoformat()
         }
     users[user_id_str]['last_seen'] = datetime.now().isoformat()
-    if user_data_dict.get('photo_url'):
+    if user_data_dict.get('photo_url'): 
          users[user_id_str]['photo_url'] = user_data_dict.get('photo_url')
-    else: # If TG doesn't provide it, make sure it's None or empty in our DB
-         users[user_id_str]['photo_url'] = users[user_id_str].get('photo_url') # Keep existing if TG sends empty now
-    
     data['users'] = users
     save_data(data)
     
@@ -1184,27 +1127,6 @@ def get_items(item_type):
     items = sorted(data.get(item_type, []), key=lambda x: x.get('timestamp', ''), reverse=True)
     return jsonify(items), 200
 
-@app.route('/api/user/items', methods=['GET'])
-def get_user_items():
-    user = get_authenticated_user(request.headers)
-    if not user:
-        return jsonify({"error": "Authentication required"}), 401
-    
-    user_id_str = str(user.get('id'))
-    data = load_data()
-    user_items = []
-
-    for item_type in ['resumes', 'vacancies', 'freelance_offers']:
-        for item in data.get(item_type, []):
-            if str(item.get('user_id')) == user_id_str:
-                item_copy = item.copy()
-                item_copy['original_type'] = item_type 
-                user_items.append(item_copy)
-    
-    user_items_sorted = sorted(user_items, key=lambda x: x.get('timestamp', ''), reverse=True)
-    return jsonify({"items": user_items_sorted}), 200
-
-
 @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']:
@@ -1215,6 +1137,28 @@ def get_item(item_type, item_id):
         return jsonify(item), 200
     return jsonify({"error": "Item not found"}), 404
 
+@app.route('/api/my_items', methods=['GET'])
+def get_my_items():
+    user = get_authenticated_user(request.headers)
+    if not user:
+        return jsonify({"error": "Authentication required"}), 401
+    
+    user_id = str(user.get('id'))
+    data = load_data()
+    
+    my_items = {
+        "resumes": [],
+        "vacancies": [],
+        "freelance_offers": []
+    }
+    
+    for item_type in ['resumes', 'vacancies', 'freelance_offers']:
+        items_list = data.get(item_type, [])
+        user_specific_items = [item for item in items_list if str(item.get('user_id')) == user_id]
+        my_items[item_type] = sorted(user_specific_items, key=lambda x: x.get('timestamp', ''), reverse=True)
+        
+    return jsonify(my_items), 200
+
 @app.route('/api/<item_type>', methods=['POST'])
 def create_item(item_type):
     user = get_authenticated_user(request.headers)
@@ -1240,12 +1184,11 @@ def create_item(item_type):
     image_file = request.files.get('image')
     if image_file and allowed_file(image_file.filename):
         try:
-            file_ext = os.path.splitext(secure_filename(image_file.filename))[1].lower()
+            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)
-            os.makedirs(os.path.join(app.config['UPLOADS_DIR'], item_type), exist_ok=True)
             image_file.save(image_save_path)
-            new_item['image_url'] = url_for('uploaded_file_typed', item_type_subdir=item_type, filename=image_filename, _external=True)
+            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}")
 
@@ -1317,12 +1260,11 @@ def update_item(item_type, item_id):
     if image_file and allowed_file(image_file.filename):
         delete_existing_image(original_item.get('image_url'))
         try:
-            file_ext = os.path.splitext(secure_filename(image_file.filename))[1].lower()
-            image_filename = f"{item_id}{file_ext}" # Use item_id for consistency on update
+            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)
-            os.makedirs(os.path.join(app.config['UPLOADS_DIR'], item_type), exist_ok=True)
             image_file.save(image_save_path)
-            updated_item['image_url'] = url_for('uploaded_file_typed', item_type_subdir=item_type, filename=image_filename, _external=True)
+            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}")
 
@@ -1384,7 +1326,7 @@ def delete_item(item_type, item_id):
     
     if len(data[item_type]) < original_length:
         save_data(data)
-        return jsonify({"message": "Item deleted successfully"}), 200
+        return jsonify({"message": "Item deleted successfully"}), 200 
     return jsonify({"error": "Item not found or deletion failed"}), 404
 
 
@@ -1466,5 +1408,4 @@ if __name__ == '__main__':
 
     port = int(os.environ.get('PORT', 7860))
     logging.info(f"Starting Flask app on host 0.0.0.0 and port {port}")
-    app.run(debug=False, host='0.0.0.0', port=port)
-# --- END OF FILE app (20).py ---
+    app.run(debug=False, host='0.0.0.0', port=port)