Merge pull request #6 from soulsites/claude/fix-project-checkbox-display-011CUU5EGJ8ssNVLB79cbyB9

Komplett überarbeitete Settings-Seite mit verbesserter UX

advanced-github-plugin-installer.php

@@ -73,199 +73,247 @@ function github_plugin_installer_page() {
         $is_private = isset($_POST['is_private']) ? true : false;
         $access_token = $is_private ? sanitize_text_field($_POST['access_token']) : '';
         $selected_version = sanitize_text_field($_POST['version']);
+        $save_as_project = isset($_POST['save_as_project']) ? true : false;
+        $project_name = sanitize_text_field($_POST['project_name']);
 
+        // Install/Update the plugin
         install_update_github_plugin($repo_url, $access_token, $selected_version);
+
+        // Save as project if checkbox was checked
+        if ($save_as_project && !empty($project_name)) {
+            $project_data = array(
+                'name' => $project_name,
+                'repo_url' => $repo_url,
+                'is_private' => $is_private,
+                'access_token' => $access_token,
+                'version' => $selected_version
+            );
+            save_project($project_data);
+            echo '<div class="updated"><p>Projekt erfolgreich gespeichert!</p></div>';
+        }
     }
 
     $saved_projects = get_saved_projects();
 
     ?>
     <style>
-        .github-projects-grid {
+        .github-installer-container {
-            display: grid;
+            max-width: 1200px;
-            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-            gap: 20px;
-            margin: 20px 0;
         }
-        .github-project-card {
+        .github-card {
             background: #fff;
             border: 1px solid #c3c4c7;
             border-radius: 4px;
             padding: 20px;
-            box-shadow: 0 1px 1px rgba(0,0,0,.04);
+            margin-bottom: 20px;
-            transition: box-shadow 0.2s ease;
+            box-shadow: 0 1px 1px rgba(0,0,0,0.04);
         }
-        .github-project-card:hover {
+        .github-card h2 {
-            box-shadow: 0 2px 6px rgba(0,0,0,.1);
-        }
-        .github-project-card h3 {
             margin-top: 0;
-            margin-bottom: 10px;
+            padding-bottom: 10px;
-            font-size: 16px;
+            border-bottom: 1px solid #e0e0e0;
-            color: #1d2327;
         }
-        .github-project-info {
+        .form-section {
-            font-size: 13px;
-            color: #50575e;
             margin-bottom: 15px;
         }
-        .github-project-info p {
+        .form-section label {
-            margin: 5px 0;
+            display: inline-block;
-            word-break: break-all;
+            font-weight: 600;
+            margin-bottom: 5px;
         }
-        .github-project-actions {
+        .form-section input[type="text"],
+        .form-section input[type="password"],
+        .form-section select {
+            width: 100%;
+            max-width: 500px;
+        }
+        .form-section .description {
+            color: #646970;
+            font-size: 13px;
+            margin-top: 5px;
+        }
+        .checkbox-label {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-weight: normal;
+        }
+        .checkbox-label input[type="checkbox"] {
+            margin: 0;
+        }
+        .button-group {
+            margin-top: 20px;
             display: flex;
             gap: 10px;
-            flex-wrap: wrap;
+            align-items: center;
-        }
-        .github-sync-btn {
-            background: #2271b1;
-            border-color: #2271b1;
-            color: #fff;
-            padding: 6px 12px;
-            border-radius: 3px;
-            cursor: pointer;
-            border: 1px solid;
-            font-size: 13px;
-            transition: background 0.2s ease;
-        }
-        .github-sync-btn:hover {
-            background: #135e96;
-            border-color: #135e96;
         }
         .github-sync-btn:disabled {
-            background: #c3c4c7;
+            opacity: 0.5;
-            border-color: #c3c4c7;
             cursor: not-allowed;
         }
         .github-delete-btn {
-            background: #fff;
-            border-color: #c3c4c7;
             color: #b32d2e;
-            padding: 6px 12px;
-            border-radius: 3px;
-            cursor: pointer;
-            border: 1px solid;
-            font-size: 13px;
-            transition: all 0.2s ease;
         }
         .github-delete-btn:hover {
             background: #b32d2e;
             border-color: #b32d2e;
             color: #fff;
         }
+        .projects-table {
+            margin-top: 15px;
+        }
+        .projects-table td {
+            vertical-align: middle;
+        }
+        .project-actions {
+            white-space: nowrap;
+        }
         .github-sync-status {
             font-size: 12px;
-            margin-top: 10px;
             padding: 8px;
             border-radius: 3px;
+            margin-top: 8px;
             display: none;
         }
         .github-sync-status.success {
             background: #d7f0db;
             color: #00631e;
             border: 1px solid #00631e;
+            display: block;
         }
         .github-sync-status.error {
             background: #fcf0f1;
             color: #b32d2e;
             border: 1px solid #b32d2e;
+            display: block;
         }
         .github-sync-status.loading {
             background: #f0f6fc;
             color: #1d2327;
             border: 1px solid #2271b1;
+            display: block;
         }
-        .github-add-project-section {
+        .info-box {
-            background: #fff;
+            background: #f0f6fc;
-            border: 1px solid #c3c4c7;
+            border-left: 4px solid #2271b1;
-            border-radius: 4px;
+            padding: 12px;
-            padding: 20px;
+            margin-top: 15px;
-            margin-bottom: 30px;
         }
-        .github-save-project-btn {
+        .loading-indicator {
-            background: #00a32a;
+            display: none;
-            border-color: #00a32a;
+            color: #646970;
-            color: #fff;
+            font-style: italic;
-            margin-left: 10px;
-        }
-        .github-save-project-btn:hover {
-            background: #008a20;
-            border-color: #008a20;
         }
     </style>
-    <div class="wrap">
+    <div class="wrap github-installer-container">
         <h1><?php echo esc_html(get_admin_page_title()); ?></h1>
 
-        <div class="github-add-project-section">
+        <!-- Installation/Update Form -->
-            <h2>Neues Projekt hinzufügen</h2>
+        <div class="github-card">
+            <h2>Plugin installieren oder aktualisieren</h2>
             <form method="post" action="" id="github-project-form">
-                <table class="form-table">
+                <div class="form-section">
-                    <tr>
+                    <label for="repo_url">GitHub Repository URL *</label>
-                        <th scope="row"><label for="project_name">Projektname</label></th>
+                    <input type="text" id="repo_url" name="repo_url" class="regular-text" required placeholder="https://github.com/username/repository.git">
-                        <td><input type="text" id="project_name" name="project_name" class="regular-text" placeholder="Mein GitHub Plugin"></td>
+                    <p class="description">Die vollständige URL zu Ihrem GitHub Repository</p>
-                    </tr>
-                    <tr>
-                        <th scope="row"><label for="repo_url">GitHub Repository URL</label></th>
-                        <td><input type="text" id="repo_url" name="repo_url" class="regular-text" required placeholder="https://github.com/username/repo.git"></td>
-                    </tr>
-                    <tr>
-                        <th scope="row"><label for="is_private">Privates Repository?</label></th>
-                        <td><input type="checkbox" id="is_private" name="is_private"></td>
-                    </tr>
-                    <tr id="access_token_row" style="display: none;">
-                        <th scope="row"><label for="access_token">GitHub Access Token</label></th>
-                        <td>
-                            <input type="password" id="access_token" name="access_token" class="regular-text">
-                            <p class="description">
-                                To generate a Personal Access Token, go to
-                                <a href="https://github.com/settings/tokens" target="_blank">GitHub Settings > Developer settings > Personal access tokens</a>.
-                                Create a new token with the 'repo' scope for private repositories.
-                            </p>
-                        </td>
-                    </tr>
-                    <tr id="version_row" style="display: none;">
-                        <th scope="row"><label for="version">Version</label></th>
-                        <td><select id="version" name="version"></select></td>
-                    </tr>
-                </table>
-                <div id="plugin_status"></div>
-                <?php submit_button('Installieren/Aktualisieren', 'primary', 'install_update_plugin', false); ?>
-                <button type="button" id="save_project_btn" class="button github-save-project-btn" style="display:none;">Als Projekt speichern</button>
-            </form>
-            <div id="repo_preview" style="margin-top: 20px; padding: 10px; border: 1px solid #ccc; display: none;">
-                <h3>Repository Preview</h3>
-                <div id="repo_content"></div>
-            </div>
                 </div>
 
+                <div class="form-section">
+                    <label class="checkbox-label">
+                        <input type="checkbox" id="is_private" name="is_private">
+                        <span>Privates Repository (benötigt Access Token)</span>
+                    </label>
+                </div>
+
+                <div class="form-section" id="access_token_section" style="display: none;">
+                    <label for="access_token">GitHub Access Token</label>
+                    <input type="password" id="access_token" name="access_token" class="regular-text">
+                    <p class="description">
+                        Token erstellen unter: <a href="https://github.com/settings/tokens" target="_blank">GitHub Settings → Personal access tokens</a>
+                    </p>
+                </div>
+
+                <div class="form-section" id="version_section" style="display: none;">
+                    <label for="version">Version / Tag auswählen</label>
+                    <select id="version" name="version" class="regular-text">
+                        <option value="">-- Bitte warten, lade Versionen... --</option>
+                    </select>
+                    <span class="loading-indicator" id="version-loading">Lade verfügbare Versionen...</span>
+                </div>
+
+                <div class="form-section">
+                    <label class="checkbox-label">
+                        <input type="checkbox" id="save_as_project" name="save_as_project">
+                        <span>Als Projekt speichern (für spätere Updates)</span>
+                    </label>
+                    <p class="description">Wenn aktiviert, können Sie dieses Plugin später einfach über die Projektliste aktualisieren</p>
+                </div>
+
+                <div class="form-section" id="project_name_section" style="display: none;">
+                    <label for="project_name">Projektname</label>
+                    <input type="text" id="project_name" name="project_name" class="regular-text" placeholder="z.B. Mein WordPress Plugin">
+                    <p class="description">Ein einprägsamer Name für dieses Projekt</p>
+                </div>
+
+                <div class="button-group">
+                    <?php submit_button('Installieren / Aktualisieren', 'primary large', 'install_update_plugin', false); ?>
+                </div>
+
+                <div id="plugin_status"></div>
+            </form>
+        </div>
+
+        <!-- Saved Projects -->
         <?php if (!empty($saved_projects)): ?>
+        <div class="github-card">
             <h2>Gespeicherte Projekte</h2>
-            <div class="github-projects-grid">
+            <p class="description">Diese Projekte können mit einem Klick aktualisiert werden</p>
+
+            <table class="wp-list-table widefat fixed striped projects-table">
+                <thead>
+                    <tr>
+                        <th style="width: 20%;">Projektname</th>
+                        <th style="width: 30%;">Repository</th>
+                        <th style="width: 12%;">Version</th>
+                        <th style="width: 10%;">Typ</th>
+                        <th style="width: 15%;">Letzte Aktualisierung</th>
+                        <th style="width: 13%;">Aktionen</th>
+                    </tr>
+                </thead>
+                <tbody>
                     <?php foreach ($saved_projects as $project): ?>
-                    <div class="github-project-card" data-project-id="<?php echo esc_attr($project['id']); ?>">
+                        <tr data-project-id="<?php echo esc_attr($project['id']); ?>">
-                        <h3><?php echo esc_html($project['name']); ?></h3>
+                            <td><strong><?php echo esc_html($project['name']); ?></strong></td>
-                        <div class="github-project-info">
+                            <td><code><?php echo esc_html($project['repo_url']); ?></code></td>
-                            <p><strong>Repository:</strong> <?php echo esc_html($project['repo_url']); ?></p>
+                            <td><?php echo esc_html($project['version']); ?></td>
-                            <p><strong>Version:</strong> <?php echo esc_html($project['version']); ?></p>
+                            <td>
-                            <p><strong>Status:</strong> <?php echo $project['is_private'] ? 'Privat' : 'Öffentlich'; ?></p>
+                                <span class="<?php echo $project['is_private'] ? 'dashicons dashicons-lock' : 'dashicons dashicons-unlock'; ?>" title="<?php echo $project['is_private'] ? 'Privat' : 'Öffentlich'; ?>"></span>
-                            <p><strong>Zuletzt synchronisiert:</strong> <?php echo esc_html($project['last_synced']); ?></p>
+                                <?php echo $project['is_private'] ? 'Privat' : 'Öffentlich'; ?>
-                        </div>
+                            </td>
-                        <div class="github-project-actions">
+                            <td><?php echo esc_html(date('d.m.Y H:i', strtotime($project['last_synced']))); ?></td>
-                            <button class="github-sync-btn" data-project-id="<?php echo esc_attr($project['id']); ?>">
+                            <td class="project-actions">
-                                Synchronisieren
+                                <button class="button button-small button-primary github-sync-btn" data-project-id="<?php echo esc_attr($project['id']); ?>" title="Projekt aktualisieren">
+                                    <span class="dashicons dashicons-update"></span> Update
                                 </button>
-                            <button class="github-delete-btn" data-project-id="<?php echo esc_attr($project['id']); ?>">
+                                <button class="button button-small github-delete-btn" data-project-id="<?php echo esc_attr($project['id']); ?>" title="Projekt löschen">
-                                Löschen
+                                    <span class="dashicons dashicons-trash"></span>
                                 </button>
-                        </div>
+                            </td>
+                        </tr>
+                        <tr class="github-sync-status-row" data-project-id="<?php echo esc_attr($project['id']); ?>" style="display: none;">
+                            <td colspan="6">
                                 <div class="github-sync-status" data-project-id="<?php echo esc_attr($project['id']); ?>"></div>
-                    </div>
+                            </td>
+                        </tr>
                     <?php endforeach; ?>
+                </tbody>
+            </table>
         </div>
         <?php else: ?>
-            <div class="notice notice-info">
+        <div class="github-card">
-                <p>Keine gespeicherten Projekte vorhanden. Fügen Sie oben ein neues Projekt hinzu.</p>
+            <div class="info-box">
+                <p><strong>💡 Tipp:</strong> Aktivieren Sie "Als Projekt speichern" beim Installieren eines Plugins, um es hier zur einfachen Verwaltung zu speichern.</p>
+            </div>
         </div>
         <?php endif; ?>
     </div>

installer-script.js

@@ -1,78 +1,60 @@
-jQuery(document).ready(function() {
+jQuery(document).ready(function($) {
-    var previewTimer;
     var versionTimer;
 
-    jQuery('#is_private').change(function() {
+    // Show/hide access token field based on private checkbox
+    $('#is_private').change(function() {
         if(this.checked) {
-            jQuery('#access_token_row').show();
+            $('#access_token_section').slideDown();
         } else {
-            jQuery('#access_token_row').hide();
+            $('#access_token_section').slideUp();
+            $('#access_token').val('');
         }
-        updatePreviewAndVersions();
+        // Reload versions when private status changes
+        loadVersions();
     });
 
-    jQuery('#repo_url, #access_token').on('input', function() {
+    // Show/hide project name field based on save as project checkbox
-        clearTimeout(previewTimer);
+    $('#save_as_project').change(function() {
+        if(this.checked) {
+            $('#project_name_section').slideDown();
+            // Pre-fill project name from repo URL if empty
+            if(!$('#project_name').val()) {
+                var repoUrl = $('#repo_url').val();
+                if(repoUrl) {
+                    var repoName = repoUrl.split('/').pop().replace('.git', '');
+                    $('#project_name').val(repoName.charAt(0).toUpperCase() + repoName.slice(1));
+                }
+            }
+        } else {
+            $('#project_name_section').slideUp();
+        }
+    });
+
+    // Load versions when repo URL or access token changes
+    $('#repo_url, #access_token').on('input', function() {
         clearTimeout(versionTimer);
-        previewTimer = setTimeout(updatePreviewAndVersions, 500);
+        versionTimer = setTimeout(loadVersions, 800);
     });
 
-    // Show "Save as Project" button when version is selected
+    // Load versions function
-    jQuery('#version').on('change', function() {
+    function loadVersions() {
-        if(jQuery(this).val()) {
+        var repoUrl = $('#repo_url').val();
-            jQuery('#save_project_btn').show();
+        var isPrivate = $('#is_private').is(':checked');
-        } else {
+        var accessToken = $('#access_token').val();
-            jQuery('#save_project_btn').hide();
-        }
-    });
 
-    function updatePreviewAndVersions() {
+        // Clear previous state
-        previewRepo();
+        $('#version_section').hide();
-        getVersions();
+        $('#version').html('<option value="">-- Bitte warten, lade Versionen... --</option>');
+
+        if (!repoUrl || repoUrl.length < 10) {
+            return;
         }
 
-    function previewRepo() {
+        // Show loading
-        var repoUrl = jQuery('#repo_url').val();
+        $('#version_section').slideDown();
-        var isPrivate = jQuery('#is_private').is(':checked');
+        $('#version-loading').show();
-        var accessToken = jQuery('#access_token').val();
 
-        if (repoUrl) {
+        $.ajax({
-            jQuery.ajax({
-                url: github_installer.ajax_url,
-                type: 'POST',
-                data: {
-                    action: 'preview_github_repo',
-                    nonce: github_installer.nonce,
-                    repo_url: repoUrl,
-                    is_private: isPrivate,
-                    access_token: accessToken
-                },
-                success: function(response) {
-                    if (response.success) {
-                        jQuery('#repo_content').html(response.data);
-                        jQuery('#repo_preview').show();
-                    } else {
-                        jQuery('#repo_content').html('<p style="color: red;">' + response.data + '</p>');
-                        jQuery('#repo_preview').show();
-                    }
-                },
-                error: function() {
-                    jQuery('#repo_content').html('<p style="color: red;">An error occurred while fetching the repository content.</p>');
-                    jQuery('#repo_preview').show();
-                }
-            });
-        } else {
-            jQuery('#repo_preview').hide();
-        }
-    }
-
-    function getVersions() {
-        var repoUrl = jQuery('#repo_url').val();
-        var isPrivate = jQuery('#is_private').is(':checked');
-        var accessToken = jQuery('#access_token').val();
-
-        if (repoUrl) {
-            jQuery.ajax({
             url: github_installer.ajax_url,
             type: 'POST',
             data: {
@@ -83,89 +65,73 @@ jQuery(document).ready(function() {
                 access_token: accessToken
             },
             success: function(response) {
-                    if (response.success) {
+                $('#version-loading').hide();
+
+                if (response.success && response.data.length > 0) {
                     var versions = response.data;
-                        var versionSelect = jQuery('#version');
+                    var versionSelect = $('#version');
                     versionSelect.empty();
-                        versionSelect.append(jQuery('<option></option>').attr('value', '').text('-- Wählen Sie eine Version --'));
+                    versionSelect.append($('<option></option>').attr('value', '').text('-- Wählen Sie eine Version --'));
-                        jQuery.each(versions, function(index, version) {
+                    $.each(versions, function(index, version) {
-                            versionSelect.append(jQuery('<option></option>').attr('value', version).text(version));
+                        versionSelect.append($('<option></option>').attr('value', version).text(version));
                     });
-                        jQuery('#version_row').show();
+                    $('#version_section').slideDown();
                 } else {
-                        jQuery('#version_row').hide();
+                    $('#version').html('<option value="">Keine Versionen/Tags gefunden</option>');
-                        jQuery('#save_project_btn').hide();
+                    console.error('Keine Versionen gefunden:', response.data);
-                        console.error('Failed to fetch versions:', response.data);
                 }
             },
-                error: function() {
+            error: function(xhr, status, error) {
-                    jQuery('#version_row').hide();
+                $('#version-loading').hide();
-                    jQuery('#save_project_btn').hide();
+                $('#version').html('<option value="">Fehler beim Laden der Versionen</option>');
-                    console.error('An error occurred while fetching the repository versions.');
+                console.error('Fehler beim Laden der Versionen:', error);
             }
         });
-        } else {
-            jQuery('#version_row').hide();
-            jQuery('#save_project_btn').hide();
-        }
     }
 
-    // Save project button handler
+    // Form validation before submit
-    jQuery('#save_project_btn').on('click', function(e) {
+    $('#github-project-form').on('submit', function(e) {
+        var saveAsProject = $('#save_as_project').is(':checked');
+        var projectName = $('#project_name').val();
+        var repoUrl = $('#repo_url').val();
+        var version = $('#version').val();
+
+        // Check if save as project is checked but no project name
+        if (saveAsProject && !projectName) {
             e.preventDefault();
-
+            alert('Bitte geben Sie einen Projektnamen ein oder deaktivieren Sie "Als Projekt speichern".');
-        var projectName = jQuery('#project_name').val();
+            $('#project_name').focus();
-        var repoUrl = jQuery('#repo_url').val();
+            return false;
-        var isPrivate = jQuery('#is_private').is(':checked');
-        var accessToken = jQuery('#access_token').val();
-        var version = jQuery('#version').val();
-
-        if (!projectName) {
-            alert('Bitte geben Sie einen Projektnamen ein.');
-            return;
         }
 
-        if (!repoUrl || !version) {
+        // Check if repo URL is provided
-            alert('Bitte füllen Sie alle erforderlichen Felder aus.');
+        if (!repoUrl) {
-            return;
+            e.preventDefault();
+            alert('Bitte geben Sie eine GitHub Repository URL ein.');
+            $('#repo_url').focus();
+            return false;
         }
 
-        jQuery.ajax({
+        // Warning if no version selected
-            url: github_installer.ajax_url,
+        if (!version) {
-            type: 'POST',
+            return confirm('Sie haben keine Version ausgewählt. Es wird die neueste Version vom Hauptbranch verwendet. Fortfahren?');
-            data: {
-                action: 'save_github_project',
-                nonce: github_installer.nonce,
-                name: projectName,
-                repo_url: repoUrl,
-                is_private: isPrivate,
-                access_token: accessToken,
-                version: version
-            },
-            success: function(response) {
-                if (response.success) {
-                    alert(response.data.message);
-                    location.reload();
-                } else {
-                    alert('Fehler: ' + response.data);
         }
-            },
+
-            error: function() {
+        return true;
-                alert('Ein Fehler ist beim Speichern des Projekts aufgetreten.');
-            }
-        });
     });
 
     // Sync project button handler
-    jQuery(document).on('click', '.github-sync-btn', function() {
+    $(document).on('click', '.github-sync-btn', function() {
-        var projectId = jQuery(this).data('project-id');
+        var projectId = $(this).data('project-id');
-        var button = jQuery(this);
+        var button = $(this);
-        var statusDiv = jQuery('.github-sync-status[data-project-id="' + projectId + '"]');
+        var statusRow = $('.github-sync-status-row[data-project-id="' + projectId + '"]');
+        var statusDiv = $('.github-sync-status[data-project-id="' + projectId + '"]');
 
-        button.prop('disabled', true);
+        button.prop('disabled', true).html('<span class="dashicons dashicons-update"></span> Lädt...');
+        statusRow.show();
         statusDiv.removeClass('success error').addClass('loading').text('Synchronisierung läuft...').show();
 
-        jQuery.ajax({
+        $.ajax({
             url: github_installer.ajax_url,
             type: 'POST',
             data: {
@@ -174,32 +140,35 @@ jQuery(document).ready(function() {
                 project_id: projectId
             },
             success: function(response) {
-                button.prop('disabled', false);
+                button.prop('disabled', false).html('<span class="dashicons dashicons-update"></span> Update');
                 if (response.success) {
-                    statusDiv.removeClass('loading error').addClass('success').text(response.data);
+                    statusDiv.removeClass('loading error').addClass('success').html('✓ ' + response.data);
                     setTimeout(function() {
                         location.reload();
                     }, 1500);
                 } else {
-                    statusDiv.removeClass('loading success').addClass('error').text('Fehler: ' + response.data);
+                    statusDiv.removeClass('loading success').addClass('error').html('✗ Fehler: ' + response.data);
                 }
             },
             error: function() {
-                button.prop('disabled', false);
+                button.prop('disabled', false).html('<span class="dashicons dashicons-update"></span> Update');
-                statusDiv.removeClass('loading success').addClass('error').text('Ein Fehler ist aufgetreten.');
+                statusDiv.removeClass('loading success').addClass('error').html('✗ Ein Fehler ist aufgetreten.');
             }
         });
     });
 
     // Delete project button handler
-    jQuery(document).on('click', '.github-delete-btn', function() {
+    $(document).on('click', '.github-delete-btn', function() {
-        var projectId = jQuery(this).data('project-id');
+        var projectId = $(this).data('project-id');
 
-        if (!confirm('Möchten Sie dieses Projekt wirklich löschen?')) {
+        if (!confirm('Möchten Sie dieses Projekt wirklich löschen?\n\nDas Plugin selbst wird nicht deinstalliert, nur die Projektverwaltung wird entfernt.')) {
             return;
         }
 
-        jQuery.ajax({
+        var button = $(this);
+        button.prop('disabled', true);
+
+        $.ajax({
             url: github_installer.ajax_url,
             type: 'POST',
             data: {
@@ -209,14 +178,18 @@ jQuery(document).ready(function() {
             },
             success: function(response) {
                 if (response.success) {
-                    alert(response.data);
+                    // Fade out the row and reload
+                    $('tr[data-project-id="' + projectId + '"]').fadeOut(300, function() {
                         location.reload();
+                    });
                 } else {
-                    alert('Fehler: ' + response.data);
+                    alert('Fehler beim Löschen: ' + response.data);
+                    button.prop('disabled', false);
                 }
             },
             error: function() {
                 alert('Ein Fehler ist beim Löschen des Projekts aufgetreten.');
+                button.prop('disabled', false);
             }
         });
     });