From 54e19c4e879a2032e02fbbf7b404fcb5fbe23e76 Mon Sep 17 00:00:00 2001
From: yu-i-i <kla9555@gmail.com>
Date: Thu, 3 Apr 2025 23:26:54 +0200
Subject: [PATCH] Symbol palette: switch to 'OL' UI components and apply minor
 cosmetic changes

---
 .../components/symbol-palette-close-button.js | 13 ++++++----
 .../components/symbol-palette-content.js      |  5 ++--
 .../components/symbol-palette-item.js         | 25 +++++++++++--------
 .../components/symbol-palette-search.js       |  9 ++++---
 .../stylesheets/modules/symbol-palette.scss   |  6 ++---
 5 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/services/web/frontend/js/features/symbol-palette/components/symbol-palette-close-button.js b/services/web/frontend/js/features/symbol-palette/components/symbol-palette-close-button.js
index 6c776d1e24..839b5d1cd5 100644
--- a/services/web/frontend/js/features/symbol-palette/components/symbol-palette-close-button.js
+++ b/services/web/frontend/js/features/symbol-palette/components/symbol-palette-close-button.js
@@ -1,16 +1,19 @@
-import { Button } from 'react-bootstrap'
 import { useEditorContext } from '../../../shared/context/editor-context'
+import { useTranslation } from 'react-i18next'
 
 export default function SymbolPaletteCloseButton() {
   const { toggleSymbolPalette } = useEditorContext()
+  const { t } = useTranslation()
 
   return (
-    <div className="symbol-palette-header-outer">
-      <Button
+    <div className="symbol-palette-close-button-outer">
+      <button
+        type="button"
         className="btn-close symbol-palette-close-button"
-        onClick={toggleSymbolPalette} // Trigger closePanel on click
+        onClick={toggleSymbolPalette}
+        aria-label={t('clear_search')}
       >
-      </Button>
+      </button>
     </div>
   )
 }
diff --git a/services/web/frontend/js/features/symbol-palette/components/symbol-palette-content.js b/services/web/frontend/js/features/symbol-palette/components/symbol-palette-content.js
index a170987793..cb5a9e3029 100644
--- a/services/web/frontend/js/features/symbol-palette/components/symbol-palette-content.js
+++ b/services/web/frontend/js/features/symbol-palette/components/symbol-palette-content.js
@@ -3,7 +3,6 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import PropTypes from 'prop-types'
 import { matchSorter } from 'match-sorter'
-
 import symbols from '../data/symbols.json'
 import { buildCategorisedSymbols, createCategories } from '../utils/categories'
 import SymbolPaletteSearch from './symbol-palette-search'
@@ -67,11 +66,11 @@ export default function SymbolPaletteContent({ handleSelect }) {
         <div className="symbol-palette-header-outer">
           <div className="symbol-palette-header">
             <SymbolPaletteTabs categories={categories} />
-            <div className="symbol-palette-header-group"> 
+            <div className="symbol-palette-header-group">
               <SymbolPaletteSearch setInput={setInput} inputRef={inputRef} />
+              <SymbolPaletteCloseButton />
             </div>
           </div>
-          <SymbolPaletteCloseButton />
         </div>
         <div className="symbol-palette-body">
           <SymbolPaletteBody
diff --git a/services/web/frontend/js/features/symbol-palette/components/symbol-palette-item.js b/services/web/frontend/js/features/symbol-palette/components/symbol-palette-item.js
index e1fca8c434..1369534106 100644
--- a/services/web/frontend/js/features/symbol-palette/components/symbol-palette-item.js
+++ b/services/web/frontend/js/features/symbol-palette/components/symbol-palette-item.js
@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react'
-import { OverlayTrigger, Tooltip } from 'react-bootstrap-5'
 import PropTypes from 'prop-types'
+import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
 
 export default function SymbolPaletteItem({
   focused,
@@ -22,20 +22,24 @@ export default function SymbolPaletteItem({
   }, [focused])
 
   return (
-    <OverlayTrigger
-      placement="top"
-      trigger={['hover', 'focus']}
-      overlay={
-        <Tooltip id={`tooltip-symbol-${symbol.codepoint}`}>
+    <OLTooltip
+      id={`symbol-${symbol.codepoint}`}
+      description={
+        <div>
           <div className="symbol-palette-item-description">
             {symbol.description}
           </div>
-          <div className="symbol-palette-item-command">{symbol.command}</div>
+          <div className="symbol-palette-item-command">
+            {symbol.command}
+          </div>
           {symbol.notes && (
-            <div className="symbol-palette-item-notes">{symbol.notes}</div>
+            <div className="symbol-palette-item-notes">
+              {symbol.notes}
+            </div>
           )}
-        </Tooltip>
+        </div>
       }
+      overlayProps={{ placement: 'top', trigger: ['hover', 'focus'] }}
     >
       <button
         key={symbol.codepoint}
@@ -50,9 +54,10 @@ export default function SymbolPaletteItem({
       >
         {symbol.character}
       </button>
-    </OverlayTrigger>
+    </OLTooltip>
   )
 }
+
 SymbolPaletteItem.propTypes = {
   symbol: PropTypes.shape({
     codepoint: PropTypes.string.isRequired,
diff --git a/services/web/frontend/js/features/symbol-palette/components/symbol-palette-search.js b/services/web/frontend/js/features/symbol-palette/components/symbol-palette-search.js
index cf5a1eb2a7..7d52a82874 100644
--- a/services/web/frontend/js/features/symbol-palette/components/symbol-palette-search.js
+++ b/services/web/frontend/js/features/symbol-palette/components/symbol-palette-search.js
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import PropTypes from 'prop-types'
-import { FormControl } from 'react-bootstrap'
+import OLFormControl from '@/features/ui/components/ol/ol-form-control'
 import useDebounce from '../../../shared/hooks/use-debounce'
 
 export default function SymbolPaletteSearch({ setInput, inputRef }) {
@@ -24,10 +24,10 @@ export default function SymbolPaletteSearch({ setInput, inputRef }) {
   )
 
   return (
-    <FormControl
+    <OLFormControl
       className="symbol-palette-search"
       type="search"
-      inputRef={inputRefCallback}
+      ref={inputRefCallback}
       id="symbol-palette-input"
       aria-label="Search"
       value={localInput}
@@ -38,7 +38,8 @@ export default function SymbolPaletteSearch({ setInput, inputRef }) {
     />
   )
 }
+
 SymbolPaletteSearch.propTypes = {
   setInput: PropTypes.func.isRequired,
   inputRef: PropTypes.object.isRequired,
-}
+};
diff --git a/services/web/frontend/stylesheets/modules/symbol-palette.scss b/services/web/frontend/stylesheets/modules/symbol-palette.scss
index 03c55419bf..8afb7fe92b 100644
--- a/services/web/frontend/stylesheets/modules/symbol-palette.scss
+++ b/services/web/frontend/stylesheets/modules/symbol-palette.scss
@@ -154,6 +154,8 @@
 
 .symbol-palette-close-button-outer {
   display: flex;
+  align-items: center;
+  margin-right: var(--spacing-01);
 }
 
 .symbol-palette-close-button {
@@ -163,10 +165,6 @@
     filter: var(--bs-btn-close-white-filter);
   }
 
-  margin-top: var(--spacing-05);
-  margin-left: var(--spacing-02);
-  margin-right: var(--spacing-03);
-
   .symbol-palette-unavailable & {
     visibility: hidden;
   }