arabica.social
Coffee journaling on ATProto (alpha)
alpha.arabica.social
coffee
fix: misc fixes
pdewey.com
-1
frontend/src/components/Modal.svelte
-1
frontend/src/components/Modal.svelte
+41
-31
frontend/src/routes/BrewForm.svelte
+41
-31
frontend/src/routes/BrewForm.svelte
···
215
215
<form on:submit|preventDefault={handleSubmit} class="space-y-6">
216
216
<!-- Bean Selection -->
217
217
<div>
218
-
<label class="block text-sm font-medium text-brown-900 mb-2">Coffee Bean *</label>
218
+
<label for="bean-select" class="block text-sm font-medium text-brown-900 mb-2">Coffee Bean *</label>
219
219
<div class="flex gap-2">
220
220
<select
221
+
id="bean-select"
221
222
bind:value={form.bean_rkey}
222
223
required
223
224
class="flex-1 rounded-lg border-2 border-brown-300 shadow-sm focus:border-brown-600 focus:ring-brown-600 text-base py-3 px-4 truncate max-w-full bg-white"
···
241
242
242
243
<!-- Coffee Amount -->
243
244
<div>
244
-
<label class="block text-sm font-medium text-brown-900 mb-2">Coffee Amount (grams)</label>
245
+
<label for="coffee-amount" class="block text-sm font-medium text-brown-900 mb-2">Coffee Amount (grams)</label>
245
246
<input
247
+
id="coffee-amount"
246
248
type="number"
247
249
bind:value={form.coffee_amount}
248
250
step="0.1"
···
254
256
255
257
<!-- Grinder -->
256
258
<div>
257
-
<label class="block text-sm font-medium text-brown-900 mb-2">Grinder</label>
259
+
<label for="grinder-select" class="block text-sm font-medium text-brown-900 mb-2">Grinder</label>
258
260
<div class="flex gap-2">
259
261
<select
262
+
id="grinder-select"
260
263
bind:value={form.grinder_rkey}
261
264
class="flex-1 rounded-lg border-2 border-brown-300 shadow-sm focus:border-brown-600 focus:ring-brown-600 text-base py-3 px-4 truncate max-w-full bg-white"
262
265
>
···
277
280
278
281
<!-- Grind Size -->
279
282
<div>
280
-
<label class="block text-sm font-medium text-brown-900 mb-2">Grind Size</label>
283
+
<label for="grind-size" class="block text-sm font-medium text-brown-900 mb-2">Grind Size</label>
281
284
<input
285
+
id="grind-size"
282
286
type="text"
283
287
bind:value={form.grind_size}
284
288
placeholder="e.g. 18, Medium, 3.5, Fine"
···
289
293
290
294
<!-- Brew Method -->
291
295
<div>
292
-
<label class="block text-sm font-medium text-brown-900 mb-2">Brew Method</label>
296
+
<label for="brewer-select" class="block text-sm font-medium text-brown-900 mb-2">Brew Method</label>
293
297
<div class="flex gap-2">
294
298
<select
299
+
id="brewer-select"
295
300
bind:value={form.brewer_rkey}
296
301
class="flex-1 rounded-lg border-2 border-brown-300 shadow-sm focus:border-brown-600 focus:ring-brown-600 text-base py-3 px-4 truncate max-w-full bg-white"
297
302
>
···
312
317
313
318
<!-- Water Amount -->
314
319
<div>
315
-
<label class="block text-sm font-medium text-brown-900 mb-2">Water Amount (ml)</label>
320
+
<label for="water-amount" class="block text-sm font-medium text-brown-900 mb-2">Water Amount (ml)</label>
316
321
<input
322
+
id="water-amount"
317
323
type="number"
318
324
bind:value={form.water_amount}
319
325
step="1"
···
324
330
325
331
<!-- Water Temperature -->
326
332
<div>
327
-
<label class="block text-sm font-medium text-brown-900 mb-2">Water Temperature (°C)</label>
333
+
<label for="water-temp" class="block text-sm font-medium text-brown-900 mb-2">Water Temperature (°C)</label>
328
334
<input
335
+
id="water-temp"
329
336
type="number"
330
337
bind:value={form.water_temp}
331
338
step="0.1"
···
336
343
337
344
<!-- Brew Time -->
338
345
<div>
339
-
<label class="block text-sm font-medium text-brown-900 mb-2">Total Brew Time (seconds)</label>
346
+
<label for="brew-time" class="block text-sm font-medium text-brown-900 mb-2">Total Brew Time (seconds)</label>
340
347
<input
348
+
id="brew-time"
341
349
type="number"
342
350
bind:value={form.brew_time}
343
351
step="1"
···
349
357
<!-- Pours -->
350
358
<div>
351
359
<div class="flex items-center justify-between mb-2">
352
-
<label class="block text-sm font-medium text-brown-900">Pour Schedule (Optional)</label>
360
+
<span class="block text-sm font-medium text-brown-900">Pour Schedule (Optional)</span>
353
361
<button
354
362
type="button"
355
363
on:click={addPour}
···
391
399
392
400
<!-- Rating -->
393
401
<div>
394
-
<label class="block text-sm font-medium text-brown-900 mb-2">
402
+
<label for="rating" class="block text-sm font-medium text-brown-900 mb-2">
395
403
Rating: <span class="font-bold">{form.rating}/10</span>
396
404
</label>
397
405
<input
406
+
id="rating"
398
407
type="range"
399
408
bind:value={form.rating}
400
409
min="0"
···
410
419
411
420
<!-- Notes -->
412
421
<div>
413
-
<label class="block text-sm font-medium text-brown-900 mb-2">Tasting Notes</label>
422
+
<label for="notes" class="block text-sm font-medium text-brown-900 mb-2">Tasting Notes</label>
414
423
<textarea
424
+
id="notes"
415
425
bind:value={form.notes}
416
426
rows="4"
417
427
placeholder="Describe the flavor, aroma, body, etc."
···
450
460
>
451
461
<div class="space-y-4">
452
462
<div>
453
-
<label class="block text-sm font-medium text-gray-700 mb-1">Name</label>
454
-
<input type="text" bind:value={beanForm.name} class="w-full rounded border-gray-300 px-3 py-2" />
463
+
<label for="bean-name" class="block text-sm font-medium text-gray-700 mb-1">Name</label>
464
+
<input id="bean-name" type="text" bind:value={beanForm.name} class="w-full rounded border-gray-300 px-3 py-2" />
455
465
</div>
456
466
<div>
457
-
<label class="block text-sm font-medium text-gray-700 mb-1">Origin *</label>
458
-
<input type="text" bind:value={beanForm.origin} required class="w-full rounded border-gray-300 px-3 py-2" />
467
+
<label for="bean-origin" class="block text-sm font-medium text-gray-700 mb-1">Origin *</label>
468
+
<input id="bean-origin" type="text" bind:value={beanForm.origin} required class="w-full rounded border-gray-300 px-3 py-2" />
459
469
</div>
460
470
<div>
461
-
<label class="block text-sm font-medium text-gray-700 mb-1">Roast Level *</label>
462
-
<select bind:value={beanForm.roast_level} required class="w-full rounded border-gray-300 px-3 py-2">
471
+
<label for="bean-roast-level" class="block text-sm font-medium text-gray-700 mb-1">Roast Level *</label>
472
+
<select id="bean-roast-level" bind:value={beanForm.roast_level} required class="w-full rounded border-gray-300 px-3 py-2">
463
473
<option value="">Select...</option>
464
474
<option value="Light">Light</option>
465
475
<option value="Medium-Light">Medium-Light</option>
···
469
479
</select>
470
480
</div>
471
481
<div>
472
-
<label class="block text-sm font-medium text-gray-700 mb-1">Roaster</label>
482
+
<label for="bean-roaster" class="block text-sm font-medium text-gray-700 mb-1">Roaster</label>
473
483
<div class="flex gap-2">
474
-
<select bind:value={beanForm.roaster_rkey} class="flex-1 rounded border-gray-300 px-3 py-2">
484
+
<select id="bean-roaster" bind:value={beanForm.roaster_rkey} class="flex-1 rounded border-gray-300 px-3 py-2">
475
485
<option value="">Select...</option>
476
486
{#each roasters as roaster}
477
487
<option value={roaster.rkey}>{roaster.name}</option>
···
497
507
>
498
508
<div class="space-y-4">
499
509
<div>
500
-
<label class="block text-sm font-medium text-gray-700 mb-1">Name *</label>
501
-
<input type="text" bind:value={roasterForm.name} required class="w-full rounded border-gray-300 px-3 py-2" />
510
+
<label for="roaster-name" class="block text-sm font-medium text-gray-700 mb-1">Name *</label>
511
+
<input id="roaster-name" type="text" bind:value={roasterForm.name} required class="w-full rounded border-gray-300 px-3 py-2" />
502
512
</div>
503
513
<div>
504
-
<label class="block text-sm font-medium text-gray-700 mb-1">Location</label>
505
-
<input type="text" bind:value={roasterForm.location} class="w-full rounded border-gray-300 px-3 py-2" />
514
+
<label for="roaster-location" class="block text-sm font-medium text-gray-700 mb-1">Location</label>
515
+
<input id="roaster-location" type="text" bind:value={roasterForm.location} class="w-full rounded border-gray-300 px-3 py-2" />
506
516
</div>
507
517
</div>
508
518
</Modal>
···
515
525
>
516
526
<div class="space-y-4">
517
527
<div>
518
-
<label class="block text-sm font-medium text-gray-700 mb-1">Name *</label>
519
-
<input type="text" bind:value={grinderForm.name} required class="w-full rounded border-gray-300 px-3 py-2" />
528
+
<label for="grinder-name" class="block text-sm font-medium text-gray-700 mb-1">Name *</label>
529
+
<input id="grinder-name" type="text" bind:value={grinderForm.name} required class="w-full rounded border-gray-300 px-3 py-2" />
520
530
</div>
521
531
<div>
522
-
<label class="block text-sm font-medium text-gray-700 mb-1">Type</label>
523
-
<select bind:value={grinderForm.grinder_type} class="w-full rounded border-gray-300 px-3 py-2">
532
+
<label for="grinder-type" class="block text-sm font-medium text-gray-700 mb-1">Type</label>
533
+
<select id="grinder-type" bind:value={grinderForm.grinder_type} class="w-full rounded border-gray-300 px-3 py-2">
524
534
<option value="">Select...</option>
525
535
<option value="Manual">Manual</option>
526
536
<option value="Electric">Electric</option>
···
538
548
>
539
549
<div class="space-y-4">
540
550
<div>
541
-
<label class="block text-sm font-medium text-gray-700 mb-1">Name *</label>
542
-
<input type="text" bind:value={brewerForm.name} required class="w-full rounded border-gray-300 px-3 py-2" />
551
+
<label for="brewer-name" class="block text-sm font-medium text-gray-700 mb-1">Name *</label>
552
+
<input id="brewer-name" type="text" bind:value={brewerForm.name} required class="w-full rounded border-gray-300 px-3 py-2" />
543
553
</div>
544
554
<div>
545
-
<label class="block text-sm font-medium text-gray-700 mb-1">Type</label>
546
-
<select bind:value={brewerForm.brewer_type} class="w-full rounded border-gray-300 px-3 py-2">
555
+
<label for="brewer-type" class="block text-sm font-medium text-gray-700 mb-1">Type</label>
556
+
<select id="brewer-type" bind:value={brewerForm.brewer_type} class="w-full rounded border-gray-300 px-3 py-2">
547
557
<option value="">Select...</option>
548
558
<option value="Pour Over">Pour Over</option>
549
559
<option value="French Press">French Press</option>
+1
-1
web/static/app/index.html
+1
-1
web/static/app/index.html
···
18
18
<!-- Web Manifest -->
19
19
<link rel="manifest" href="/static/manifest.json">
20
20
<meta name="theme-color" content="#78350f">
21
-
<script type="module" crossorigin src="/static/app/assets/index-PnQOiph1.js"></script>
21
+
<script type="module" crossorigin src="/static/app/assets/index-D8yIXtJi.js"></script>
22
22
<link rel="stylesheet" crossorigin href="/static/app/assets/index-C3lHx5fe.css">
23
23
</head>
24
24
<body class="bg-brown-50 text-brown-900 min-h-screen">