more commits..

app/__init__.py

@@ -6,6 +6,8 @@ import os
 from datetime import datetime
 import sqlite3
 import logging
+from . import context_processors, filters
+from flask_migrate import Migrate
 
 # Configure logging
 logging.basicConfig(
@@ -16,6 +18,7 @@ logger = logging.getLogger(__name__)
 
 # Initialize extensions
 db = SQLAlchemy()
+migrate = Migrate()
 login_manager = LoginManager()
 login_manager.login_view = 'auth.login'
 login_manager.login_message_category = 'info'
@@ -217,6 +220,7 @@ def create_app(config_class=Config):
     
     # Initialize extensions
     db.init_app(app)
+    migrate.init_app(app, db)
     login_manager.init_app(app)
     
     # Initialize the upload folder
@@ -245,14 +249,18 @@ def create_app(config_class=Config):
     app.register_blueprint(dashboard_bp)
     app.register_blueprint(admin_bp, url_prefix='/admin')
     
+    # Register context processors and filters
+    context_processors.init_app(app)
+    filters.init_app(app)
+    
     # Add context processor for template variables
     @app.context_processor
     def inject_global_variables():
         return {
-            'now': datetime.now(),
+            'current_year': datetime.now().year,
+            'format_file_size': format_file_size,
             'file_icon': get_file_icon,
-            'format_size': format_file_size,
+            'app_version': '1.0.0',
-            'app_version': '1.0.0',  # Add version number for caching
         }
     
     # Handle 404 errors

app/context_processors.py

@@ -0,0 +1,9 @@
+from datetime import datetime
+
+def utility_processor():
+    return {
+        'current_year': datetime.now().year
+    }
+
+def init_app(app):
+    app.context_processor(utility_processor) 

app/filters.py

@@ -0,0 +1,37 @@
+from datetime import datetime
+
+def timeago(dt):
+    """
+    Returns a human-readable string representing time difference between now and the given datetime.
+    
+    For example: "2 minutes ago", "3 hours ago", "5 days ago", etc.
+    """
+    now = datetime.utcnow()
+    diff = now - dt
+    
+    seconds = diff.total_seconds()
+    
+    if seconds < 60:
+        return "just now"
+    elif seconds < 3600:
+        minutes = int(seconds / 60)
+        return f"{minutes} minute{'s' if minutes != 1 else ''} ago"
+    elif seconds < 86400:
+        hours = int(seconds / 3600)
+        return f"{hours} hour{'s' if hours != 1 else ''} ago"
+    elif seconds < 604800:
+        days = int(seconds / 86400)
+        return f"{days} day{'s' if days != 1 else ''} ago"
+    elif seconds < 2592000:
+        weeks = int(seconds / 604800)
+        return f"{weeks} week{'s' if weeks != 1 else ''} ago"
+    elif seconds < 31536000:
+        months = int(seconds / 2592000)
+        return f"{months} month{'s' if months != 1 else ''} ago"
+    else:
+        years = int(seconds / 31536000)
+        return f"{years} year{'s' if years != 1 else ''} ago"
+
+def init_app(app):
+    """Register filters with the Flask app"""
+    app.jinja_env.filters['timeago'] = timeago 

app/models.py

@@ -142,6 +142,70 @@ class File(db.Model):
         mime_type, _ = mimetypes.guess_type(self.name)
         return mime_type or 'application/octet-stream'
     
+    def get_icon_class(self):
+        """Get the Font Awesome icon class for this file"""
+        # Extract extension from filename
+        extension = self.name.split('.')[-1].lower() if '.' in self.name else ''
+        
+        # Define icon mapping
+        icon_map = {
+            # Documents
+            'pdf': 'fas fa-file-pdf',
+            'doc': 'fas fa-file-word',
+            'docx': 'fas fa-file-word',
+            'txt': 'fas fa-file-alt',
+            'rtf': 'fas fa-file-alt',
+            'odt': 'fas fa-file-alt',
+            
+            # Spreadsheets
+            'xls': 'fas fa-file-excel',
+            'xlsx': 'fas fa-file-excel',
+            'csv': 'fas fa-file-csv',
+            
+            # Presentations
+            'ppt': 'fas fa-file-powerpoint',
+            'pptx': 'fas fa-file-powerpoint',
+            
+            # Images
+            'jpg': 'fas fa-file-image',
+            'jpeg': 'fas fa-file-image',
+            'png': 'fas fa-file-image',
+            'gif': 'fas fa-file-image',
+            'svg': 'fas fa-file-image',
+            'webp': 'fas fa-file-image',
+            
+            # Audio
+            'mp3': 'fas fa-file-audio',
+            'wav': 'fas fa-file-audio',
+            'ogg': 'fas fa-file-audio',
+            
+            # Video
+            'mp4': 'fas fa-file-video',
+            'avi': 'fas fa-file-video',
+            'mov': 'fas fa-file-video',
+            'wmv': 'fas fa-file-video',
+            
+            # Archives
+            'zip': 'fas fa-file-archive',
+            'rar': 'fas fa-file-archive',
+            '7z': 'fas fa-file-archive',
+            'tar': 'fas fa-file-archive',
+            'gz': 'fas fa-file-archive',
+            
+            # Code
+            'html': 'fas fa-file-code',
+            'css': 'fas fa-file-code',
+            'js': 'fas fa-file-code',
+            'py': 'fas fa-file-code',
+            'java': 'fas fa-file-code',
+            'php': 'fas fa-file-code',
+            'c': 'fas fa-file-code',
+            'cpp': 'fas fa-file-code',
+            'h': 'fas fa-file-code',
+        }
+        
+        return icon_map.get(extension, 'fas fa-file')
+    
     def __repr__(self):
         return f'<File {self.name}>'
 

app/routes/dashboard.py

@@ -1,9 +1,9 @@
-from flask import Blueprint, render_template, redirect, url_for
+from flask import Blueprint, render_template
 from flask_login import login_required, current_user
 from ..models import File, Folder
-import os
+from ..utils.file_helpers import format_file_size
 
-# Create blueprint with the name expected by __init__.py
+# Create blueprint
 bp = Blueprint('dashboard', __name__)
 
 @bp.route('/')
@@ -18,28 +18,17 @@ def index():
     # Get storage usage
     storage_used = sum(file.size for file in File.query.filter_by(user_id=current_user.id).all())
     
-    # Format size for display
-    if storage_used < 1024:
-        storage_used_formatted = f"{storage_used} bytes"
-    elif storage_used < 1024 * 1024:
-        storage_used_formatted = f"{storage_used / 1024:.2f} KB"
-    elif storage_used < 1024 * 1024 * 1024:
-        storage_used_formatted = f"{storage_used / (1024 * 1024):.2f} MB"
-    else:
-        storage_used_formatted = f"{storage_used / (1024 * 1024 * 1024):.2f} GB"
-    
     # Get recent files
     recent_files = File.query.filter_by(user_id=current_user.id).order_by(File.created_at.desc()).limit(5).all()
     
-    # Create stats object that the template is expecting
+    # Add icon_class to each file
-    stats = {
+    for file in recent_files:
-        'file_count': file_count,
+        file.icon_class = file.get_icon_class()
-        'folder_count': folder_count,
-        'storage_used': storage_used_formatted
-    }
     
     return render_template('dashboard/index.html',
-                          stats=stats,  # Pass as stats object
+                          file_count=file_count,
+                          folder_count=folder_count,
+                          storage_used=format_file_size(storage_used),
                           recent_files=recent_files)
 
 def get_file_icon(mime_type, filename):

app/static/css/custom.css

@@ -742,3 +742,54 @@ main {
 .new-item {
     animation: new-item-appear 0.3s forwards;
 }
+
+/* Custom animations and transitions */
+.folder-enter-active {
+    animation: folder-enter 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.0);
+}
+
+@keyframes folder-enter {
+    from {
+        opacity: 0;
+        transform: translateY(15px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Folder/file hover animation */
+.folder-item,
+.file-item {
+    transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.folder-item:hover,
+.file-item:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+}
+
+/* Upload dropzone styles */
+.dropzone {
+    border: 2px dashed var(--border-color);
+    padding: 30px;
+    text-align: center;
+    background-color: rgba(0, 0, 0, 0.05);
+    transition: all 0.3s ease;
+    cursor: pointer;
+}
+
+.dropzone.highlight {
+    border-color: var(--primary-color);
+    background-color: rgba(74, 107, 255, 0.1);
+}
+
+.upload-icon {
+    font-size: 48px;
+    color: var(--primary-color);
+    margin-bottom: 15px;
+    opacity: 0.8;
+}

app/static/css/mobile-menu.css

@@ -0,0 +1,93 @@
+/* Mobile Menu Styles */
+.mobile-fab {
+    display: none;
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    background-color: var(--primary-color);
+    color: white;
+    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
+    z-index: 1000;
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.mobile-fab:hover {
+    transform: scale(1.05);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
+}
+
+.mobile-fab i {
+    font-size: 1.5rem;
+    transition: transform 0.3s ease;
+}
+
+.mobile-fab.active {
+    transform: rotate(90deg);
+}
+
+.mobile-menu {
+    position: fixed;
+    bottom: 85px;
+    right: 20px;
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: flex-end;
+    z-index: 999;
+    opacity: 0;
+    transform: translateY(20px);
+    pointer-events: none;
+    transition: all 0.3s ease;
+}
+
+.mobile-menu.active {
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: all;
+}
+
+.mobile-menu-item {
+    display: flex;
+    align-items: center;
+    background-color: var(--card-bg);
+    color: var(--text-color);
+    border-radius: var(--border-radius);
+    padding: 0.75rem 1rem;
+    margin-bottom: 10px;
+    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
+    transform: scale(0.9);
+    opacity: 0;
+    transition: all 0.2s ease;
+    text-decoration: none;
+}
+
+.mobile-menu.active .mobile-menu-item {
+    transform: scale(1);
+    opacity: 1;
+}
+
+.mobile-menu-item i {
+    margin-right: 0.75rem;
+    color: var(--primary-color);
+}
+
+.mobile-menu-item:hover {
+    background-color: var(--card-bg-hover);
+    transform: translateX(-5px);
+}
+
+/* Media query to show/hide mobile menu */
+@media (max-width: 768px) {
+    .sidebar {
+        transform: translateX(-100%);
+    }
+
+    .mobile-fab {
+        display: flex;
+    }
+}

app/static/css/modal.css

@@ -4,36 +4,38 @@
     position: fixed;
     top: 0;
     left: 0;
-    right: 0;
+    width: 100%;
-    bottom: 0;
+    height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
-    backdrop-filter: blur(3px);
     z-index: 1000;
     justify-content: center;
     align-items: center;
-    opacity: 0;
-    transition: opacity 0.3s ease;
 }
 
-.modal.visible {
+.modal.active {
-    opacity: 1;
+    display: flex;
 }
 
 .modal-content {
     background-color: var(--card-bg);
-    border-radius: 12px;
+    border-radius: 8px;
-    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+    width: 450px;
-    width: 90%;
+    max-width: 90%;
-    max-width: 400px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
-    position: relative;
+    transform: translateY(0);
-    transform: scale(0.95);
+    animation: modal-appear 0.3s ease;
-    opacity: 0;
-    transition: transform 0.3s ease, opacity 0.3s ease;
 }
 
-.modal.visible .modal-content {
+@keyframes modal-appear {
-    transform: scale(1);
+    from {
-    opacity: 1;
+        opacity: 0;
+        transform: translateY(-30px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
 .modal-header {

app/static/css/styles.css

@@ -36,39 +36,652 @@ button,
     transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
 }
 
-/* Making sure the styles apply properly to light/dark themes */
+/* Main styles for the file management system */
 :root {
-    --primary-color: #4a6bff;
+    /* Dark theme with violet accents */
-    --primary-hover: #3a5bed;
+    --primary-color: #9d8cff;
+    --primary-hover: #8a7aee;
+    --primary-transparent: rgba(157, 140, 255, 0.1);
     --secondary-color: #6c757d;
-    --success-color: #28a745;
+    --success-color: #4cd964;
-    --danger-color: #dc3545;
+    --danger-color: #ff3b30;
-    --warning-color: #ffc107;
+    --warning-color: #ffcc00;
-    --info-color: #17a2b8;
+    --info-color: #5ac8fa;
-    --light-color: #f8f9fa;
+
-    --dark-color: #343a40;
+    /* Core dark theme colors */
-    --background-color: #1e2029;
+    --background-color: #121418;
-    --card-bg: #282a36;
+    --card-bg: #1a1c23;
-    --text-color: #f8f8f2;
+    --card-bg-hover: #22242c;
-    --text-muted: #bd93f9;
+    --text-color: #f2f3f8;
-    --border-color: #44475a;
+    --text-muted: #a0a0b0;
+    --border-color: #2a2d3a;
+
+    /* Component variables */
+    --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.15);
+    --shadow-md: 0 5px 15px rgba(0, 0, 0, 0.2);
+    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.25);
+    --border-radius: 8px;
     --transition-speed: 0.3s;
 }
 
-[data-theme="dark"] {
-    /* Ensure these are applied */
-    --bg: #121418;
-    --card-bg: #1e2029;
-    --text: #f2f3f8;
-    --primary-color-rgb: 109, 93, 252;
-}
-
-/* Theme script fix */
 body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     background-color: var(--background-color);
     color: var(--text-color);
     transition: background-color 0.3s ease;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    min-height: 100vh;
+}
+
+/* Sidebar Navigation */
+.sidebar {
+    width: 250px;
+    background-color: var(--card-bg);
+    border-right: 1px solid var(--border-color);
+    padding: 1.5rem 0;
+    position: fixed;
+    height: 100vh;
+    overflow-y: auto;
+    transition: all 0.3s ease;
+}
+
+.sidebar-brand {
+    display: flex;
+    align-items: center;
+    padding: 0 1.5rem;
+    margin-bottom: 2rem;
+    color: var(--primary-color);
+    text-decoration: none;
+    font-weight: 600;
+    font-size: 1.25rem;
+}
+
+.sidebar-brand i {
+    margin-right: 0.75rem;
+    font-size: 1.5rem;
+}
+
+.sidebar-nav {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.sidebar-nav-item {
+    margin-bottom: 0.5rem;
+}
+
+.sidebar-nav-link {
+    display: flex;
+    align-items: center;
+    padding: 0.75rem 1.5rem;
+    color: var(--text-color);
+    text-decoration: none;
+    transition: all 0.2s ease;
+    border-left: 3px solid transparent;
+}
+
+.sidebar-nav-link:hover,
+.sidebar-nav-link.active {
+    background-color: var(--card-bg-hover);
+    border-left-color: var(--primary-color);
+}
+
+.sidebar-nav-link i {
+    margin-right: 0.75rem;
+    width: 20px;
+    text-align: center;
+    color: var(--primary-color);
+}
+
+/* Main Content */
+.main-wrapper {
+    flex: 1;
+    margin-left: 250px;
+    padding: 2rem;
+    width: calc(100% - 250px);
+}
+
+.main-content {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+/* Dashboard Cards */
+.dashboard-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 2rem;
+}
+
+.dashboard-card {
+    background-color: var(--card-bg);
+    border-radius: var(--border-radius);
+    padding: 1.5rem;
+    box-shadow: var(--shadow-sm);
+    display: flex;
+    align-items: center;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.dashboard-card:hover {
+    transform: translateY(-3px);
+    box-shadow: var(--shadow-md);
+}
+
+.dashboard-card-icon {
+    width: 50px;
+    height: 50px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 1rem;
+    font-size: 1.5rem;
+}
+
+.dashboard-card-icon.files {
+    background-color: rgba(77, 156, 255, 0.2);
+    color: #4d9cff;
+}
+
+.dashboard-card-icon.folders {
+    background-color: rgba(76, 217, 100, 0.2);
+    color: #4cd964;
+}
+
+.dashboard-card-icon.storage {
+    background-color: rgba(90, 200, 250, 0.2);
+    color: #5ac8fa;
+}
+
+.dashboard-card-content h3 {
+    margin: 0;
+    font-size: 1.25rem;
+    font-weight: 600;
+}
+
+.dashboard-card-content p {
+    margin: 0.25rem 0 0;
+    font-size: 1.5rem;
+    font-weight: 700;
+}
+
+/* Recent Files Section */
+.recent-files-section {
+    background-color: var(--card-bg);
+    border-radius: var(--border-radius);
+    padding: 1.5rem;
+    box-shadow: var(--shadow-sm);
+}
+
+.recent-files-header {
+    margin-bottom: 1.5rem;
+    padding-bottom: 0.75rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.recent-files-header h2 {
+    margin: 0;
+    font-size: 1.25rem;
+    font-weight: 600;
+}
+
+.recent-files-list {
+    margin-bottom: 1.5rem;
+}
+
+.recent-file-item {
+    display: flex;
+    align-items: center;
+    padding: 0.75rem 0;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.recent-file-item:last-child {
+    border-bottom: none;
+}
+
+.recent-file-icon {
+    margin-right: 1rem;
+    color: var(--primary-color);
+}
+
+.recent-file-info {
+    flex: 1;
+}
+
+.recent-file-name {
+    font-weight: 500;
+    margin-bottom: 0.25rem;
+}
+
+.recent-file-meta {
+    font-size: 0.875rem;
+    color: var(--text-muted);
+}
+
+.recent-file-actions {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.recent-file-actions button {
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    transition: color 0.2s ease;
+}
+
+.recent-file-actions button:hover {
+    color: var(--primary-color);
+}
+
+/* Action Buttons */
+.action-buttons {
+    display: flex;
+    gap: 1rem;
+    margin-top: 1.5rem;
+}
+
+.action-btn {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.75rem 1.25rem;
+    background-color: var(--card-bg-hover);
+    color: var(--text-color);
+    border: none;
+    border-radius: var(--border-radius);
+    cursor: pointer;
+    text-decoration: none;
+    transition: all 0.2s ease;
+}
+
+.action-btn:hover {
+    background-color: var(--primary-color);
+    color: white;
+}
+
+.action-btn i {
+    margin-right: 0.5rem;
+}
+
+/* Footer */
+.footer {
+    background-color: var(--card-bg);
+    color: var(--text-muted);
+    text-align: center;
+    padding: 1rem 0;
+    margin-top: 2rem;
+    border-top: 1px solid var(--border-color);
+}
+
+/* Flash Messages */
+.flash-messages {
+    margin-bottom: 1.5rem;
+}
+
+.flash-message {
+    display: flex;
+    align-items: center;
+    padding: 1rem;
+    border-radius: var(--border-radius);
+    margin-bottom: 0.75rem;
+    background-color: var(--card-bg);
+    border-left: 4px solid var(--primary-color);
+}
+
+.flash-message.success {
+    border-left-color: var(--success-color);
+}
+
+.flash-message.danger,
+.flash-message.error {
+    border-left-color: var(--danger-color);
+}
+
+.flash-message.warning {
+    border-left-color: var(--warning-color);
+}
+
+.flash-message.info {
+    border-left-color: var(--info-color);
+}
+
+.flash-icon {
+    margin-right: 1rem;
+    font-size: 1.25rem;
+}
+
+.flash-message.success .flash-icon {
+    color: var(--success-color);
+}
+
+.flash-message.danger .flash-icon,
+.flash-message.error .flash-icon {
+    color: var(--danger-color);
+}
+
+.flash-message.warning .flash-icon {
+    color: var(--warning-color);
+}
+
+.flash-message.info .flash-icon {
+    color: var(--info-color);
+}
+
+.flash-content {
+    flex: 1;
+}
+
+.flash-close {
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    font-size: 1.25rem;
+    transition: color 0.2s ease;
+}
+
+.flash-close:hover {
+    color: var(--text-color);
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+    .sidebar {
+        transform: translateX(-100%);
+        z-index: 1000;
+    }
+
+    .sidebar.active {
+        transform: translateX(0);
+    }
+
+    .main-wrapper {
+        margin-left: 0;
+        width: 100%;
+        padding: 1rem;
+    }
+
+    .dashboard-cards {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* Modern navbar styles */
+.navbar {
+    background-color: var(--card-bg);
+    box-shadow: var(--shadow-sm);
+    border-bottom: 1px solid var(--border-color);
+    padding: 0.75rem 1rem;
+}
+
+.navbar-brand {
+    font-weight: 600;
+    font-size: 1.25rem;
+    display: flex;
+    align-items: center;
+    color: var(--primary-color);
+    text-decoration: none;
+}
+
+.navbar-brand i {
+    margin-right: 0.5rem;
+    font-size: 1.5rem;
+}
+
+.navbar-nav {
+    display: flex;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.navbar-nav .nav-item {
+    margin-left: 0.5rem;
+}
+
+.navbar-nav .nav-link {
+    color: var(--text-muted);
+    text-decoration: none;
+    padding: 0.5rem 0.75rem;
+    border-radius: var(--border-radius);
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    position: relative;
+}
+
+.navbar-nav .nav-link i {
+    margin-right: 0.5rem;
+}
+
+.navbar-nav .nav-link:hover {
+    color: var(--primary-color);
+    background-color: var(--primary-transparent);
+}
+
+.navbar-nav .nav-link::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    width: 0;
+    height: 2px;
+    background-color: var(--primary-color);
+    transition: all 0.2s ease;
+    transform: translateX(-50%);
+}
+
+.navbar-nav .nav-link:hover::after {
+    width: 80%;
+}
+
+/* Browser container and elements */
+.browser-container {
+    background-color: var(--card-bg);
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow-sm);
+    margin-bottom: 30px;
+    overflow: hidden;
+}
+
+.browser-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.browser-title {
+    display: flex;
+    align-items: center;
+}
+
+.browser-title i {
+    font-size: 1.5rem;
+    margin-right: 10px;
+    color: var(--primary-color);
+}
+
+.browser-title h2 {
+    margin: 0;
+    font-size: 1.4rem;
+    font-weight: 500;
+}
+
+/* Files and folders styling */
+.grid-view .folder-item,
+.grid-view .file-item {
+    background-color: var(--card-bg-hover);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
+    transition: all 0.2s ease;
+}
+
+.grid-view .folder-item:hover,
+.grid-view .file-item:hover {
+    transform: translateY(-3px);
+    box-shadow: var(--shadow-md);
+    border-color: var(--primary-color);
+}
+
+.grid-view .item-icon {
+    color: var(--primary-color);
+}
+
+.grid-view .folder-item .item-icon {
+    color: var(--primary-color);
+}
+
+/* Button styles */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem 1rem;
+    border-radius: var(--border-radius);
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border: none;
+    font-size: 0.95rem;
+}
+
+.btn.primary {
+    background-color: var(--primary-color);
+    color: white;
+}
+
+.btn.primary:hover {
+    background-color: var(--primary-hover);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.btn.secondary {
+    background-color: var(--card-bg-hover);
+    color: var(--text-color);
+    border: 1px solid var(--border-color);
+}
+
+.btn.secondary:hover {
+    border-color: var(--primary-color);
+    color: var(--primary-color);
+}
+
+.btn i {
+    margin-right: 0.5rem;
+}
+
+/* Mobile floating action button */
+.mobile-fab {
+    display: none;
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    background-color: var(--primary-color);
+    color: white;
+    box-shadow: var(--shadow-md);
+    z-index: 1000;
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.mobile-fab i {
+    font-size: 1.5rem;
+    transition: transform 0.3s ease;
+}
+
+.mobile-fab.active {
+    transform: rotate(45deg);
+}
+
+.mobile-menu {
+    position: fixed;
+    bottom: 80px;
+    right: 20px;
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: flex-end;
+    z-index: 999;
+    opacity: 0;
+    transform: translateY(20px);
+    pointer-events: none;
+    transition: all 0.3s ease;
+}
+
+.mobile-menu.active {
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: all;
+}
+
+.mobile-menu-item {
+    display: flex;
+    align-items: center;
+    background-color: var(--card-bg);
+    color: var(--text-color);
+    border-radius: var(--border-radius);
+    padding: 0.5rem 1rem;
+    margin-bottom: 10px;
+    box-shadow: var(--shadow-md);
+    transform: scale(0.9);
+    opacity: 0;
+    transition: all 0.2s ease;
+}
+
+.mobile-menu.active .mobile-menu-item {
+    transform: scale(1);
+    opacity: 1;
+}
+
+.mobile-menu-item i {
+    margin-right: 0.5rem;
+    color: var(--primary-color);
+}
+
+/* Media queries for responsiveness */
+@media (max-width: 768px) {
+    .navbar {
+        padding: 0.5rem;
+    }
+
+    .navbar-nav {
+        display: none;
+    }
+
+    .mobile-fab {
+        display: flex;
+    }
+
+    .browser-header {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .browser-actions {
+        width: 100%;
+        margin-top: 15px;
+    }
+
+    .browser-title h2 {
+        font-size: 1.2rem;
+    }
+
+    .files-grid {
+        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    }
 }
 
 /* Global dropzone overlay for quick uploads */
@@ -348,44 +961,6 @@ body {
     gap: 10px;
 }
 
-/* Main styles for the file management system */
-.browser-container {
-    background-color: var(--card-bg);
-    border-radius: 8px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
-    margin-bottom: 30px;
-    overflow: hidden;
-}
-
-.browser-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 20px;
-    border-bottom: 1px solid var(--border-color);
-}
-
-.browser-title {
-    display: flex;
-    align-items: center;
-}
-
-.browser-title h2 {
-    margin: 0 0 0 10px;
-    font-size: 1.5rem;
-}
-
-.browser-title i {
-    font-size: 1.5rem;
-    color: var(--primary-color);
-}
-
-.browser-actions {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-
 /* Breadcrumbs */
 .breadcrumbs {
     display: flex;
@@ -476,38 +1051,6 @@ body {
     border-color: var(--primary-color);
 }
 
-/* Buttons */
-.btn {
-    padding: 8px 15px;
-    border-radius: 4px;
-    border: none;
-    cursor: pointer;
-    font-weight: 500;
-    transition: all 0.2s;
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-}
-
-.btn.primary {
-    background-color: var(--primary-color);
-    color: white;
-}
-
-.btn.primary:hover {
-    background-color: var(--primary-hover);
-}
-
-.btn.secondary {
-    background-color: transparent;
-    color: var(--text-color);
-    border: 1px solid var(--border-color);
-}
-
-.btn.secondary:hover {
-    background-color: rgba(255, 255, 255, 0.1);
-}
-
 /* Modal */
 .modal {
     display: none;

app/static/js/browser.js

@@ -243,4 +243,133 @@ document.addEventListener('DOMContentLoaded', function () {
             document.getElementById('new-name').focus();
         });
     }
+
+    // Delete functionality
+    const deleteModal = document.getElementById('delete-modal');
+    const deleteForm = document.getElementById('delete-form');
+    const deleteItemIdInput = document.getElementById('delete-item-id');
+
+    if (deleteModal && deleteForm) {
+        // Update the form action when the modal is shown
+        document.querySelectorAll('.action-btn.delete').forEach(btn => {
+            btn.addEventListener('click', function (e) {
+                e.preventDefault();
+                e.stopPropagation();
+
+                const itemElement = this.closest('.folder-item, .file-item');
+                const itemId = itemElement.dataset.id;
+
+                // Set the item ID in the form
+                deleteItemIdInput.value = itemId;
+
+                // Update the form action URL
+                const formAction = deleteForm.action;
+                deleteForm.action = formAction.replace('placeholder', itemId);
+
+                // Show the modal
+                deleteModal.classList.add('active');
+            });
+        });
+
+        // Close modal when cancel is clicked
+        deleteModal.querySelector('.modal-cancel').addEventListener('click', function () {
+            deleteModal.classList.remove('active');
+        });
+
+        // Close modal when X is clicked
+        deleteModal.querySelector('.modal-close').addEventListener('click', function () {
+            deleteModal.classList.remove('active');
+        });
+    }
 });
+
+// Browser-specific functionality
+document.addEventListener('DOMContentLoaded', function () {
+    // Initialize folder browser view
+    initializeFolderBrowser();
+});
+
+function initializeFolderBrowser() {
+    // Handle item selection
+    const items = document.querySelectorAll('.folder-item, .file-item');
+    items.forEach(item => {
+        item.addEventListener('click', function (e) {
+            // Only select if not clicking on an action button
+            if (!e.target.closest('.file-actions')) {
+                // Remove selection from all items
+                items.forEach(i => i.classList.remove('selected'));
+
+                // Select this item
+                this.classList.add('selected');
+            }
+        });
+    });
+
+    // Handle folder creation form submission
+    const newFolderForm = document.getElementById('new-folder-form');
+    if (newFolderForm) {
+        newFolderForm.addEventListener('submit', function (e) {
+            // Form will be submitted normally, we just close the modal
+            const modal = document.getElementById('new-folder-modal');
+            if (modal) {
+                modal.classList.remove('active');
+            }
+        });
+    }
+
+    // Handle file/folder actions from context menu
+    document.querySelectorAll('.context-menu-item').forEach(item => {
+        item.addEventListener('click', function () {
+            const action = this.getAttribute('data-action');
+            const menu = this.closest('.context-menu');
+            const itemId = menu.getAttribute('data-item-id');
+            const itemType = menu.getAttribute('data-item-type');
+
+            // Handle different actions
+            switch (action) {
+                case 'open':
+                    if (itemType === 'folder') {
+                        window.location.href = `/files/browser/${itemId}`;
+                    }
+                    break;
+                case 'download':
+                    if (itemType === 'file') {
+                        window.location.href = `/files/download/${itemId}`;
+                    }
+                    break;
+                case 'share':
+                    // TODO: Implement share functionality
+                    alert('Share functionality coming soon');
+                    break;
+                case 'rename':
+                    // TODO: Implement rename functionality
+                    alert('Rename functionality coming soon');
+                    break;
+                case 'delete':
+                    if (confirm(`Are you sure you want to delete this ${itemType}?`)) {
+                        // Send delete request to server
+                        fetch(`/files/delete/${itemType}/${itemId}`, {
+                            method: 'POST',
+                        })
+                            .then(response => response.json())
+                            .then(data => {
+                                if (data.success) {
+                                    // Remove item from DOM
+                                    document.querySelector(`[data-id="${itemId}"]`).remove();
+                                } else {
+                                    alert(`Failed to delete ${itemType}: ${data.error}`);
+                                }
+                            })
+                            .catch(error => {
+                                console.error('Error:', error);
+                                alert(`An error occurred while deleting the ${itemType}`);
+                            });
+                    }
+                    break;
+            }
+
+            // Hide menu after action
+            menu.style.display = 'none';
+        });
+    });
+} 

app/static/js/main.js

@@ -17,6 +17,12 @@ document.addEventListener('DOMContentLoaded', function () {
                 console.log('Service Worker registration failed:', error);
             });
     }
+
+    // Initialize flash message close buttons
+    initFlashMessages();
+
+    // Initialize any other global functionality
+    initGlobalDropzone();
 });
 
 // Toggle between grid and list views
@@ -206,3 +212,81 @@ function initializeUploadFunctionality() {
         });
     }
 }
+
+function initFlashMessages() {
+    document.querySelectorAll('.flash-close').forEach(btn => {
+        btn.addEventListener('click', function () {
+            this.closest('.flash-message').remove();
+        });
+    });
+}
+
+function initGlobalDropzone() {
+    // Setup global dropzone for file uploads
+    const body = document.body;
+
+    // Only setup if we're on a page that can handle uploads
+    if (document.getElementById('file-upload')) {
+        // Create dropzone overlay if it doesn't exist
+        if (!document.querySelector('.global-dropzone')) {
+            const dropzone = document.createElement('div');
+            dropzone.className = 'global-dropzone';
+            dropzone.innerHTML = `
+                <div class="dropzone-content">
+                    <div class="dropzone-icon">
+                        <i class="fas fa-cloud-upload-alt fa-3x"></i>
+                    </div>
+                    <h3>Drop files to upload</h3>
+                    <p>Your files will be uploaded to the current folder</p>
+                </div>
+            `;
+            document.body.appendChild(dropzone);
+        }
+
+        // Get the dropzone element
+        const dropzone = document.querySelector('.global-dropzone');
+
+        // Handle drag events
+        body.addEventListener('dragover', function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+            dropzone.classList.add('active');
+        });
+
+        body.addEventListener('dragleave', function (e) {
+            if (e.target === body || e.target === dropzone) {
+                dropzone.classList.remove('active');
+            }
+        });
+
+        dropzone.addEventListener('dragleave', function (e) {
+            if (e.target === dropzone) {
+                dropzone.classList.remove('active');
+            }
+        });
+
+        dropzone.addEventListener('dragover', function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+        });
+
+        dropzone.addEventListener('drop', function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+            dropzone.classList.remove('active');
+
+            // Get the file input element
+            const fileInput = document.getElementById('file-upload');
+
+            // Handle the dropped files
+            if (e.dataTransfer.files.length > 0) {
+                // Set the files to the file input
+                fileInput.files = e.dataTransfer.files;
+
+                // Trigger the change event
+                const event = new Event('change', { bubbles: true });
+                fileInput.dispatchEvent(event);
+            }
+        });
+    }
+} 

app/static/js/mobile-menu.js

@@ -0,0 +1,40 @@
+// Mobile Menu Functionality
+document.addEventListener('DOMContentLoaded', function () {
+    const mobileFab = document.getElementById('mobile-fab');
+    const mobileMenu = document.getElementById('mobile-menu');
+
+    if (mobileFab && mobileMenu) {
+        // Toggle menu on FAB click
+        mobileFab.addEventListener('click', function () {
+            this.classList.toggle('active');
+            mobileMenu.classList.toggle('active');
+        });
+
+        // Add staggered animation to menu items
+        const menuItems = document.querySelectorAll('.mobile-menu-item');
+        menuItems.forEach((item, index) => {
+            item.style.transitionDelay = `${index * 0.05}s`;
+        });
+
+        // Close menu when clicking outside
+        document.addEventListener('click', function (e) {
+            if (mobileMenu.classList.contains('active') &&
+                !mobileFab.contains(e.target) &&
+                !mobileMenu.contains(e.target)) {
+                mobileFab.classList.remove('active');
+                mobileMenu.classList.remove('active');
+            }
+        });
+
+        // Add hover effect to menu items
+        menuItems.forEach(item => {
+            item.addEventListener('mouseenter', function () {
+                this.style.transform = 'translateX(-5px)';
+            });
+
+            item.addEventListener('mouseleave', function () {
+                this.style.transform = '';
+            });
+        });
+    }
+}); 

app/static/js/modal.js

@@ -0,0 +1,86 @@
+// Modal management script
+document.addEventListener('DOMContentLoaded', function () {
+    // Initialize all modals
+    initializeModals();
+});
+
+function initializeModals() {
+    // Setup modal triggers
+    document.querySelectorAll('[data-toggle="modal"]').forEach(trigger => {
+        const targetId = trigger.getAttribute('data-target');
+        const targetModal = document.querySelector(targetId);
+
+        if (targetModal) {
+            trigger.addEventListener('click', function (e) {
+                e.preventDefault();
+                openModal(targetId);
+            });
+        }
+    });
+
+    // Setup direct modal triggers (like the new folder button)
+    const newFolderBtn = document.getElementById('new-folder-btn');
+    if (newFolderBtn) {
+        newFolderBtn.addEventListener('click', function () {
+            openModal('#new-folder-modal');
+        });
+    }
+
+    const emptyNewFolderBtn = document.getElementById('empty-new-folder-btn');
+    if (emptyNewFolderBtn) {
+        emptyNewFolderBtn.addEventListener('click', function () {
+            openModal('#new-folder-modal');
+        });
+    }
+
+    // Close buttons
+    document.querySelectorAll('.modal-close, .modal-cancel').forEach(closeBtn => {
+        closeBtn.addEventListener('click', function () {
+            const modal = this.closest('.modal');
+            if (modal) {
+                closeModal('#' + modal.id);
+            }
+        });
+    });
+
+    // Close on background click
+    document.querySelectorAll('.modal').forEach(modal => {
+        modal.addEventListener('click', function (e) {
+            if (e.target === this) {
+                closeModal('#' + this.id);
+            }
+        });
+    });
+
+    // Close on escape key
+    document.addEventListener('keydown', function (e) {
+        if (e.key === 'Escape') {
+            const activeModal = document.querySelector('.modal.active');
+            if (activeModal) {
+                closeModal('#' + activeModal.id);
+            }
+        }
+    });
+}
+
+// Open a modal by ID
+function openModal(modalId) {
+    const modal = typeof modalId === 'string' ?
+        document.querySelector(modalId) :
+        modalId;
+
+    if (modal) {
+        modal.classList.add('active');
+    }
+}
+
+// Close a modal by ID
+function closeModal(modalId) {
+    const modal = typeof modalId === 'string' ?
+        document.querySelector(modalId) :
+        modalId;
+
+    if (modal) {
+        modal.classList.remove('active');
+    }
+} 

app/static/js/upload.js

@@ -470,4 +470,143 @@ document.addEventListener('DOMContentLoaded', function () {
             });
         }
     }
+
+    // File upload functionality
+    const uploadBtn = document.querySelector('.btn.primary [class*="fa-upload"]');
+    const fileInput = document.getElementById('file-upload');
+
+    // Check if we're on upload page or have upload elements
+    if (uploadBtn && fileInput) {
+        uploadBtn.addEventListener('click', function (e) {
+            // Trigger the hidden file input
+            fileInput.click();
+        });
+
+        fileInput.addEventListener('change', function () {
+            if (this.files.length) {
+                handleFileUpload(this.files);
+            }
+        });
+
+        // Setup drag and drop zone if exists
+        const dropzone = document.getElementById('dropzone');
+        if (dropzone) {
+            setupDragAndDrop(dropzone);
+        }
+    }
+
+    // Handle file upload process
+    function handleFileUpload(files) {
+        // Show progress indicator
+        showUploadProgress();
+
+        const formData = new FormData();
+
+        // Add all files to FormData
+        for (let i = 0; i < files.length; i++) {
+            formData.append('file', files[i]);
+        }
+
+        // Get current folder ID from URL if available
+        const urlParams = new URLSearchParams(window.location.search);
+        const folderId = urlParams.get('folder_id');
+
+        if (folderId) {
+            formData.append('folder_id', folderId);
+        }
+
+        // Submit the upload
+        fetch('/files/upload', {
+            method: 'POST',
+            body: formData
+        })
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Upload failed');
+                }
+                return response.json();
+            })
+            .then(data => {
+                if (data.success) {
+                    // Show success message
+                    showUploadSuccess();
+
+                    // Refresh the page to show the new file
+                    setTimeout(() => {
+                        window.location.reload();
+                    }, 1000);
+                } else {
+                    showUploadError(data.error || 'Upload failed');
+                }
+            })
+            .catch(error => {
+                console.error('Error:', error);
+                showUploadError('An error occurred during upload');
+            })
+            .finally(() => {
+                // Hide progress indicator
+                hideUploadProgress();
+            });
+    }
+
+    // Setup drag and drop functionality
+    function setupDragAndDrop(dropzone) {
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+            dropzone.addEventListener(eventName, preventDefaults, false);
+        });
+
+        function preventDefaults(e) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+
+        ['dragenter', 'dragover'].forEach(eventName => {
+            dropzone.addEventListener(eventName, highlight, false);
+        });
+
+        ['dragleave', 'drop'].forEach(eventName => {
+            dropzone.addEventListener(eventName, unhighlight, false);
+        });
+
+        function highlight() {
+            dropzone.classList.add('highlight');
+        }
+
+        function unhighlight() {
+            dropzone.classList.remove('highlight');
+        }
+
+        dropzone.addEventListener('drop', handleDrop, false);
+
+        function handleDrop(e) {
+            const dt = e.dataTransfer;
+            const files = dt.files;
+
+            if (files.length > 0) {
+                handleFileUpload(files);
+            }
+        }
+    }
+
+    // UI feedback functions
+    function showUploadProgress() {
+        // Implementation depends on your UI
+        console.log('Uploading...');
+        // Could show a toast notification or progress bar
+    }
+
+    function hideUploadProgress() {
+        // Hide any progress indicators
+    }
+
+    function showUploadSuccess() {
+        // Show success message
+        console.log('Upload successful!');
+    }
+
+    function showUploadError(message) {
+        // Show error message
+        console.error('Upload error:', message);
+        alert('Upload failed: ' + message);
+    }
 }); 

app/templates/base.html

@@ -17,18 +17,11 @@
     <link rel="stylesheet" href="{{ url_for('static', filename='css/custom.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/modal.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/context-menu.css') }}">
-
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/mobile-menu.css') }}">
-    <!-- Classless CSS Framework -->
-    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/digitallytailored/classless@latest/classless.min.css"> -->
-
-    <!-- Custom CSS -->
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/custom.css') }}">
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/modal.css') }}">
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/context-menu.css') }}">
-
     <!-- Font Awesome Icons -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+    <!-- Classless CSS Framework -->
+    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/digitallytailored/classless@latest/classless.min.css"> -->
 
     {% block extra_css %}{% endblock %}
     <!-- JavaScript -->
@@ -68,98 +61,112 @@
     </div>
     {% endif %}
 
-    <!-- Navigation -->
+    <!-- Sidebar Navigation -->
-    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
+    <aside class="sidebar">
-        <div class="container">
+        <a href="{{ url_for('dashboard.index') }}" class="sidebar-brand">
-            <a class="navbar-brand" href="{{ url_for('dashboard.index') }}">
+            <i class="fas fa-folder-open"></i>
-                <i class="fas fa-folder-open mr-2"></i>
+            Flask Files
-                Flask Files
+        </a>
-            </a>
-            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent">
-                <span class="navbar-toggler-icon"></span>
-            </button>
 
-            <div class="collapse navbar-collapse" id="navbarContent">
+        <ul class="sidebar-nav">
-                <ul class="navbar-nav ml-auto">
+            {% if current_user.is_authenticated %}
-                    {% if current_user.is_authenticated %}
+            <li class="sidebar-nav-item">
-                    <li class="nav-item">
+                <a href="{{ url_for('dashboard.index') }}"
-                        <a class="nav-link" href="{{ url_for('dashboard.index') }}">
+                    class="sidebar-nav-link {{ 'active' if request.endpoint == 'dashboard.index' else '' }}">
-                            <i class="fas fa-tachometer-alt mr-1"></i> Dashboard
+                    <i class="fas fa-tachometer-alt"></i>
-                        </a>
+                    Dashboard
-                    </li>
+                </a>
-                    <li class="nav-item">
+            </li>
-                        <a class="nav-link" href="{{ url_for('files.browser') }}">
+            <li class="sidebar-nav-item">
-                            <i class="fas fa-folder mr-1"></i> My Files
+                <a href="{{ url_for('files.browser') }}"
-                        </a>
+                    class="sidebar-nav-link {{ 'active' if request.endpoint == 'files.browser' else '' }}">
-                    </li>
+                    <i class="fas fa-folder"></i>
-                    <li class="nav-item">
+                    My Files
-                        <a class="nav-link" href="{{ url_for('files.upload') }}">
+                </a>
-                            <i class="fas fa-upload mr-1"></i> Upload
+            </li>
-                        </a>
+            <li class="sidebar-nav-item">
-                    </li>
+                <a href="{{ url_for('files.upload') }}"
-                    {% if current_user.is_admin %}
+                    class="sidebar-nav-link {{ 'active' if request.endpoint == 'files.upload' else '' }}">
-                    <li class="nav-item">
+                    <i class="fas fa-upload"></i>
-                        <a class="nav-link" href="{{ url_for('admin.index') }}">
+                    Upload
-                            <i class="fas fa-cog mr-1"></i> Admin
+                </a>
-                        </a>
+            </li>
-                    </li>
+            {% if current_user.is_admin %}
-                    {% endif %}
+            <li class="sidebar-nav-item">
-                    <li class="nav-item dropdown">
+                <a href="{{ url_for('admin.index') }}"
-                        <a class="nav-link dropdown-toggle" href="#" id="userDropdown" data-toggle="dropdown">
+                    class="sidebar-nav-link {{ 'active' if request.endpoint.startswith('admin.') else '' }}">
-                            <i class="fas fa-user-circle mr-1"></i> {{ current_user.username }}
+                    <i class="fas fa-cog"></i>
-                        </a>
+                    Admin
-                        <div class="dropdown-menu dropdown-menu-right">
+                </a>
-                            <a class="dropdown-item" href="{{ url_for('auth.profile') }}">
+            </li>
-                                <i class="fas fa-id-card mr-2"></i> Profile
+            {% endif %}
-                            </a>
+            <li class="sidebar-nav-item">
-                            <div class="dropdown-divider"></div>
+                <a href="{{ url_for('auth.logout') }}" class="sidebar-nav-link">
-                            <a class="dropdown-item" href="{{ url_for('auth.logout') }}">
+                    <i class="fas fa-sign-out-alt"></i>
-                                <i class="fas fa-sign-out-alt mr-2"></i> Logout
+                    Logout
-                            </a>
+                </a>
-                        </div>
+            </li>
-                    </li>
+            {% else %}
-                    {% else %}
+            <li class="sidebar-nav-item">
-                    <li class="nav-item">
+                <a href="{{ url_for('auth.login') }}"
-                        <a class="nav-link" href="{{ url_for('auth.login') }}">
+                    class="sidebar-nav-link {{ 'active' if request.endpoint == 'auth.login' else '' }}">
-                            <i class="fas fa-sign-in-alt mr-1"></i> Login
+                    <i class="fas fa-sign-in-alt"></i>
-                        </a>
+                    Login
-                    </li>
+                </a>
-                    <li class="nav-item">
+            </li>
-                        <a class="nav-link" href="{{ url_for('auth.register') }}">
+            <li class="sidebar-nav-item">
-                            <i class="fas fa-user-plus mr-1"></i> Register
+                <a href="{{ url_for('auth.register') }}"
-                        </a>
+                    class="sidebar-nav-link {{ 'active' if request.endpoint == 'auth.register' else '' }}">
-                    </li>
+                    <i class="fas fa-user-plus"></i>
-                    {% endif %}
+                    Register
-                </ul>
+                </a>
-            </div>
+            </li>
-        </div>
+            {% endif %}
-    </nav>
+        </ul>
-
+    </aside>
-    <!-- Flash Messages -->
-    <div class="container mt-4">
-        {% with messages = get_flashed_messages(with_categories=true) %}
-        {% if messages %}
-        {% for category, message in messages %}
-        <div class="alert alert-{{ category if category != 'message' else 'info' }} alert-dismissible fade show">
-            {{ message }}
-            <button type="button" class="close" data-dismiss="alert">&times;</button>
-        </div>
-        {% endfor %}
-        {% endif %}
-        {% endwith %}
-    </div>
 
     <!-- Main Content -->
-    <main role="main" class="container mt-3">
+    <div class="main-wrapper">
-        {% block content %}{% endblock %}
+        <div class="main-content">
-    </main>
+            {% with messages = get_flashed_messages(with_categories=true) %}
+            {% if messages %}
+            <div class="flash-messages">
+                {% for category, message in messages %}
+                <div class="flash-message {{ category }}">
+                    <div class="flash-icon">
+                        {% if category == 'success' %}
+                        <i class="fas fa-check-circle"></i>
+                        {% elif category == 'danger' or category == 'error' %}
+                        <i class="fas fa-exclamation-circle"></i>
+                        {% elif category == 'warning' %}
+                        <i class="fas fa-exclamation-triangle"></i>
+                        {% else %}
+                        <i class="fas fa-info-circle"></i>
+                        {% endif %}
+                    </div>
+                    <div class="flash-content">{{ message }}</div>
+                    <button class="flash-close">&times;</button>
+                </div>
+                {% endfor %}
+            </div>
+            {% endif %}
+            {% endwith %}
 
-    <!-- Footer -->
+            {% block content %}{% endblock %}
-    <footer class="footer mt-auto py-3 bg-light">
+
-        <div class="container text-center">
+            <!-- Footer -->
-            <span class="text-muted">&copy; 2023 Flask Files. All rights reserved.</span>
+            <footer class="footer">
+                <div class="container">
+                    <span>&copy; {{ current_year }} Flask Files. All rights reserved.</span>
+                </div>
+            </footer>
         </div>
-    </footer>
+    </div>
+
+    <!-- Include mobile menu for authenticated users -->
+    {% if current_user.is_authenticated %}
+    {% include 'components/mobile_menu.html' %}
+    {% endif %}
 
     <!-- Add this right before the closing </body> tag -->
     <div id="upload-overlay" class="upload-overlay">
@@ -226,7 +233,42 @@
     <!-- Custom JavaScript -->
     <script src="{{ url_for('static', filename='js/main.js') }}"></script>
 
+    <!-- Add our new script files -->
+    <script src="{{ url_for('static', filename='js/modal.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/browser.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/context-menu.js') }}"></script>
+
+    <!-- Mobile menu script -->
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            const mobileFab = document.getElementById('mobile-fab');
+            const mobileMenu = document.getElementById('mobile-menu');
+
+            if (mobileFab && mobileMenu) {
+                mobileFab.addEventListener('click', function () {
+                    this.classList.toggle('active');
+                    mobileMenu.classList.toggle('active');
+                });
+
+                // Add delay for each menu item to create staggered animation
+                const menuItems = document.querySelectorAll('.mobile-menu-item');
+                menuItems.forEach((item, index) => {
+                    item.style.transitionDelay = `${index * 0.05}s`;
+                });
+            }
+        });
+    </script>
+
     {% block scripts %}{% endblock %}
+
+    <script>
+        // Close flash messages
+        document.querySelectorAll('.flash-close').forEach(btn => {
+            btn.addEventListener('click', function () {
+                this.closest('.flash-message').remove();
+            });
+        });
+    </script>
 </body>
 
 </html>

app/templates/components/mobile_menu.html

@@ -0,0 +1,24 @@
+<!-- Mobile Floating Action Button and Menu -->
+<div class="mobile-fab" id="mobile-fab">
+    <i class="fas fa-bars"></i>
+</div>
+
+<div class="mobile-menu" id="mobile-menu">
+    <a href="{{ url_for('dashboard.index') }}" class="mobile-menu-item">
+        <i class="fas fa-tachometer-alt"></i> Dashboard
+    </a>
+    <a href="{{ url_for('files.browser') }}" class="mobile-menu-item">
+        <i class="fas fa-folder"></i> My Files
+    </a>
+    <a href="{{ url_for('files.upload') }}" class="mobile-menu-item">
+        <i class="fas fa-upload"></i> Upload
+    </a>
+    {% if current_user.is_admin %}
+    <a href="{{ url_for('admin.index') }}" class="mobile-menu-item">
+        <i class="fas fa-cog"></i> Admin
+    </a>
+    {% endif %}
+    <a href="{{ url_for('auth.logout') }}" class="mobile-menu-item">
+        <i class="fas fa-sign-out-alt"></i> Logout
+    </a>
+</div>

app/templates/dashboard.html

@@ -1,233 +0,0 @@
-{% extends "base.html" %}
-
-{% block title %}Dashboard - Flask Files{% endblock %}
-
-{% block extra_css %}
-<style>
-    .dashboard {
-        max-width: 1200px;
-        margin: 0 auto;
-    }
-
-    .section-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 1rem;
-        cursor: pointer;
-    }
-
-    .section-header .toggle-icon {
-        transition: transform 0.3s ease;
-    }
-
-    .section-header.collapsed .toggle-icon {
-        transform: rotate(-90deg);
-    }
-
-    .collapsible-section {
-        margin-bottom: 2rem;
-        transition: max-height 0.5s ease;
-        overflow: hidden;
-    }
-
-    .section-content {
-        transition: opacity 0.3s ease, transform 0.3s ease;
-    }
-
-    .section-content.collapsed {
-        opacity: 0;
-        transform: translateY(-10px);
-        display: none;
-    }
-
-    .quick-stats {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-        gap: 1rem;
-        margin-bottom: 2rem;
-    }
-
-    .quick-access {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-        gap: 1rem;
-        margin-bottom: 1rem;
-    }
-
-    .quick-action {
-        background: var(--card-bg);
-        border-radius: var(--border-radius);
-        padding: 1rem;
-        text-align: center;
-        box-shadow: var(--shadow-sm);
-        transition: transform 0.2s, box-shadow 0.2s;
-    }
-
-    .quick-action:hover {
-        transform: translateY(-5px);
-        box-shadow: var(--shadow-md);
-    }
-
-    .quick-action i {
-        font-size: 2rem;
-        margin-bottom: 0.5rem;
-        color: var(--primary-color);
-    }
-</style>
-{% endblock %}
-
-{% block content %}
-<section class="dashboard">
-    <h2>Dashboard</h2>
-
-    <div class="quick-stats">
-        <div class="stat-card">
-            <div class="stat-icon"><i class="fas fa-folder"></i></div>
-            <div class="stat-info">
-                <span class="stat-value">{{ total_folders }}</span>
-                <span class="stat-label">Folders</span>
-            </div>
-        </div>
-
-        <div class="stat-card">
-            <div class="stat-icon"><i class="fas fa-file"></i></div>
-            <div class="stat-info">
-                <span class="stat-value">{{ total_files }}</span>
-                <span class="stat-label">Files</span>
-            </div>
-        </div>
-
-        <div class="stat-card">
-            <div class="stat-icon"><i class="fas fa-link"></i></div>
-            <div class="stat-info">
-                <span class="stat-value">{{ active_shares }}</span>
-                <span class="stat-label">Active Shares</span>
-            </div>
-        </div>
-
-        <div class="stat-card">
-            <div class="stat-icon"><i class="fas fa-clock"></i></div>
-            <div class="stat-info">
-                <span class="stat-value">{{ recent_activities|default(0) }}</span>
-                <span class="stat-label">Recent Activities</span>
-            </div>
-        </div>
-    </div>
-
-    <div class="quick-access">
-        <a href="{{ url_for('files.upload') }}" class="quick-action">
-            <i class="fas fa-cloud-upload-alt"></i>
-            <div>Upload Files</div>
-        </a>
-        <a href="{{ url_for('files.browser') }}" class="quick-action">
-            <i class="fas fa-folder-open"></i>
-            <div>Browse Files</div>
-        </a>
-        <a href="#" class="quick-action">
-            <i class="fas fa-share-alt"></i>
-            <div>Manage Shares</div>
-        </a>
-        <a href="{{ url_for('auth.profile') }}" class="quick-action">
-            <i class="fas fa-user-cog"></i>
-            <div>Settings</div>
-        </a>
-    </div>
-
-    <!-- Recent Files Section (Collapsible) -->
-    <div class="collapsible-section" id="recent-files-section">
-        <div class="section-header" data-target="recent-files-content">
-            <h3><i class="fas fa-clock"></i> Recent Files</h3>
-            <span class="toggle-icon"><i class="fas fa-chevron-down"></i></span>
-        </div>
-        <div class="section-content" id="recent-files-content">
-            {% if recent_files %}
-            <div class="files-grid grid-view">
-                {% for file in recent_files %}
-                <a href="{{ url_for('files.download', file_id=file.id) }}" class="file-item" data-id="{{ file.id }}">
-                    <div class="item-icon">
-                        <i class="fas {{ file_icon(file.mime_type, file.name) }}"></i>
-                    </div>
-                    <div class="item-info">
-                        <div class="item-name">{{ file.name }}</div>
-                        <div class="item-details">
-                            <span class="item-size">{{ format_size(file.size) }}</span>
-                            <span class="item-date">{{ file.updated_at.strftime('%b %d, %Y') }}</span>
-                        </div>
-                    </div>
-                </a>
-                {% endfor %}
-            </div>
-            {% else %}
-            <div class="empty-state">
-                <p>No files uploaded yet. <a href="{{ url_for('files.upload') }}">Upload your first file</a>.</p>
-            </div>
-            {% endif %}
-        </div>
-    </div>
-
-    <!-- Quick Folder View (Collapsible) -->
-    <div class="collapsible-section" id="folders-section">
-        <div class="section-header" data-target="folders-content">
-            <h3><i class="fas fa-folder"></i> My Folders</h3>
-            <span class="toggle-icon"><i class="fas fa-chevron-down"></i></span>
-        </div>
-        <div class="section-content" id="folders-content">
-            {% if root_folders %}
-            <div class="files-grid grid-view">
-                {% for folder in root_folders %}
-                <a href="{{ url_for('files.browser', folder_id=folder.id) }}" class="folder-item"
-                    data-id="{{ folder.id }}">
-                    <div class="item-icon">
-                        <i class="fas fa-folder"></i>
-                    </div>
-                    <div class="item-info">
-                        <div class="item-name">{{ folder.name }}</div>
-                        <div class="item-details">
-                            <span class="item-count">{{ folder.children.count() }} items</span>
-                            <span class="item-date">{{ folder.created_at.strftime('%b %d, %Y') }}</span>
-                        </div>
-                    </div>
-                </a>
-                {% endfor %}
-            </div>
-            {% else %}
-            <div class="empty-state">
-                <p>No folders created yet. <a href="{{ url_for('files.browser') }}">Create your first folder</a>.</p>
-            </div>
-            {% endif %}
-        </div>
-    </div>
-</section>
-{% endblock %}
-
-{% block extra_js %}
-<script>
-    document.addEventListener('DOMContentLoaded', function () {
-        // Set up collapsible sections
-        const sectionHeaders = document.querySelectorAll('.section-header');
-
-        sectionHeaders.forEach(header => {
-            header.addEventListener('click', function () {
-                const targetId = this.getAttribute('data-target');
-                const content = document.getElementById(targetId);
-
-                this.classList.toggle('collapsed');
-                content.classList.toggle('collapsed');
-
-                // Store preference in localStorage
-                localStorage.setItem(`section_${targetId}`, content.classList.contains('collapsed') ? 'closed' : 'open');
-            });
-
-            // Check localStorage for saved preferences
-            const targetId = header.getAttribute('data-target');
-            const savedState = localStorage.getItem(`section_${targetId}`);
-
-            if (savedState === 'closed') {
-                header.classList.add('collapsed');
-                document.getElementById(targetId).classList.add('collapsed');
-            }
-        });
-    });
-</script>
-{% endblock %}

app/templates/dashboard/index.html

@@ -1,105 +1,81 @@
 {% extends "base.html" %}
 
-{% block title %}Dashboard{% endblock %}
+{% block title %}Dashboard - Flask Files{% endblock %}
 
 {% block content %}
-<div class="container">
+<h1 class="page-title">Dashboard</h1>
-    <h1 class="mb-4">Dashboard</h1>
 
-    <!-- Storage Summary Cards -->
+<div class="dashboard-cards">
-    <div class="row">
+    <div class="dashboard-card">
-        <div class="col-md-4 mb-4">
+        <div class="dashboard-card-icon files">
-            <div class="card border-primary">
+            <i class="fas fa-file"></i>
-                <div class="card-body">
-                    <div class="row">
-                        <div class="col-md-4 text-center">
-                            <i class="fas fa-file fa-3x text-primary"></i>
-                        </div>
-                        <div class="col-md-8">
-                            <h5 class="card-title">Files</h5>
-                            <h3>{{ file_count }}</h3>
-                        </div>
-                    </div>
-                </div>
-            </div>
         </div>
-        <div class="col-md-4 mb-4">
+        <div class="dashboard-card-content">
-            <div class="card border-success">
+            <h3>Files</h3>
-                <div class="card-body">
+            <p>{{ file_count }}</p>
-                    <div class="row">
-                        <div class="col-md-4 text-center">
-                            <i class="fas fa-folder fa-3x text-success"></i>
-                        </div>
-                        <div class="col-md-8">
-                            <h5 class="card-title">Folders</h5>
-                            <h3>{{ folder_count }}</h3>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="col-md-4 mb-4">
-            <div class="card border-info">
-                <div class="card-body">
-                    <div class="row">
-                        <div class="col-md-4 text-center">
-                            <i class="fas fa-hdd fa-3x text-info"></i>
-                        </div>
-                        <div class="col-md-8">
-                            <h5 class="card-title">Storage Used</h5>
-                            <h3>{{ storage_used_formatted }}</h3>
-                        </div>
-                    </div>
-                </div>
-            </div>
         </div>
     </div>
 
-    <!-- Recent Files -->
+    <div class="dashboard-card">
-    <div class="card mt-4">
+        <div class="dashboard-card-icon folders">
-        <div class="card-header bg-light">
+            <i class="fas fa-folder"></i>
-            <h4 class="mb-0">Recent Files</h4>
         </div>
-        <div class="card-body">
+        <div class="dashboard-card-content">
-            {% if recent_files %}
+            <h3>Folders</h3>
-            <table class="table table-hover">
+            <p>{{ folder_count }}</p>
-                <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Type</th>
-                        <th>Size</th>
-                        <th>Uploaded</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {% for file in recent_files %}
-                    <tr>
-                        <td>
-                            <i class="fas {{ file.icon_class }} mr-2"></i>
-                            <a href="{{ url_for('files.download', file_id=file.id) }}">{{ file.name }}</a>
-                        </td>
-                        <td>{{ file.type }}</td>
-                        <td>{{ file.size|filesizeformat }}</td>
-                        <td>{{ file.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
-                    </tr>
-                    {% endfor %}
-                </tbody>
-            </table>
-            {% else %}
-            <div class="alert alert-info">
-                You haven't uploaded any files yet.
-                <a href="{{ url_for('files.upload') }}" class="alert-link">Upload your first file</a>
-            </div>
-            {% endif %}
         </div>
-        <div class="card-footer">
+    </div>
-            <a href="{{ url_for('files.browser') }}" class="btn btn-primary">
+
-                <i class="fas fa-folder-open mr-1"></i> Browse Files
+    <div class="dashboard-card">
-            </a>
+        <div class="dashboard-card-icon storage">
-            <a href="{{ url_for('files.upload') }}" class="btn btn-success">
+            <i class="fas fa-database"></i>
-                <i class="fas fa-upload mr-1"></i> Upload Files
+        </div>
-            </a>
+        <div class="dashboard-card-content">
+            <h3>Storage Used</h3>
+            <p>{{ storage_used }}</p>
         </div>
     </div>
 </div>
+
+<div class="recent-files-section">
+    <div class="recent-files-header">
+        <h2>Recent Files</h2>
+    </div>
+
+    <div class="recent-files-list">
+        {% if recent_files %}
+        {% for file in recent_files %}
+        <div class="recent-file-item">
+            <div class="recent-file-icon">
+                <i class="{{ file.icon_class }}"></i>
+            </div>
+            <div class="recent-file-info">
+                <div class="recent-file-name">{{ file.name }}</div>
+                <div class="recent-file-meta">
+                    {{ file.size|filesizeformat }} • Uploaded {{ file.created_at.strftime('%Y-%m-%d %H:%M') }}
+                </div>
+            </div>
+            <div class="recent-file-actions">
+                <a href="{{ url_for('files.download', file_id=file.id) }}" title="Download">
+                    <i class="fas fa-download"></i>
+                </a>
+            </div>
+        </div>
+        {% endfor %}
+        {% else %}
+        <div class="empty-state">
+            <p>No files uploaded yet.</p>
+        </div>
+        {% endif %}
+    </div>
+
+    <div class="action-buttons">
+        <a href="{{ url_for('files.browser') }}" class="action-btn">
+            <i class="fas fa-folder-open"></i> Browse Files
+        </a>
+        <a href="{{ url_for('files.upload') }}" class="action-btn">
+            <i class="fas fa-upload"></i> Upload Files
+        </a>
+    </div>
+</div>
 {% endblock %}

app/templates/files/browser.html

@@ -3,65 +3,69 @@
 {% block title %}File Browser - Flask Files{% endblock %}
 
 {% block extra_css %}
-<style>
+<link rel="stylesheet" href="{{ url_for('static', filename='css/context-menu.css') }}">
-    /* Additional page-specific styles if needed */
+{% endblock %}
-</style>
+
+{% block extra_js %}
+<script src="{{ url_for('static', filename='js/browser.js') }}"></script>
+<script src="{{ url_for('static', filename='js/context-menu.js') }}"></script>
+<script src="{{ url_for('static', filename='js/upload.js') }}"></script>
 {% endblock %}
 
 {% block content %}
-<div class="container">
+<div class="browser-container">
-    <div class="browser-container">
+    <div class="browser-header">
-        <div class="browser-header">
+        <div class="browser-title">
-            <div class="browser-title">
+            <i class="fas fa-folder-open"></i>
-                <i class="fas fa-folder-open"></i>
+            <h2>{% if current_folder %}{{ current_folder.name }}{% else %}My Files{% endif %}</h2>
-                <h2>{% if current_folder %}{{ current_folder.name }}{% else %}My Files{% endif %}</h2>
+        </div>
+        <div class="browser-actions">
+            <div class="search-container">
+                <form action="{{ url_for('files.browser') }}" method="get">
+                    <input type="text" name="q" placeholder="Search files..." value="{{ request.args.get('q', '') }}">
+                    <button type="submit" class="search-btn">
+                        <i class="fas fa-search"></i>
+                    </button>
+                </form>
             </div>
-            <div class="browser-actions">
+            <div class="view-toggle">
-                <div class="search-container">
+                <button id="grid-view-btn" class="view-btn active" title="Grid View">
-                    <form action="{{ url_for('files.browser') }}" method="get">
+                    <i class="fas fa-th"></i>
-                        <input type="text" name="q" placeholder="Search files..."
+                </button>
-                            value="{{ request.args.get('q', '') }}">
+                <button id="list-view-btn" class="view-btn" title="List View">
-                        <button type="submit" class="search-btn">
+                    <i class="fas fa-list"></i>
-                            <i class="fas fa-search"></i>
-                        </button>
-                    </form>
-                </div>
-                <div class="view-toggle">
-                    <button id="grid-view-btn" class="view-btn active" title="Grid View">
-                        <i class="fas fa-th"></i>
-                    </button>
-                    <button id="list-view-btn" class="view-btn" title="List View">
-                        <i class="fas fa-list"></i>
-                    </button>
-                </div>
-                <a href="{% if current_folder %}{{ url_for('files.upload', folder_id=current_folder.id) }}{% else %}{{ url_for('files.upload') }}{% endif %}"
-                    class="btn primary">
-                    <i class="fas fa-upload"></i> Upload
-                </a>
-                <button id="new-folder-btn" class="btn secondary">
-                    <i class="fas fa-folder-plus"></i> New Folder
                 </button>
             </div>
-        </div>
 
-        <div class="breadcrumbs">
+            <!-- File upload button and hidden input -->
-            <a href="{{ url_for('files.browser') }}" class="breadcrumb-item">
+            <input type="file" id="file-upload" multiple style="display: none">
-                <i class="fas fa-home"></i> Home
+            <button class="btn primary" id="upload-button">
-            </a>
+                <i class="fas fa-upload"></i> Upload
-            {% if breadcrumbs %}
+            </button>
-            {% for folder in breadcrumbs %}
-            <span class="breadcrumb-separator">/</span>
-            <a href="{{ url_for('files.browser', folder_id=folder.id) }}" class="breadcrumb-item">
-                {{ folder.name }}
-            </a>
-            {% endfor %}
-            {% endif %}
-        </div>
 
-        <div id="files-container" class="files-container grid-view">
+            <button id="new-folder-btn" class="btn secondary">
-            {% include 'files/partials/folder_contents.html' %}
+                <i class="fas fa-folder-plus"></i> New Folder
+            </button>
         </div>
     </div>
+
+    <div class="breadcrumbs">
+        <a href="{{ url_for('files.browser') }}" class="breadcrumb-item">
+            <i class="fas fa-home"></i> Home
+        </a>
+        {% if breadcrumbs %}
+        {% for folder in breadcrumbs %}
+        <span class="breadcrumb-separator">/</span>
+        <a href="{{ url_for('files.browser', folder_id=folder.id) }}" class="breadcrumb-item">
+            {{ folder.name }}
+        </a>
+        {% endfor %}
+        {% endif %}
+    </div>
+
+    <div id="files-container" class="files-container grid-view">
+        {% include 'files/partials/folder_contents.html' %}
+    </div>
 </div>
 
 <!-- New Folder Modal -->
@@ -88,34 +92,51 @@
     </div>
 </div>
 
-<!-- Context Menu -->
+<!-- Rename Modal -->
-<div id="context-menu" class="context-menu">
+<div id="rename-modal" class="modal">
-    <div class="context-menu-item" data-action="open" data-for="folder">
+    <div class="modal-content">
-        <i class="fas fa-folder-open"></i> Open
+        <div class="modal-header">
-    </div>
+            <h3>Rename Item</h3>
-    <div class="context-menu-item" data-action="download" data-for="file">
+            <button class="modal-close">&times;</button>
-        <i class="fas fa-download"></i> Download
+        </div>
-    </div>
+        <div class="modal-body">
-    <div class="context-menu-item" data-action="share" data-for="file">
+            <form id="rename-form" action="{{ url_for('files.rename_item') }}" method="post">
-        <i class="fas fa-share-alt"></i> Share
+                <div class="form-group">
-    </div>
+                    <label for="new-name">New Name</label>
-    <div class="context-menu-item" data-action="rename" data-for="all">
+                    <input type="text" id="new-name" name="new_name" required placeholder="Enter new name">
-        <i class="fas fa-pencil-alt"></i> Rename
+                    <input type="hidden" id="item-id" name="item_id">
-    </div>
+                    <input type="hidden" id="item-type" name="item_type">
-    <div class="context-menu-item" data-action="delete" data-for="all">
+                </div>
-        <i class="fas fa-trash"></i> Delete
+                <div class="form-actions">
+                    <button type="button" class="btn modal-cancel">Cancel</button>
+                    <button type="submit" class="btn primary">Rename</button>
+                </div>
+            </form>
+        </div>
     </div>
 </div>
 
-{% block extra_js %}
+<!-- Delete Modal -->
-<script>
+<div id="delete-modal" class="modal">
-    // Add folder entrance animation
+    <div class="modal-content">
-    document.addEventListener('DOMContentLoaded', function () {
+        <div class="modal-header">
-        const filesContainer = document.getElementById('files-container');
+            <h3>Delete Item</h3>
-        if (filesContainer) {
+            <button class="modal-close">&times;</button>
-            filesContainer.classList.add('folder-enter-active');
+        </div>
-        }
+        <div class="modal-body">
-    });
+            <p>Are you sure you want to delete this item? This action cannot be undone.</p>
-</script>
+            <form id="delete-form" action="{{ url_for('files.delete_item', item_id='placeholder') }}" method="post">
-{% endblock %}
+                <input type="hidden" id="delete-item-id" name="item_id">
+                <input type="hidden" id="delete-item-type" name="item_type">
+                <div class="form-actions">
+                    <button type="button" class="btn modal-cancel">Cancel</button>
+                    <button type="submit" class="btn danger">Delete</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<!-- Context Menu -->
+<div id="context-menu" class="context-menu"></div>
 {% endblock %}

app/utils/file_helpers.py

@@ -0,0 +1,100 @@
+def format_file_size(size_bytes):
+    """Format file size in bytes to human-readable format"""
+    if size_bytes < 1024:
+        return f"{size_bytes} bytes"
+    elif size_bytes < 1024 * 1024:
+        return f"{size_bytes / 1024:.2f} KB"
+    elif size_bytes < 1024 * 1024 * 1024:
+        return f"{size_bytes / (1024 * 1024):.2f} MB"
+    else:
+        return f"{size_bytes / (1024 * 1024 * 1024):.2f} GB"
+
+def get_file_icon(mime_type, filename):
+    """Get Font Awesome icon class based on file type"""
+    # Extract extension from filename
+    extension = filename.split('.')[-1].lower() if '.' in filename else ''
+    
+    # Define icon mapping
+    icon_map = {
+        # Documents
+        'pdf': 'fa-file-pdf',
+        'doc': 'fa-file-word',
+        'docx': 'fa-file-word',
+        'txt': 'fa-file-alt',
+        'rtf': 'fa-file-alt',
+        'odt': 'fa-file-alt',
+        
+        # Spreadsheets
+        'xls': 'fa-file-excel',
+        'xlsx': 'fa-file-excel',
+        'csv': 'fa-file-csv',
+        
+        # Presentations
+        'ppt': 'fa-file-powerpoint',
+        'pptx': 'fa-file-powerpoint',
+        
+        # Images
+        'jpg': 'fa-file-image',
+        'jpeg': 'fa-file-image',
+        'png': 'fa-file-image',
+        'gif': 'fa-file-image',
+        'svg': 'fa-file-image',
+        'webp': 'fa-file-image',
+        
+        # Audio
+        'mp3': 'fa-file-audio',
+        'wav': 'fa-file-audio',
+        'ogg': 'fa-file-audio',
+        
+        # Video
+        'mp4': 'fa-file-video',
+        'avi': 'fa-file-video',
+        'mov': 'fa-file-video',
+        'wmv': 'fa-file-video',
+        
+        # Archives
+        'zip': 'fa-file-archive',
+        'rar': 'fa-file-archive',
+        '7z': 'fa-file-archive',
+        'tar': 'fa-file-archive',
+        'gz': 'fa-file-archive',
+        
+        # Code
+        'html': 'fa-file-code',
+        'css': 'fa-file-code',
+        'js': 'fa-file-code',
+        'py': 'fa-file-code',
+        'java': 'fa-file-code',
+        'php': 'fa-file-code',
+        'c': 'fa-file-code',
+        'cpp': 'fa-file-code',
+        'h': 'fa-file-code',
+    }
+    
+    # Check if we have an icon for this extension
+    if extension in icon_map:
+        return icon_map[extension]
+    
+    # If not, try to determine from mime type
+    if mime_type:
+        if mime_type.startswith('image/'):
+            return 'fa-file-image'
+        elif mime_type.startswith('audio/'):
+            return 'fa-file-audio'
+        elif mime_type.startswith('video/'):
+            return 'fa-file-video'
+        elif mime_type.startswith('text/'):
+            return 'fa-file-alt'
+        elif 'pdf' in mime_type:
+            return 'fa-file-pdf'
+        elif 'msword' in mime_type or 'document' in mime_type:
+            return 'fa-file-word'
+        elif 'excel' in mime_type or 'spreadsheet' in mime_type:
+            return 'fa-file-excel'
+        elif 'powerpoint' in mime_type or 'presentation' in mime_type:
+            return 'fa-file-powerpoint'
+        elif 'zip' in mime_type or 'compressed' in mime_type or 'archive' in mime_type:
+            return 'fa-file-archive'
+    
+    # Default icon
+    return 'fa-file'