tabby-tabbyspaces 0.1.0 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.claude/settings.local.json +2 -1
- package/.github/workflows/ci.yml +26 -0
- package/.github/workflows/claude-code-review.yml +44 -0
- package/.github/workflows/claude.yml +81 -0
- package/.github/workflows/release.yml +30 -0
- package/CHANGELOG.md +46 -0
- package/CLAUDE.md +33 -0
- package/CONTRIBUTING.md +3 -1
- package/README.md +21 -18
- package/TODO.md +5 -0
- package/dist/build-config.d.ts +3 -3
- package/dist/components/deleteConfirmModal.component.d.ts +7 -0
- package/dist/components/deleteConfirmModal.component.d.ts.map +1 -0
- package/dist/components/paneEditor.component.d.ts +9 -18
- package/dist/components/paneEditor.component.d.ts.map +1 -1
- package/dist/components/splitPreview.component.d.ts +50 -50
- package/dist/components/splitPreview.component.d.ts.map +1 -1
- package/dist/components/workspaceEditor.component.d.ts +61 -54
- package/dist/components/workspaceEditor.component.d.ts.map +1 -1
- package/dist/components/workspaceList.component.d.ts +56 -39
- package/dist/components/workspaceList.component.d.ts.map +1 -1
- package/dist/index.d.ts +6 -6
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.LICENSE.txt +1 -1
- package/dist/index.js.map +1 -1
- package/dist/models/workspace.model.d.ts +118 -78
- package/dist/models/workspace.model.d.ts.map +1 -1
- package/dist/package.json +1 -1
- package/dist/providers/config.provider.d.ts +8 -8
- package/dist/providers/settings.provider.d.ts +7 -7
- package/dist/providers/toolbar.provider.d.ts +23 -15
- package/dist/providers/toolbar.provider.d.ts.map +1 -1
- package/dist/services/startupCommand.service.d.ts +27 -19
- package/dist/services/startupCommand.service.d.ts.map +1 -1
- package/dist/services/workspaceBackground.service.d.ts +38 -0
- package/dist/services/workspaceBackground.service.d.ts.map +1 -0
- package/dist/services/workspaceEditor.service.d.ts +46 -32
- package/dist/services/workspaceEditor.service.d.ts.map +1 -1
- package/docs/DESIGN.md +57 -0
- package/docs/SESSION-2026-01-14-S1-DESIGN.md +134 -0
- package/mockups/index.html +162 -0
- package/mockups/s1-tight-sharp.html +522 -0
- package/mockups/shared/base.css +216 -0
- package/mockups/v06-tabbed.html +643 -0
- package/package.json +2 -1
- package/screenshots/editor.png +0 -0
- package/scripts/build-dev.js +2 -1
- package/scripts/build-prod.js +2 -1
- package/src/components/deleteConfirmModal.component.ts +23 -0
- package/src/components/paneEditor.component.pug +27 -43
- package/src/components/paneEditor.component.scss +37 -85
- package/src/components/paneEditor.component.ts +4 -32
- package/src/components/splitPreview.component.pug +0 -9
- package/src/components/splitPreview.component.scss +46 -70
- package/src/components/splitPreview.component.ts +15 -25
- package/src/components/workspaceEditor.component.pug +140 -112
- package/src/components/workspaceEditor.component.scss +270 -202
- package/src/components/workspaceEditor.component.ts +161 -85
- package/src/components/workspaceList.component.pug +31 -51
- package/src/components/workspaceList.component.scss +86 -77
- package/src/components/workspaceList.component.ts +89 -34
- package/src/index.ts +4 -0
- package/src/models/workspace.model.ts +80 -2
- package/src/providers/toolbar.provider.ts +78 -9
- package/src/services/startupCommand.service.ts +30 -32
- package/src/services/workspaceBackground.service.ts +167 -0
- package/src/services/workspaceEditor.service.ts +77 -40
- package/src/styles/_index.scss +3 -0
- package/src/styles/_mixins.scss +180 -0
- package/src/styles/_variables.scss +67 -0
- package/TEST_MCP.md +0 -176
- package/cdp-click.js +0 -22
- package/cdp-test.js +0 -28
- package/screenshots/pane-edit.png +0 -0
- package/test_cdp.py +0 -50
|
@@ -0,0 +1,522 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>S1: Tight & Sharp - TabbySpaces</title>
|
|
7
|
+
<link rel="stylesheet" href="shared/base.css">
|
|
8
|
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
9
|
+
<style>
|
|
10
|
+
/* S1: Tight spacing, sharp corners, flat, IDE-like */
|
|
11
|
+
:root {
|
|
12
|
+
--s-xs: 2px;
|
|
13
|
+
--s-sm: 4px;
|
|
14
|
+
--s-md: 6px;
|
|
15
|
+
--s-lg: 10px;
|
|
16
|
+
--s-xl: 14px;
|
|
17
|
+
--s-2xl: 18px;
|
|
18
|
+
--r-xs: 2px;
|
|
19
|
+
--r-sm: 2px;
|
|
20
|
+
--r-md: 3px;
|
|
21
|
+
--r-lg: 4px;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.back-link {
|
|
25
|
+
display: inline-flex;
|
|
26
|
+
align-items: center;
|
|
27
|
+
gap: var(--s-sm);
|
|
28
|
+
color: var(--theme-fg-less);
|
|
29
|
+
text-decoration: none;
|
|
30
|
+
font-size: var(--font-size-sm);
|
|
31
|
+
margin-bottom: var(--s-xl);
|
|
32
|
+
}
|
|
33
|
+
.back-link:hover { color: var(--theme-primary); }
|
|
34
|
+
|
|
35
|
+
.page-header {
|
|
36
|
+
margin-bottom: var(--s-lg);
|
|
37
|
+
}
|
|
38
|
+
.page-header h1 {
|
|
39
|
+
font-size: var(--font-size-lg);
|
|
40
|
+
color: var(--theme-fg-more);
|
|
41
|
+
margin-bottom: var(--s-xs);
|
|
42
|
+
}
|
|
43
|
+
.page-header p {
|
|
44
|
+
color: var(--theme-fg-less);
|
|
45
|
+
font-size: var(--font-size-sm);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.tab-bar {
|
|
49
|
+
display: flex;
|
|
50
|
+
background: var(--theme-bg-more);
|
|
51
|
+
border: 1px solid var(--theme-border);
|
|
52
|
+
border-bottom: none;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.tab {
|
|
56
|
+
display: flex;
|
|
57
|
+
align-items: center;
|
|
58
|
+
gap: var(--s-md);
|
|
59
|
+
padding: var(--s-md) var(--s-lg);
|
|
60
|
+
border-right: 1px solid var(--theme-border);
|
|
61
|
+
color: var(--theme-fg-less);
|
|
62
|
+
cursor: pointer;
|
|
63
|
+
font-size: var(--font-size-sm);
|
|
64
|
+
min-width: 120px;
|
|
65
|
+
}
|
|
66
|
+
.tab:hover {
|
|
67
|
+
background: var(--theme-bg-more-more);
|
|
68
|
+
}
|
|
69
|
+
.tab:hover .tab-close { opacity: 1; }
|
|
70
|
+
.tab.active {
|
|
71
|
+
background: var(--theme-bg);
|
|
72
|
+
color: var(--theme-fg-more);
|
|
73
|
+
border-bottom: 2px solid var(--theme-primary);
|
|
74
|
+
margin-bottom: -1px;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.tab-icon {
|
|
78
|
+
font-size: 12px;
|
|
79
|
+
}
|
|
80
|
+
.tab-icon.code { color: #3b82f6; }
|
|
81
|
+
.tab-icon.server { color: #f59e0b; }
|
|
82
|
+
.tab-icon.book { color: #10b981; }
|
|
83
|
+
|
|
84
|
+
.tab-close {
|
|
85
|
+
width: 16px;
|
|
86
|
+
height: 16px;
|
|
87
|
+
display: flex;
|
|
88
|
+
align-items: center;
|
|
89
|
+
justify-content: center;
|
|
90
|
+
opacity: 0;
|
|
91
|
+
font-size: 9px;
|
|
92
|
+
margin-left: auto;
|
|
93
|
+
}
|
|
94
|
+
.tab-close:hover {
|
|
95
|
+
background: var(--theme-danger);
|
|
96
|
+
color: white;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.tab-new {
|
|
100
|
+
display: flex;
|
|
101
|
+
align-items: center;
|
|
102
|
+
justify-content: center;
|
|
103
|
+
width: 32px;
|
|
104
|
+
color: var(--theme-fg-less);
|
|
105
|
+
cursor: pointer;
|
|
106
|
+
}
|
|
107
|
+
.tab-new:hover {
|
|
108
|
+
background: var(--theme-bg-more-more);
|
|
109
|
+
color: var(--theme-primary);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.tab-content {
|
|
113
|
+
background: var(--theme-bg);
|
|
114
|
+
border: 1px solid var(--theme-border);
|
|
115
|
+
border-top: none;
|
|
116
|
+
padding: var(--s-xl);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.editor-section {
|
|
120
|
+
margin-bottom: var(--s-xl);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.section-title {
|
|
124
|
+
font-size: 11px;
|
|
125
|
+
color: var(--theme-fg-less);
|
|
126
|
+
text-transform: uppercase;
|
|
127
|
+
letter-spacing: 0.5px;
|
|
128
|
+
margin-bottom: var(--s-lg);
|
|
129
|
+
display: flex;
|
|
130
|
+
align-items: center;
|
|
131
|
+
gap: var(--s-sm);
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.form-row {
|
|
135
|
+
display: flex;
|
|
136
|
+
gap: var(--s-lg);
|
|
137
|
+
margin-bottom: var(--s-lg);
|
|
138
|
+
align-items: flex-end;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.form-group {
|
|
142
|
+
flex: 1;
|
|
143
|
+
}
|
|
144
|
+
.form-group.auto-width {
|
|
145
|
+
flex: none;
|
|
146
|
+
}
|
|
147
|
+
.form-group label {
|
|
148
|
+
display: block;
|
|
149
|
+
font-size: 10px;
|
|
150
|
+
color: var(--theme-fg-less);
|
|
151
|
+
margin-bottom: var(--s-xs);
|
|
152
|
+
text-transform: uppercase;
|
|
153
|
+
}
|
|
154
|
+
.form-group input[type="text"] {
|
|
155
|
+
width: 100%;
|
|
156
|
+
padding: var(--s-sm) var(--s-md);
|
|
157
|
+
background: var(--theme-bg-more);
|
|
158
|
+
border: 1px solid var(--theme-border);
|
|
159
|
+
border-radius: var(--r-sm);
|
|
160
|
+
color: var(--theme-fg);
|
|
161
|
+
font-size: var(--font-size-sm);
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.dropdown-trigger {
|
|
165
|
+
display: flex;
|
|
166
|
+
align-items: center;
|
|
167
|
+
gap: var(--s-sm);
|
|
168
|
+
padding: var(--s-sm) var(--s-md);
|
|
169
|
+
background: var(--theme-bg-more);
|
|
170
|
+
border: 1px solid var(--theme-border);
|
|
171
|
+
border-radius: var(--r-sm);
|
|
172
|
+
cursor: pointer;
|
|
173
|
+
}
|
|
174
|
+
.dropdown-trigger:hover {
|
|
175
|
+
border-color: var(--theme-fg-less);
|
|
176
|
+
}
|
|
177
|
+
.dropdown-icon {
|
|
178
|
+
font-size: 14px;
|
|
179
|
+
}
|
|
180
|
+
.dropdown-icon.icon-blue { color: #3b82f6; }
|
|
181
|
+
.dropdown-color {
|
|
182
|
+
width: 16px;
|
|
183
|
+
height: 16px;
|
|
184
|
+
border-radius: var(--r-xs);
|
|
185
|
+
}
|
|
186
|
+
.dropdown-chevron {
|
|
187
|
+
color: var(--theme-fg-less);
|
|
188
|
+
font-size: 10px;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.split-preview-container {
|
|
192
|
+
background: var(--theme-bg-more);
|
|
193
|
+
border: 1px solid var(--theme-border);
|
|
194
|
+
border-radius: var(--r-md);
|
|
195
|
+
padding: var(--s-lg);
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.preview-toolbar {
|
|
199
|
+
display: flex;
|
|
200
|
+
justify-content: flex-end;
|
|
201
|
+
gap: var(--s-xs);
|
|
202
|
+
margin-bottom: var(--s-lg);
|
|
203
|
+
padding-bottom: var(--s-md);
|
|
204
|
+
border-bottom: 1px solid var(--theme-border);
|
|
205
|
+
}
|
|
206
|
+
.toolbar-separator {
|
|
207
|
+
width: 1px;
|
|
208
|
+
height: 18px;
|
|
209
|
+
background: var(--theme-border);
|
|
210
|
+
margin: 0 var(--s-sm);
|
|
211
|
+
}
|
|
212
|
+
.preview-btn {
|
|
213
|
+
width: 24px;
|
|
214
|
+
height: 24px;
|
|
215
|
+
display: flex;
|
|
216
|
+
align-items: center;
|
|
217
|
+
justify-content: center;
|
|
218
|
+
background: var(--theme-bg);
|
|
219
|
+
border: 1px solid var(--theme-border);
|
|
220
|
+
border-radius: var(--r-sm);
|
|
221
|
+
color: var(--theme-fg-less);
|
|
222
|
+
cursor: pointer;
|
|
223
|
+
font-size: 10px;
|
|
224
|
+
}
|
|
225
|
+
.preview-btn:hover {
|
|
226
|
+
border-color: var(--theme-primary);
|
|
227
|
+
color: var(--theme-primary);
|
|
228
|
+
}
|
|
229
|
+
.preview-btn.danger:hover {
|
|
230
|
+
border-color: var(--theme-danger);
|
|
231
|
+
color: var(--theme-danger);
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
.split-preview {
|
|
235
|
+
display: flex;
|
|
236
|
+
gap: var(--s-sm);
|
|
237
|
+
height: 180px;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
.nested-split {
|
|
241
|
+
flex: 1;
|
|
242
|
+
display: flex;
|
|
243
|
+
gap: var(--s-sm);
|
|
244
|
+
}
|
|
245
|
+
.nested-split.vertical {
|
|
246
|
+
flex-direction: column;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.preview-pane {
|
|
250
|
+
flex: 1;
|
|
251
|
+
background: var(--theme-bg);
|
|
252
|
+
border: 1px solid var(--theme-border);
|
|
253
|
+
border-radius: var(--r-sm);
|
|
254
|
+
padding: var(--s-md);
|
|
255
|
+
cursor: pointer;
|
|
256
|
+
display: flex;
|
|
257
|
+
flex-direction: column;
|
|
258
|
+
justify-content: center;
|
|
259
|
+
align-items: center;
|
|
260
|
+
text-align: center;
|
|
261
|
+
}
|
|
262
|
+
.preview-pane:hover {
|
|
263
|
+
border-color: var(--theme-fg-less);
|
|
264
|
+
}
|
|
265
|
+
.preview-pane.selected {
|
|
266
|
+
border-color: var(--theme-primary);
|
|
267
|
+
border-width: 2px;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
.pane-icon {
|
|
271
|
+
font-size: 16px;
|
|
272
|
+
color: var(--theme-fg-less);
|
|
273
|
+
margin-bottom: var(--s-xs);
|
|
274
|
+
}
|
|
275
|
+
.pane-label {
|
|
276
|
+
font-size: 11px;
|
|
277
|
+
color: var(--theme-fg);
|
|
278
|
+
}
|
|
279
|
+
.pane-sublabel {
|
|
280
|
+
font-size: 9px;
|
|
281
|
+
color: var(--theme-fg-less);
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
.pane-details {
|
|
285
|
+
background: var(--theme-bg-more-more);
|
|
286
|
+
border-radius: var(--r-sm);
|
|
287
|
+
padding: var(--s-lg);
|
|
288
|
+
margin-top: var(--s-lg);
|
|
289
|
+
border-left: 2px solid var(--theme-primary);
|
|
290
|
+
}
|
|
291
|
+
.pane-details-header {
|
|
292
|
+
display: flex;
|
|
293
|
+
justify-content: space-between;
|
|
294
|
+
align-items: center;
|
|
295
|
+
margin-bottom: var(--s-lg);
|
|
296
|
+
}
|
|
297
|
+
.pane-details-title {
|
|
298
|
+
font-size: var(--font-size-sm);
|
|
299
|
+
color: var(--theme-fg);
|
|
300
|
+
font-weight: 500;
|
|
301
|
+
}
|
|
302
|
+
.pane-details-close {
|
|
303
|
+
color: var(--theme-fg-less);
|
|
304
|
+
cursor: pointer;
|
|
305
|
+
font-size: 11px;
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
.pane-form {
|
|
309
|
+
display: grid;
|
|
310
|
+
grid-template-columns: 1fr 1fr;
|
|
311
|
+
gap: var(--s-lg);
|
|
312
|
+
}
|
|
313
|
+
.pane-form select {
|
|
314
|
+
width: 100%;
|
|
315
|
+
padding: var(--s-sm) var(--s-md);
|
|
316
|
+
background: var(--theme-bg-more);
|
|
317
|
+
border: 1px solid var(--theme-border);
|
|
318
|
+
border-radius: var(--r-sm);
|
|
319
|
+
color: var(--theme-fg);
|
|
320
|
+
font-size: var(--font-size-sm);
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
.action-buttons {
|
|
324
|
+
display: flex;
|
|
325
|
+
justify-content: space-between;
|
|
326
|
+
align-items: center;
|
|
327
|
+
padding-top: var(--s-xl);
|
|
328
|
+
border-top: 1px solid var(--theme-border);
|
|
329
|
+
margin-top: var(--s-xl);
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
.checkbox-group {
|
|
333
|
+
display: flex;
|
|
334
|
+
align-items: center;
|
|
335
|
+
gap: var(--s-sm);
|
|
336
|
+
}
|
|
337
|
+
.checkbox-group input[type="checkbox"] {
|
|
338
|
+
width: 14px;
|
|
339
|
+
height: 14px;
|
|
340
|
+
}
|
|
341
|
+
.checkbox-group label {
|
|
342
|
+
font-size: var(--font-size-sm);
|
|
343
|
+
color: var(--theme-fg);
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
.action-buttons-right {
|
|
347
|
+
display: flex;
|
|
348
|
+
gap: var(--s-md);
|
|
349
|
+
}
|
|
350
|
+
.action-buttons-right .btn {
|
|
351
|
+
padding: var(--s-sm) var(--s-lg);
|
|
352
|
+
font-size: var(--font-size-sm);
|
|
353
|
+
border-radius: var(--r-sm);
|
|
354
|
+
}
|
|
355
|
+
</style>
|
|
356
|
+
</head>
|
|
357
|
+
<body>
|
|
358
|
+
<div class="mockup-container">
|
|
359
|
+
<a href="index.html" class="back-link">
|
|
360
|
+
<i class="fa-solid fa-arrow-left"></i>
|
|
361
|
+
Back to variants
|
|
362
|
+
</a>
|
|
363
|
+
|
|
364
|
+
<div class="page-header">
|
|
365
|
+
<h1><i class="fa-solid fa-compress"></i> S1: Tight & Sharp</h1>
|
|
366
|
+
<p>Compact spacing, sharp corners, flat aesthetic. IDE-like density.</p>
|
|
367
|
+
</div>
|
|
368
|
+
|
|
369
|
+
<div class="tab-bar">
|
|
370
|
+
<div class="tab active">
|
|
371
|
+
<span class="tab-icon code"><i class="fa-solid fa-code"></i></span>
|
|
372
|
+
<span class="tab-name">Development</span>
|
|
373
|
+
<span class="tab-close"><i class="fa-solid fa-xmark"></i></span>
|
|
374
|
+
</div>
|
|
375
|
+
<div class="tab">
|
|
376
|
+
<span class="tab-icon server"><i class="fa-solid fa-server"></i></span>
|
|
377
|
+
<span class="tab-name">DevOps</span>
|
|
378
|
+
<span class="tab-close"><i class="fa-solid fa-xmark"></i></span>
|
|
379
|
+
</div>
|
|
380
|
+
<div class="tab">
|
|
381
|
+
<span class="tab-icon book"><i class="fa-solid fa-book"></i></span>
|
|
382
|
+
<span class="tab-name">Research</span>
|
|
383
|
+
<span class="tab-close"><i class="fa-solid fa-xmark"></i></span>
|
|
384
|
+
</div>
|
|
385
|
+
<div class="tab-new">
|
|
386
|
+
<i class="fa-solid fa-plus"></i>
|
|
387
|
+
</div>
|
|
388
|
+
</div>
|
|
389
|
+
|
|
390
|
+
<div class="tab-content">
|
|
391
|
+
<div class="editor-section">
|
|
392
|
+
<div class="section-title">
|
|
393
|
+
<i class="fa-solid fa-cog"></i>
|
|
394
|
+
Workspace Settings
|
|
395
|
+
</div>
|
|
396
|
+
|
|
397
|
+
<div class="form-row">
|
|
398
|
+
<div class="form-group">
|
|
399
|
+
<label>Name</label>
|
|
400
|
+
<input type="text" value="Development" placeholder="Workspace name">
|
|
401
|
+
</div>
|
|
402
|
+
<div class="form-group auto-width">
|
|
403
|
+
<label>Icon</label>
|
|
404
|
+
<div class="dropdown-trigger">
|
|
405
|
+
<span class="dropdown-icon icon-blue"><i class="fa-solid fa-code"></i></span>
|
|
406
|
+
<span class="dropdown-chevron"><i class="fa-solid fa-chevron-down"></i></span>
|
|
407
|
+
</div>
|
|
408
|
+
</div>
|
|
409
|
+
<div class="form-group auto-width">
|
|
410
|
+
<label>Color</label>
|
|
411
|
+
<div class="dropdown-trigger">
|
|
412
|
+
<span class="dropdown-color" style="background: #3b82f6;"></span>
|
|
413
|
+
<span class="dropdown-chevron"><i class="fa-solid fa-chevron-down"></i></span>
|
|
414
|
+
</div>
|
|
415
|
+
</div>
|
|
416
|
+
</div>
|
|
417
|
+
</div>
|
|
418
|
+
|
|
419
|
+
<div class="editor-section">
|
|
420
|
+
<div class="section-title">
|
|
421
|
+
<i class="fa-solid fa-columns"></i>
|
|
422
|
+
Split Layout
|
|
423
|
+
</div>
|
|
424
|
+
|
|
425
|
+
<div class="split-preview-container">
|
|
426
|
+
<div class="preview-toolbar">
|
|
427
|
+
<button class="preview-btn" title="Edit pane"><i class="fa-solid fa-pen"></i></button>
|
|
428
|
+
<button class="preview-btn" title="Split H"><i class="fa-solid fa-grip-lines-vertical"></i></button>
|
|
429
|
+
<button class="preview-btn" title="Split V"><i class="fa-solid fa-grip-lines"></i></button>
|
|
430
|
+
<span class="toolbar-separator"></span>
|
|
431
|
+
<button class="preview-btn"><i class="fa-solid fa-arrow-left"></i></button>
|
|
432
|
+
<button class="preview-btn"><i class="fa-solid fa-arrow-right"></i></button>
|
|
433
|
+
<button class="preview-btn"><i class="fa-solid fa-arrow-up"></i></button>
|
|
434
|
+
<button class="preview-btn"><i class="fa-solid fa-arrow-down"></i></button>
|
|
435
|
+
<span class="toolbar-separator"></span>
|
|
436
|
+
<button class="preview-btn danger"><i class="fa-solid fa-trash"></i></button>
|
|
437
|
+
</div>
|
|
438
|
+
|
|
439
|
+
<div class="split-preview">
|
|
440
|
+
<div class="nested-split vertical">
|
|
441
|
+
<div class="preview-pane selected">
|
|
442
|
+
<i class="fa-solid fa-terminal pane-icon"></i>
|
|
443
|
+
<div class="pane-label">PowerShell</div>
|
|
444
|
+
<div class="pane-sublabel">C:\Projects\app</div>
|
|
445
|
+
</div>
|
|
446
|
+
<div class="preview-pane">
|
|
447
|
+
<i class="fa-solid fa-terminal pane-icon"></i>
|
|
448
|
+
<div class="pane-label">PowerShell</div>
|
|
449
|
+
<div class="pane-sublabel">C:\Projects\app</div>
|
|
450
|
+
</div>
|
|
451
|
+
</div>
|
|
452
|
+
<div class="preview-pane">
|
|
453
|
+
<i class="fa-solid fa-terminal pane-icon"></i>
|
|
454
|
+
<div class="pane-label">PowerShell</div>
|
|
455
|
+
<div class="pane-sublabel">C:\Projects\api</div>
|
|
456
|
+
</div>
|
|
457
|
+
</div>
|
|
458
|
+
|
|
459
|
+
<div class="pane-details">
|
|
460
|
+
<div class="pane-details-header">
|
|
461
|
+
<span class="pane-details-title">
|
|
462
|
+
<i class="fa-solid fa-terminal"></i> Pane 1 Configuration
|
|
463
|
+
</span>
|
|
464
|
+
<span class="pane-details-close">
|
|
465
|
+
<i class="fa-solid fa-xmark"></i> Close
|
|
466
|
+
</span>
|
|
467
|
+
</div>
|
|
468
|
+
<div class="pane-form">
|
|
469
|
+
<div class="form-group">
|
|
470
|
+
<label>Profile</label>
|
|
471
|
+
<select>
|
|
472
|
+
<option selected>PowerShell</option>
|
|
473
|
+
<option>CMD</option>
|
|
474
|
+
<option>Git Bash</option>
|
|
475
|
+
</select>
|
|
476
|
+
</div>
|
|
477
|
+
<div class="form-group">
|
|
478
|
+
<label>Working Directory</label>
|
|
479
|
+
<input type="text" value="C:\Projects\app">
|
|
480
|
+
</div>
|
|
481
|
+
<div class="form-group">
|
|
482
|
+
<label>Tab Title</label>
|
|
483
|
+
<input type="text" placeholder="Optional">
|
|
484
|
+
</div>
|
|
485
|
+
<div class="form-group">
|
|
486
|
+
<label>Startup Command</label>
|
|
487
|
+
<input type="text" value="npm run dev">
|
|
488
|
+
</div>
|
|
489
|
+
</div>
|
|
490
|
+
</div>
|
|
491
|
+
</div>
|
|
492
|
+
</div>
|
|
493
|
+
|
|
494
|
+
<div class="action-buttons">
|
|
495
|
+
<div class="checkbox-group">
|
|
496
|
+
<input type="checkbox" id="launchStartup">
|
|
497
|
+
<label for="launchStartup">Launch on startup</label>
|
|
498
|
+
</div>
|
|
499
|
+
<div class="action-buttons-right">
|
|
500
|
+
<button class="btn btn-ghost">
|
|
501
|
+
<i class="fa-solid fa-xmark"></i> Cancel
|
|
502
|
+
</button>
|
|
503
|
+
<button class="btn btn-success">
|
|
504
|
+
<i class="fa-solid fa-check"></i> Save
|
|
505
|
+
</button>
|
|
506
|
+
</div>
|
|
507
|
+
</div>
|
|
508
|
+
</div>
|
|
509
|
+
</div>
|
|
510
|
+
|
|
511
|
+
<div class="design-notes">
|
|
512
|
+
<h4><i class="fa-solid fa-lightbulb"></i> S1: Tight & Sharp</h4>
|
|
513
|
+
<ul>
|
|
514
|
+
<li><strong>Spacing:</strong> Minimal padding, compact layout</li>
|
|
515
|
+
<li><strong>Radius:</strong> 2-4px, sharp corners</li>
|
|
516
|
+
<li><strong>Borders:</strong> Thin 1px, subtle</li>
|
|
517
|
+
<li><strong>Shadows:</strong> None - completely flat</li>
|
|
518
|
+
<li><strong>Vibe:</strong> IDE/developer tool aesthetic</li>
|
|
519
|
+
</ul>
|
|
520
|
+
</div>
|
|
521
|
+
</body>
|
|
522
|
+
</html>
|