feat: enhance UI components and error handling

- Updated HTML structure for navigation buttons in the calendar, adding SVG icons for improved visual clarity.
- Introduced a new muted text style in CSS for better presentation of empty duty list messages.
- Enhanced calendar CSS for navigation buttons and day indicators, improving layout and responsiveness.
- Improved error handling in the UI by adding retry functionality to the error display, allowing users to retry actions directly from the error message.
- Updated internationalization messages to include a retry option for error handling.
- Added unit tests to verify the new error handling behavior and UI updates.

webapp/css/calendar.css

@@ -21,7 +21,21 @@
   font-size: 24px;
   line-height: 1;
   cursor: pointer;
-  transition: opacity var(--transition-fast), transform var(--transition-fast);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity var(--transition-fast), transform var(--transition-fast),
+    background-color var(--transition-fast);
+}
+
+.nav svg {
+  display: block;
+}
+
+@media (hover: hover) {
+  .nav:hover {
+    background: color-mix(in srgb, var(--accent) 15%, var(--surface));
+  }
 }
 
 .nav:focus {
@@ -48,6 +62,12 @@
   font-weight: 600;
 }
 
+@media (max-width: 480px) {
+  .title {
+    font-size: 1.25rem;
+  }
+}
+
 .weekdays {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
@@ -92,13 +112,23 @@
   font-size: 0.85rem;
   background: var(--surface);
   min-width: 0;
-  min-height: 0;
+  min-height: 32px;
   overflow: hidden;
   transition: background-color var(--transition-fast), transform var(--transition-fast);
 }
 
+@media (hover: hover) {
+  .day:hover {
+    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
+  }
+  .day.today:hover {
+    background: color-mix(in srgb, var(--bg) 15%, var(--today));
+  }
+}
+
 .day.other-month {
   opacity: 0.4;
+  background: color-mix(in srgb, var(--muted) 8%, var(--surface));
 }
 
 .day.today {
@@ -142,6 +172,7 @@
 .day-indicator {
   display: flex;
   justify-content: center;
+  gap: 2px;
   width: 65%;
   margin-top: 6px;
 }