@samitouri / QOSami_Agents_Zero-2
Code Commits Issues Pulls Sessions CI/CD
main
main
html 372 lines 12.9 KB
Raw
1 <html>
2
3 <head>
4 <title>Project basic data</title>
5 <script type="module">
6 import { store } from "/components/projects/projects-store.js";
7 </script>
8 </head>
9
10 <body>
11 <div x-data>
12 <template x-if="$store.projects && $store.projects.selectedProject">
13 <div>
14
15 <template x-if="!$store.projects.selectedProject._meta.creating">
16 <div class="projects-form-group">
17 <label class="projects-form-label">Folder name</label>
18 <span class="projects-form-description">Project files and settings are located in
19 <strong><span
20 x-text="$store.projects.getSelectedAbsPath()"></span></strong></span>
21 <div class="projects-input-with-button-wrapper">
22 <input class="projects-form-input projects-disabled" type="text" x-model="$store.projects.selectedProject.name" disabled>
23 <button class="button icon-button" @click="$store.projects.browseSelected()">
24 <x-icon class="icon" name="folder"></x-icon>
25 <span>Browse</span>
26 </button>
27 </div>
28 </div>
29 </template>
30
31 <div class="projects-form-group">
32 <label class="projects-form-label">Title</label>
33 <span class="projects-form-description">Title and description are visible to both you and the agent
34 and can help it understand the project.</span>
35 <input class="projects-form-input" type="text" x-model="$store.projects.selectedProject.title"
36 placeholder="Optional title">
37 </div>
38
39 <!-- <div class="projects-form-group">
40 <label class="projects-form-label">Description</label>
41 <textarea class="projects-form-textarea" x-model="$store.projects.selectedProject.description"
42 rows="5" placeholder="Optional description"></textarea>
43 </div> -->
44
45 <div class="projects-form-group">
46 <label class="projects-form-label">Color</label>
47 <div class="projects-color-row">
48 <div class="projects-color-ball projects-color-none"
49 :class="{'selected': !$store.projects.selectedProject.color}"
50 @click="$store.projects.selectedProject.color = ''">
51 <span class="projects-color-x">×</span>
52 </div>
53 <template x-for="c in $store.projects.colors" :key="c">
54 <div class="projects-color-ball" :style="`background:${c}`"
55 :class="{'selected': $store.projects.selectedProject.color === c}"
56 @click="$store.projects.selectedProject.color = c">
57 </div>
58 </template>
59 </div>
60 </div>
61
62 <!-- Git Status Section -->
63 <template x-if="!$store.projects.selectedProject._meta.creating && $store.projects.selectedProject.git_status?.is_git_repo">
64 <div class="projects-form-group git-status-section">
65 <label class="projects-form-label">
66 <x-icon class="git-icon" name="commit"></x-icon>
67 Git Status
68 </label>
69 <div class="git-status-card">
70 <!-- Repository URL -->
71 <template x-if="$store.projects.selectedProject.git_status.remote_url">
72 <div class="git-status-row">
73 <span class="git-status-label">
74 <x-icon name="link"></x-icon>
75 Repository
76 </span>
77 <div class="git-status-value-with-action">
78 <span class="git-status-value git-url" x-text="$store.projects.selectedProject.git_status.remote_url"></span>
79 <a class="git-action-link" :href="$store.projects.selectedProject.git_status.remote_url" target="_blank" rel="noopener noreferrer" title="Open in browser">
80 <x-icon name="open_in_new"></x-icon>
81 </a>
82 </div>
83 </div>
84 </template>
85
86 <!-- Branch -->
87 <div class="git-status-row">
88 <span class="git-status-label">
89 <x-icon name="fork_right"></x-icon>
90 Branch
91 </span>
92 <span class="git-status-value git-branch" x-text="$store.projects.selectedProject.git_status.current_branch"></span>
93 </div>
94
95 <!-- Status -->
96 <div class="git-status-row">
97 <span class="git-status-label">
98 <x-icon name="info"></x-icon>
99 Status
100 </span>
101 <span class="git-status-value"
102 :class="$store.projects.selectedProject.git_status.is_dirty ? 'git-dirty' : 'git-clean'">
103 <template x-if="!$store.projects.selectedProject.git_status.is_dirty">
104 <span>✓ Clean</span>
105 </template>
106 <template x-if="$store.projects.selectedProject.git_status.is_dirty">
107 <span>
108 ● Has uncommitted changes
109 <template x-if="$store.projects.selectedProject.git_status.untracked_count > 0">
110 <span x-text="'(' + $store.projects.selectedProject.git_status.untracked_count + ' untracked)'"></span>
111 </template>
112 </span>
113 </template>
114 </span>
115 </div>
116
117 <!-- Last Commit -->
118 <template x-if="$store.projects.selectedProject.git_status.last_commit">
119 <div class="git-status-row">
120 <span class="git-status-label">
121 <x-icon name="history"></x-icon>
122 Last Commit
123 </span>
124 <div class="git-commit-info">
125 <span class="git-commit-hash" x-text="$store.projects.selectedProject.git_status.last_commit.hash"></span>
126 <span class="git-commit-message" x-text="$store.projects.selectedProject.git_status.last_commit.message"></span>
127 <span class="git-commit-meta">
128 by <span x-text="$store.projects.selectedProject.git_status.last_commit.author"></span>
129 on <span x-text="$store.projects.selectedProject.git_status.last_commit.date"></span>
130 </span>
131 </div>
132 </div>
133 </template>
134 </div>
135 </div>
136 </template>
137 </div>
138
139
140 </template>
141 </div>
142 </body>
143 <style>
144 .project-path {
145 font-size: 0.8em;
146 opacity: 0.7;
147 margin-top: 0.25em;
148 word-break: break-all;
149 }
150
151 .projects-form-group {
152 display: flex;
153 flex-direction: column;
154 gap: 0.35em;
155 margin-bottom: 0.8em;
156 }
157
158 .projects-form-label {
159 font-size: 1em;
160 font-weight: bolder;
161 opacity: 1;
162 margin-bottom: var(--spacing-sm);
163 }
164
165 .projects-form-description {
166 font-size: 0.8em;
167 margin-bottom: var(--spacing-xs);
168 }
169
170 .projects-form-input,
171 .projects-form-textarea,
172 .projects-form-select {
173 background: var(--color-input);
174 color: var(--color-text);
175 border: 1px solid var(--color-border);
176 border-radius: 0.375em;
177 padding: 0.5em 0.6em;
178 outline: none;
179 }
180
181 .projects-form-input:focus,
182 .projects-form-textarea:focus,
183 .projects-form-select:focus {
184 border-color: var(--color-primary);
185 background: var(--color-input-focus);
186 }
187
188 .projects-form-select {
189 cursor: pointer;
190 }
191
192 .projects-color-row {
193 display: flex;
194 gap: 0.5em;
195 align-items: center;
196 flex-wrap: wrap;
197 background: var(--color-input);
198 border: 1px solid var(--color-border);
199 border-radius: 0.5em;
200 padding: 0.75em 1em;
201 }
202
203 .projects-color-ball {
204 width: 24px;
205 height: 24px;
206 border-radius: 50%;
207 /* border: 2px solid var(--color-border); */
208 cursor: pointer;
209 box-shadow: none;
210 background-clip: padding-box;
211 transition: opacity 0.15s ease;
212 }
213
214 .projects-color-ball:hover {
215 opacity: 0.9;
216 }
217
218 .projects-color-ball.selected {
219 box-shadow: 0 0 0 2px var(--color-panel), 0 0 0 4px var(--color-primary);
220 }
221
222 .projects-color-none {
223 background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(127, 127, 127, 0.12) 6px 12px);
224 display: flex;
225 align-items: center;
226 justify-content: center;
227 position: relative;
228 }
229
230 .projects-color-x {
231 font-size: 16px;
232 line-height: 1;
233 color: var(--color-text);
234 opacity: 0.7;
235 }
236
237 .projects-disabled {
238 opacity: 0.7;
239 }
240
241 .projects-input-with-button-wrapper {
242 display: flex;
243 gap: 0.5em;
244 align-items: center;
245 }
246
247 .projects-input-with-button-wrapper input {
248 flex-grow: 1;
249 }
250
251 @media (max-width: 640px) {
252 .projects-input-with-button-wrapper {
253 flex-direction: column;
254 align-items: stretch;
255 }
256 }
257
258 /* Git Status Styles */
259 .git-status-section .projects-form-label {
260 display: flex;
261 align-items: center;
262 gap: 0.5em;
263 }
264
265 .git-status-section .git-icon {
266 font-size: 1.2em;
267 color: var(--color-primary);
268 }
269
270 .git-status-card {
271 background: var(--color-input);
272 border: 1px solid var(--color-border);
273 border-radius: 0.5em;
274 padding: 0.75em 1em;
275 }
276
277 .git-status-row {
278 display: flex;
279 align-items: flex-start;
280 gap: 1em;
281 padding: 0.5em 0;
282 border-bottom: 1px solid var(--color-border);
283 }
284
285 .git-status-row:last-child {
286 border-bottom: none;
287 }
288
289 .git-status-label {
290 display: flex;
291 align-items: center;
292 gap: 0.4em;
293 min-width: 100px;
294 font-size: 0.85em;
295 color: var(--color-text-secondary, #888);
296 }
297
298 .git-status-label .material-symbols-outlined {
299 font-size: 1.1em;
300 }
301
302 .git-status-value {
303 flex: 1;
304 font-size: 0.9em;
305 word-break: break-all;
306 }
307
308 .git-status-value-with-action {
309 flex: 1;
310 display: flex;
311 align-items: center;
312 gap: 0.5em;
313 }
314
315 .git-action-link {
316 color: var(--color-primary);
317 opacity: 0.7;
318 transition: opacity 0.15s;
319 }
320
321 .git-action-link:hover {
322 opacity: 1;
323 }
324
325 .git-action-link .material-symbols-outlined {
326 font-size: 1.1em;
327 }
328
329 .git-url {
330 font-family: monospace;
331 font-size: 0.85em;
332 opacity: 0.9;
333 }
334
335 .git-branch {
336 font-family: monospace;
337 color: var(--color-primary);
338 font-weight: 500;
339 }
340
341 .git-clean {
342 color: #22c55e;
343 }
344
345 .git-dirty {
346 color: #f59e0b;
347 }
348
349 .git-commit-info {
350 display: flex;
351 flex-direction: column;
352 gap: 0.2em;
353 }
354
355 .git-commit-hash {
356 font-family: monospace;
357 color: var(--color-primary);
358 font-size: 0.9em;
359 }
360
361 .git-commit-message {
362 font-size: 0.9em;
363 }
364
365 .git-commit-meta {
366 font-size: 0.8em;
367 opacity: 0.7;
368 }
369
370 </style>
371
372 </html>