@@ -41,6 +98,32 @@ function handleClick() {
{{ connection.host }}:{{ connection.port }}
@@ -111,6 +194,7 @@ function handleClick() {
gap: 4px;
opacity: 0;
transition: opacity 0.15s;
+ align-items: center;
}
.connection-card:hover .card-actions {
@@ -140,4 +224,61 @@ function handleClick() {
background: rgba(239, 68, 68, 0.15);
color: var(--danger);
}
+
+/* Color picker */
+.color-wrapper {
+ position: relative;
+ display: flex;
+ align-items: center;
+}
+
+.color-dot {
+ width: 14px !important;
+ height: 14px !important;
+ border-radius: 50% !important;
+ flex-shrink: 0;
+}
+
+.color-dropdown {
+ position: absolute;
+ top: 100%;
+ right: 0;
+ margin-top: 6px;
+ background: var(--bg-card);
+ border: 1px solid var(--border-color);
+ border-radius: var(--radius-sm);
+ padding: 6px;
+ display: flex;
+ gap: 4px;
+ z-index: 100;
+ box-shadow: var(--shadow-md);
+}
+
+.color-option {
+ width: 18px;
+ height: 18px;
+ border-radius: 50%;
+ border: 2px solid transparent;
+ cursor: pointer;
+ padding: 0;
+ transition: transform 0.15s;
+}
+
+.color-option:hover {
+ transform: scale(1.25);
+}
+
+.color-option.active {
+ border-color: var(--text-primary);
+}
+
+.color-clear {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 10px;
+ background: var(--bg-card-hover) !important;
+ color: var(--text-muted);
+ border-color: var(--border-color);
+}
diff --git a/src/components/ConnectionList.vue b/src/components/ConnectionList.vue
index 31e4daf..7daf961 100644
--- a/src/components/ConnectionList.vue
+++ b/src/components/ConnectionList.vue
@@ -10,6 +10,7 @@ import type { ConnectionConfig } from '@renderer/stores/connection'
const connStore = useConnectionStore()
const { t } = useI18n()
const searchQuery = ref('')
+const dragOverId = ref