···

       
43
       
 
       
      margin-bottom: 1rem;

     

       
44
       
 
       
    }

     

       
45
       
 
       


     

       
46
       
-
       
    table {

     

       
47
       
-
       
      width: 100%;

     

       
48
       
-
       
      border-collapse: collapse;

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
49
       
 
       
      background: var(--background);

     

       
50
       
 
       
      border: 2px solid var(--secondary);

     

       
51
       
 
       
      border-radius: 8px;

     

       
52
       
-
       
      overflow: hidden;

     

       
0
       
 
       

     

       
53
       
 
       
    }

     

       
54
       
 
       


     

       
55
       
-
       
    thead {

     

       
56
       
-
       
      background: var(--primary);

     

       
57
       
-
       
      color: var(--white);

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
58
       
 
       
    }

     

       
59
       
 
       


     

       
60
       
-
       
    th {

     

       
61
       
-
       
      padding: 1rem;

     

       
62
       
-
       
      text-align: left;

     

       
63
       
-
       
      font-weight: 600;

     

       
64
       
 
       
    }

     

       
65
       
 
       


     

       
66
       
-
       
    td {

     

       
67
       
-
       
      padding: 1rem;

     

       
68
       
-
       
      border-top: 1px solid var(--secondary);

     

       
69
       
 
       
      color: var(--text);

     

       
0
       
 
       

     

       
70
       
 
       
    }

     

       
71
       
 
       


     

       
72
       
-
       
    tr:hover {

     

       
73
       
-
       
      background: color-mix(in srgb, var(--primary) 5%, transparent);

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
74
       
 
       
    }

     

       
75
       
 
       


     

       
76
       
 
       
    .class-info {

     
···

       
96
       
 
       
      color: var(--primary);

     

       
97
       
 
       
      padding: 0.25rem 0.5rem;

     

       
98
       
 
       
      border-radius: 4px;

     

       
99
       
-
       
      font-size: 0.75rem;

     

       
100
       
 
       
      font-weight: 500;

     

       
101
       
 
       
    }

     

       
102
       
 
       


     
···

       
107
       
 
       
    }

     

       
108
       
 
       


     

       
109
       
 
       
    .user-avatar {

     

       
110
       
-
       
      width: 2rem;

     

       
111
       
-
       
      height: 2rem;

     

       
112
       
 
       
      border-radius: 50%;

     

       
113
       
 
       
    }

     

       
114
       
 
       


     
···

       
117
       
 
       
      font-size: 0.875rem;

     

       
118
       
 
       
    }

     

       
119
       
 
       


     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
120
       
 
       
    .approve-btn {

     

       
121
       
 
       
      background: var(--accent);

     

       
122
       
 
       
      color: var(--white);

     

       
123
       
 
       
      border: none;

     

       
124
       
-
       
      padding: 0.5rem 1rem;

     

       
125
       
 
       
      border-radius: 4px;

     

       
126
       
 
       
      cursor: pointer;

     

       
127
       
 
       
      font-size: 0.875rem;

     

       
128
       
 
       
      font-weight: 600;

     

       
129
       
 
       
      transition: opacity 0.2s;

     

       
0
       
 
       

     

       
130
       
 
       
    }

     

       
131
       
 
       


     

       
132
       
 
       
    .approve-btn:hover:not(:disabled) {

     
···

       
138
       
 
       
      cursor: not-allowed;

     

       
139
       
 
       
    }

     

       
140
       
 
       


     

       
141
       
-
       
    .actions {

     

       
142
       
-
       
      display: flex;

     

       
143
       
-
       
      gap: 0.5rem;

     

       
144
       
-
       
    }

     

       
145
       
-
       


     

       
146
       
 
       
    .delete-btn {

     

       
147
       
 
       
      background: transparent;

     

       
148
       
 
       
      border: 2px solid #dc2626;

     

       
149
       
 
       
      color: #dc2626;

     

       
150
       
-
       
      padding: 0.5rem 1rem;

     

       
151
       
 
       
      border-radius: 4px;

     

       
152
       
 
       
      cursor: pointer;

     

       
153
       
 
       
      font-size: 0.875rem;

     
···

       
322
       
 
       
		}

     

       
323
       
 
       


     

       
324
       
 
       
		return html`

     

       
325
       
-
       
      <table>

     

       
326
       
-
       
        <thead>

     

       
327
       
-
       
          <tr>

     

       
328
       
-
       
            <th>File Name</th>

     

       
329
       
-
       
            <th>Class</th>

     

       
330
       
-
       
            <th>Meeting Time</th>

     

       
331
       
-
       
            <th>Uploaded By</th>

     

       
332
       
-
       
            <th>Uploaded At</th>

     

       
333
       
-
       
            <th>Actions</th>

     

       
334
       
-
       
          </tr>

     

       
335
       
-
       
        </thead>

     

       
336
       
-
       
        <tbody>

     

       
337
       
-
       
          ${this.recordings.map(

     

       
338
       
-
       
						(recording) => html`

     

       
339
       
-
       
            <tr>

     

       
340
       
-
       
              <td>${recording.original_filename}</td>

     

       
341
       
-
       
              <td>

     

       
342
       
-
       
                <div class="class-info">

     

       
343
       
-
       
                  <span class="course-code">${recording.course_code}</span>

     

       
344
       
-
       
                  <span class="class-name">${recording.class_name}</span>

     

       
345
       
 
       
                </div>

     

       
346
       
-
       
              </td>

     

       
347
       
-
       
              <td>

     

       
348
       
-
       
                ${

     

       
349
       
-
       
									recording.meeting_label

     

       
350
       
-
       
										? html`<span class="meeting-label">${recording.meeting_label}</span>`

     

       
351
       
-
       
										: html`<span style="color: var(--paynes-gray); font-style: italic;">Not specified</span>`

     

       
352
       
-
       
								}

     

       
353
       
-
       
              </td>

     

       
354
       
-
       
              <td>

     

       
355
       
-
       
                <div class="user-info">

     

       
356
       
-
       
                  <img

     

       
357
       
-
       
                    src="https://hostedboringavatars.vercel.app/api/marble?size=32&name=${recording.user_id}&colors=2d3142ff,4f5d75ff,bfc0c0ff,ef8354ff"

     

       
358
       
-
       
                    alt="Avatar"

     

       
359
       
-
       
                    class="user-avatar"

     

       
360
       
-
       
                  />

     

       
361
       
-
       
                  <span>${recording.user_name || recording.user_email}</span>

     

       
362
       
 
       
                </div>

     

       
363
       
-
       
              </td>

     

       
364
       
-
       
              <td class="timestamp">${this.formatTimestamp(recording.created_at)}</td>

     

       
365
       
-
       
              <td>

     

       
366
       
-
       
                <div class="actions">

     

       
367
       
-
       
                  <button class="approve-btn" @click=${() => this.handleApprove(recording.id)}>

     

       
368
       
-
       
                    ✓ Approve & Transcribe

     

       
369
       
-
       
                  </button>

     

       
370
       
-
       
                  <button class="delete-btn" @click=${() => this.handleDelete(recording.id)}>

     

       
371
       
-
       
                    Delete

     

       
372
       
-
       
                  </button>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
373
       
 
       
                </div>

     

       
374
       
-
       
              </td>

     

       
375
       
-
       
            </tr>

     

       
376
       
-
       
          `,

     

       
377
       
-
       
					)}

     

       
378
       
-
       
        </tbody>

     

       
379
       
-
       
      </table>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
380
       
 
       
    `;

     

       
381
       
 
       
	}

     

       
382
       
 
       
}

     

···

       
43
       
 
       
      margin-bottom: 1rem;

     

       
44
       
 
       
    }

     

       
45
       
 
       


     

       
46
       
+
       
    .recordings-grid {

     

       
47
       
+
       
      display: grid;

     

       
48
       
+
       
      gap: 1.5rem;

     

       
49
       
+
       
    }

     

       
50
       
+
       


     

       
51
       
+
       
    .recording-card {

     

       
52
       
 
       
      background: var(--background);

     

       
53
       
 
       
      border: 2px solid var(--secondary);

     

       
54
       
 
       
      border-radius: 8px;

     

       
55
       
+
       
      padding: 1.5rem;

     

       
56
       
+
       
      transition: border-color 0.2s;

     

       
57
       
 
       
    }

     

       
58
       
 
       


     

       
59
       
+
       
    .recording-card:hover {

     

       
60
       
+
       
      border-color: var(--primary);

     

       
61
       
+
       
    }

     

       
62
       
+
       


     

       
63
       
+
       
    .card-header {

     

       
64
       
+
       
      display: flex;

     

       
65
       
+
       
      justify-content: space-between;

     

       
66
       
+
       
      align-items: flex-start;

     

       
67
       
+
       
      margin-bottom: 1rem;

     

       
68
       
 
       
    }

     

       
69
       
 
       


     

       
70
       
+
       
    .file-info {

     

       
71
       
+
       
      flex: 1;

     

       
0
       
 
       

     

       
0
       
 
       

     

       
72
       
 
       
    }

     

       
73
       
 
       


     

       
74
       
+
       
    .filename {

     

       
75
       
+
       
      font-size: 1.125rem;

     

       
76
       
+
       
      font-weight: 600;

     

       
77
       
 
       
      color: var(--text);

     

       
78
       
+
       
      margin-bottom: 0.5rem;

     

       
79
       
 
       
    }

     

       
80
       
 
       


     

       
81
       
+
       
    .meta-row {

     

       
82
       
+
       
      display: flex;

     

       
83
       
+
       
      gap: 2rem;

     

       
84
       
+
       
      flex-wrap: wrap;

     

       
85
       
+
       
      margin-bottom: 1rem;

     

       
86
       
+
       
    }

     

       
87
       
+
       


     

       
88
       
+
       
    .meta-item {

     

       
89
       
+
       
      display: flex;

     

       
90
       
+
       
      flex-direction: column;

     

       
91
       
+
       
      gap: 0.25rem;

     

       
92
       
+
       
    }

     

       
93
       
+
       


     

       
94
       
+
       
    .meta-label {

     

       
95
       
+
       
      font-size: 0.75rem;

     

       
96
       
+
       
      font-weight: 600;

     

       
97
       
+
       
      text-transform: uppercase;

     

       
98
       
+
       
      color: var(--paynes-gray);

     

       
99
       
+
       
      letter-spacing: 0.05em;

     

       
100
       
+
       
    }

     

       
101
       
+
       


     

       
102
       
+
       
    .meta-value {

     

       
103
       
+
       
      font-size: 0.875rem;

     

       
104
       
+
       
      color: var(--text);

     

       
105
       
 
       
    }

     

       
106
       
 
       


     

       
107
       
 
       
    .class-info {

     
···

       
127
       
 
       
      color: var(--primary);

     

       
128
       
 
       
      padding: 0.25rem 0.5rem;

     

       
129
       
 
       
      border-radius: 4px;

     

       
130
       
+
       
      font-size: 0.875rem;

     

       
131
       
 
       
      font-weight: 500;

     

       
132
       
 
       
    }

     

       
133
       
 
       


     
···

       
138
       
 
       
    }

     

       
139
       
 
       


     

       
140
       
 
       
    .user-avatar {

     

       
141
       
+
       
      width: 1.5rem;

     

       
142
       
+
       
      height: 1.5rem;

     

       
143
       
 
       
      border-radius: 50%;

     

       
144
       
 
       
    }

     

       
145
       
 
       


     
···

       
148
       
 
       
      font-size: 0.875rem;

     

       
149
       
 
       
    }

     

       
150
       
 
       


     

       
151
       
+
       
    .audio-player {

     

       
152
       
+
       
      margin: 1rem 0;

     

       
153
       
+
       
    }

     

       
154
       
+
       


     

       
155
       
+
       
    .audio-player audio {

     

       
156
       
+
       
      width: 100%;

     

       
157
       
+
       
      height: 2.5rem;

     

       
158
       
+
       
    }

     

       
159
       
+
       


     

       
160
       
+
       
    .actions {

     

       
161
       
+
       
      display: flex;

     

       
162
       
+
       
      gap: 0.75rem;

     

       
163
       
+
       
      margin-top: 1rem;

     

       
164
       
+
       
    }

     

       
165
       
+
       


     

       
166
       
 
       
    .approve-btn {

     

       
167
       
 
       
      background: var(--accent);

     

       
168
       
 
       
      color: var(--white);

     

       
169
       
 
       
      border: none;

     

       
170
       
+
       
      padding: 0.75rem 1.5rem;

     

       
171
       
 
       
      border-radius: 4px;

     

       
172
       
 
       
      cursor: pointer;

     

       
173
       
 
       
      font-size: 0.875rem;

     

       
174
       
 
       
      font-weight: 600;

     

       
175
       
 
       
      transition: opacity 0.2s;

     

       
176
       
+
       
      flex: 1;

     

       
177
       
 
       
    }

     

       
178
       
 
       


     

       
179
       
 
       
    .approve-btn:hover:not(:disabled) {

     
···

       
185
       
 
       
      cursor: not-allowed;

     

       
186
       
 
       
    }

     

       
187
       
 
       


     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
188
       
 
       
    .delete-btn {

     

       
189
       
 
       
      background: transparent;

     

       
190
       
 
       
      border: 2px solid #dc2626;

     

       
191
       
 
       
      color: #dc2626;

     

       
192
       
+
       
      padding: 0.75rem 1.5rem;

     

       
193
       
 
       
      border-radius: 4px;

     

       
194
       
 
       
      cursor: pointer;

     

       
195
       
 
       
      font-size: 0.875rem;

     
···

       
364
       
 
       
		}

     

       
365
       
 
       


     

       
366
       
 
       
		return html`

     

       
367
       
+
       
      <div class="recordings-grid">

     

       
368
       
+
       
        ${this.recordings.map(

     

       
369
       
+
       
					(recording) => html`

     

       
370
       
+
       
          <div class="recording-card">

     

       
371
       
+
       
            <div class="card-header">

     

       
372
       
+
       
              <div class="file-info">

     

       
373
       
+
       
                <div class="filename">${recording.original_filename}</div>

     

       
374
       
+
       
              </div>

     

       
375
       
+
       
            </div>

     

       
376
       
+
       


     

       
377
       
+
       
            <div class="meta-row">

     

       
378
       
+
       
              <div class="meta-item">

     

       
379
       
+
       
                <div class="meta-label">Class</div>

     

       
380
       
+
       
                <div class="meta-value">

     

       
381
       
+
       
                  <div class="class-info">

     

       
382
       
+
       
                    <span class="course-code">${recording.course_code}</span>

     

       
383
       
+
       
                    <span class="class-name">${recording.class_name}</span>

     

       
384
       
+
       
                  </div>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
385
       
 
       
                </div>

     

       
386
       
+
       
              </div>

     

       
387
       
+
       


     

       
388
       
+
       
              <div class="meta-item">

     

       
389
       
+
       
                <div class="meta-label">Meeting Time</div>

     

       
390
       
+
       
                <div class="meta-value">

     

       
391
       
+
       
                  ${

     

       
392
       
+
       
										recording.meeting_label

     

       
393
       
+
       
											? html`<span class="meeting-label">${recording.meeting_label}</span>`

     

       
394
       
+
       
											: html`<span style="color: var(--paynes-gray); font-style: italic;">Not specified</span>`

     

       
395
       
+
       
									}

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
396
       
 
       
                </div>

     

       
397
       
+
       
              </div>

     

       
398
       
+
       


     

       
399
       
+
       
              <div class="meta-item">

     

       
400
       
+
       
                <div class="meta-label">Uploaded By</div>

     

       
401
       
+
       
                <div class="meta-value">

     

       
402
       
+
       
                  <div class="user-info">

     

       
403
       
+
       
                    <img

     

       
404
       
+
       
                      src="https://hostedboringavatars.vercel.app/api/marble?size=24&name=${recording.user_id}&colors=2d3142ff,4f5d75ff,bfc0c0ff,ef8354ff"

     

       
405
       
+
       
                      alt="Avatar"

     

       
406
       
+
       
                      class="user-avatar"

     

       
407
       
+
       
                    />

     

       
408
       
+
       
                    <span>${recording.user_name || recording.user_email}</span>

     

       
409
       
+
       
                  </div>

     

       
410
       
+
       
                </div>

     

       
411
       
+
       
              </div>

     

       
412
       
+
       


     

       
413
       
+
       
              <div class="meta-item">

     

       
414
       
+
       
                <div class="meta-label">Uploaded At</div>

     

       
415
       
+
       
                <div class="meta-value timestamp">

     

       
416
       
+
       
                  ${this.formatTimestamp(recording.created_at)}

     

       
417
       
 
       
                </div>

     

       
418
       
+
       
              </div>

     

       
419
       
+
       
            </div>

     

       
420
       
+
       


     

       
421
       
+
       
            <div class="audio-player">

     

       
422
       
+
       
              <audio controls preload="metadata" src="/api/transcriptions/${recording.id}/audio"></audio>

     

       
423
       
+
       
            </div>

     

       
424
       
+
       


     

       
425
       
+
       
            <div class="actions">

     

       
426
       
+
       
              <button class="approve-btn" @click=${() => this.handleApprove(recording.id)}>

     

       
427
       
+
       
                ✓ Approve & Transcribe

     

       
428
       
+
       
              </button>

     

       
429
       
+
       
              <button class="delete-btn" @click=${() => this.handleDelete(recording.id)}>

     

       
430
       
+
       
                Delete

     

       
431
       
+
       
              </button>

     

       
432
       
+
       
            </div>

     

       
433
       
+
       
          </div>

     

       
434
       
+
       
        `,

     

       
435
       
+
       
				)}

     

       
436
       
+
       
      </div>

     

       
437
       
 
       
    `;

     

       
438
       
 
       
	}

     

       
439
       
 
       
}