projects selector dropdown polish
3clyp50 committed
Jan 4, 2026 at 02:58 UTC
3e07fd0cdabd84479913be34db3e9b6ef1acf0f2
1 file changed
+23
-70
webui/components/projects/project-selector.html
+23
-70
@@ -8,7 +8,7 @@
8
</head>
9
10
<body>
11
- <div x-data="{ open: false }" @click.away="open = false" class="project-dropdown-container">
11
+ <div x-data="{ open: false }" @click.outside="open = false" @keydown.escape.window="open = false" class="dropdown project-dropdown-container">
12
<template x-if="$store.projects && $store.chats && $store.chats.selectedContext">
13
<div>
14
<template x-if="$store.chats.selectedContext.project?.name">
@@ -25,18 +25,30 @@
25
</button>
26
</template>
27
28
- <div x-show="open" x-init="$store.projects.loadProjectsList()" class="project-dropdown-menu" style="display: none;" x-transition>
29
- <a href="#" @click.prevent="$store.projects.openProjectsModal(); open = false;" class="project-dropdown-item"><span class="icon material-symbols-outlined">snippet_folder</span> <span class="project-selector-item-text">Projects</span></a>
30
- <a x-show="$store.chats.selectedContext.project?.name" href="#" @click.prevent="$store.projects.editActiveProject(); open = false;" class="project-dropdown-item"><span class="icon material-symbols-outlined">edit</span> <span class="project-selector-item-text">Edit <span x-text="$store.chats.selectedContext.project?.title"></span></span></a>
31
- <a x-show="$store.chats.selectedContext.project?.name" href="#" @click.prevent="$store.projects.deactivateProject(); open = false;" class="project-dropdown-item"><span class="icon material-symbols-outlined">close</span> <span class="project-selector-item-text">Deactivate</span></a>
32
- <!-- <a href="#" @click.prevent="$store.projects.openProjectsModal(); $store.projects.openCreateModal(); open = false;" class="project-dropdown-item">Create Project</a> -->
33
-
34
- <hr x-show=" $store.projects.projectList.length > 0" class="project-dropdown-divider">
28
+ <div x-show="open" x-init="$store.projects.loadProjectsList()" class="dropdown-menu" style="display: none;" x-transition>
29
+ <button type="button" @click="$store.projects.openProjectsModal(); open = false;" class="dropdown-item">
30
+ <span class="icon material-symbols-outlined">snippet_folder</span>
31
+ <span>Projects</span>
32
+ </button>
33
+
34
+ <button type="button" x-show="$store.chats.selectedContext.project?.name" @click="$store.projects.editActiveProject(); open = false;" class="dropdown-item">
35
+ <span class="icon material-symbols-outlined">edit</span>
36
+ <span>Edit <span x-text="$store.chats.selectedContext.project?.title"></span></span>
37
+ </button>
38
+
39
+ <button type="button" x-show="$store.chats.selectedContext.project?.name" @click="$store.projects.deactivateProject(); open = false;" class="dropdown-item">
40
+ <span class="icon material-symbols-outlined">close</span>
41
+ <span>Deactivate</span>
42
+ </button>
43
+
44
+ <div x-show="$store.projects.projectList.length > 0" class="dropdown-separator"></div>
45
+ <div x-show="$store.projects.projectList.length > 0" class="dropdown-header">Switch Project</div>
46
+
47
<template x-for="project in $store.projects.projectList" :key="project.name">
36
- <a href="#" @click.prevent="$store.projects.activateProject(project.name); open = false;" class="project-dropdown-item">
48
+ <button type="button" @click="$store.projects.activateProject(project.name); open = false;" class="dropdown-item">
49
<span class="project-color-ball" :style="project.color ? { backgroundColor: project.color } : { border: '1px solid var(--color-border)' }"></span>
38
- <span class="project-selector-item-text" x-text="project.title"></span>
39
- </a>
50
+ <span x-text="project.title"></span>
51
+ </button>
52
</template>
53
</div>
54
</div>
@@ -45,11 +57,6 @@
57
</body>
58
59
<style>
48
- .project-dropdown-container {
49
- position: relative;
50
- display: inline-block;
51
- }
52
-
60
.project-dropdown-button {
61
display: inline-flex;
62
align-items: center;
@@ -57,59 +64,5 @@
64
padding-left: 0.5em;
65
padding-right: 0.5em;
66
}
60
-
61
- .project-color-ball {
62
- width: 0.6em;
63
- height: 0.6em;
64
- border-radius: 50%;
65
- display: inline-block;
66
- box-sizing: border-box;
67
- flex-shrink: 0;
68
- }
69
-
70
- .project-dropdown-menu {
71
- position: absolute;
72
- top: 100%;
73
- right: 0;
74
- z-index: 1000;
75
- background-color: var(--color-panel);
76
- border: 1px solid var(--color-border);
77
- border-radius: 4px;
78
- padding: 0.5em 0;
79
- min-width: 10rem;
80
- max-width: 20em;
81
- max-height: 70vh;
82
- overflow-y: auto;
83
- margin-top: 0.25rem;
84
- }
85
-
86
- .project-dropdown-item {
87
- display: flex;
88
- align-items: center;
89
- margin: 0.25em 0.5em 0.25em 0.5em;
90
- padding: 0.5em 1em;
91
- color: var(--color-text-primary);
92
- border-radius: var(--spacing-xs);
93
- text-decoration: none;
94
- white-space: nowrap;
95
- overflow: hidden;
96
- text-overflow: ellipsis;
97
- }
98
-
99
- .project-dropdown-item:hover {
100
- background-color: var(--color-background-hover);
101
- }
102
-
103
- .project-dropdown-divider {
104
- height: 1px;
105
- margin: 0.5rem 0;
106
- overflow: hidden;
107
- background-color: var(--color-border);
108
- border: 0;
109
- }
110
-
111
- .project-selector-item-text {
112
- margin-left: 0.5em;
113
- }
67
</style>
68
</html>