Implement collapsible card functionality for project addition and usage instructions

Author: sinanisler

assets/css/admin.css

@@ -47,6 +47,41 @@
     font-size: 16px;
 }
 
+/* Collapsible Card Styles */
+.gtws-collapsible-card .gtws-card-header {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 0;
+    padding: 10px 15px;
+    margin: -25px -25px 20px -25px;
+    background: #f6f7f7;
+    border-bottom: 1px solid #ccd0d4;
+    transition: background 0.2s;
+    user-select: none;
+}
+
+.gtws-collapsible-card .gtws-card-header:hover {
+    background: #e9ecef;
+}
+
+.gtws-toggle-icon {
+    transition: transform 0.3s ease;
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+    color: #2271b1;
+}
+
+.gtws-collapsible-card .gtws-card-header.active .gtws-toggle-icon {
+    transform: rotate(90deg);
+}
+
+.gtws-card-content {
+    padding-top: 10px;
+}
+
 /* Form Styles */
 .gtws-form {
     max-width: 800px;

assets/js/admin.js

@@ -6,7 +6,19 @@
     'use strict';
 
     $(document).ready(function() {
-        
+
+        // Collapsible Card Toggle
+        $('.gtws-card-header[data-toggle="collapse"]').on('click', function() {
+            const $header = $(this);
+            const $content = $header.next('.gtws-card-content');
+
+            // Toggle active class on header
+            $header.toggleClass('active');
+
+            // Slide toggle content
+            $content.slideToggle(300);
+        });
+
         // Add Project Form Submit
         $('#gtws-add-project-form').on('submit', function(e) {
             e.preventDefault();
@@ -36,7 +48,15 @@
                         $form[0].reset();
                         $('#branch').val('main');
                         $('#branch-list').empty();
-                        
+
+                        // Collapse the "Add New Project" section before reload
+                        const $addProjectCard = $form.closest('.gtws-collapsible-card');
+                        const $header = $addProjectCard.find('.gtws-card-header');
+                        const $content = $addProjectCard.find('.gtws-card-content');
+
+                        $header.removeClass('active');
+                        $content.slideUp(300);
+
                         // Reload page after short delay to show new project
                         setTimeout(function() {
                             location.reload();

github-to-wordpress-sync.php

@@ -780,9 +780,12 @@ public function render_admin_page() {
 
             <div class="gtws-container">
                 <!-- Add New Project Section -->
-                <div class="gtws-card">
-                    <h2><?php _e('Add New Project', 'snn'); ?></h2>
-                    
+                <div class="gtws-card gtws-collapsible-card">
+                    <h2 class="gtws-card-header" data-toggle="collapse">
+                        <span class="gtws-toggle-icon dashicons dashicons-arrow-right"></span>
+                        <?php _e('Add New Project', 'snn'); ?>
+                    </h2>
+                    <div class="gtws-card-content" style="display: none;">
                     <form id="gtws-add-project-form" class="gtws-form">
                         <div class="gtws-form-group">
                             <label for="github_url">
@@ -857,6 +860,7 @@ public function render_admin_page() {
                             <?php _e('Add Project', 'snn'); ?>
                         </button>
                     </form>
+                    </div>
                 </div>
 
                 <!-- Projects List -->
@@ -974,8 +978,12 @@ class="button button-link-delete gtws-delete-project"
                 </div>
 
                 <!-- Info Section -->
-                <div class="gtws-card gtws-info-card">
-                    <h3><?php _e('How to Use', 'snn'); ?></h3>
+                <div class="gtws-card gtws-info-card gtws-collapsible-card">
+                    <h3 class="gtws-card-header" data-toggle="collapse">
+                        <span class="gtws-toggle-icon dashicons dashicons-arrow-right"></span>
+                        <?php _e('How to Use', 'snn'); ?>
+                    </h3>
+                    <div class="gtws-card-content" style="display: none;">
                     <ol>
                         <li><?php _e('Add your GitHub repository URL (e.g., https://github.com/username/repo)', 'snn'); ?></li>
                         <li><?php _e('Select whether it\'s a theme or plugin', 'snn'); ?></li>
@@ -991,6 +999,7 @@ class="button button-link-delete gtws-delete-project"
                         <strong><?php _e('Important:', 'snn'); ?></strong>
                         <?php _e('Syncing will overwrite local changes. Make sure to commit your work to GitHub first!', 'snn'); ?>
                     </div>
+                    </div>
                 </div>
             </div>
         </div>