WebUI improvements (#382)

* Enhance UI and configuration for species settings and themes

- Updated Tailwind CSS configuration to include detailed theme definitions for light and dark modes, improving design consistency.
- Added tooltip styling in custom CSS for better user experience across various settings pages.
- Implemented selection functionality in the list detections view, allowing users to select multiple items for verification or deletion.
- Enhanced audio settings and filters with tooltips for better guidance on configuration options.
- Improved species settings management by adding sections for including and excluding species, along with custom action configurations.
- Streamlined the UI for species settings, ensuring clarity and ease of use with updated descriptions and tooltips.

This commit focuses on improving the user interface and experience in the species settings and related views, while also enhancing the underlying configuration for themes and tooltips.

* delete unused html templates

* Enhance species settings UI with consistent styling

- Introduced a new CSS class for list items in species settings, improving visual consistency and user experience.
- Updated HTML templates in filtersSettings.html and speciesSettings.html to utilize the new styling class, replacing inline styles for better maintainability.
- Enhanced hover effects for list items to provide clearer feedback during user interactions.

* Refactor settings UI for improved consistency and usability

- Updated various settings pages to use a unified styling approach, enhancing visual consistency across the application.
- Replaced inline styles with new CSS classes for better maintainability and user experience.
- Improved tooltip handling by standardizing the help icon implementation across all settings templates.
- Enhanced descriptions and labels for clarity, ensuring users have better guidance on configuration options.
- Streamlined input handling and layout for species settings, including include/exclude functionality, to improve user interaction.

* Enhance UI and configuration for settings pages

- Added new color definitions for primary content in light and dark themes in tailwind.config.js, improving accessibility and visual clarity.
- Introduced comprehensive styling for the settings page in custom.css, including headers, descriptions, input groups, and buttons, to enhance user experience and consistency.
- Updated tailwind.css to refine color variables and remove unused styles, streamlining the CSS for better maintainability.

This commit focuses on improving the user interface and experience across settings pages, ensuring a cohesive design and better accessibility.

* Update species settings UI for improved layout and spacing

- Adjusted padding in the species settings list items to enhance visual clarity and user experience.
- Increased the horizontal padding of the threshold display to provide a more balanced appearance in the settings interface.

This commit focuses on refining the user interface of the species settings page, ensuring a more consistent and user-friendly layout.

* Enhance privacy and dog bark filter settings UI

- Added new sections for enabling privacy filtering and configuring confidence thresholds for human voice detection.
- Improved tooltip handling and labeling for clarity in privacy and dog bark filter settings.
- Updated HTML structure for better maintainability and consistency across the settings interface.
- Enhanced user experience with clearer descriptions and improved layout for filter settings.

* fix: improve theme selection code to avoid page flashes in dark mode

* Enhance Tailwind CSS configuration with new color definitions

- Added "error-content" color for improved accessibility in light and dark themes.
- Updated "primary-content" color in dark mode for better visual contrast.

This commit focuses on refining the color palette in the Tailwind CSS configuration to enhance user experience and accessibility across the application.

* Enhance accessibility and usability across UI components

- Added ARIA roles and labels to improve screen reader support in header, sidebar, and settings pages.
- Updated HTML structure for better semantic meaning and accessibility, including roles for navigation and regions.
- Enhanced tooltip handling with ARIA attributes for improved user guidance.
- Streamlined input elements with appropriate labels and descriptions for clarity.
- Improved layout and spacing in various settings pages to enhance user experience.

This commit focuses on refining the user interface and accessibility features across the application, ensuring a more inclusive experience for all users.

* Enhance UI and accessibility for date input and tab components

- Added dark mode styles for date input calendar icons to improve visibility.
- Updated Tailwind CSS variables for better color management and consistency across themes.
- Introduced new tab component styles, including hover effects and disabled states, to enhance user interaction.
- Improved layout and spacing in the dashboard for better usability and clarity.

This commit focuses on refining the user interface and accessibility features, ensuring a more cohesive and user-friendly experience across the application.

* fix: Improve date picker functionality to fix daily summary table loading on Firefox

- Added a new function to initialize the date picker, setting its value based on the URL hash or the current date.
- Made the date picker visible and triggered a change event to load initial data.
- Integrated the date picker initialization into the dashboard's DOMContentLoaded event and htmx afterSettle event for improved user experience.

This commit enhances the dashboard functionality by ensuring the date picker is properly initialized and visible, improving usability for users interacting with date-related features.

* fix: remove duplicate initialization of date picker element

* fix: enhance date picker initialization for consistent date formatting

- Introduced a helper function to ensure the date is formatted as 'YYYY-MM-DD' consistently across browsers.
- Updated the date picker logic to set its value based on the URL hash or the current date, improving user experience.
- Ensured the date picker is only triggered to change when necessary, enhancing performance and usability.

* refactor: simplify listDetections component by removing selection functionality

- Removed the selection feature, including checkboxes and associated actions (verify and delete).
- Streamlined the HTML structure for better readability and maintainability.
- Enhanced the overall layout of the listDetections component while maintaining existing styles.

assets/custom.css

@@ -358,4 +358,172 @@ thead.sticky-header {
 [data-theme=dark] .heatmap-color-9 {
   background: linear-gradient(135deg, var(--heatmap-color-9) 66%, var(--heatmap-color-8) 110%);
   color: var(--heatmap-text-9, #fff);
+}
+
+/* Tooltip styling */
+.tooltip {
+  position: absolute;
+  left: 0;
+  bottom: 100%;
+  margin-bottom: 0.5rem;
+  padding: 0.5rem;
+  font-size: 0.875rem;
+  border-radius: 0.375rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  z-index: 50;
+  background-color: var(--surface-200);
+  border: 1px solid var(--border-100);
+  max-width: 36rem;
+  white-space: normal;
+}
+
+/* Add overflow handling for tooltip container */
+.form-control.relative {
+  overflow: visible;
+}
+
+.collapse-content {
+  overflow: visible !important;
+}
+
+/* List item styling */
+.settings-list-item {
+  background-color: var(--surface-300);
+  border: 1px solid var(--border-100);
+  border-radius: 0.375rem;
+  padding: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.settings-list-item:hover {
+  background-color: var(--surface-400);
+}
+
+/* Settings Page Styling */
+.settings-section-header {
+    font-size: 1.25rem;
+    font-weight: 500;
+}
+
+.settings-section-description {
+    font-size: 0.875rem;
+    color: rgb(107, 114, 128);
+}
+
+.settings-changed-badge {
+    margin-left: 0.5rem;
+}
+
+.settings-changed-badge span.badge {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.settings-changed-badge span.badge span {
+    font-size: 0.75rem;
+    margin-bottom: 0.125rem;
+}
+
+.settings-form-group {
+    position: relative;
+    margin-top: 1rem;
+}
+
+.settings-form-group label {
+    display: block;
+    font-size: 0.875rem;
+}
+
+.help-icon {
+    margin-left: 0.5rem;  /* ml-2 */
+    font-size: 0.875rem;  /* text-sm */
+    color: rgb(107, 114, 128);  /* text-gray-500 */
+    cursor: help;
+}
+
+.settings-input-group {
+  display: flex;
+  align-items: center;
+  margin-top: 0.5rem;  /* mt-2 */
+}
+
+.settings-input-group input[type="text"] {
+  flex: 1;  /* w-full */
+  min-width: 0;  /* prevents flex item from overflowing */
+  height: 2rem;  /* input-sm height */
+  padding-left: 0.75rem;  /* input-sm padding */
+  padding-right: 0.75rem;  /* input-sm padding */
+  font-size: 0.875rem;  /* input-sm font size */
+  line-height: 2rem;  /* input-sm line-height */
+  border-radius: var(--rounded-btn, 0.5rem);  /* DaisyUI input border-radius */
+  border: 1px solid var(--fallback-bc,oklch(var(--bc)/0.2));  /* input-bordered */
+  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));  /* DaisyUI input background */
+}
+
+.settings-input-group input[type="text"]:focus-visible {
+  outline: 1px solid transparent;
+  outline-offset: 0px;
+  box-shadow: 0 0 0 2px rgba(164, 202, 254, 0.45);
+}
+
+.settings-input-group button {
+  flex-shrink: 0;  /* prevent button from shrinking */
+  width: 5rem;  /* w-20 */
+  height: 2rem;  /* btn-sm height */
+  min-height: 2rem;  /* DaisyUI btn-sm min-height */
+  margin-left: 0.5rem;  /* ml-2 */
+  margin-right: 0.5rem;  /* mr-2 */
+  padding-left: 0.75rem;  /* btn-sm padding */
+  padding-right: 0.75rem;  /* btn-sm padding */
+  font-size: 0.875rem;  /* btn-sm font size */
+  line-height: 1.25rem;  /* btn-sm line-height */
+  font-weight: 600;  /* DaisyUI button default */
+  border-radius: var(--rounded-btn, 0.5rem);  /* DaisyUI button border-radius */
+  background-color: var(--fallback-p,oklch(var(--p)/1));  /* btn-primary */
+  color: var(--fallback-pc,oklch(var(--pc)/1));  /* btn-primary text color */
+  border: none;
+  cursor: pointer;
+}
+
+.settings-input-group button:hover {
+  background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);  /* DaisyUI primary button hover */
+}
+
+.settings-modal-section {
+    margin-bottom: 1rem;
+}
+
+.settings-modal-section label {
+    display: block;
+    font-size: 0.875rem;
+    font-weight: 500;
+}
+
+.settings-modal-section input,
+.settings-modal-section select {
+    width: 100%;
+    margin-top: 0.25rem;
+}
+
+.settings-modal-section .help-text {
+    font-size: 0.875rem;
+    margin-top: 0.25rem;
+}
+
+/* Theme toggle */
+.swap-rotate {
+    transition: transform 0.2s ease-in-out;
+}
+
+/* Style date input calendar icon for dark mode */
+[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
+  filter: invert(1);
+}
+
+/* For Firefox */
+[data-theme="dark"] input[type="date"] {
+  color-scheme: dark;
 }