d86642ce31
- Update `DELETE /api/sessions/:id` in `server/routes/sessions.ts` to allow event creators to delete guests' sessions. - Update page hierarchy and top headings in `ui/components/SessionsPage.tsx`. - Refactor `EventAttendeesDrawer.tsx` to `EventGuestsDrawer.tsx` as a fixed slide-over overlay. - Add multi-event compact view toggle with `localStorage` persistence in `EventCockpitDeck.tsx`. - Standardize dynamic countdown pills across `EventCockpitDeck.tsx`, `EventGuestsDrawer.tsx`, `SessionDeck.tsx`, and `SessionTable.tsx`. - Optimize mobile session deck in `SessionDeck.tsx`. Co-authored-by: mrteye <1945243+mrteye@users.noreply.github.com>
155 lines
6.3 KiB
TypeScript
155 lines
6.3 KiB
TypeScript
export const SessionTable = (
|
|
{ sessions, currentSessionId }: {
|
|
sessions: any[];
|
|
currentSessionId: string;
|
|
},
|
|
) => {
|
|
return (
|
|
<div class="card desktop-only" style="display: none;">
|
|
<div class="table-container">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Type & Label</th>
|
|
<th>Permissions</th>
|
|
<th>Activity</th>
|
|
<th>Expires</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{sessions.length === 0
|
|
? (
|
|
<tr>
|
|
<td
|
|
colSpan={5}
|
|
style="text-align: center; padding: 2rem; color: var(--text-muted);"
|
|
>
|
|
No active sessions found.
|
|
</td>
|
|
</tr>
|
|
)
|
|
: (
|
|
sessions.map((session) => {
|
|
const isCurrent = session.id === currentSessionId;
|
|
const isAgent = !!session.is_agent;
|
|
const scopes = Array.isArray(session.custom_scopes)
|
|
? session.custom_scopes
|
|
: [];
|
|
|
|
return (
|
|
<tr key={session.id}>
|
|
<td>
|
|
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
|
<span style="font-size: 1.1rem;">
|
|
{isAgent ? "🔑" : isCurrent ? "📱" : "💻"}
|
|
</span>
|
|
<div>
|
|
<strong style="color: var(--text-primary);">
|
|
{session.label ||
|
|
(isCurrent ? "This Device" : "Remote Device")}
|
|
</strong>
|
|
<div style="font-size: 0.75rem; color: var(--text-muted); font-family: monospace;">
|
|
{session.id.substring(0, 14)}...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
{isAgent
|
|
? (
|
|
<span class="badge badge-info">
|
|
{scopes.length > 0
|
|
? `${scopes.length} Scopes`
|
|
: "Delegated"}
|
|
</span>
|
|
)
|
|
: (
|
|
<span class="badge badge-success">
|
|
Interactive
|
|
</span>
|
|
)}
|
|
</td>
|
|
<td style="color: var(--text-secondary); font-size: 0.85rem;">
|
|
{session.last_activity_action
|
|
? (
|
|
<div>
|
|
<span style="color: var(--primary); font-family: monospace; font-size: 0.8rem;">
|
|
{session.last_activity_action}
|
|
</span>
|
|
<div style="font-size: 0.75rem; color: var(--text-muted);">
|
|
{new Date(
|
|
session.last_activity_at ||
|
|
session.created_at,
|
|
).toLocaleTimeString()}
|
|
</div>
|
|
</div>
|
|
)
|
|
: (
|
|
<span>
|
|
{new Date(session.created_at)
|
|
.toLocaleDateString()}
|
|
</span>
|
|
)}
|
|
</td>
|
|
<td style="color: var(--text-secondary); font-size: 0.85rem;">
|
|
<span
|
|
class="countdown-pill"
|
|
data-expires-at={session.expires_at}
|
|
>
|
|
⏳ 0h 0m left · (Expires{" "}
|
|
{new Date(session.expires_at).toLocaleTimeString([], {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
})})
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<div style="display: flex; gap: 0.35rem; align-items: center;">
|
|
{isAgent && (
|
|
<>
|
|
<button
|
|
type="button"
|
|
class="btn-outline"
|
|
style="padding: 0.25rem 0.5rem; font-size: 0.75rem; min-height: 30px;"
|
|
onclick={`extendSession('${session.id}', 1)`}
|
|
title="Extend session by 1 hour"
|
|
>
|
|
+1h
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="btn-outline"
|
|
style="padding: 0.25rem 0.5rem; font-size: 0.75rem; min-height: 30px;"
|
|
onclick={`openEditScopesModal('${session.id}', '${
|
|
session.label || "Delegated"
|
|
}', ${JSON.stringify(JSON.stringify(scopes))})`}
|
|
title="Edit permissions"
|
|
>
|
|
Scopes
|
|
</button>
|
|
</>
|
|
)}
|
|
{!isCurrent && (
|
|
<button
|
|
type="button"
|
|
class="btn-danger revoke-btn"
|
|
data-session-id={session.id}
|
|
style="padding: 0.25rem 0.65rem; font-size: 0.8rem; min-height: 30px;"
|
|
>
|
|
Revoke
|
|
</button>
|
|
)}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
);
|
|
})
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|