Skip to content

Commit eefee68

Browse files
vikrezdevvikrezdev
committed
Position CLI Quick Actions under Managed Services with interactive command dropdown and attached descriptions
1 parent 92c2ce1 commit eefee68

1 file changed

Lines changed: 101 additions & 35 deletions

File tree

‎internal/gui/dashboard/index.html‎

Lines changed: 101 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -171,30 +171,64 @@
171171
font-family: var(--font-mono);
172172
}
173173

174-
.snippet-box {
174+
.cmd-bar {
175+
display: flex;
176+
gap: 0.75rem;
177+
align-items: center;
178+
}
179+
180+
.cmd-dropdown {
181+
flex: 1;
175182
background: #090d16;
176183
border: 1px solid var(--border);
184+
color: var(--primary-neon);
185+
padding: 0.65rem 1rem;
177186
border-radius: 8px;
178-
padding: 0.75rem 1rem;
187+
font-family: var(--font-mono);
188+
font-size: 0.88rem;
189+
outline: none;
190+
cursor: pointer;
191+
transition: border-color 0.2s ease;
192+
}
193+
.cmd-dropdown:focus { border-color: var(--primary); }
194+
195+
.snippet-box {
196+
background: #05070a;
197+
border: 1px solid var(--border);
198+
border-radius: 8px;
199+
padding: 0.85rem 1.1rem;
179200
display: flex;
180201
justify-content: space-between;
181202
align-items: center;
182203
font-family: var(--font-mono);
183-
font-size: 0.88rem;
204+
font-size: 0.9rem;
205+
box-shadow: inset 0 2px 8px rgba(0,0,0,0.5);
184206
}
185207
.snippet-code { color: var(--primary-neon); }
186-
.copy-btn {
187-
background: var(--border);
188-
border: none;
208+
209+
.cmd-desc-box {
210+
background: rgba(56, 189, 248, 0.06);
211+
border: 1px solid rgba(56, 189, 248, 0.15);
212+
border-radius: 8px;
213+
padding: 0.65rem 1rem;
214+
font-size: 0.84rem;
189215
color: var(--text-sub);
190-
padding: 0.3rem 0.6rem;
191-
border-radius: 5px;
216+
}
217+
218+
.copy-btn {
219+
background: #1e293b;
220+
border: 1px solid #334155;
221+
color: var(--text);
222+
padding: 0.65rem 1rem;
223+
border-radius: 8px;
192224
cursor: pointer;
193-
font-size: 0.75rem;
225+
font-size: 0.82rem;
194226
font-family: var(--font-mono);
227+
font-weight: 600;
228+
white-space: nowrap;
195229
transition: all 0.2s ease;
196230
}
197-
.copy-btn:hover { color: var(--text); background: #334155; }
231+
.copy-btn:hover { color: var(--primary-neon); background: #334155; border-color: var(--primary); }
198232

199233
.tag-group { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem; }
200234
.tag {
@@ -358,7 +392,7 @@
358392
<header>
359393
<div class="brand">
360394
<span class="brand-logo">phpvm</span>
361-
<span class="brand-badge">DESKTOP GUI v1.1.9</span>
395+
<span class="brand-badge">DESKTOP GUI v1.2.1</span>
362396
</div>
363397
<nav class="nav-tabs">
364398
<button class="nav-btn active" onclick="switchTab('projects', event)">Projects</button>
@@ -387,28 +421,8 @@
387421

388422
<!-- Projects Tab -->
389423
<section id="tab-projects" class="tab-section active">
390-
<!-- Quick Snippet Box -->
391-
<div class="surface-box">
392-
<div class="section-header">
393-
<span class="section-title">CLI QUICK ACTIONS</span>
394-
<span style="font-family:var(--font-mono); font-size:0.75rem; color:var(--text-muted);">AUTO-ENVIRONMENT INJECTOR ACTIVE</span>
395-
</div>
396-
<div class="snippet-box">
397-
<span class="snippet-code">> phpvm run php artisan migrate</span>
398-
<button class="copy-btn" onclick="copySnippet('phpvm run php artisan migrate', this)">Copy Command</button>
399-
</div>
400-
<div class="tag-group">
401-
<span class="tag">[php: 8.3]</span>
402-
<span class="tag">[nginx: 1.30]</span>
403-
<span class="tag">[mysql: 8.4]</span>
404-
<span class="tag">[fastcgi: active]</span>
405-
<span class="tag">[runtime.yml]</span>
406-
<span class="tag">[+ doctor]</span>
407-
</div>
408-
</div>
409-
410-
<!-- Active Projects Grid -->
411-
<div class="section-header" style="margin-top:0.5rem;">
424+
<!-- Active Projects Grid (Managed Services Top) -->
425+
<div class="section-header">
412426
<span class="section-title">MANAGED SERVICES & RUNTIMES</span>
413427
</div>
414428

@@ -440,6 +454,46 @@
440454
</div>
441455
</div>
442456
</div>
457+
458+
<!-- Quick Actions Dropdown Card (Under Managed Services) -->
459+
<div class="surface-box" style="margin-top:0.5rem;">
460+
<div class="section-header">
461+
<span class="section-title">CLI QUICK ACTIONS</span>
462+
<span style="font-family:var(--font-mono); font-size:0.75rem; color:var(--text-muted);">AUTO-ENVIRONMENT INJECTOR ACTIVE</span>
463+
</div>
464+
465+
<div class="cmd-bar">
466+
<select id="cmd-dropdown" class="cmd-dropdown" onchange="updateSelectedCmd()">
467+
<option value="phpvm run php artisan migrate" data-desc="Execute pending database schema migrations using active PHP 8.3 runtime">phpvm run php artisan migrate</option>
468+
<option value="phpvm run php artisan migrate:fresh --seed" data-desc="Drop all database tables, re-run all migrations and populate initial seed data">phpvm run php artisan migrate:fresh --seed</option>
469+
<option value="phpvm run php artisan db:seed" data-desc="Run application database seeders to populate initial test or production data">phpvm run php artisan db:seed</option>
470+
<option value="phpvm run php artisan serve" data-desc="Launch Laravel built-in development HTTP server on active project port">phpvm run php artisan serve</option>
471+
<option value="phpvm shell" data-desc="Spawn an activated subshell with project PHP, Nginx, MySQL & Composer injected into PATH">phpvm shell</option>
472+
<option value="phpvm run composer install" data-desc="Install project PHP dependencies using isolated Composer package manager">phpvm run composer install</option>
473+
<option value="phpvm up --shell=false" data-desc="Start Nginx web server and MySQL database processes in background">phpvm up --shell=false</option>
474+
<option value="phpvm down" data-desc="Gracefully stop all running Nginx, PHP-CGI and MySQL project processes">phpvm down</option>
475+
<option value="phpvm doctor" data-desc="Run diagnostic environment health checks on permissions, paths and libraries">phpvm doctor</option>
476+
</select>
477+
<button class="copy-btn" onclick="copySelectedCmd(this)">Copy Command</button>
478+
</div>
479+
480+
<div class="snippet-box">
481+
<span class="snippet-code" id="snippet-display">> phpvm run php artisan migrate</span>
482+
</div>
483+
484+
<div class="cmd-desc-box" id="cmd-desc-display">
485+
⚡ <strong>Description:</strong> Execute pending database schema migrations using active PHP 8.3 runtime
486+
</div>
487+
488+
<div class="tag-group">
489+
<span class="tag">[php: 8.3]</span>
490+
<span class="tag">[nginx: 1.30]</span>
491+
<span class="tag">[mysql: 8.4]</span>
492+
<span class="tag">[fastcgi: active]</span>
493+
<span class="tag">[runtime.yml]</span>
494+
<span class="tag">[+ doctor]</span>
495+
</div>
496+
</div>
443497
</section>
444498

445499
<!-- Packs Tab -->
@@ -530,8 +584,20 @@
530584
if (tabId === 'doctor') fetchDoctor();
531585
}
532586

533-
function copySnippet(text, btn) {
534-
navigator.clipboard.writeText(text);
587+
function updateSelectedCmd() {
588+
const dropdown = document.getElementById('cmd-dropdown');
589+
const selectedOpt = dropdown.options[dropdown.selectedIndex];
590+
const cmd = selectedOpt.value;
591+
const desc = selectedOpt.getAttribute('data-desc');
592+
593+
document.getElementById('snippet-display').innerText = '> ' + cmd;
594+
document.getElementById('cmd-desc-display').innerHTML = '⚡ <strong>Description:</strong> ' + desc;
595+
}
596+
597+
function copySelectedCmd(btn) {
598+
const dropdown = document.getElementById('cmd-dropdown');
599+
const cmd = dropdown.value;
600+
navigator.clipboard.writeText(cmd);
535601
const orig = btn.innerText;
536602
btn.innerText = 'Copied!';
537603
setTimeout(() => btn.innerText = orig, 1500);

0 commit comments

Comments
 (0)