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

Compare commits

base: jamie/ssh:d81136fe5e259d751662f1fcf47702ebdf855d63
Branches Tags
jamie/ssh:main
jamie/ssh:v1.2.2 jamie/ssh:v1.2.1 jamie/ssh:v1.2.0 jamie/ssh:v1.1.1 jamie/ssh:v1.1.0 jamie/ssh:v1.0.0
...
compare: jamie/ssh:053c9e8431489c3f3ef017b5c390a24790a07f90
Branches Tags
jamie/ssh:main
jamie/ssh:v1.2.2 jamie/ssh:v1.2.1 jamie/ssh:v1.2.0 jamie/ssh:v1.1.1 jamie/ssh:v1.1.0 jamie/ssh:v1.0.0

2 Commits
d81136fe5e ... 053c9e8431

Author SHA1 Message Date
jamie 053c9e8431 feat: add tab dragging and multi-pane split view support to App layout 2026-06-19 19:42:59 +01:00
jamie 59d216f697 chore: rename application title from JDB-NET SSH to SSH across UI components 2026-06-19 19:34:58 +01:00
3 changed files with 75 additions and 25 deletions
Expand all files Collapse all files
frontend/index.html
+1 -1
View File
@@ -16,7 +16,7 @@
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<title>JDB-NET SSH</title> <title>SSH</title>
</head> </head>
<body class="bg-surface text-slate-200 antialiased"> <body class="bg-surface text-slate-200 antialiased">
<div id="app"></div> <div id="app"></div>
frontend/src/App.vue
+73 -23
View File
@@ -33,8 +33,42 @@ const breadcrumb = ref<{ id: number; label: string }[]>([]);
const searchActive = ref(false); const searchActive = ref(false);
const currentFolderId = ref<number | null>(null); const currentFolderId = ref<number | null>(null);
const searchQuery = ref(""); const searchQuery = ref("");
const tabs = ref<TabItem[]>([]); const tabs = ref<{ id: string; hostId: number; label: string }[]>([]);
const activeTabId = ref<string | null>(null); const activePanes = ref<string[]>([]);
const draggedTabId = ref<string | null>(null);
function onTabDragStart(id: string) {
draggedTabId.value = id;
}
function onTabDrop(targetId: string) {
if (!draggedTabId.value || draggedTabId.value === targetId) return;
const from = tabs.value.findIndex((t) => t.id === draggedTabId.value);
const to = tabs.value.findIndex((t) => t.id === targetId);
if (from === -1 || to === -1) return;
const [t] = tabs.value.splice(from, 1);
tabs.value.splice(to, 0, t);
draggedTabId.value = null;
}
function onTabDragEnd() {
draggedTabId.value = null;
}
function onSplitDrop() {
if (!draggedTabId.value || activePanes.value.includes(draggedTabId.value)) {
draggedTabId.value = null;
return;
}
if (activePanes.value.length >= 2) {
activePanes.value = [activePanes.value[0], draggedTabId.value];
} else if (activePanes.value.length === 1) {
activePanes.value.push(draggedTabId.value);
} else {
activePanes.value = [draggedTabId.value];
}
draggedTabId.value = null;
}
const loadErr = ref(""); const loadErr = ref("");
const hostSortOrder = ref<"name" | "last_connected">("name"); const hostSortOrder = ref<"name" | "last_connected">("name");
/** Narrow viewports: slide-over hosts panel; md+ sidebar stays visible */ /** Narrow viewports: slide-over hosts panel; md+ sidebar stays visible */
@@ -236,9 +270,10 @@ async function onLoggedIn() {
async function logout() { async function logout() {
await api.logout(); await api.logout();
tabs.value = []; tabs.value = [];
activeTabId.value = null; activePanes.value = [];
loggedIn.value = false; allHosts.value = [];
loggedIn.value = false;
} }
function fmtDate(ts: string | null): string { function fmtDate(ts: string | null): string {
@@ -403,7 +438,7 @@ function fmtScopes(scopes: string[]): string {
function openTab(h: HostRow) { function openTab(h: HostRow) {
const id = crypto.randomUUID(); const id = crypto.randomUUID();
tabs.value.push({ id, hostId: h.id, label: h.label }); tabs.value.push({ id, hostId: h.id, label: h.label });
activeTabId.value = id; activePanes.value = [id];
if (window.matchMedia("(max-width: 767px)").matches) { if (window.matchMedia("(max-width: 767px)").matches) {
sidebarOpen.value = false; sidebarOpen.value = false;
} }
@@ -415,8 +450,9 @@ function toggleSidebar() {
function closeTab(id: string) { function closeTab(id: string) {
tabs.value = tabs.value.filter((t) => t.id !== id); tabs.value = tabs.value.filter((t) => t.id !== id);
if (activeTabId.value === id) { activePanes.value = activePanes.value.filter((p) => p !== id);
activeTabId.value = tabs.value.length ? tabs.value[tabs.value.length - 1].id : null; if (activePanes.value.length === 0 && tabs.value.length) {
activePanes.value = [tabs.value[tabs.value.length - 1].id];
} }
} }
@@ -641,10 +677,9 @@ async function deleteHostRow(id: number) {
await api.deleteHost(id); await api.deleteHost(id);
allHosts.value = allHosts.value.filter((h) => h.id !== id); allHosts.value = allHosts.value.filter((h) => h.id !== id);
tabs.value = tabs.value.filter((t) => t.hostId !== id); tabs.value = tabs.value.filter((t) => t.hostId !== id);
if (!tabs.value.some((t) => t.id === activeTabId.value)) { activePanes.value = activePanes.value.filter(p => tabs.value.some(t => t.id === p));
activeTabId.value = tabs.value.length if (activePanes.value.length === 0 && tabs.value.length) {
? tabs.value[tabs.value.length - 1].id activePanes.value = [tabs.value[tabs.value.length - 1].id];
: null;
} }
await refreshBrowse(); await refreshBrowse();
} }
@@ -697,7 +732,7 @@ async function deleteIdentityRow(id: number) {
</svg> </svg>
</button> </button>
<div class="flex items-center gap-2 truncate"> <div class="flex items-center gap-2 truncate">
<span class="truncate text-sm font-semibold text-white">JDB-NET SSH</span> <span class="truncate text-sm font-semibold text-white">SSH</span>
<a <a
href="https://git.jdbnet.co.uk/jamie/ssh" href="https://git.jdbnet.co.uk/jamie/ssh"
target="_blank" target="_blank"
@@ -1003,13 +1038,19 @@ async function deleteIdentityRow(id: number) {
v-for="t in tabs" v-for="t in tabs"
:key="t.id" :key="t.id"
type="button" type="button"
class="flex items-center gap-2 rounded-t-lg border border-b-0 px-3 py-2 text-sm" draggable="true"
:class=" @dragstart="onTabDragStart(t.id)"
t.id === activeTabId @dragover.prevent
@drop="onTabDrop(t.id)"
@dragend="onTabDragEnd"
class="flex items-center gap-2 rounded-t-lg border border-b-0 px-3 py-2 text-sm transition-colors"
:class="[
activePanes.includes(t.id)
? 'border-slate-700 bg-surface text-white' ? 'border-slate-700 bg-surface text-white'
: 'border-transparent bg-transparent text-slate-400 hover:text-white' : 'border-transparent bg-transparent text-slate-400 hover:text-white',
" draggedTabId && draggedTabId !== t.id ? 'hover:bg-slate-800/50' : ''
@click="activeTabId = t.id" ]"
@click="activePanes = [t.id]"
> >
{{ t.label }} {{ t.label }}
<span <span
@@ -1018,19 +1059,28 @@ async function deleteIdentityRow(id: number) {
>×</span> >×</span>
</button> </button>
</div> </div>
<div class="min-h-0 flex-1 p-2 md:p-3"> <div class="relative min-h-0 flex-1 flex flex-row gap-2 p-2 md:p-3">
<div <div
v-for="t in tabs" v-for="t in tabs"
v-show="t.id === activeTabId" v-show="activePanes.includes(t.id)"
:key="t.id" :key="t.id"
class="h-full min-h-0" class="flex-1 min-w-0 h-full"
> >
<TabContent <TabContent
:host-id="t.hostId" :host-id="t.hostId"
:visible="t.id === activeTabId" :visible="activePanes.includes(t.id)"
:show-sftp="showSftpPanel" :show-sftp="showSftpPanel"
/> />
</div> </div>
<div
v-if="draggedTabId && activePanes.length === 1 && !activePanes.includes(draggedTabId)"
class="absolute inset-y-2 right-2 md:inset-y-3 md:right-3 w-[calc(50%-0.25rem)] z-50 flex items-center justify-center rounded-lg border-2 border-dashed border-accent bg-accent/10 backdrop-blur-[2px] transition-all"
@dragover.prevent
@drop="onSplitDrop"
>
<span class="font-medium text-accent">Drop to split side-by-side</span>
</div>
</div> </div>
</template> </template>
</main> </main>
frontend/src/components/LoginForm.vue
+1 -1
View File
@@ -31,7 +31,7 @@ async function submit() {
class="w-full max-w-md rounded-xl border border-slate-800 bg-surface-raised p-8 shadow-xl" class="w-full max-w-md rounded-xl border border-slate-800 bg-surface-raised p-8 shadow-xl"
> >
<h1 class="font-sans text-2xl font-semibold tracking-tight text-white"> <h1 class="font-sans text-2xl font-semibold tracking-tight text-white">
JDB-NET SSH SSH
</h1> </h1>
<p class="mt-1 text-sm text-slate-400"> <p class="mt-1 text-sm text-slate-400">
Sign in to manage connections and open terminals. Sign in to manage connections and open terminals.