gpt-engineer-app[bot] commited on
Commit
13b400b
·
1 Parent(s): 7cc30be

Improve calendar filter UI

Browse files

Make default year view more obvious and add a "deselect all" button to the filter bar.

Files changed (1) hide show
  1. src/pages/Calendar.tsx +28 -9
src/pages/Calendar.tsx CHANGED
@@ -356,6 +356,25 @@ const CalendarPage = () => {
356
  const renderLegend = () => {
357
  return (
358
  <div className="flex flex-wrap gap-3 justify-center items-center mb-4">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
359
  <TooltipProvider>
360
  <Tooltip>
361
  <TooltipTrigger asChild>
@@ -380,7 +399,7 @@ const CalendarPage = () => {
380
  </Tooltip>
381
  </TooltipProvider>
382
 
383
- {Object.entries(categoryColors).map(([tag, color]) => (
384
  <TooltipProvider key={tag}>
385
  <Tooltip>
386
  <TooltipTrigger asChild>
@@ -413,18 +432,18 @@ const CalendarPage = () => {
413
  </Tooltip>
414
  </TooltipProvider>
415
  ))}
416
-
417
- {(selectedCategories.size < Object.keys(categoryColors).length || !showDeadlines) && (
418
  <button
419
  onClick={() => {
420
- setSelectedCategories(new Set(Object.keys(categoryColors)));
421
- setShowDeadlines(true);
422
  }}
423
- className="text-sm text-neutral-500 hover:text-neutral-700
424
- px-3 py-1.5 rounded-lg border border-neutral-200
425
- hover:bg-neutral-50 transition-colors"
426
  >
427
- Reset filters
 
428
  </button>
429
  )}
430
  </div>
 
356
  const renderLegend = () => {
357
  return (
358
  <div className="flex flex-wrap gap-3 justify-center items-center mb-4">
359
+ <div className="flex items-center gap-2 bg-white p-1 rounded-lg shadow-sm">
360
+ <Toggle
361
+ pressed={!isYearView}
362
+ onPressedChange={() => setIsYearView(false)}
363
+ variant="outline"
364
+ className="border-2 data-[state=on]:border-primary"
365
+ >
366
+ Month View
367
+ </Toggle>
368
+ <Toggle
369
+ pressed={isYearView}
370
+ onPressedChange={() => setIsYearView(true)}
371
+ variant="outline"
372
+ className="border-2 data-[state=on]:bg-primary data-[state=on]:text-white data-[state=on]:border-primary"
373
+ >
374
+ Year View
375
+ </Toggle>
376
+ </div>
377
+
378
  <TooltipProvider>
379
  <Tooltip>
380
  <TooltipTrigger asChild>
 
399
  </Tooltip>
400
  </TooltipProvider>
401
 
402
+ {categories.map(([tag, color]) => (
403
  <TooltipProvider key={tag}>
404
  <Tooltip>
405
  <TooltipTrigger asChild>
 
432
  </Tooltip>
433
  </TooltipProvider>
434
  ))}
435
+
436
+ {selectedCategories.size > 0 && (
437
  <button
438
  onClick={() => {
439
+ setSelectedCategories(new Set());
 
440
  }}
441
+ className="text-sm text-red-600 bg-red-50 hover:bg-red-100 hover:text-red-700
442
+ px-3 py-1.5 rounded-lg border border-red-200
443
+ transition-colors flex items-center gap-2"
444
  >
445
+ <X className="h-4 w-4" />
446
+ Deselect All Colors
447
  </button>
448
  )}
449
  </div>