agent-zero/webui/components/projects/project-edit.html
Alessandro 3aac30aa13 Refine project skills settings
Move the project skills section directly after project instructions in the edit modal, before file structure and secrets.

Simplify the skills guidance copy and clarify that global skills are inherited automatically by every project.
2026-05-12 04:29:54 +02:00

120 lines
4.8 KiB
HTML

<html>
<head>
<title>Edit project</title>
<script type="module">
import { store } from "/components/projects/projects-store.js";
</script>
</head>
<body>
<div x-data>
<template x-if="$store.projects && $store.projects.selectedProject">
<div>
<div class="buttons-container" style="margin: var(--spacing-md) var(--spacing-sm) var(--spacing-lg) var(--spacing-sm);">
<div class="buttons-left">
<button type="button" class="button cancel"
@click="$confirmClick($event, () => $store.projects.deleteProjectAndCloseModal())">Delete</button>
</div>
<div class="buttons-right">
<button type="button" class="button confirm"
@click="$store.projects.confirmEdit()">Save</button>
<button type="button" class="button cancel"
@click="$store.projects.cancelEdit()">Cancel</button>
</div>
</div>
<div class="project-detail">
<div class="project-detail-header">
<span class="projects-project-card-title">Basic info</span>
</div>
<x-component path="projects/project-edit-basic-data.html">
</x-component>
<div class="settings-advanced-section project-advanced-section" x-data="{ advOpen: false }">
<button type="button" class="settings-advanced-toggle" @click="advOpen = !advOpen">
<span class="material-symbols-outlined settings-advanced-toggle-icon"
:style="advOpen ? 'transform:rotate(90deg)' : ''">chevron_right</span>
<span>Advanced Settings</span>
</button>
<div class="settings-advanced-body" x-show="advOpen" x-transition.opacity style="display: none;">
<x-component path="projects/project-edit-llm.html">
</x-component>
</div>
</div>
</div>
<div class="project-detail">
<div class="project-detail-header">
<span class="projects-project-card-title">Instructions</span>
</div>
<x-component path="projects/project-edit-instructions.html">
</x-component>
</div>
<div class="project-detail">
<div class="project-detail-header">
<span class="projects-project-card-title">Skills</span>
</div>
<x-component path="projects/project-edit-skills.html">
</x-component>
</div>
<div class="project-detail">
<div class="project-detail-header">
<span class="projects-project-card-title">File structure</span>
</div>
<x-component path="projects/project-edit-file-structure.html">
</x-component>
</div>
<div class="project-detail">
<div class="project-detail-header">
<span class="projects-project-card-title">Secrets</span>
</div>
<x-component path="projects/project-edit-secrets.html">
</x-component>
</div>
<div class="buttons-container" style="margin: var(--spacing-md) var(--spacing-sm) var(--spacing-lg) var(--spacing-sm);">
<div class="buttons-left">
<button type="button" class="button cancel"
@click="$confirmClick($event, () => $store.projects.deleteProjectAndCloseModal())">Delete</button>
</div>
<div class="buttons-right">
<button type="button" class="button confirm"
@click="$store.projects.confirmEdit()">Save</button>
<button type="button" class="button cancel"
@click="$store.projects.cancelEdit()">Cancel</button>
</div>
</div>
</div>
</template>
</div>
</body>
<style>
.project-detail {
border: 1px solid var(--color-border);
border-radius: 0.5em;
padding: 1em;
margin: 1em;
background: var(--color-panel);
}
.project-detail-header {
margin-bottom: 1em;
}
.project-advanced-section {
border-top: 1px solid var(--color-border);
margin-top: 1em;
padding-top: 0.5em;
}
</style>
</html>