c8cf9c7df7
Extract Navbar, MobileNav, and UserMenu from AuthenticatedLayout.tsx. Extract SessionTable, SessionDeck, and SessionsScript from SessionsPage.tsx. Preserves existing pure Hono SSR JSX and logic. Co-authored-by: mrteye <1945243+mrteye@users.noreply.github.com>
115 lines
4.6 KiB
TypeScript
115 lines
4.6 KiB
TypeScript
export const SessionDeck = (
|
|
{ sessions, currentSessionId}: {
|
|
sessions: any[];
|
|
currentSessionId: string;
|
|
},
|
|
) => {
|
|
return (
|
|
<div
|
|
class="mobile-only"
|
|
style="display: flex; flex-direction: column; gap: 1rem;"
|
|
>
|
|
{sessions.length === 0
|
|
? (
|
|
<div class="card" style="text-align: center; padding: 2rem;">
|
|
<p style="color: var(--text-muted); margin: 0;">
|
|
No active sessions found.
|
|
</p>
|
|
</div>
|
|
)
|
|
: (
|
|
sessions.map((session) => {
|
|
const isCurrent = session.id === currentSessionId;
|
|
const isAgent = !!session.is_agent;
|
|
const scopes = Array.isArray(session.custom_scopes)
|
|
? session.custom_scopes
|
|
: [];
|
|
|
|
return (
|
|
<div class="card" key={session.id} style="margin-bottom: 0;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem;">
|
|
<div style="display: flex; align-items: center; gap: 0.65rem;">
|
|
<div style="display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: var(--surface-muted); border-radius: var(--radius-md); font-size: 1.2rem;">
|
|
{isAgent ? "🔑" : isCurrent ? "📱" : "💻"}
|
|
</div>
|
|
<div>
|
|
<div style="font-weight: 700; font-size: 0.95rem; color: var(--text-primary);">
|
|
{session.label ||
|
|
(isCurrent ? "This Device" : "Remote Device")}
|
|
</div>
|
|
<div style="font-size: 0.75rem; color: var(--text-muted); font-family: monospace;">
|
|
{session.id.substring(0, 14)}...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{isAgent
|
|
? <span class="badge badge-info">Delegated</span>
|
|
: isCurrent
|
|
? <span class="badge badge-success">Active Now</span>
|
|
: <span class="badge badge-secondary">Active</span>}
|
|
</div>
|
|
|
|
<div style="font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 1rem; line-height: 1.6;">
|
|
{isAgent && (
|
|
<div style="margin-bottom: 0.25rem;">
|
|
<strong>Scopes:</strong>{" "}
|
|
{scopes.length > 0 ? scopes.join(", ") : "Delegated"}
|
|
</div>
|
|
)}
|
|
<div>
|
|
<strong>Expires:</strong>{" "}
|
|
{new Date(session.expires_at).toLocaleString()}
|
|
</div>
|
|
{session.last_activity_action && (
|
|
<div>
|
|
<strong>Last Active:</strong>{" "}
|
|
{session.last_activity_action} ({new Date(
|
|
session.last_activity_at || session.created_at,
|
|
).toLocaleTimeString()})
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 0.5rem;">
|
|
{isAgent && (
|
|
<>
|
|
<button
|
|
type="button"
|
|
class="btn-outline"
|
|
style="flex: 1; justify-content: center; min-height: 38px; font-size: 0.8rem;"
|
|
onclick={`extendSession('${session.id}', 1)`}
|
|
>
|
|
+1h Extend
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="btn-outline"
|
|
style="flex: 1; justify-content: center; min-height: 38px; font-size: 0.8rem;"
|
|
onclick={`openEditScopesModal('${session.id}', '${
|
|
session.label || "Delegated"
|
|
}', ${JSON.stringify(JSON.stringify(scopes))})`}
|
|
>
|
|
Scopes
|
|
</button>
|
|
</>
|
|
)}
|
|
{!isCurrent && (
|
|
<button
|
|
type="button"
|
|
class="btn-danger revoke-btn"
|
|
data-session-id={session.id}
|
|
style="flex: 1; justify-content: center; min-height: 38px; font-size: 0.85rem;"
|
|
>
|
|
Revoke
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})
|
|
)}
|
|
</div>
|
|
);
|
|
};
|