feat: modernize drive sync UI and add public access links

- Redesign drive_manager.html with modern card-based layout
- Redesign drive_browser.html with grid/list view toggle
- Add token-based public access for sharing files without auth
- Add /drive/public/<id>/list.txt endpoint for curl-friendly listings
- Add /drive/public/<id>/download endpoint for direct file downloads
- Add quick copy buttons for file links in browser view
- Add share modal with generated public URLs

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

drive_routes.py

@@ -357,3 +357,217 @@ def api_open_file(file_id):
 def serve_cache_file(filename):
     cache_dir = os.path.join(current_app.config['UPLOAD_FOLDER'], 'drive_cache')
     return send_from_directory(cache_dir, filename)
+
+
+# ==================== PUBLIC ACCESS ROUTES (No Auth Required) ====================
+
+def generate_public_token(source_id, user_id):
+    """Generate a simple token for public access."""
+    import hashlib
+    secret = current_app.config.get('SECRET_KEY', 'default-secret')
+    data = f"{source_id}:{user_id}:{secret}"
+    return hashlib.sha256(data.encode()).hexdigest()[:32]
+
+def verify_public_token(source_id, token):
+    """Verify public access token and return the source if valid."""
+    conn = get_db_connection()
+    source = conn.execute('SELECT * FROM drive_sources WHERE id = ?', (source_id,)).fetchone()
+    conn.close()
+    if not source:
+        return None
+    expected_token = generate_public_token(source_id, source['user_id'])
+    if token == expected_token:
+        return dict(source)
+    return None
+
+@drive_bp.route('/drive/public/<int:source_id>/token')
+@login_required
+def get_public_token(source_id):
+    """Generate a public access token for a source (owner only)."""
+    conn = get_db_connection()
+    source = conn.execute('SELECT * FROM drive_sources WHERE id = ?', (source_id,)).fetchone()
+    conn.close()
+    if not source or source['user_id'] != current_user.id:
+        return jsonify({'error': 'Unauthorized'}), 403
+    token = generate_public_token(source_id, current_user.id)
+    return jsonify({'token': token})
+
+@drive_bp.route('/drive/public/<int:source_id>/list.txt')
+def public_list_files(source_id):
+    """
+    Public endpoint: Returns a plain text list of all files in the synced folder.
+    Perfect for curl/wget scripts.
+
+    Usage: curl https://host/drive/public/123/list.txt?token=abc123
+    """
+    token = request.args.get('token')
+    if not token:
+        return "Missing token parameter. Add ?token=YOUR_TOKEN to the URL.", 401
+
+    source = verify_public_token(source_id, token)
+    if not source:
+        return "Invalid or expired token.", 403
+
+    base_path = get_sync_folder_path(source['local_path'])
+    if not os.path.exists(base_path):
+        return "Source not synced yet.", 404
+
+    subpath = request.args.get('path', '')
+    current_path = os.path.join(base_path, subpath) if subpath else base_path
+
+    if not os.path.exists(current_path):
+        return "Path not found.", 404
+
+    # Collect all files recursively
+    files_list = []
+    base_url = request.host_url.rstrip('/')
+
+    def scan_directory(dir_path, prefix=''):
+        try:
+            for entry in sorted(os.scandir(dir_path), key=lambda e: e.name.lower()):
+                rel_path = os.path.join(prefix, entry.name) if prefix else entry.name
+                if entry.is_dir():
+                    files_list.append(f"[DIR] {rel_path}/")
+                    scan_directory(entry.path, rel_path)
+                else:
+                    # Add download URL for each file
+                    download_url = f"{base_url}/drive/public/{source_id}/download/{rel_path}?token={token}"
+                    size = entry.stat().st_size
+                    size_str = format_file_size(size)
+                    files_list.append(f"{rel_path}\t{size_str}\t{download_url}")
+        except Exception as e:
+            files_list.append(f"[ERROR] {str(e)}")
+
+    scan_directory(current_path)
+
+    # Build response
+    header = f"# Directory listing for: {source['name']}\n"
+    header += f"# Generated: {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}\n"
+    header += f"# Format: filename\\tsize\\tdownload_url\n"
+    header += "#" + "=" * 60 + "\n\n"
+
+    content = header + "\n".join(files_list)
+
+    from flask import Response
+    return Response(content, mimetype='text/plain', headers={
+        'Content-Disposition': f'inline; filename="{source["name"]}_files.txt"'
+    })
+
+def format_file_size(size_bytes):
+    """Format bytes to human readable string."""
+    for unit in ['B', 'KB', 'MB', 'GB']:
+        if size_bytes < 1024:
+            return f"{size_bytes:.1f}{unit}"
+        size_bytes /= 1024
+    return f"{size_bytes:.1f}TB"
+
+@drive_bp.route('/drive/public/<int:source_id>/download')
+@drive_bp.route('/drive/public/<int:source_id>/download/<path:filepath>')
+def public_download_file(source_id, filepath=None):
+    """
+    Public endpoint: Download a file without authentication.
+
+    Usage:
+    - Single file source: /drive/public/123/download?token=abc123
+    - Specific file: /drive/public/123/download/subfolder/file.pdf?token=abc123
+    """
+    token = request.args.get('token')
+    if not token:
+        return "Missing token parameter. Add ?token=YOUR_TOKEN to the URL.", 401
+
+    source = verify_public_token(source_id, token)
+    if not source:
+        return "Invalid or expired token.", 403
+
+    base_path = get_sync_folder_path(source['local_path'])
+
+    # If no filepath specified, try to find the first/only file
+    if not filepath:
+        if source['source_type'] == 'file':
+            # For file sources, download using gdown if not cached
+            if not os.path.exists(base_path):
+                os.makedirs(base_path)
+
+            # Find existing file or download
+            files = [f for f in os.listdir(base_path) if os.path.isfile(os.path.join(base_path, f))] if os.path.exists(base_path) else []
+            if files:
+                filepath = files[0]
+            else:
+                # Try to download
+                try:
+                    output_path = os.path.join(base_path, 'document.pdf')
+                    gdown.download(url=source['url'], output=output_path, quiet=True, fuzzy=True)
+                    filepath = 'document.pdf'
+                except Exception as e:
+                    return f"Error downloading file: {e}", 500
+        else:
+            return "Filepath required for folder sources. Use /download/path/to/file.pdf", 400
+
+    full_path = os.path.join(base_path, filepath)
+
+    # Security: Ensure path doesn't escape base
+    if not os.path.abspath(full_path).startswith(os.path.abspath(base_path)):
+        return "Invalid path.", 403
+
+    if not os.path.exists(full_path):
+        return "File not found.", 404
+
+    if not os.path.isfile(full_path):
+        return "Not a file.", 400
+
+    # Serve the file
+    directory = os.path.dirname(full_path)
+    filename = os.path.basename(full_path)
+
+    # Check if inline viewing is requested
+    inline = request.args.get('inline', '0') == '1'
+
+    return send_from_directory(
+        directory,
+        filename,
+        as_attachment=not inline
+    )
+
+@drive_bp.route('/drive/public/<int:source_id>/browse')
+def public_browse(source_id):
+    """
+    Public endpoint: Browse files in a synced folder (JSON response).
+    """
+    token = request.args.get('token')
+    if not token:
+        return jsonify({'error': 'Missing token'}), 401
+
+    source = verify_public_token(source_id, token)
+    if not source:
+        return jsonify({'error': 'Invalid token'}), 403
+
+    base_path = get_sync_folder_path(source['local_path'])
+    subpath = request.args.get('path', '')
+    current_path = os.path.join(base_path, subpath) if subpath else base_path
+
+    if not os.path.exists(current_path):
+        return jsonify({'error': 'Path not found'}), 404
+
+    items = []
+    base_url = request.host_url.rstrip('/')
+
+    try:
+        for entry in sorted(os.scandir(current_path), key=lambda e: (not e.is_dir(), e.name.lower())):
+            rel_path = os.path.join(subpath, entry.name) if subpath else entry.name
+            item = {
+                'name': entry.name,
+                'type': 'folder' if entry.is_dir() else 'file',
+                'path': rel_path
+            }
+            if entry.is_file():
+                item['size'] = entry.stat().st_size
+                item['download_url'] = f"{base_url}/drive/public/{source_id}/download/{rel_path}?token={token}"
+            items.append(item)
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+    return jsonify({
+        'source': source['name'],
+        'path': subpath or '/',
+        'items': items
+    })

templates/drive_browser.html

@@ -1,219 +1,467 @@
 {% extends "base.html" %}
 
-{% block title %}Browse Drive{% endblock %}
+{% block title %}{{ source.name }} - Drive Browser{% endblock %}
 
 {% block styles %}
 <style>
-    .view-hidden { display: none !important; }
-    .card-checkbox { 
-        position: absolute; 
-        top: 10px; 
-        right: 10px; 
-        z-index: 10; 
-        width: 18px; 
-        height: 18px; 
+    /* Modern Drive Browser Styles */
+    .browser-header {
+        background: var(--bg-card);
+        border: 1px solid var(--border-subtle);
+        border-radius: 12px;
+        padding: 16px 20px;
+        margin-bottom: 20px;
+    }
+
+    .breadcrumb {
+        margin-bottom: 0;
+        padding: 0;
+        background: transparent;
+    }
+
+    .breadcrumb-item a {
+        color: var(--accent-primary);
+        text-decoration: none;
+    }
+
+    .breadcrumb-item a:hover {
+        text-decoration: underline;
+    }
+
+    .breadcrumb-item.active {
+        color: var(--text-primary);
+    }
+
+    .view-toggle .btn {
+        padding: 8px 12px;
+        border-radius: 8px;
+    }
+
+    .view-toggle .btn.active {
+        background: var(--accent-primary);
+        border-color: var(--accent-primary);
+        color: white;
+    }
+
+    /* File Cards */
+    .file-card {
+        background: var(--bg-card);
+        border: 1px solid var(--border-subtle);
+        border-radius: 12px;
+        transition: all 0.2s ease;
+        cursor: pointer;
+        overflow: hidden;
+    }
+
+    .file-card:hover {
+        transform: translateY(-4px);
+        border-color: var(--accent-primary);
+        box-shadow: 0 8px 20px rgba(13, 110, 253, 0.2);
+    }
+
+    .file-card .card-body {
+        padding: 20px;
+        text-align: center;
+        position: relative;
+    }
+
+    .file-card .copy-btn {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        width: 28px;
+        height: 28px;
+        border-radius: 6px;
+        background: rgba(255,255,255,0.1);
+        border: none;
+        color: var(--text-muted);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+        transition: all 0.2s ease;
+        z-index: 10;
+    }
+
+    .file-card:hover .copy-btn {
+        opacity: 1;
+    }
+
+    .file-card .copy-btn:hover {
+        background: var(--accent-primary);
+        color: white;
+        transform: scale(1.1);
+    }
+
+    .file-card .copy-btn.copied {
+        background: #198754;
+        color: white;
+    }
+
+    .file-icon {
+        width: 64px;
+        height: 64px;
+        border-radius: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 2rem;
+        margin: 0 auto 12px;
+    }
+
+    .file-icon.folder {
+        background: linear-gradient(135deg, rgba(255,193,7,0.2) 0%, rgba(255,152,0,0.2) 100%);
+        color: #ffc107;
+    }
+
+    .file-icon.pdf {
+        background: linear-gradient(135deg, rgba(220,53,69,0.2) 0%, rgba(255,87,34,0.2) 100%);
+        color: #dc3545;
+    }
+
+    .file-icon.image {
+        background: linear-gradient(135deg, rgba(13,202,240,0.2) 0%, rgba(32,201,151,0.2) 100%);
+        color: #0dcaf0;
+    }
+
+    .file-icon.file {
+        background: linear-gradient(135deg, rgba(108,117,125,0.2) 0%, rgba(73,80,87,0.2) 100%);
+        color: #6c757d;
+    }
+
+    .file-name {
+        font-size: 0.9rem;
+        font-weight: 500;
+        word-break: break-word;
+        line-height: 1.3;
+    }
+
+    /* List View */
+    .list-view {
+        display: none;
+    }
+
+    .list-view.active {
+        display: block;
+    }
+
+    .grid-view {
+        display: flex;
+    }
+
+    .grid-view.hidden {
+        display: none !important;
+    }
+
+    .file-row {
+        background: var(--bg-card);
+        border: 1px solid var(--border-subtle);
+        border-radius: 8px;
+        margin-bottom: 8px;
+        padding: 12px 16px;
         cursor: pointer;
+        transition: all 0.2s ease;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+    }
+
+    .file-row:hover {
+        background: rgba(13, 110, 253, 0.1);
+        border-color: var(--accent-primary);
+    }
+
+    .file-row .file-icon {
+        width: 40px;
+        height: 40px;
+        font-size: 1.2rem;
+        margin: 0;
+        flex-shrink: 0;
+    }
+
+    .file-row .file-name {
+        flex-grow: 1;
+        text-align: left;
+    }
+
+    .file-row .copy-btn {
+        width: 32px;
+        height: 32px;
+        border-radius: 6px;
+        background: rgba(255,255,255,0.1);
+        border: none;
+        color: var(--text-muted);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.2s ease;
+        flex-shrink: 0;
+    }
+
+    .file-row .copy-btn:hover {
+        background: var(--accent-primary);
+        color: white;
+    }
+
+    .file-row .copy-btn.copied {
+        background: #198754;
+        color: white;
+    }
+
+    /* Empty State */
+    .empty-state {
+        text-align: center;
+        padding: 80px 20px;
+        color: var(--text-muted);
+    }
+
+    .empty-state i {
+        font-size: 4rem;
+        opacity: 0.3;
+        margin-bottom: 16px;
+    }
+
+    /* Loader */
+    .loader-overlay {
+        display: none;
+        position: fixed;
+        inset: 0;
+        background: rgba(0,0,0,0.8);
+        z-index: 9999;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        color: white;
+    }
+
+    .loader-overlay.active {
+        display: flex;
+    }
+
+    .selection-bar {
+        background: var(--bg-card);
+        border: 1px solid var(--border-subtle);
+        border-radius: 8px;
+        padding: 8px 16px;
+        margin-bottom: 16px;
     }
-    .list-view-row { cursor: pointer; }
-    .list-view-row:hover { background-color: rgba(255,255,255,0.05); }
-    .breadcrumb { margin-bottom: 0; }
 </style>
 {% endblock %}
 
 {% block content %}
-<div class="container-fluid mt-4" style="width: 90%; margin: auto;">
-    
-    <!-- Toolbar -->
-    <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-3">
+<div class="container-fluid px-4 py-4">
+    <!-- Header with Breadcrumb -->
+    <div class="browser-header d-flex justify-content-between align-items-center flex-wrap gap-3">
         <nav aria-label="breadcrumb">
             <ol class="breadcrumb">
-                <li class="breadcrumb-item"><a href="/drive_manager">Drives</a></li>
+                <li class="breadcrumb-item"><a href="/drive_manager"><i class="bi bi-cloud me-1"></i>Drives</a></li>
+                {% if source.id == 'api' %}
+                <li class="breadcrumb-item active">{{ source.name }}</li>
+                {% else %}
                 <li class="breadcrumb-item"><a href="/drive/browse/{{ source.id }}">{{ source.name }}</a></li>
+                {% endif %}
                 {% for crumb in breadcrumbs %}
-                    <li class="breadcrumb-item active">{{ crumb.name }}</li>
+                <li class="breadcrumb-item active">{{ crumb.name }}</li>
                 {% endfor %}
             </ol>
         </nav>
 
-        <div class="d-flex gap-2">
-            <div class="btn-group" role="group">
-                <button type="button" class="btn btn-outline-secondary active" id="btn-view-grid" onclick="switchView('grid')" title="Grid View">
-                    <i class="bi bi-grid-fill"></i>
+        <div class="d-flex gap-2 align-items-center">
+            <div class="btn-group view-toggle" role="group">
+                <button type="button" class="btn btn-outline-secondary active" id="btn-grid" onclick="switchView('grid')">
+                    <i class="bi bi-grid-3x3-gap-fill"></i>
                 </button>
-                <button type="button" class="btn btn-outline-secondary" id="btn-view-list" onclick="switchView('list')" title="List View">
-                    <i class="bi bi-list-ul"></i>
+                <button type="button" class="btn btn-outline-secondary" id="btn-list" onclick="switchView('list')">
+                    <i class="bi bi-list"></i>
                 </button>
             </div>
         </div>
     </div>
 
-    <!-- Bulk Actions Bar -->
-    <div class="d-flex align-items-center mb-3 p-2 bg-dark border border-secondary rounded">
-        <div class="form-check ms-2">
-            <input class="form-check-input" type="checkbox" id="select-all">
-            <label class="form-check-label user-select-none" for="select-all">Select All</label>
+    <!-- Selection Bar -->
+    <div class="selection-bar d-flex align-items-center justify-content-between">
+        <div class="d-flex align-items-center gap-3">
+            <div class="form-check">
+                <input class="form-check-input" type="checkbox" id="select-all">
+                <label class="form-check-label small" for="select-all">Select All</label>
+            </div>
+            <span class="text-muted small"><span id="item-count">{{ items|length }}</span> items</span>
         </div>
-        <div class="ms-auto" id="bulk-actions" style="visibility: hidden;">
+        <div id="bulk-actions" style="display: none;">
             <span class="text-muted me-2 small"><span id="selected-count">0</span> selected</span>
-            <!-- Add bulk actions here later if needed, e.g. Download -->
-            <button class="btn btn-sm btn-outline-light" disabled>Bulk Actions (Coming Soon)</button>
         </div>
     </div>
 
     <!-- Grid View -->
-    <div id="view-grid" class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
+    <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3 grid-view" id="grid-view">
         {% for item in items %}
-        <div class="col item-entry" data-id="{{ item.path }}">
-            {% if item.type == 'folder' %}
-                {% set link = '/drive/api/browse/' + item.path if is_api else '/drive/browse/' + source.id|string + '/' + item.path %}
-                {% set icon = 'bi-folder-fill text-warning' %}
-            {% else %}
-                {% set link = '/drive/api/open/' + item.path if is_api else '/drive/file/' + source.id|string + '/' + item.path %}
-                {% if item.type == 'pdf' %}
-                    {% set icon = 'bi-file-earmark-pdf-fill text-danger' %}
-                {% else %}
-                    {% set icon = 'bi-file-earmark-image-fill text-info' %}
-                {% endif %}
-            {% endif %}
+        {% if item.type == 'folder' %}
+            {% set link = '/drive/api/browse/' + item.path if is_api else '/drive/browse/' + source.id|string + '/' + item.path %}
+            {% set icon_class = 'folder' %}
+            {% set icon = 'bi-folder-fill' %}
+        {% elif item.type == 'pdf' %}
+            {% set link = '/drive/api/open/' + item.path if is_api else '/drive/file/' + source.id|string + '/' + item.path %}
+            {% set icon_class = 'pdf' %}
+            {% set icon = 'bi-file-earmark-pdf-fill' %}
+        {% elif item.type == 'image' %}
+            {% set link = '/drive/api/open/' + item.path if is_api else '/drive/file/' + source.id|string + '/' + item.path %}
+            {% set icon_class = 'image' %}
+            {% set icon = 'bi-file-earmark-image-fill' %}
+        {% else %}
+            {% set link = '/drive/api/open/' + item.path if is_api else '/drive/file/' + source.id|string + '/' + item.path %}
+            {% set icon_class = 'file' %}
+            {% set icon = 'bi-file-earmark-fill' %}
+        {% endif %}
 
-            <div class="card h-100 bg-dark text-white border-secondary position-relative">
-                <input type="checkbox" class="form-check-input card-checkbox item-check" value="{{ item.path }}">
-                <div class="card-body text-center" onclick="navigate('{{ link }}')" style="cursor: pointer;">
-                    <i class="bi {{ icon }} fs-1"></i>
-                    <h6 class="card-title mt-2 text-truncate" title="{{ item.name }}">{{ item.name }}</h6>
+        <div class="col">
+            <div class="file-card" onclick="navigate('{{ link }}')">
+                <div class="card-body">
+                    {% if item.type != 'folder' %}
+                    <button class="copy-btn" onclick="event.stopPropagation(); copyFileLink('{{ link }}', this)" title="Copy link">
+                        <i class="bi bi-link-45deg"></i>
+                    </button>
+                    {% endif %}
+                    <div class="file-icon {{ icon_class }}">
+                        <i class="bi {{ icon }}"></i>
+                    </div>
+                    <div class="file-name text-truncate" title="{{ item.name }}">{{ item.name }}</div>
                 </div>
             </div>
         </div>
         {% else %}
-        <div class="col-12 text-center text-muted">
-            <p>Empty folder or not synced yet.</p>
+        <div class="col-12">
+            <div class="empty-state">
+                <i class="bi bi-folder2-open d-block"></i>
+                <h5>Empty Folder</h5>
+                <p class="text-muted">This folder is empty or not synced yet</p>
+                <a href="/drive_manager" class="btn btn-outline-primary">
+                    <i class="bi bi-arrow-left me-1"></i>Back to Drive Manager
+                </a>
+            </div>
         </div>
         {% endfor %}
     </div>
 
     <!-- List View -->
-    <div id="view-list" class="table-responsive view-hidden">
-        <table class="table table-dark table-hover align-middle border-secondary">
-            <thead>
-                <tr>
-                    <th style="width: 40px;"></th>
-                    <th style="width: 50px;">Type</th>
-                    <th>Name</th>
-                    <th style="width: 100px;">Action</th>
-                </tr>
-            </thead>
-            <tbody>
-                {% for item in items %}
-                {% if item.type == 'folder' %}
-                    {% set link = '/drive/api/browse/' + item.path if is_api else '/drive/browse/' + source.id|string + '/' + item.path %}
-                    {% set icon = 'bi-folder-fill text-warning' %}
-                {% else %}
-                    {% set link = '/drive/api/open/' + item.path if is_api else '/drive/file/' + source.id|string + '/' + item.path %}
-                    {% if item.type == 'pdf' %}
-                        {% set icon = 'bi-file-earmark-pdf-fill text-danger' %}
-                    {% else %}
-                        {% set icon = 'bi-file-earmark-image-fill text-info' %}
-                    {% endif %}
-                {% endif %}
-                
-                <tr class="item-entry">
-                    <td><input type="checkbox" class="form-check-input item-check" value="{{ item.path }}"></td>
-                    <td class="text-center"><i class="bi {{ icon }} fs-5"></i></td>
-                    <td onclick="navigate('{{ link }}')" style="cursor: pointer;">
-                        {{ item.name }}
-                    </td>
-                    <td>
-                        <button class="btn btn-sm btn-outline-secondary" onclick="navigate('{{ link }}')">
-                            Open
-                        </button>
-                    </td>
-                </tr>
-                {% endfor %}
-            </tbody>
-        </table>
+    <div class="list-view" id="list-view">
+        {% for item in items %}
+        {% if item.type == 'folder' %}
+            {% set link = '/drive/api/browse/' + item.path if is_api else '/drive/browse/' + source.id|string + '/' + item.path %}
+            {% set icon_class = 'folder' %}
+            {% set icon = 'bi-folder-fill' %}
+        {% elif item.type == 'pdf' %}
+            {% set link = '/drive/api/open/' + item.path if is_api else '/drive/file/' + source.id|string + '/' + item.path %}
+            {% set icon_class = 'pdf' %}
+            {% set icon = 'bi-file-earmark-pdf-fill' %}
+        {% elif item.type == 'image' %}
+            {% set link = '/drive/api/open/' + item.path if is_api else '/drive/file/' + source.id|string + '/' + item.path %}
+            {% set icon_class = 'image' %}
+            {% set icon = 'bi-file-earmark-image-fill' %}
+        {% else %}
+            {% set link = '/drive/api/open/' + item.path if is_api else '/drive/file/' + source.id|string + '/' + item.path %}
+            {% set icon_class = 'file' %}
+            {% set icon = 'bi-file-earmark-fill' %}
+        {% endif %}
+
+        <div class="file-row" onclick="navigate('{{ link }}')">
+            <div class="file-icon {{ icon_class }}">
+                <i class="bi {{ icon }}"></i>
+            </div>
+            <div class="file-name">{{ item.name }}</div>
+            <span class="badge bg-secondary">{{ item.type }}</span>
+            {% if item.type != 'folder' %}
+            <button class="copy-btn" onclick="event.stopPropagation(); copyFileLink('{{ link }}', this)" title="Copy link">
+                <i class="bi bi-link-45deg"></i>
+            </button>
+            {% endif %}
+        </div>
+        {% endfor %}
     </div>
 </div>
 
-<!-- Loader -->
-<div id="loader-overlay" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:9999; align-items:center; justify-content:center; color:white; flex-direction:column;">
-    <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;"></div>
-    <div class="mt-3 fs-5">Downloading & Opening...</div>
+<!-- Loader Overlay -->
+<div class="loader-overlay" id="loader">
+    <div class="spinner-border text-primary mb-3" style="width: 3rem; height: 3rem;"></div>
+    <div class="fs-5">Opening file...</div>
 </div>
 
-<script>
-    // Navigation & Loader
-    function showLoader() {
-        document.getElementById('loader-overlay').style.display = 'flex';
-    }
+<!-- Toast -->
+<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 1100">
+    <div class="toast align-items-center text-bg-success border-0" id="copyToast" role="alert">
+        <div class="d-flex">
+            <div class="toast-body">
+                <i class="bi bi-check-circle me-2"></i>Link copied!
+            </div>
+            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
+        </div>
+    </div>
+</div>
+{% endblock %}
 
+{% block scripts %}
+<script>
+    // Navigation with loader
     function navigate(url) {
-        showLoader();
+        document.getElementById('loader').classList.add('active');
         window.location.href = url;
     }
 
-    // Fix Back Button Loader Issue
-    window.addEventListener('pageshow', function(event) {
-        document.getElementById('loader-overlay').style.display = 'none';
+    // Hide loader on back navigation
+    window.addEventListener('pageshow', () => {
+        document.getElementById('loader').classList.remove('active');
     });
 
-    // View Switching
+    // View switching
     function switchView(view) {
-        const grid = document.getElementById('view-grid');
-        const list = document.getElementById('view-list');
-        const btnGrid = document.getElementById('btn-view-grid');
-        const btnList = document.getElementById('btn-view-list');
+        const gridView = document.getElementById('grid-view');
+        const listView = document.getElementById('list-view');
+        const btnGrid = document.getElementById('btn-grid');
+        const btnList = document.getElementById('btn-list');
 
         if (view === 'list') {
-            grid.classList.add('view-hidden');
-            list.classList.remove('view-hidden');
+            gridView.classList.add('hidden');
+            listView.classList.add('active');
             btnList.classList.add('active');
             btnGrid.classList.remove('active');
-            localStorage.setItem('driveViewMode', 'list');
         } else {
-            list.classList.add('view-hidden');
-            grid.classList.remove('view-hidden');
+            gridView.classList.remove('hidden');
+            listView.classList.remove('active');
             btnGrid.classList.add('active');
             btnList.classList.remove('active');
-            localStorage.setItem('driveViewMode', 'grid');
         }
+
+        localStorage.setItem('driveViewMode', view);
     }
 
-    // Checkbox Logic
+    // Selection logic
     const selectAll = document.getElementById('select-all');
-    const checkboxes = document.querySelectorAll('.item-check');
     const bulkActions = document.getElementById('bulk-actions');
     const selectedCount = document.getElementById('selected-count');
 
-    function updateSelection() {
-        const checked = document.querySelectorAll('.item-check:checked');
-        const count = checked.length;
-        selectedCount.textContent = count;
-        bulkActions.style.visibility = count > 0 ? 'visible' : 'hidden';
-        
-        // Sync select all checkbox state
-        if (count === 0) selectAll.checked = false;
-        else if (count === checkboxes.length) selectAll.checked = true;
-        else selectAll.indeterminate = true;
-    }
-
-    selectAll.addEventListener('change', (e) => {
-        const isChecked = e.target.checked;
-        checkboxes.forEach(cb => {
-            // Only toggle visible items if we had filtering, but here we toggle all
-            cb.checked = isChecked;
-        });
-        updateSelection();
-    });
-
-    checkboxes.forEach(cb => {
-        cb.addEventListener('change', updateSelection);
-        cb.addEventListener('click', (e) => e.stopPropagation()); // Prevent card click
-    });
-
-    // Init
+    // Initialize
     document.addEventListener('DOMContentLoaded', () => {
         const savedView = localStorage.getItem('driveViewMode') || 'grid';
         switchView(savedView);
     });
+
+    // Copy file link
+    function copyFileLink(path, btn) {
+        const fullUrl = window.location.origin + path;
+        navigator.clipboard.writeText(fullUrl).then(() => {
+            // Show success state
+            btn.classList.add('copied');
+            btn.innerHTML = '<i class="bi bi-check"></i>';
+
+            // Show toast
+            const toast = document.getElementById('copyToast');
+            new bootstrap.Toast(toast).show();
+
+            // Reset button after delay
+            setTimeout(() => {
+                btn.classList.remove('copied');
+                btn.innerHTML = '<i class="bi bi-link-45deg"></i>';
+            }, 2000);
+        });
+    }
 </script>
-{% endblock %}
+{% endblock %}

templates/drive_manager.html

@@ -4,148 +4,368 @@
 
 {% block styles %}
 <style>
+    /* Modern Drive Manager Styles */
+    .drive-header {
+        background: linear-gradient(135deg, rgba(13,110,253,0.1) 0%, rgba(111,66,193,0.1) 100%);
+        border-radius: 16px;
+        padding: 24px 32px;
+        margin-bottom: 24px;
+        border: 1px solid var(--border-subtle);
+    }
+
     .source-card {
-        cursor: pointer;
-        transition: all 0.3s ease;
+        background: var(--bg-card);
+        border: 1px solid var(--border-subtle);
+        border-radius: 12px;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        overflow: hidden;
     }
+
     .source-card:hover {
-        transform: translateY(-5px);
-        border-color: #0d6efd !important;
-        box-shadow: 0 8px 16px rgba(13, 110, 253, 0.3);
+        transform: translateY(-4px);
+        border-color: var(--accent-primary);
+        box-shadow: 0 12px 24px rgba(13, 110, 253, 0.2);
+    }
+
+    .source-card .card-body {
+        padding: 20px;
+    }
+
+    .source-icon {
+        width: 48px;
+        height: 48px;
+        border-radius: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.5rem;
+        margin-bottom: 12px;
+    }
+
+    .source-icon.folder {
+        background: linear-gradient(135deg, rgba(255,193,7,0.2) 0%, rgba(255,152,0,0.2) 100%);
+        color: #ffc107;
+    }
+
+    .source-icon.file {
+        background: linear-gradient(135deg, rgba(220,53,69,0.2) 0%, rgba(255,87,34,0.2) 100%);
+        color: #dc3545;
     }
+
+    .recent-pdf-card {
+        background: var(--bg-card);
+        border: 1px solid var(--border-subtle);
+        border-radius: 12px;
+        padding: 16px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+    }
+
     .recent-pdf-card:hover {
-        transform: translateY(-3px) scale(1.02);
-        box-shadow: 0 6px 20px rgba(13, 110, 253, 0.4);
+        transform: translateY(-3px);
+        border-color: var(--accent-primary);
+        box-shadow: 0 8px 20px rgba(13, 110, 253, 0.25);
+    }
+
+    .my-drive-card {
+        background: linear-gradient(135deg, rgba(255,193,7,0.1) 0%, rgba(255,152,0,0.05) 100%);
+        border: 1px solid rgba(255,193,7,0.3);
+        border-radius: 12px;
+        padding: 20px 24px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+    }
+
+    .my-drive-card:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 8px 20px rgba(255,193,7,0.2);
+    }
+
+    .action-btn {
+        width: 36px;
+        height: 36px;
+        border-radius: 8px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.2s ease;
+    }
+
+    .action-btn:hover {
+        transform: scale(1.1);
+    }
+
+    .share-link-input {
+        background: var(--bg-dark);
+        border: 1px solid var(--border-subtle);
+        border-radius: 8px;
+        padding: 8px 12px;
+        color: var(--text-secondary);
+        font-family: monospace;
+        font-size: 0.85rem;
+    }
+
+    .empty-state {
+        text-align: center;
+        padding: 60px 20px;
+        color: var(--text-muted);
+    }
+
+    .empty-state i {
+        font-size: 4rem;
+        opacity: 0.3;
+        margin-bottom: 16px;
+    }
+
+    /* Modal styles */
+    .modal-modern .modal-content {
+        background: var(--bg-card);
+        border: 1px solid var(--border-subtle);
+        border-radius: 16px;
+    }
+
+    .modal-modern .modal-header {
+        border-bottom: 1px solid var(--border-subtle);
+        padding: 20px 24px;
+    }
+
+    .modal-modern .modal-body {
+        padding: 24px;
+    }
+
+    .modal-modern .modal-footer {
+        border-top: 1px solid var(--border-subtle);
+        padding: 16px 24px;
+    }
+
+    .section-title {
+        font-size: 0.85rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        color: var(--text-muted);
+        margin-bottom: 16px;
+    }
+
+    .toast-container {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 1100;
     }
 </style>
 {% endblock %}
 
 {% block content %}
-<div class="container-fluid mt-4" style="width: 90%; margin: auto;">
-    <div class="d-flex justify-content-between align-items-center mb-4">
-        <h1>Drive Sync Manager</h1>
+<div class="container-fluid px-4 py-4">
+    <!-- Header -->
+    <div class="drive-header d-flex justify-content-between align-items-center flex-wrap gap-3">
         <div>
+            <h1 class="h3 mb-1"><i class="bi bi-cloud-fill me-2"></i>Drive Sync Manager</h1>
+            <p class="text-muted mb-0 small">Sync and manage Google Drive folders locally</p>
+        </div>
+        <div class="d-flex gap-2">
             {% if not drive_connected %}
-            <a href="/drive/connect" class="btn btn-outline-warning me-2">
-                <i class="bi bi-google me-1"></i> Connect Drive
+            <a href="/drive/connect" class="btn btn-outline-warning">
+                <i class="bi bi-google me-2"></i>Connect Drive
             </a>
+            {% else %}
+            <span class="badge bg-success d-flex align-items-center px-3 py-2">
+                <i class="bi bi-check-circle me-1"></i>Drive Connected
+            </span>
             {% endif %}
             <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addSourceModal">
-                <i class="bi bi-plus-lg me-1"></i> Add Drive Source
+                <i class="bi bi-plus-lg me-2"></i>Add Source
             </button>
         </div>
     </div>
 
+    <!-- Recently Opened PDFs -->
     {% if recent_pdfs %}
-    <div class="card border-secondary mb-4" style="background: linear-gradient(135deg, #1a1d20 0%, #212529 100%);">
-        <div class="card-header border-secondary" style="background: linear-gradient(90deg, rgba(13,110,253,0.15) 0%, rgba(13,110,253,0.05) 100%);">
-            <h5 class="mb-0 text-primary"><i class="bi bi-clock-history me-2"></i>Recently Opened PDFs</h5>
-        </div>
-        <div class="card-body">
-            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-3">
-                {% for pdf in recent_pdfs %}
-                <div class="col">
-                    <div class="card h-100 border-primary source-card" onclick="location.href='/drive/api/open/{{ pdf.file_id }}'" style="background: linear-gradient(135deg, #212529 0%, #2b3035 100%); transition: all 0.3s ease;">
-                        <div class="card-body d-flex flex-column">
-                            <div class="mb-2 flex-grow-1">
-                                <h6 class="card-title text-primary mb-2" style="word-wrap: break-word; line-height: 1.4;">
-                                    <i class="bi bi-file-pdf-fill me-2"></i>{{ pdf.filename }}
-                                </h6>
-                            </div>
-                            <div class="mt-auto pt-2 border-top border-secondary">
-                                <small class="text-muted">
-                                    <i class="bi bi-clock me-1"></i>{{ pdf.opened_at }}
-                                </small>
-                            </div>
+    <div class="mb-4">
+        <div class="section-title"><i class="bi bi-clock-history me-2"></i>Recently Opened</div>
+        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-3">
+            {% for pdf in recent_pdfs %}
+            <div class="col">
+                <div class="recent-pdf-card" onclick="location.href='/drive/api/open/{{ pdf.file_id }}'">
+                    <div class="d-flex align-items-start gap-3">
+                        <div class="source-icon file flex-shrink-0" style="width:40px;height:40px;font-size:1.2rem;">
+                            <i class="bi bi-file-pdf-fill"></i>
+                        </div>
+                        <div class="flex-grow-1 min-w-0">
+                            <h6 class="mb-1 text-truncate" title="{{ pdf.filename }}">{{ pdf.filename }}</h6>
+                            <small class="text-muted"><i class="bi bi-clock me-1"></i>{{ pdf.opened_at }}</small>
                         </div>
                     </div>
                 </div>
-                {% endfor %}
             </div>
+            {% endfor %}
         </div>
     </div>
     {% endif %}
 
+    <!-- My Drive Quick Access -->
     {% if drive_connected %}
-    <div class="card bg-dark text-white border-warning mb-4 source-card" onclick="location.href='/drive/api/browse/root'">
-        <div class="card-body d-flex justify-content-between align-items-center">
-            <div>
-                <h5 class="card-title text-warning mb-0"><i class="bi bi-google me-2"></i>My Drive</h5>
-                <small class="text-muted">Browse your personal Google Drive (API)</small>
+    <div class="mb-4">
+        <div class="my-drive-card d-flex justify-content-between align-items-center" onclick="location.href='/drive/api/browse/root'">
+            <div class="d-flex align-items-center gap-3">
+                <div class="source-icon folder">
+                    <i class="bi bi-google"></i>
+                </div>
+                <div>
+                    <h5 class="mb-0 text-warning">My Drive</h5>
+                    <small class="text-muted">Browse your personal Google Drive</small>
+                </div>
             </div>
-            <i class="bi bi-chevron-right text-muted"></i>
+            <i class="bi bi-chevron-right text-muted fs-4"></i>
         </div>
     </div>
     {% endif %}
 
+    <!-- Drive Sources -->
+    <div class="section-title"><i class="bi bi-hdd-network me-2"></i>Synced Sources</div>
     <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4" id="sources-grid">
         {% for source in sources %}
         <div class="col">
-            <div class="card h-100 bg-dark text-white border-secondary source-card">
-                <div class="card-body" onclick="location.href='/drive/browse/{{ source.id }}'">
-                    <div class="d-flex justify-content-between align-items-start mb-2">
-                        <h5 class="card-title text-primary">
-                            {% if source.source_type == 'file' %}
-                                <i class="bi bi-file-earmark-arrow-down me-2"></i>
-                            {% else %}
-                                <i class="bi bi-hdd-network me-2"></i>
-                            {% endif %}
-                            {{ source.name }}
-                        </h5>
-                        <div class="dropdown" onclick="event.stopPropagation()">
+            <div class="source-card h-100">
+                <div class="card-body">
+                    <div class="d-flex justify-content-between align-items-start mb-3">
+                        <div class="source-icon {{ 'file' if source.source_type == 'file' else 'folder' }}">
+                            <i class="bi {{ 'bi-file-earmark-arrow-down' if source.source_type == 'file' else 'bi-folder-fill' }}"></i>
+                        </div>
+                        <div class="dropdown">
                             <button class="btn btn-link text-muted p-0" data-bs-toggle="dropdown">
-                                <i class="bi bi-three-dots-vertical"></i>
+                                <i class="bi bi-three-dots-vertical fs-5"></i>
                             </button>
-                            <ul class="dropdown-menu dropdown-menu-dark">
+                            <ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end">
                                 <li><button class="dropdown-item sync-btn" data-id="{{ source.id }}"><i class="bi bi-arrow-repeat me-2"></i>Sync Now</button></li>
+                                <li><button class="dropdown-item" onclick="showShareModal({{ source.id }}, '{{ source.name }}')"><i class="bi bi-share me-2"></i>Get Share Links</button></li>
                                 <li><hr class="dropdown-divider"></li>
                                 <li><button class="dropdown-item text-danger delete-btn" data-id="{{ source.id }}"><i class="bi bi-trash me-2"></i>Delete</button></li>
                             </ul>
                         </div>
                     </div>
-                    <p class="card-text text-muted small text-truncate">{{ source.url }}</p>
-                    <div class="mt-3">
-                        <small class="text-secondary">
-                            Last Synced: {{ source.last_synced or 'Never' }}
-                        </small>
+                    <div onclick="location.href='/drive/browse/{{ source.id }}'" style="cursor: pointer;">
+                        <h5 class="mb-2">{{ source.name }}</h5>
+                        <p class="text-muted small text-truncate mb-3" title="{{ source.url }}">{{ source.url }}</p>
+                        <div class="d-flex justify-content-between align-items-center">
+                            <small class="text-secondary">
+                                <i class="bi bi-clock me-1"></i>{{ source.last_synced or 'Never synced' }}
+                            </small>
+                            <span class="badge bg-{{ 'success' if source.last_synced else 'secondary' }}">
+                                {{ 'Synced' if source.last_synced else 'Pending' }}
+                            </span>
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
         {% else %}
-        <div class="col-12 text-center text-muted py-5">
-            <i class="bi bi-cloud-slash display-4 mb-3 d-block"></i>
-            <p>No drive sources added yet.</p>
+        <div class="col-12">
+            <div class="empty-state">
+                <i class="bi bi-cloud-slash d-block"></i>
+                <h5>No drive sources added yet</h5>
+                <p class="text-muted">Add a public Google Drive folder to get started</p>
+                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addSourceModal">
+                    <i class="bi bi-plus-lg me-2"></i>Add Source
+                </button>
+            </div>
         </div>
         {% endfor %}
     </div>
 </div>
 
-<!-- Add Modal -->
-<div class="modal fade" id="addSourceModal" tabindex="-1">
+<!-- Add Source Modal -->
+<div class="modal fade modal-modern" id="addSourceModal" tabindex="-1">
     <div class="modal-dialog">
-        <div class="modal-content bg-dark text-white">
+        <div class="modal-content text-white">
             <div class="modal-header">
-                <h5 class="modal-title">Add Public Drive Folder</h5>
+                <h5 class="modal-title"><i class="bi bi-plus-circle me-2"></i>Add Drive Source</h5>
                 <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
             </div>
             <div class="modal-body">
                 <form id="add-source-form">
                     <div class="mb-3">
-                        <label class="form-label">Name (Local Folder Name)</label>
+                        <label class="form-label">Source Name</label>
                         <input type="text" class="form-control" name="name" required placeholder="e.g. Question Papers 2024">
+                        <div class="form-text">This will be the local folder name</div>
                     </div>
                     <div class="mb-3">
-                        <label class="form-label">Drive Folder URL</label>
+                        <label class="form-label">Google Drive URL</label>
                         <input type="url" class="form-control" name="url" required placeholder="https://drive.google.com/drive/folders/...">
-                        <div class="form-text text-muted">Must be a publicly accessible Google Drive folder link.</div>
+                        <div class="form-text">Must be a publicly accessible folder or file link</div>
                     </div>
                 </form>
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-                <button type="button" class="btn btn-primary" id="save-source-btn">Add Source</button>
+                <button type="button" class="btn btn-primary" id="save-source-btn">
+                    <i class="bi bi-plus-lg me-1"></i>Add Source
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Share Links Modal -->
+<div class="modal fade modal-modern" id="shareModal" tabindex="-1">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content text-white">
+            <div class="modal-header">
+                <h5 class="modal-title"><i class="bi bi-share me-2"></i>Share Links</h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body">
+                <p class="text-muted mb-4">Generate public links for sharing files without authentication</p>
+
+                <!-- Direct PDF Link -->
+                <div class="mb-4">
+                    <label class="form-label fw-semibold"><i class="bi bi-file-pdf me-2"></i>Direct PDF Download Link</label>
+                    <p class="text-muted small mb-2">Anyone with this link can download PDFs directly</p>
+                    <div class="input-group">
+                        <input type="text" class="form-control share-link-input" id="share-pdf-link" readonly>
+                        <button class="btn btn-outline-primary" onclick="copyLink('share-pdf-link')">
+                            <i class="bi bi-clipboard"></i>
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Directory Listing Link -->
+                <div class="mb-4">
+                    <label class="form-label fw-semibold"><i class="bi bi-list-ul me-2"></i>Directory Listing (curl-friendly)</label>
+                    <p class="text-muted small mb-2">Returns a plain text list of all files - perfect for scripts</p>
+                    <div class="input-group">
+                        <input type="text" class="form-control share-link-input" id="share-list-link" readonly>
+                        <button class="btn btn-outline-primary" onclick="copyLink('share-list-link')">
+                            <i class="bi bi-clipboard"></i>
+                        </button>
+                    </div>
+                    <div class="mt-2">
+                        <code class="small text-info">curl <span id="curl-example"></span></code>
+                    </div>
+                </div>
+
+                <!-- Access Token Info -->
+                <div class="alert alert-warning border-0 small">
+                    <i class="bi bi-shield-exclamation me-2"></i>
+                    These links include an access token. Share carefully - anyone with the link can access the files.
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Toast Container -->
+<div class="toast-container">
+    <div class="toast align-items-center text-bg-success border-0" id="copyToast" role="alert">
+        <div class="d-flex">
+            <div class="toast-body">
+                <i class="bi bi-check-circle me-2"></i>Link copied to clipboard!
             </div>
+            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
         </div>
     </div>
 </div>
@@ -154,13 +374,14 @@
 
 {% block scripts %}
 <script>
+    // Add Source
     document.getElementById('save-source-btn').addEventListener('click', async () => {
         const form = document.getElementById('add-source-form');
         if (!form.checkValidity()) {
             form.reportValidity();
             return;
         }
-        
+
         const formData = new FormData(form);
         try {
             const res = await fetch('/drive/add', {
@@ -178,27 +399,38 @@
         }
     });
 
+    // Sync
     document.querySelectorAll('.sync-btn').forEach(btn => {
-        btn.addEventListener('click', async () => {
+        btn.addEventListener('click', async (e) => {
+            e.stopPropagation();
             const id = btn.dataset.id;
-            if(!confirm('Start sync in background? Large folders may take time.')) return;
-            
+            btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Starting...';
+            btn.disabled = true;
+
             try {
                 const res = await fetch(`/drive/sync/${id}`, { method: 'POST' });
                 const data = await res.json();
-                if (data.success) alert('Sync started!');
-                else alert('Error: ' + data.error);
+                if (data.success) {
+                    showToast('Sync started in background');
+                } else {
+                    alert('Error: ' + data.error);
+                }
             } catch (e) {
                 alert('Request failed');
+            } finally {
+                btn.innerHTML = '<i class="bi bi-arrow-repeat me-2"></i>Sync Now';
+                btn.disabled = false;
             }
         });
     });
 
+    // Delete
     document.querySelectorAll('.delete-btn').forEach(btn => {
-        btn.addEventListener('click', async () => {
+        btn.addEventListener('click', async (e) => {
+            e.stopPropagation();
             const id = btn.dataset.id;
-            if(!confirm('Delete this source and all downloaded files locally?')) return;
-            
+            if (!confirm('Delete this source and all downloaded files?')) return;
+
             try {
                 const res = await fetch(`/drive/delete/${id}`, { method: 'POST' });
                 const data = await res.json();
@@ -209,5 +441,46 @@
             }
         });
     });
+
+    // Share Modal
+    async function showShareModal(sourceId, sourceName) {
+        try {
+            // Get the public access token
+            const res = await fetch(`/drive/public/${sourceId}/token`);
+            const data = await res.json();
+            if (!data.token) {
+                alert('Error getting share token');
+                return;
+            }
+
+            const baseUrl = window.location.origin;
+            const token = data.token;
+            const pdfLink = `${baseUrl}/drive/public/${sourceId}/download?token=${token}`;
+            const listLink = `${baseUrl}/drive/public/${sourceId}/list.txt?token=${token}`;
+
+            document.getElementById('share-pdf-link').value = pdfLink;
+            document.getElementById('share-list-link').value = listLink;
+            document.getElementById('curl-example').textContent = listLink;
+
+            new bootstrap.Modal(document.getElementById('shareModal')).show();
+        } catch (e) {
+            alert('Error: ' + e.message);
+        }
+    }
+
+    // Copy Link
+    function copyLink(inputId) {
+        const input = document.getElementById(inputId);
+        input.select();
+        navigator.clipboard.writeText(input.value);
+        showToast('Link copied to clipboard!');
+    }
+
+    // Toast
+    function showToast(message) {
+        const toast = document.getElementById('copyToast');
+        toast.querySelector('.toast-body').innerHTML = `<i class="bi bi-check-circle me-2"></i>${message}`;
+        new bootstrap.Toast(toast).show();
+    }
 </script>
 {% endblock %}