refactor(components): replace Toolbar with Navbar component

* remove SearchModal and SettingsModal components
* add a generic NavbarItem component (instead of the previous toolbar
items to avoid unreadable styles...)
* move FlippingLabel component logic into NavbarItem since it is only
used here

3 files changed, 69 insertions, 38 deletions

diff --git a/src/components/atoms/forms/fields/boolean-field/boolean-field.tsx b/src/components/atoms/forms/fields/boolean-field/boolean-field.tsx
index 5476cf5..009635d 100644
--- a/src/components/atoms/forms/fields/boolean-field/boolean-field.tsx
+++ b/src/components/atoms/forms/fields/boolean-field/boolean-field.tsx
@@ -1,4 +1,8 @@
-import type { FC, InputHTMLAttributes } from 'react';
+import {
+  forwardRef,
+  type InputHTMLAttributes,
+  type ForwardRefRenderFunction,
+} from 'react';
 import styles from './boolean-field.module.scss';
 
 export type BooleanFieldProps = Omit<
@@ -56,20 +60,21 @@ export type BooleanFieldProps = Omit<
   value: string;
 };
 
-/**
- * BooleanField component
- *
- * Render a checkbox or a radio input type.
- */
-export const BooleanField: FC<BooleanFieldProps> = ({
-  className = '',
-  isChecked = false,
-  isDisabled = false,
-  isHidden = false,
-  isReadOnly = false,
-  isRequired = false,
-  ...props
-}) => {
+const BooleanFieldWithRef: ForwardRefRenderFunction<
+  HTMLInputElement,
+  BooleanFieldProps
+> = (
+  {
+    className = '',
+    isChecked = false,
+    isDisabled = false,
+    isHidden = false,
+    isReadOnly = false,
+    isRequired = false,
+    ...props
+  },
+  ref
+) => {
   const visibilityClass = isHidden ? styles['field--hidden'] : '';
   const inputClass = `${visibilityClass} ${className}`;
 
@@ -80,7 +85,15 @@ export const BooleanField: FC<BooleanFieldProps> = ({
       className={inputClass}
       disabled={isDisabled}
       readOnly={isReadOnly}
+      ref={ref}
       required={isRequired}
     />
   );
 };
+
+/**
+ * BooleanField component
+ *
+ * Render a checkbox or a radio input type.
+ */
+export const BooleanField = forwardRef(BooleanFieldWithRef);
diff --git a/src/components/atoms/forms/fields/checkbox/checkbox.tsx b/src/components/atoms/forms/fields/checkbox/checkbox.tsx
index 9c175b7..2a8424e 100644
--- a/src/components/atoms/forms/fields/checkbox/checkbox.tsx
+++ b/src/components/atoms/forms/fields/checkbox/checkbox.tsx
@@ -1,14 +1,19 @@
-import type { FC } from 'react';
+import { forwardRef, type ForwardRefRenderFunction } from 'react';
 import { BooleanField, type BooleanFieldProps } from '../boolean-field';
 
 export type CheckboxProps = Omit<BooleanFieldProps, 'type'>;
 
+const CheckboxWithRef: ForwardRefRenderFunction<
+  HTMLInputElement,
+  CheckboxProps
+> = (props, ref) => (
+  // eslint-disable-next-line react/jsx-no-literals -- Type allowed
+  <BooleanField {...props} ref={ref} type="checkbox" />
+);
+
 /**
  * Checkbox component
  *
  * Render a checkbox input type.
  */
-export const Checkbox: FC<CheckboxProps> = (props) => (
-  // eslint-disable-next-line react/jsx-no-literals -- Type allowed
-  <BooleanField {...props} type="checkbox" />
-);
+export const Checkbox = forwardRef(CheckboxWithRef);
diff --git a/src/components/atoms/forms/label/label.tsx b/src/components/atoms/forms/label/label.tsx
index 6692205..bfd1a59 100644
--- a/src/components/atoms/forms/label/label.tsx
+++ b/src/components/atoms/forms/label/label.tsx
@@ -1,4 +1,9 @@
-import type { FC, LabelHTMLAttributes, ReactNode } from 'react';
+import {
+  forwardRef,
+  type ForwardRefRenderFunction,
+  type LabelHTMLAttributes,
+  type ReactNode,
+} from 'react';
 import styles from './label.module.scss';
 
 export type LabelSize = 'md' | 'sm';
@@ -31,26 +36,27 @@ export type LabelProps = Omit<
   size?: LabelSize;
 };
 
-/**
- * Label Component
- *
- * Render a HTML label element.
- */
-export const Label: FC<LabelProps> = ({
-  children,
-  className = '',
-  isHidden = false,
-  isRequired = false,
-  size = 'sm',
-  ...props
-}) => {
-  const visibilityClass = isHidden ? 'screen-reader-text' : '';
-  const sizeClass = styles[`label--${size}`];
-  const labelClass = `${styles.label} ${sizeClass} ${visibilityClass} ${className}`;
+const LabelWithRef: ForwardRefRenderFunction<HTMLLabelElement, LabelProps> = (
+  {
+    children,
+    className = '',
+    isHidden = false,
+    isRequired = false,
+    size = 'sm',
+    ...props
+  },
+  ref
+) => {
+  const labelClass = [
+    styles.label,
+    styles[`label--${size}`],
+    isHidden ? 'screen-reader-text' : '',
+    className,
+  ].join(' ');
   const requiredSymbol = ' *';
 
   return (
-    <label {...props} className={labelClass}>
+    <label {...props} className={labelClass} ref={ref}>
       {children}
       {isRequired ? (
         <span aria-hidden className={styles.required}>
@@ -60,3 +66,10 @@ export const Label: FC<LabelProps> = ({
     </label>
   );
 };
+
+/**
+ * Label Component
+ *
+ * Render a HTML label element.
+ */
+export const Label = forwardRef(LabelWithRef);