jamie/ssh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 6 Wiki Activity

feat: ✨ add tags

Browse Source
This commit is contained in:
Jamie
2026-05-23 15:36:46 +00:00
parent 0664d8763d
commit c7ffdf81c2
4 changed files with 339 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.vue
+64 -4
View File
@@ -12,6 +12,7 @@ import {
} from "@/api";
import LoginForm from "@/components/LoginForm.vue";
import TabContent from "@/components/TabContent.vue";
import TagInput from "@/components/TagInput.vue";
interface TabItem {
id: string;
@@ -25,6 +26,7 @@ const appVersion = ref("unknown");
const identities = ref<IdentityRow[]>([]);
const allHosts = ref<HostRow[]>([]);
const allFolders = ref<FolderRow[]>([]);
const allTags = ref<string[]>([]);
const browseFolders = ref<FolderRow[]>([]);
const browseHosts = ref<HostRow[]>([]);
const breadcrumb = ref<{ id: number; label: string }[]>([]);
@@ -93,6 +95,7 @@ const hostForm = ref({
label: "",
hostname: "",
port: 22,
tags: "",
use_inline_identity: false,
identity_id: 0 as number,
auth_type: "password" as "password" | "publickey",
@@ -107,6 +110,7 @@ const editHostForm = ref({
label: "",
hostname: "",
port: 22,
tags: "",
use_inline_identity: false,
identity_id: 0,
auth_type: "password" as "password" | "publickey",
@@ -134,6 +138,18 @@ function folderOptionLabel(id: number | null): string {
return parts.join(" / ") || `#${id}`;
}
function parseTagsInput(raw: string): string[] {
const seen = new Set<string>();
const tags: string[] = [];
for (const part of raw.split(",")) {
const name = part.trim().toLowerCase().replace(/\s+/g, "");
if (!name || seen.has(name)) continue;
seen.add(name);
tags.push(name);
}
return tags.sort();
}
function getSortedBrowseHosts(): HostRow[] {
const hosts = [...browseHosts.value];
if (hostSortOrder.value === "last_connected") {
@@ -173,12 +189,18 @@ function goToFolder(id: number | null) {
void refreshBrowse();
}
function searchByTag(tag: string) {
searchQuery.value = `tag:${tag}`;
void refreshBrowse();
}
async function refreshData() {
loadErr.value = "";
try {
identities.value = await api.listIdentities();
allHosts.value = await api.listHosts();
allFolders.value = await api.listFoldersFlat();
allTags.value = await api.listTags();
if (!hostForm.value.identity_id && identities.value.length) {
hostForm.value.identity_id = identities.value[0].id;
}
@@ -488,6 +510,11 @@ async function submitHost() {
} else {
body.identity_id = f.identity_id;
}
const tags = parseTagsInput(f.tags);
if (tags.length) {
body.tags = tags;
}
await api.createHost(body);
showHostForm.value = false;
@@ -495,6 +522,7 @@ async function submitHost() {
label: "",
hostname: "",
port: 22,
tags: "",
use_inline_identity: false,
identity_id: hostForm.value.identity_id,
auth_type: "password",
@@ -542,6 +570,7 @@ function openEditHost(h: HostRow) {
label: h.label,
hostname: h.hostname,
port: h.port,
tags: (h.tags || []).join(", "),
use_inline_identity: hasInlineIdentity,
identity_id: h.identity_id || 0,
auth_type: (h.identity_auth_type as "password" | "publickey") || "password",
@@ -580,6 +609,8 @@ async function submitEditHost() {
} else {
body.identity_id = f.identity_id;
}
body.tags = parseTagsInput(f.tags);
await api.patchHost(f.id, body);
showEditHost.value = false;
@@ -718,7 +749,7 @@ async function deleteIdentityRow(id: number) {
<input
v-model="searchQuery"
type="search"
placeholder="Search in this folder…"
placeholder="Search…"
class="mt-2 w-full rounded-lg border border-slate-700 bg-surface-overlay px-2 py-1.5 text-xs text-white placeholder:text-slate-500 focus:border-accent focus:outline-none focus:ring-1 focus:ring-accent"
@input="onSearchInput"
>
@@ -728,9 +759,11 @@ async function deleteIdentityRow(id: number) {
>
Matches in
{{
currentFolderId == null
? "all folders"
: "this folder and below"
searchQuery.trim().toLowerCase().startsWith("tag:")
? "all folders (tag search)"
: currentFolderId == null
? "all folders"
: "this folder and below"
}}
</p>
<nav class="mt-2 flex flex-wrap items-center gap-1 text-[11px] text-slate-400">
@@ -846,6 +879,21 @@ async function deleteIdentityRow(id: number) {
>
via {{ h.jump_host_label || `#${h.jump_host_id}` }}
</p>
<div
v-if="h.tags?.length"
class="mt-1 flex flex-wrap gap-1"
>
<button
v-for="tag in h.tags"
:key="tag"
type="button"
class="rounded bg-slate-800 px-1.5 py-0.5 text-[10px] text-slate-400 hover:bg-slate-700 hover:text-accent"
:title="`Search tag:${tag}`"
@click.stop="searchByTag(tag)"
>
{{ tag }}
</button>
</div>
<p
v-if="searchActive"
class="mt-0.5 truncate text-[10px] text-slate-600"
@@ -1363,6 +1411,12 @@ async function deleteIdentityRow(id: number) {
max="65535"
class="mt-1 w-full rounded border border-slate-700 bg-surface-overlay px-2 py-1.5 text-sm"
/>
<label class="mt-3 block text-xs uppercase text-slate-500">Tags</label>
<TagInput v-model="hostForm.tags" :suggestions="allTags" />
<p class="mt-1 text-[10px] text-slate-500">
Comma-separated. Search with
<code class="text-slate-400">tag:name</code>.
</p>
<label class="mt-3 block text-xs uppercase text-slate-500">Credentials</label>
<div class="mt-1 flex gap-2">
<label class="flex items-center gap-2 cursor-pointer">
@@ -1574,6 +1628,12 @@ async function deleteIdentityRow(id: number) {
max="65535"
class="mt-1 w-full rounded border border-slate-700 bg-surface-overlay px-2 py-1.5 text-sm"
>
<label class="mt-3 block text-xs uppercase text-slate-500">Tags</label>
<TagInput v-model="editHostForm.tags" :suggestions="allTags" />
<p class="mt-1 text-[10px] text-slate-500">
Comma-separated. Search with
<code class="text-slate-400">tag:name</code>.
</p>
<label class="mt-3 block text-xs uppercase text-slate-500">Folder</label>
<select
class="mt-1 w-full rounded border border-slate-700 bg-surface-overlay px-2 py-1.5 text-sm"
frontend/src/api.ts
+7
View File
@@ -65,6 +65,12 @@ export const api = {
return d.items;
},
async listTags(): Promise<string[]> {
const res = await fetch("/api/tags", { credentials: "include" });
const d = await handle<{ items: string[] }>(res);
return d.items;
},
async listFoldersFlat(): Promise<FolderRow[]> {
const res = await fetch("/api/folders", { credentials: "include" });
const d = await handle<{ items: FolderRow[] }>(res);
@@ -312,6 +318,7 @@ export interface HostRow {
identity_auth_type: string;
folder_label?: string | null;
last_connected_at?: string | null;
tags?: string[];
}
export interface IdentityRow {
frontend/src/components/TagInput.vue
+97
View File
@@ -0,0 +1,97 @@
<script setup lang="ts">
import { computed, ref } from "vue";
const props = defineProps<{
modelValue: string;
suggestions: string[];
}>();
const emit = defineEmits<{
"update:modelValue": [value: string];
}>();
const focused = ref(false);
function normalizeTag(raw: string): string {
return raw.trim().toLowerCase().replace(/\s+/g, "");
}
function selectedTags(): Set<string> {
return new Set(parseTagsInput(props.modelValue));
}
function parseTagsInput(raw: string): string[] {
const seen = new Set<string>();
const tags: string[] = [];
for (const part of raw.split(",")) {
const name = normalizeTag(part);
if (!name || seen.has(name)) continue;
seen.add(name);
tags.push(name);
}
return tags;
}
function currentPartial(): string {
const val = props.modelValue;
const idx = val.lastIndexOf(",");
return normalizeTag(idx >= 0 ? val.slice(idx + 1) : val);
}
const filteredSuggestions = computed(() => {
const partial = currentPartial();
const selected = selectedTags();
return props.suggestions
.filter((tag) => {
if (selected.has(tag)) return false;
if (!partial) return true;
return tag.includes(partial);
})
.slice(0, 8);
});
const showSuggestions = computed(
() => focused.value && filteredSuggestions.value.length > 0,
);
function applySuggestion(tag: string) {
const val = props.modelValue;
const idx = val.lastIndexOf(",");
const prefix = idx >= 0 ? `${val.slice(0, idx + 1)} ` : "";
emit("update:modelValue", `${prefix}${tag}, `);
}
function onBlur() {
window.setTimeout(() => {
focused.value = false;
}, 150);
}
</script>
<template>
<div class="relative">
<input
:value="modelValue"
placeholder="buildagents, prod"
autocomplete="off"
class="mt-1 w-full rounded border border-slate-700 bg-surface-overlay px-2 py-1.5 text-sm"
@input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
@focus="focused = true"
@blur="onBlur"
/>
<ul
v-if="showSuggestions"
class="absolute z-20 mt-1 max-h-40 w-full overflow-auto rounded-lg border border-slate-700 bg-surface-raised py-1 shadow-lg"
>
<li v-for="tag in filteredSuggestions" :key="tag">
<button
type="button"
class="block w-full px-3 py-1.5 text-left text-sm text-slate-200 hover:bg-slate-800"
@mousedown.prevent="applySuggestion(tag)"
>
{{ tag }}
</button>
</li>
</ul>
</div>
</template>