Skip to content

feat(dashboard): add copy to clipboard functionality for session IDs … #91

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mimamch merged 1 commit into from
Jan 19, 2026
Merged

feat(dashboard): add copy to clipboard functionality for session IDs … #91

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions assets/js/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,3 +30,22 @@ sendButton?.addEventListener("click", async () => {

alert("Failed to send message.");
});

/**
* Copy to Clipboard Functionality
*/

document.querySelectorAll("[data-copy]").forEach((button) => {
button.addEventListener("click", async (e) => {
e.stopPropagation();
const textToCopy = button.getAttribute("data-copy");
if (!textToCopy) return;

try {
await navigator.clipboard.writeText(textToCopy);
alert("Copied to clipboard!");
} catch (err) {
alert("Failed to copy text: " + err);
}
});
});
27 changes: 27 additions & 0 deletions assets/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
--color-green-500: oklch(72.3% 0.219 149.579);
--color-green-600: oklch(62.7% 0.194 149.214);
--color-blue-100: oklch(93.2% 0.032 255.585);
--color-blue-500: oklch(62.3% 0.214 259.815);
--color-gray-100: oklch(96.7% 0.003 264.542);
--color-gray-200: oklch(92.8% 0.006 264.531);
--color-gray-300: oklch(87.2% 0.01 258.338);
Expand Down Expand Up @@ -238,6 +239,9 @@
.hidden {
display: none;
}
.inline-block {
display: inline-block;
}
.h-auto {
height: auto;
}
Expand Down Expand Up @@ -319,6 +323,9 @@
.bg-gray-100 {
background-color: var(--color-gray-100);
}
.bg-gray-200 {
background-color: var(--color-gray-200);
}
.bg-green-100 {
background-color: var(--color-green-100);
}
Expand All @@ -334,6 +341,9 @@
.bg-white {
background-color: var(--color-white);
}
.p-1 {
padding: calc(var(--spacing) * 1);
}
.p-2 {
padding: calc(var(--spacing) * 2);
}
Expand Down Expand Up @@ -399,6 +409,9 @@
--tw-tracking: var(--tracking-tight);
letter-spacing: var(--tracking-tight);
}
.text-gray-400 {
color: var(--color-gray-400);
}
.text-gray-500 {
color: var(--color-gray-500);
}
Expand Down Expand Up @@ -460,13 +473,27 @@
color: var(--color-gray-400);
}
}
.hover\:bg-gray-200 {
&:hover {
@media (hover: hover) {
background-color: var(--color-gray-200);
}
}
}
.hover\:bg-green-500 {
&:hover {
@media (hover: hover) {
background-color: var(--color-green-500);
}
}
}
.hover\:text-gray-700 {
&:hover {
@media (hover: hover) {
color: var(--color-gray-700);
}
}
}
.hover\:underline {
&:hover {
@media (hover: hover) {
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "wa-gateway",
"version": "4.6.0",
"version": "4.6.1",
"type": "module",
"scripts": {
"dev": "tsx watch src/index.ts",
Expand Down
27 changes: 26 additions & 1 deletion src/views/dashboard/sessions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,32 @@ const SessionPage: FC<{
</div>
</div>
<div className="text-start">
<h2 className="text-xl font-semibold">{session.session}</h2>
<p className="text-gray-500 text-sm font-semibold">
Session ID:
</p>
<h2 className="text-xl font-semibold">
{session.session}{" "}
<button
data-copy={session.session}
className="p-1 cursor-pointer inline-block bg-gray-200 rounded-full text-gray-500 hover:bg-gray-200 hover:text-gray-700 transition-colors"
>
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="inline-block text-gray-400"
>
<path
d="M5 2V1H10V2H5ZM4.75 0C4.33579 0 4 0.335786 4 0.75V1H3.5C2.67157 1 2 1.67157 2 2.5V12.5C2 13.3284 2.67157 14 3.5 14H7V13H3.5C3.22386 13 3 12.7761 3 12.5V2.5C3 2.22386 3.22386 2 3.5 2H4V2.25C4 2.66421 4.33579 3 4.75 3H10.25C10.6642 3 11 2.66421 11 2.25V2H11.5C11.7761 2 12 2.22386 12 2.5V7H13V2.5C13 1.67157 12.3284 1 11.5 1H11V0.75C11 0.335786 10.6642 0 10.25 0H4.75ZM9 8.5C9 8.77614 8.77614 9 8.5 9C8.22386 9 8 8.77614 8 8.5C8 8.22386 8.22386 8 8.5 8C8.77614 8 9 8.22386 9 8.5ZM10.5 9C10.7761 9 11 8.77614 11 8.5C11 8.22386 10.7761 8 10.5 8C10.2239 8 10 8.22386 10 8.5C10 8.77614 10.2239 9 10.5 9ZM13 8.5C13 8.77614 12.7761 9 12.5 9C12.2239 9 12 8.77614 12 8.5C12 8.22386 12.2239 8 12.5 8C12.7761 8 13 8.22386 13 8.5ZM14.5 9C14.7761 9 15 8.77614 15 8.5C15 8.22386 14.7761 8 14.5 8C14.2239 8 14 8.22386 14 8.5C14 8.77614 14.2239 9 14.5 9ZM15 10.5C15 10.7761 14.7761 11 14.5 11C14.2239 11 14 10.7761 14 10.5C14 10.2239 14.2239 10 14.5 10C14.7761 10 15 10.2239 15 10.5ZM14.5 13C14.7761 13 15 12.7761 15 12.5C15 12.2239 14.7761 12 14.5 12C14.2239 12 14 12.2239 14 12.5C14 12.7761 14.2239 13 14.5 13ZM14.5 15C14.7761 15 15 14.7761 15 14.5C15 14.2239 14.7761 14 14.5 14C14.2239 14 14 14.2239 14 14.5C14 14.7761 14.2239 15 14.5 15ZM8.5 11C8.77614 11 9 10.7761 9 10.5C9 10.2239 8.77614 10 8.5 10C8.22386 10 8 10.2239 8 10.5C8 10.7761 8.22386 11 8.5 11ZM9 12.5C9 12.7761 8.77614 13 8.5 13C8.22386 13 8 12.7761 8 12.5C8 12.2239 8.22386 12 8.5 12C8.77614 12 9 12.2239 9 12.5ZM8.5 15C8.77614 15 9 14.7761 9 14.5C9 14.2239 8.77614 14 8.5 14C8.22386 14 8 14.2239 8 14.5C8 14.7761 8.22386 15 8.5 15ZM11 14.5C11 14.7761 10.7761 15 10.5 15C10.2239 15 10 14.7761 10 14.5C10 14.2239 10.2239 14 10.5 14C10.7761 14 11 14.2239 11 14.5ZM12.5 15C12.7761 15 13 14.7761 13 14.5C13 14.2239 12.7761 14 12.5 14C12.2239 14 12 14.2239 12 14.5C12 14.7761 12.2239 15 12.5 15Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path>
</svg>
</button>
</h2>
<p className="text-gray-500 text-sm">
Status: {session.status?.toUpperCase()}
</p>
Expand Down