Gitpub/Gitpub-Desktop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add external editor/file picker, update theme

Browse Source 
Introduce file/application pickers and external-editor integration, plus a visual refresh. Frontend: add UI for selecting/rescanning installed IDEs, custom editor input, "Open in File Explorer" and "Open in Code Editor" actions, clone destination browse, helper utilities, new icons, and many CSS theme/UX improvements (variables, shadows, scrollbars, selection, refined component styles). State: track installedIdes and scan status. Tauri API: expose browseDirectory, browseApplication and scanInstalledIdes, and wire UI handlers to call them. Backend: add InstalledIde struct and update tauri Cargo manifest and capabilities to allow dialogs. Overall improves editor/workflow integrations and modernizes the app styling.
This commit is contained in:
Andrew Zambazos
2026-05-10 21:26:03 +12:00
parent ac7fc231a0
commit 5e10750043
9 changed files with 815 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/css/components.css
+186 -62
View File
@@ -8,7 +8,7 @@
.layout {
display: grid;
grid-template-rows: 48px 1fr;
grid-template-columns: 272px minmax(0, 1fr);
grid-template-columns: 320px minmax(0, 1fr);
width: 100%;
height: 100%;
}
@@ -19,7 +19,7 @@
display: flex;
flex-direction: column;
background: var(--bg-panel);
border-right: 1px solid rgba(0, 0, 0, 0.35);
border-right: 1px solid var(--border);
overflow: hidden;
min-height: 0;
grid-row: 2;
@@ -61,6 +61,20 @@
justify-content: flex-end;
}
.gd-path-picker {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
align-items: center;
}
.gd-editor-picker {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
align-items: center;
}
/* ── Typography ───────────────────────────────────────────────────────────── */
.muted {
@@ -141,8 +155,8 @@
align-items: stretch;
grid-column: 1 / -1;
grid-row: 1;
background: var(--bg-panel);
border-bottom: 1px solid rgba(0, 0, 0, 0.35);
background: linear-gradient(180deg, #222931 0%, var(--bg-panel) 100%);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
@@ -150,9 +164,9 @@
.gd-toolbar-left {
display: grid;
grid-template-columns: 1fr 1fr;
width: 272px;
width: 320px;
flex-shrink: 0;
border-right: 1px solid rgba(255, 255, 255, 0.05);
border-right: 1px solid rgba(229, 161, 62, 0.12);
}
/* Center section – grows */
@@ -169,10 +183,42 @@
align-items: center;
gap: 10px;
padding: 0 14px;
border-left: 1px solid rgba(255, 255, 255, 0.05);
border-left: 1px solid rgba(229, 161, 62, 0.12);
flex-shrink: 0;
}
.gd-external-actions {
display: flex;
align-items: center;
gap: 4px;
}
.gd-icon-action {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
padding: 0;
border: 1px solid transparent;
border-radius: var(--radius-md);
background: transparent;
color: var(--text-muted);
cursor: pointer;
transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.gd-icon-action:hover:not(:disabled) {
background: var(--bg-hover);
border-color: var(--border);
color: var(--text-main);
}
.gd-icon-action:disabled {
opacity: 0.45;
cursor: default;
}
/* Shared toolbar cell (repo + branch buttons) */
.gd-toolbar-cell {
display: grid;
@@ -192,11 +238,11 @@
}
.gd-repo-cell {
border-right: 1px solid rgba(255, 255, 255, 0.05);
border-right: 1px solid rgba(229, 161, 62, 0.12);
}
.gd-toolbar-cell:hover:not(:disabled) {
background: rgba(177, 186, 196, 0.07);
background: rgba(229, 161, 62, 0.07);
}
.gd-toolbar-cell:disabled {
@@ -275,7 +321,8 @@
.gd-sync-btn:hover:not(:disabled) {
background: var(--bg-hover);
border-color: #6e7681;
border-color: var(--accent);
box-shadow: 0 0 0 2px var(--accent-glow);
}
.gd-sync-btn:disabled {
@@ -338,7 +385,7 @@
display: flex;
background: var(--bg-app);
border: 1px solid var(--border);
border-radius: 6px;
border-radius: 8px;
padding: 2px;
gap: 1px;
}
@@ -346,13 +393,13 @@
.gd-view-toggle button {
border: none;
background: transparent;
border-radius: 4px;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
padding: 4px 12px;
color: var(--text-muted);
cursor: pointer;
transition: background 0.1s, color 0.1s;
transition: background 0.12s, color 0.12s, box-shadow 0.12s;
height: 26px;
}
@@ -363,9 +410,10 @@
}
.gd-view-toggle button.active {
background: var(--bg-panel);
color: var(--text-main);
background: var(--accent-subtle);
color: var(--accent);
font-weight: 600;
box-shadow: 0 0 0 1px var(--accent-glow);
}
/* ── Utility menu ─────────────────────────────────────────────────────────── */
@@ -430,6 +478,15 @@
border-color: transparent;
}
.gd-utility-menu-item:disabled {
opacity: 0.45;
cursor: default;
}
.gd-utility-menu-item:disabled:hover {
background: transparent;
}
.gd-utility-menu-item svg {
color: var(--text-muted);
flex-shrink: 0;
@@ -488,7 +545,8 @@
}
.branch-menu-item.active {
background: var(--bg-hover);
background: var(--accent-subtle);
color: var(--accent);
}
.branch-menu-item:hover,
@@ -541,7 +599,7 @@
grid-template-columns: 32px 1fr;
gap: 5px;
padding: 7px 8px 6px;
border-bottom: 1px solid rgba(0, 0, 0, 0.25);
border-bottom: 1px solid var(--border-subtle);
flex-shrink: 0;
}
@@ -571,13 +629,14 @@
height: 26px;
padding: 3px 8px;
font-size: 12px;
border-color: rgba(110, 118, 129, 0.4);
border-color: var(--border);
border-radius: 5px;
background: rgba(0, 0, 0, 0.2);
}
.gd-filter-input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 2px var(--accent-glow);
}
.gd-changes-filter-row {
@@ -587,7 +646,7 @@
gap: 8px;
min-height: 28px;
padding: 4px 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
border-bottom: 1px solid var(--border-subtle);
flex-shrink: 0;
}
@@ -603,7 +662,7 @@
.gd-check-all input[type="checkbox"] {
width: 13px;
padding: 0;
accent-color: #6e7681;
accent-color: var(--accent);
}
.gd-changes-list {
@@ -634,15 +693,20 @@
text-align: left;
}
.change-file-row:hover,
.change-file-row.active {
.change-file-row:hover {
background: var(--bg-hover);
}
.change-file-row.active {
background: var(--accent-subtle);
border-left: 2px solid var(--accent);
padding-left: 10px;
}
.change-file-checkbox {
width: 13px;
padding: 0;
accent-color: #6e7681;
accent-color: var(--accent);
}
.change-status {
@@ -695,19 +759,24 @@
padding: 7px 12px;
border: 0;
border-radius: 0;
border-bottom: 1px solid rgba(48, 54, 61, 0.4);
border-bottom: 1px solid var(--border-subtle);
background: transparent;
text-align: left;
cursor: pointer;
color: var(--text-main);
transition: background 0.08s;
transition: background 0.1s;
}
.gd-history-item:hover,
.gd-history-item.active {
.gd-history-item:hover {
background: var(--bg-hover);
}
.gd-history-item.active {
background: var(--accent-subtle);
border-left: 2px solid var(--accent);
padding-left: 10px;
}
.gd-history-info {
min-width: 0;
display: flex;
@@ -736,7 +805,7 @@
.gd-commit-area {
flex-shrink: 0;
padding: 10px;
border-top: 1px solid rgba(0, 0, 0, 0.3);
border-top: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 6px;
@@ -759,12 +828,21 @@
width: 100%;
height: 30px;
font-size: 12px;
background: #0969da !important;
border-color: #0969da !important;
font-weight: 600;
background: linear-gradient(135deg, var(--accent-strong) 0%, var(--accent) 100%) !important;
border-color: transparent !important;
color: #fff !important;
letter-spacing: 0.01em;
transition: opacity 0.15s ease, box-shadow 0.15s ease !important;
}
.gd-commit-btn:hover:not(:disabled) {
opacity: 0.9;
box-shadow: 0 0 0 3px var(--accent-glow) !important;
}
.gd-commit-btn:disabled {
opacity: 0.5;
opacity: 0.4;
}
/* ── Diff view ────────────────────────────────────────────────────────────── */
@@ -774,7 +852,7 @@
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: auto;
background: #010409;
background: #0B0D11;
}
.diff-preview-inline {
@@ -787,7 +865,7 @@
display: grid;
grid-template-columns: 32px minmax(0, 1fr);
min-height: 20px;
color: #c9d1d9;
color: #E6EDF3;
}
.diff-line code {
@@ -797,18 +875,18 @@
.diff-gutter {
padding: 2px 8px;
color: #6e7681;
color: #7D8590;
text-align: center;
user-select: none;
border-right: 1px solid rgba(110, 118, 129, 0.18);
border-right: 1px solid rgba(125, 133, 144, 0.18);
}
.diff-line-added { background: rgba(46, 160, 67, 0.14); }
.diff-line-added .diff-gutter { color: var(--success); background: rgba(46, 160, 67, 0.18); }
.diff-line-removed { background: rgba(248, 81, 73, 0.13); }
.diff-line-removed .diff-gutter { color: var(--danger); background: rgba(248, 81, 73, 0.18); }
.diff-line-hunk { color: #a5d6ff; background: rgba(56, 139, 253, 0.14); }
.diff-line-meta { color: var(--text-muted); background: rgba(110, 118, 129, 0.07); }
.diff-line-added { background: rgba(63, 185, 80, 0.1); }
.diff-line-added .diff-gutter { color: var(--success); background: rgba(63, 185, 80, 0.14); }
.diff-line-removed { background: rgba(248, 81, 73, 0.1); }
.diff-line-removed .diff-gutter { color: var(--danger); background: rgba(248, 81, 73, 0.15); }
.diff-line-hunk { color: var(--accent); background: var(--accent-subtle); }
.diff-line-meta { color: var(--text-muted); background: rgba(156, 166, 181, 0.06); }
/* ── Workflow empty state ─────────────────────────────────────────────────── */
@@ -829,8 +907,9 @@
display: grid;
place-items: center;
border-radius: 20px;
background: var(--bg-panel-alt);
color: var(--text-muted);
background: var(--accent-subtle);
color: var(--accent);
border: 1px solid var(--accent-glow);
}
.workflow-empty-icon svg {
@@ -908,7 +987,8 @@
display: grid;
place-items: center;
padding: 20px;
background: rgba(1, 4, 9, 0.62);
background: rgba(8, 10, 14, 0.75);
backdrop-filter: blur(2px);
}
.gd-modal {
@@ -1034,7 +1114,7 @@
justify-content: space-between;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid rgba(48, 54, 61, 0.5);
border-bottom: 1px solid var(--border-subtle);
}
.gd-modal-list-item:last-child {
@@ -1136,7 +1216,7 @@
.gd-server-active {
border-color: var(--accent);
background: rgba(47, 129, 247, 0.06);
background: var(--accent-subtle);
}
.gd-server-name {
@@ -1191,7 +1271,8 @@
display: grid;
place-items: center;
padding: 24px;
background: rgba(1, 4, 9, 0.58);
background: rgba(8, 10, 14, 0.72);
backdrop-filter: blur(2px);
}
.modal-card {
@@ -1219,10 +1300,10 @@
.danger-note {
padding: 10px 12px;
border: 1px solid rgba(248, 81, 73, 0.35);
border: 1px solid rgba(248, 81, 73, 0.3);
border-radius: var(--radius-md);
color: var(--danger);
background: rgba(248, 81, 73, 0.08);
background: rgba(248, 81, 73, 0.07);
font-size: 13px;
}
@@ -1269,7 +1350,7 @@
padding: 7px 12px;
border: 0;
border-radius: 0;
border-bottom: 1px solid rgba(48, 54, 61, 0.4);
border-bottom: 1px solid var(--border-subtle);
background: var(--bg-panel);
text-align: left;
color: var(--text-main);
@@ -1287,7 +1368,7 @@
}
.viewer-row.active {
background: rgba(47, 129, 247, 0.07);
background: var(--accent-subtle);
}
.viewer-row-icon {
@@ -1417,8 +1498,11 @@
.markdown-body blockquote {
margin: 0 0 12px;
padding: 0 12px;
border-left: 3px solid var(--border);
border-left: 3px solid var(--accent);
color: var(--text-muted);
background: var(--accent-subtle);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
padding: 4px 12px;
}
.markdown-body hr {
height: 1px;
@@ -1440,7 +1524,7 @@
padding: 12px;
overflow: auto;
border-radius: var(--radius-md);
background: #010409;
background: #0B0D11;
}
.markdown-body .markdown-code code {
padding: 0;
@@ -1456,21 +1540,24 @@
margin: 0;
padding: 14px 16px;
overflow: auto;
background: #010409;
color: var(--text-main);
background: #0B0D11;
color: #E6EDF3;
font-family: ui-monospace, "Cascadia Code", "Fira Code", "Consolas", monospace;
font-size: 12px;
line-height: 1.7;
white-space: pre;
}
.syntax-keyword { color: #ff7b72; }
.syntax-key { color: #79c0ff; }
.syntax-keyword { color: #FF7B72; }
.syntax-string { color: #A5D6FF; }
.syntax-comment { color: #7D8590; }
.syntax-number { color: #79C0FF; }
.syntax-key { color: #D2A8FF; }
/* ── Git output ───────────────────────────────────────────────────────────── */
.git-output {
background: #010409;
background: #0B0D11;
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 10px 12px;
@@ -1508,11 +1595,11 @@
@media (max-width: 860px) {
.layout {
grid-template-columns: 240px minmax(0, 1fr);
grid-template-columns: 272px minmax(0, 1fr);
}
.gd-toolbar-left {
width: 240px;
width: 272px;
}
.gd-modal-two-col {
@@ -1531,15 +1618,52 @@
@media (max-width: 640px) {
.layout {
grid-template-columns: 220px minmax(0, 1fr);
grid-template-columns: 240px minmax(0, 1fr);
}
.gd-toolbar-left {
width: 220px;
width: 240px;
grid-template-columns: 1fr;
}
.gd-branch-wrap {
display: none;
}
/* intentional—branch picker hidden at narrow widths */
}
/* ── Custom scrollbars ────────────────────────────────────────────────────── */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(229, 161, 62, 0.22);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(229, 161, 62, 0.42);
}
:root[data-theme="light"] ::-webkit-scrollbar-thumb {
background: rgba(197, 123, 39, 0.2);
}
:root[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
background: rgba(197, 123, 39, 0.38);
}
/* ── Accent selection highlight ───────────────────────────────────────────── */
::selection {
background: var(--accent-glow);
color: var(--text-main);
}