feat: Add search functionality & styling

src/Controller/KanjiController.php

@@ -11,6 +11,7 @@ use App\Utils\Number;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\HttpKernel\Attribute\MapQueryParameter;
 use Symfony\Component\Routing\Attribute\Route;
 use Symfony\Component\VarExporter\VarExporter;
 
@@ -110,8 +111,8 @@ class KanjiController extends AbstractController
         return new Response();
     }
 
-    #[Route('/{char}/view', 'view', methods: 'GET')]
-    public function view(string $char): Response
+    #[Route('view', 'view', methods: 'GET')]
+    public function view(#[MapQueryParameter] string $char): Response
     {
         $charStr = ctype_xdigit($char) ? Number::parseCodepoint($char) : $char;
         $codepoint =  ctype_xdigit($char) ? $char : dechex(mb_ord($char));

templates/kanji/grid.html.twig

@@ -1,6 +1,6 @@
 {% extends 'base.html.twig' %}
 
-{% block title %}Kanji Index{% endblock %}
+{% block title %}漢字索引{% endblock %}
 
 {% block body %}
 <style>
@@ -42,15 +42,33 @@
   .ebook   { border-top:  3px solid deeppink      !important; }
   .jimaku  { border-top:  3px solid lightgray     !important; }
 
-  .none  { opacity: 0.25; }
+  .none  { opacity: 0.40; }
 </style>
 
-<div class="example-wrapper">
-  <div>
-    <h1 class="text-center p-2 mb-2">{{ block('title') }}</h1>
-    <div>
-      <input>
-    </div>
+<div style="background-color: var(--bs-gray-300)">
+  <div class="d-flex align-items-center p-2 ps-3 pe-3 border-bottom sticky-top bg-white">
+    <h1 class="text-left p-0 mb-0 flex-grow-1">{{ block('title') }}</h1>
+    <form
+      class="btn-group"
+
+      hx-target="#baseModalContent"
+      hx-swap="innerHTML"
+      hx-get="{{ path('app_kanji_view') }}"
+    >
+      <input
+        type="text" name="char" placeholder="字 / 5B57"
+        class="form-control w-auto"
+      >
+      <butto
+        type="submit"
+        class="btn btn-secondary"
+
+        data-bs-toggle="modal"
+        data-bs-target="#baseModal"
+      >
+        検索
+      </button>
+    </form>
   </div>
   <div
     class="d-flex flex-wrap m-2"
@@ -62,7 +80,7 @@
     <div style="width: calc(100% / 16);">
     <div
       class="
-        border text-center rounded
+        border text-center rounded bg-white
         {{ char.lists|length == 0
           ? 'none'
           :  char.lists|keys|join(' ')