Spaces:
Sleeping
Sleeping
File size: 2,578 Bytes
1fff71f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 |
<script lang="ts">
import { sessionStore, activeSession } from '$lib/stores/session';
import { formatDateTime } from '$lib/utils/formatters';
import type { Session } from '$lib/types/api';
export let session: Session;
let updatingReference = false;
async function toggleReference() {
updatingReference = true;
await sessionStore.updateSessionReference(session.id, !session.is_reference);
updatingReference = false;
}
</script>
<div class="session-header border-bottom bg-white p-2 p-md-3 shadow-sm">
<div class="d-flex justify-content-between align-items-start">
<div class="flex-grow-1 min-w-0 me-2">
<div class="d-flex align-items-center mb-1 mb-md-2">
<h4 class="mb-0 me-2 text-truncate session-title">{session.title}</h4>
{#if session.is_reference}
<span class="badge bg-info flex-shrink-0">
<i class="bi bi-star-fill me-1"></i>
<span class="d-none d-md-inline">Reference</span>
</span>
{/if}
</div>
<div class="text-muted small session-meta">
<span class="d-inline-block">
<i class="bi bi-calendar3 me-1"></i>
<span class="d-none d-md-inline">Created </span>{formatDateTime(session.created_at)}
</span>
<span class="ms-2 ms-md-3 d-inline-block">
<i class="bi bi-chat-dots me-1"></i>
{session.messages.length} <span class="d-none d-sm-inline">messages</span>
</span>
</div>
</div>
<div class="btn-group flex-shrink-0" role="group">
<button
type="button"
class="btn btn-outline-secondary btn-sm"
class:active={session.is_reference}
on:click={toggleReference}
disabled={updatingReference}
title={session.is_reference ? 'Remove from reference' : 'Mark as reference'}
>
{#if updatingReference}
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
{:else}
<i class="bi bi-star{session.is_reference ? '-fill' : ''}"></i>
{/if}
</button>
</div>
</div>
</div>
<style>
.session-header {
position: sticky;
top: 0;
z-index: 10;
}
.min-w-0 {
min-width: 0;
}
.session-title {
font-size: 1.25rem;
}
.session-meta {
font-size: 0.875rem;
}
.btn-group .btn.active {
background-color: #0dcaf0;
border-color: #0dcaf0;
color: white;
}
/* Mobile optimizations */
@media (max-width: 576px) {
.session-title {
font-size: 1rem;
}
.session-meta {
font-size: 0.8125rem;
}
.badge {
font-size: 0.7rem;
padding: 0.2rem 0.35rem;
}
}
/* Tablet and up */
@media (min-width: 768px) {
.session-title {
font-size: 1.5rem;
}
}
</style>
|