Update app.py

app.py

@@ -135,6 +135,74 @@ st.markdown("""
         justify-content: space-between;
     }
     
+    /* Task Details Container */
+    .task-details-container {
+        border: 1px solid var(--border-color);
+        border-radius: 8px;
+        padding: 20px;
+        margin-top: 16px;
+        background-color: white;
+        box-shadow: 0 2px 10px rgba(0,0,0,0.08);
+    }
+    
+    .task-details-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 16px;
+        padding-bottom: 12px;
+        border-bottom: 1px solid #eee;
+    }
+    
+    .task-details-title {
+        font-size: 24px;
+        font-weight: 600;
+        color: var(--primary-color);
+        margin: 0;
+    }
+    
+    .task-details-section {
+        margin-bottom: 16px;
+    }
+    
+    .task-details-section h3 {
+        font-size: 18px;
+        margin-bottom: 8px;
+        color: var(--secondary-color);
+    }
+    
+    .task-meta-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+        gap: 16px;
+        margin-bottom: 20px;
+    }
+    
+    .task-meta-item {
+        padding: 8px 12px;
+        border-radius: 4px;
+        background-color: #f5f5f5;
+    }
+    
+    .task-meta-label {
+        font-size: 12px;
+        color: #666;
+        margin-bottom: 4px;
+    }
+    
+    .task-meta-value {
+        font-size: 16px;
+        font-weight: 500;
+    }
+    
+    .task-description {
+        background-color: #f9f9f9;
+        padding: 16px;
+        border-radius: 4px;
+        margin-bottom: 20px;
+        min-height: 100px;
+    }
+    
     /* Modal Dialog Styling */
     .modal-overlay {
         display: none;
@@ -223,13 +291,17 @@ st.markdown("""
         padding: 8px 12px;
         border-radius: 4px;
         font-weight: 500;
-        width: 100%;
     }
     
     .stButton > button:hover {
         background-color: var(--primary-color);
     }
     
+    /* Full width buttons */
+    .full-width-button button {
+        width: 100%;
+    }
+    
     /* Sidebar styling */
     .sidebar-title {
         font-size: 1.2rem;
@@ -251,6 +323,7 @@ st.markdown("""
         font-size: 10px;
         font-weight: 500;
         color: white;
+        margin-left: 8px;
     }
     
     .status-pill.todo {
@@ -281,67 +354,44 @@ st.markdown("""
         margin-bottom: 10px;
     }
     
-    /* Inline status dropdown on task cards */
-    .task-status-dropdown {
-        position: relative;
-        display: inline-block;
-    }
-    
-    .status-dropdown-btn {
-        background-color: transparent;
-        border: none;
-        cursor: pointer;
-        font-size: 12px;
-        color: #fff;
-        text-align: right;
-        padding: 0;
-        margin: 0;
-        width: auto;
-    }
-    
-    .status-dropdown-content {
-        display: none;
-        position: absolute;
-        right: 0;
-        background-color: #f9f9f9;
-        min-width: 120px;
-        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-        z-index: 100;
+    /* Task progress bar */
+    .progress-container {
+        width: 100%;
+        background-color: #f1f1f1;
         border-radius: 4px;
+        margin-top: 8px;
     }
     
-    .status-dropdown-content a {
-        color: black;
-        padding: 8px 10px;
-        text-decoration: none;
-        display: block;
-        font-size: 12px;
-        text-align: left;
-    }
-    
-    .status-dropdown-content a:hover {
-        background-color: #f1f1f1;
+    .progress-bar {
+        height: 6px;
+        border-radius: 4px;
     }
     
-    .task-status-dropdown:hover .status-dropdown-content {
-        display: block;
+    .progress-bar.todo {
+        background-color: var(--todo-color);
+        width: 0%;
     }
     
-    /* Status colors for dropdown menu */
-    .status-option-todo {
-        border-left: 4px solid var(--todo-color);
+    .progress-bar.in-progress {
+        background-color: var(--progress-color);
+        width: 50%;
     }
     
-    .status-option-progress {
-        border-left: 4px solid var(--progress-color);
+    .progress-bar.done {
+        background-color: var(--done-color);
+        width: 100%;
     }
     
-    .status-option-done {
-        border-left: 4px solid var(--done-color);
+    .progress-bar.backlog {
+        background-color: var(--backlog-color);
+        width: 10%;
     }
     
-    .status-option-backlog {
-        border-left: 4px solid var(--backlog-color);
+    /* Task details sections */
+    .section-divider {
+        height: 1px;
+        background-color: #eee;
+        margin: 15px 0;
     }
 </style>
 """, unsafe_allow_html=True)
@@ -498,7 +548,10 @@ def save_tasks():
     except Exception as e:
         print(f"Error saving tasks: {str(e)}")
         # Store in memory as fallback
-        st.session_state.in_memory_tasks = tasks_dict
+        try:
+            st.session_state.in_memory_tasks = tasks_dict
+        except:
+            pass
         st.session_state.using_memory_storage = True
         st.warning(f"Error saving tasks: {str(e)}. Tasks stored in memory instead.")
         return False
@@ -607,24 +660,12 @@ def delete_task(task_id):
         return True
     return False
 
-def open_task_details_page(task_id):
-    """Open a new page with detailed task information"""
-    # Store the selected task ID in session state
-    st.session_state.selected_task_id = task_id
-    
-    # Use query parameters to navigate to the details page
-    st.query_params.view = 'task_details'
-    st.query_params.task_id = task_id
-    
-    # Rerun to reload the page with new query params
-    st.rerun()    
-
 # Initialize session state ONLY ONCE
 if 'tasks' not in st.session_state:
     st.session_state.tasks = load_tasks()
     
-if 'task_modal_open' not in st.session_state:
-    st.session_state.task_modal_open = None
+if 'selected_task_id' not in st.session_state:
+    st.session_state.selected_task_id = None
     
 if 'in_memory_tasks' not in st.session_state:
     st.session_state.in_memory_tasks = []
@@ -643,87 +684,14 @@ else:
 # Load assignees
 assignee_list = load_assignees()
 
-view_mode = st.query_params.get('view', 'main')
-selected_task_id = st.query_params.get('task_id', None)
-
-if view_mode == 'task_details' and selected_task_id:
-    # Task details page
-    task_df = st.session_state.tasks[st.session_state.tasks['ID'] == selected_task_id]
-    
-    if not task_df.empty:
-        task = task_df.iloc[0]
-        status_class = STATUS_COLORS.get(task['Status'], "backlog")
-        
-        # Back button
-        if st.button("← Back to Board"):
-            for key in list(st.query_params.keys()):
-                del st.query_params[key]
-    
-            st.rerun()
-        
-        # Display task details in a full page
-        st.markdown(f"<h1>{task['Title']} <span class='status-pill {status_class}'>{task['Status']}</span></h1>", unsafe_allow_html=True)
-        
-        # Task metadata in columns
-        col1, col2 = st.columns(2)
-        with col1:
-            st.markdown(f"**Task ID:** {selected_task_id}")
-            st.markdown(f"**Assignee:** {task['Assignee']}")
-            
-        with col2:
-            date_started_str = task['Date Started'].strftime('%m/%d/%Y') if 'Date Started' in task and pd.notna(task['Date Started']) else "Not set"
-            date_to_finish_str = task['Date to Finish'].strftime('%m/%d/%Y') if 'Date to Finish' in task and pd.notna(task['Date to Finish']) else "Not set"
-            due_date_str = task['Due Date'].strftime('%m/%d/%Y') if 'Due Date' in task and pd.notna(task['Due Date']) else "Not set"
-            
-            st.markdown(f"**Date Started:** {date_started_str}")
-            st.markdown(f"**Date to Finish:** {date_to_finish_str}")
-            st.markdown(f"**Due Date:** {due_date_str}")
-        
-        # Description
-        st.markdown("### Description")
-        st.markdown(f"{task['Description'] if task['Description'] else 'No description provided.'}")
-        
-        # Task actions
-        st.markdown("### Actions")
-        
-        # Status update
-        new_status = st.selectbox(
-            "Status",
-            ["Backlog", "To Do", "In Progress", "Done"],
-            index=["Backlog", "To Do", "In Progress", "Done"].index(task['Status']) if task['Status'] in ["Backlog", "To Do", "In Progress", "Done"] else 0
-        )
-        
-        col1, col2 = st.columns(2)
-        with col1:
-            if st.button("Update Status") and new_status != task['Status']:
-                task_idx = task_df.index[0]
-                update_task(task_idx, 'Status', new_status)
-                st.success(f"Updated task status to {new_status}")
-                st.rerun()
-        
-        with col2:
-            if st.button("Delete Task"):
-                if delete_task(selected_task_id):
-                    st.success(f"Task {selected_task_id} deleted!")
-                    # Return to main board - use new API
-                    for key in list(st.query_params.keys()):
-                        del st.query_params[key]
-                    st.rerun()
-                else:
-                    st.error(f"Failed to delete task {selected_task_id}")
-            else:
-                st.error(f"Task {selected_task_id} not found")
-                # Return to main board - use new API
-                for key in list(st.query_params.keys()):
-                    del st.query_params[key]
-                st.rerun()
+# Application Header
+st.markdown("<h1 style='font-size: 24px; color: var(--primary-color);'>📋 Task Board</h1>", unsafe_allow_html=True)
 
-else:
-    # Display storage status notification if using memory storage
-    if st.session_state.using_memory_storage:
-        st.markdown('<div style="background-color: #fff3cd; color: #856404; padding: 8px; border-radius: 4px; font-size: 12px; margin-bottom: 10px;">Using in-memory storage. Tasks saved but may not persist after app restart.</div>', unsafe_allow_html=True)
-    elif TASKS_FILE:
-        st.markdown(f'<div style="background-color: #d4edda; color: #155724; padding: 8px; border-radius: 4px; font-size: 12px; margin-bottom: 10px;">Tasks saved to disk at: {TASKS_FILE}</div>', unsafe_allow_html=True)
+# Display storage status notification if using memory storage
+if st.session_state.using_memory_storage:
+    st.markdown('<div style="background-color: #fff3cd; color: #856404; padding: 8px; border-radius: 4px; font-size: 12px; margin-bottom: 10px;">Using in-memory storage. Tasks saved but may not persist after app restart.</div>', unsafe_allow_html=True)
+elif TASKS_FILE:
+    st.markdown(f'<div style="background-color: #d4edda; color: #155724; padding: 8px; border-radius: 4px; font-size: 12px; margin-bottom: 10px;">Tasks saved to disk at: {TASKS_FILE}</div>', unsafe_allow_html=True)
 
 # Sidebar for new tasks
 with st.sidebar:
@@ -775,7 +743,8 @@ with st.sidebar:
                 st.error(f"Error adding task: {str(e)}")
         else:
             st.warning("Please enter a task title")
-            # Create hidden buttons for handling status updates from the cards
+
+# Sidebar additional options for task status updates
 with st.sidebar:
     st.markdown('<div class="sidebar-title">🔄 Update Task Status</div>', unsafe_allow_html=True)
     
@@ -809,126 +778,221 @@ with st.sidebar:
                         st.success(f"Updated task {selected_id} status to {new_status}")
                         st.rerun()
 
-# Add JavaScript for modal and status update functionality
-st.markdown("""
-<script>
-    // Function to open task details modal
-    function openTaskDetails(taskId) {
-        console.log('Opening task details for: ' + taskId);
-        // Navigate to task details page
-        const params = new URLSearchParams(window.location.search);
-        params.set('view', 'task_details');
-        params.set('task_id', taskId);
-        window.location.href = window.location.pathname + '?' + params.toString();
-    }
-    
-    // Function to close task modal
-    function closeTaskModal(taskId) {
-        const modal = document.getElementById(`modal-${taskId}`);
-        if (modal) {
-            modal.style.display = 'none';
-        }
-    }
-    
-    // Close modal when clicking outside
-    document.addEventListener('click', function(event) {
-        if (event.target.classList.contains('modal-overlay')) {
-            event.target.style.display = 'none';
-        }
-    });
+# MAIN CONTENT AREA
+# Check for selected task ID from URL parameters
+selected_task_id = st.query_params.get('task_id', None)
+
+# If a task is selected, show task details
+if selected_task_id:
+    # Get task details
+    task_df = st.session_state.tasks[st.session_state.tasks['ID'] == selected_task_id]
     
-    // Setup task cards and modals after DOM is fully loaded
-    function setupTaskInteractions() {
-        console.log('Setting up task interactions');
+    if not task_df.empty:
+        # Back to board button
+        if st.button("← Back to Board", key="back_btn"):
+            # Clear the task_id parameter and rerun
+            for key in list(st.query_params.keys()):
+                del st.query_params[key]
+            st.rerun()
         
-        // Make sure task cards are clickable
-        document.querySelectorAll('.task-card .task-title').forEach(title => {
-            title.addEventListener('click', function() {
-                const taskId = this.closest('.task-card').getAttribute('data-task-id');
-                openTaskDetails(taskId);
-            });
-        });
-    }
-    
-    // Run setup on page load
-    document.addEventListener('DOMContentLoaded', function() {
-        console.log('DOM loaded, setting up task board');
-        setTimeout(setupTaskInteractions, 500);
-    });
-    
-    // Also run after Streamlit reruns
-    const observer = new MutationObserver(function(mutations) {
-        for (const mutation of mutations) {
-            if (mutation.type === 'childList' && mutation.addedNodes.length) {
-                setTimeout(setupTaskInteractions, 200);
-                break;
-            }
-        }
-    });
-    
-    // Start observing the document body for DOM changes
-    document.addEventListener('DOMContentLoaded', function() {
-        observer.observe(document.body, { childList: true, subtree: true });
-    });
-</script>
-""", unsafe_allow_html=True)
-if st.session_state.tasks.empty:
-    st.info("No tasks yet. Add your first task using the sidebar.")
-else:
-    # Group tasks by status for organized display - reordering to match your screenshot
-    statuses = ["To Do", "In Progress", "Done", "Backlog"]
-    
-    # Create container with reduced height
-    st.markdown('<div style="margin-bottom: 0; padding-bottom: 0;">', unsafe_allow_html=True)
-    
-    # Create columns for each status
-    cols = st.columns(len(statuses))
-    
-    # Display each status column
-    for i, status_name in enumerate(statuses):
-        with cols[i]:
-            st.markdown(f'<h3 style="font-size: 16px; margin-bottom: 10px;">{status_name}</h3>', unsafe_allow_html=True)
-            
-            # Filter tasks by current status
-            status_tasks = st.session_state.tasks[st.session_state.tasks['Status'] == status_name]
+        # Get task data
+        task = task_df.iloc[0]
+        status_class = STATUS_COLORS.get(task['Status'], "backlog")
+        
+        # Create the task details container
+        st.markdown('<div class="task-details-container">', unsafe_allow_html=True)
+        
+        # Task header with title and status
+        st.markdown(f"""
+            <div class="task-details-header">
+                <h2 class="task-details-title">{task['Title']} 
+                    <span class="status-pill {status_class}">{task['Status']}</span>
+                </h2>
+            </div>
+        """, unsafe_allow_html=True)
+        
+        # Task metadata in grid layout
+        st.markdown('<div class="task-meta-grid">', unsafe_allow_html=True)
+        
+        # Task ID
+        st.markdown(f"""
+            <div class="task-meta-item">
+                <div class="task-meta-label">Task ID</div>
+                <div class="task-meta-value">{selected_task_id}</div>
+            </div>
+        """, unsafe_allow_html=True)
+        
+        # Assignee
+        st.markdown(f"""
+            <div class="task-meta-item">
+                <div class="task-meta-label">Assignee</div>
+                <div class="task-meta-value">{task['Assignee']}</div>
+            </div>
+        """, unsafe_allow_html=True)
+        
+        # Format dates for display
+        date_started_str = task['Date Started'].strftime('%m/%d/%Y') if 'Date Started' in task and pd.notna(task['Date Started']) else "Not set"
+        date_to_finish_str = task['Date to Finish'].strftime('%m/%d/%Y') if 'Date to Finish' in task and pd.notna(task['Date to Finish']) else "Not set"
+        due_date_str = task['Due Date'].strftime('%m/%d/%Y') if 'Due Date' in task and pd.notna(task['Due Date']) else "Not set"
+        
+        # Date Started
+        st.markdown(f"""
+            <div class="task-meta-item">
+                <div class="task-meta-label">Date Started</div>
+                <div class="task-meta-value">{date_started_str}</div>
+            </div>
+        """, unsafe_allow_html=True)
+        
+        # Date to Finish
+        st.markdown(f"""
+            <div class="task-meta-item">
+                <div class="task-meta-label">Date to Finish</div>
+                <div class="task-meta-value">{date_to_finish_str}</div>
+            </div>
+        """, unsafe_allow_html=True)
+        
+        # Due Date
+        st.markdown(f"""
+            <div class="task-meta-item">
+                <div class="task-meta-label">Due Date</div>
+                <div class="task-meta-value">{due_date_str}</div>
+            </div>
+        """, unsafe_allow_html=True)
+        
+        st.markdown('</div>', unsafe_allow_html=True)
+        
+        # Task progress visualization
+        st.markdown(f"""
+            <div class="progress-container">
+                <div class="progress-bar {status_class}"></div>
+            </div>
+        """, unsafe_allow_html=True)
+        
+        # Description section
+        st.markdown('<div class="section-divider"></div>', unsafe_allow_html=True)
+        st.markdown('<div class="task-details-section">', unsafe_allow_html=True)
+        st.markdown('<h3>Description</h3>', unsafe_allow_html=True)
+        st.markdown('<div class="task-description">', unsafe_allow_html=True)
+        st.markdown(f"{task['Description'] if task['Description'] else 'No description provided.'}", unsafe_allow_html=True)
+        st.markdown('</div>', unsafe_allow_html=True)
+        st.markdown('</div>', unsafe_allow_html=True)
+        
+        # Actions section
+        st.markdown('<div class="section-divider"></div>', unsafe_allow_html=True)
+        st.markdown('<div class="task-details-section">', unsafe_allow_html=True)
+        st.markdown('<h3>Actions</h3>', unsafe_allow_html=True)
+        
+        # Create columns for actions
+        col1, col2 = st.columns(2)
+        
+        with col1:
+            # Status update form
+            new_status = st.selectbox(
+                "Update Status",
+                ["Backlog", "To Do", "In Progress", "Done"],
+                index=["Backlog", "To Do", "In Progress", "Done"].index(task['Status']) if task['Status'] in ["Backlog", "To Do", "In Progress", "Done"] else 0
+            )
             
-            if status_tasks.empty:
-                st.markdown("<div style='text-align:center; color:#999; padding:10px; font-size:12px;'>No tasks</div>", unsafe_allow_html=True)
-            else:
-                # Start the flex container for task cards
-                st.markdown('<div class="task-container">', unsafe_allow_html=True)
+            if st.button("Save Status Change", use_container_width=True):
+                if new_status != task['Status']:
+                    task_idx = task_df.index[0]
+                    update_task(task_idx, 'Status', new_status)
+                    st.success(f"Updated task status to {new_status}")
+                    st.rerun()
+        
+        with col2:
+            if st.button("Delete Task", use_container_width=True):
+                if delete_task(selected_task_id):
+                    st.success(f"Task {selected_task_id} deleted!")
+                    # Return to main board
+                    for key in list(st.query_params.keys()):
+                        del st.query_params[key]
+                    st.rerun()
+                else:
+                    st.error(f"Failed to delete task {selected_task_id}")
+        
+        st.markdown('</div>', unsafe_allow_html=True)
+        
+        # Close the task details container
+        st.markdown('</div>', unsafe_allow_html=True)
+    else:
+        st.error(f"Task {selected_task_id} not found")
+        # Return to main board
+        if st.button("Back to Board"):
+            for key in list(st.query_params.keys()):
+                del st.query_params[key]
+            st.rerun()
+
+else:
+    # Main board view showing all tasks by status
+    if st.session_state.tasks.empty:
+        st.info("No tasks yet. Add your first task using the sidebar.")
+    else:
+        # Group tasks by status for organized display - reordering to match desired layout
+        statuses = ["To Do", "In Progress", "Done", "Backlog"]
+        
+        # Create container with reduced height
+        st.markdown('<div style="margin-bottom: 0; padding-bottom: 0;">', unsafe_allow_html=True)
+        
+        # Create columns for each status
+        cols = st.columns(len(statuses))
+        
+        # Display each status column
+        for i, status_name in enumerate(statuses):
+            with cols[i]:
+                st.markdown(f'<h3 style="font-size: 16px; margin-bottom: 10px;">{status_name}</h3>', unsafe_allow_html=True)
                 
-                # Render each task as a card
-                for idx, task in status_tasks.iterrows():
-                    status_class = STATUS_COLORS.get(task['Status'], "backlog")
-                    task_id = task['ID'] if 'ID' in task and pd.notna(task['ID']) else f"#{idx+1}"
-                    
-                    # Format dates for display - shorter format
-                    date_started_str = task['Date Started'].strftime('%m/%d') if 'Date Started' in task and pd.notna(task['Date Started']) else "Not set"
-                    date_to_finish_str = task['Date to Finish'].strftime('%m/%d') if 'Date to Finish' in task and pd.notna(task['Date to Finish']) else "Not set"
+                # Filter tasks by current status
+                status_tasks = st.session_state.tasks[st.session_state.tasks['Status'] == status_name]
+                
+                if status_tasks.empty:
+                    st.markdown("<div style='text-align:center; color:#999; padding:10px; font-size:12px;'>No tasks</div>", unsafe_allow_html=True)
+                else:
+                    # Start the flex container for task cards
+                    st.markdown('<div class="task-container">', unsafe_allow_html=True)
                     
-                    # Create the card HTML with inline status dropdown
-                    card_html = f"""
-                    <a href="?view=task_details&task_id={task_id}" style="text-decoration:none; color:inherit;">
-                        <div class="task-card" data-task-id="{task_id}">
-                            <div class="card-header {status_class}">
-                                <span class="task-id">{task_id}</span>
-                            </div>
-                            <div class="task-title">{task['Title']}</div>
-                            <div class="task-assignee">{task['Assignee']}</div>
-                            <div class="task-dates">
-                                <span class="date-display">Start: {date_started_str}</span>
-                                <span class="date-display">Finish: {date_to_finish_str}</span>
+                    # Render each task as a card
+                    for idx, task in status_tasks.iterrows():
+                        status_class = STATUS_COLORS.get(task['Status'], "backlog")
+                        task_id = task['ID'] if 'ID' in task and pd.notna(task['ID']) else f"#{idx+1}"
+                        
+                        # Format dates for display - shorter format
+                        date_started_str = task['Date Started'].strftime('%m/%d') if 'Date Started' in task and pd.notna(task['Date Started']) else "Not set"
+                        date_to_finish_str = task['Date to Finish'].strftime('%m/%d') if 'Date to Finish' in task and pd.notna(task['Date to Finish']) else "Not set"
+                        
+                        # Create the card HTML with direct query parameter link
+                        card_html = f"""
+                        <a href="?task_id={task_id}" style="text-decoration:none; color:inherit;">
+                            <div class="task-card" data-task-id="{task_id}">
+                                <div class="card-header {status_class}">
+                                    <span class="task-id">{task_id}</span>
+                                </div>
+                                <div class="task-title">{task['Title']}</div>
+                                <div class="task-assignee">{task['Assignee']}</div>
+                                <div class="task-dates">
+                                    <span class="date-display">Start: {date_started_str}</span>
+                                    <span class="date-display">Finish: {date_to_finish_str}</span>
+                                </div>
                             </div>
-                        </div>
-                    </a>
-                    """
+                        </a>
+                        """
+                        
+                        # Render the card
+                        st.markdown(card_html, unsafe_allow_html=True)
                     
-                    # Render the card
-                    st.markdown(card_html, unsafe_allow_html=True)
-                
-                # Close the container
-                st.markdown('</div>', unsafe_allow_html=True)
-    
-    # Close container
-    st.markdown('</div>', unsafe_allow_html=True)
+                    # Close the container
+                    st.markdown('</div>', unsafe_allow_html=True)
+        
+        # Close container
+        st.markdown('</div>', unsafe_allow_html=True)
+
+# Add JavaScript for better interactivity
+st.markdown("""
+<script>
+    // Make task cards clickable - will navigate to the task details view
+    document.addEventListener('DOMContentLoaded', function() {
+        console.log('Setting up task board interactions');
+        // Add any additional JavaScript for enhancing the task board
+    });
+</script>
+""", unsafe_allow_html=True)