feat: add CSS class and styles for editable recipe title

src/Roux/Html.hs

@@ -259,6 +259,12 @@ page title content =
                             , "@keyframes roux-timer-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }"
                             , ".roux-timer-reset, .roux-timer-close { background: none; border: none; cursor: pointer; font-size: 0.75rem; padding: 0 2px; line-height: 1; color: rgba(61, 44, 30, 0.4); transition: color 0.15s; }"
                             , ".roux-timer-reset:hover, .roux-timer-close:hover { color: var(--roux-accent); }"
+                            , ""
+                            , ".roux-recipe-title { cursor: pointer; position: relative; }"
+                            , ".roux-recipe-title:hover::after { content: '\\270E'; font-size: 0.7rem; opacity: 0.3; margin-left: 0.5rem; vertical-align: super; }"
+                            , ".roux-recipe-title.roux-editing { cursor: text; border-bottom: 1px dashed rgba(184, 92, 56, 0.4); outline: none; }"
+                            , ".roux-recipe-title.roux-title-error { animation: roux-shake 0.3s ease-in-out; }"
+                            , "@keyframes roux-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }"
                             ]
 
             H.body $ H.main ! A.class_ "container" $ content
@@ -721,7 +727,7 @@ renderRecipe filename recipe = do
         Just c -> H.p ! A.class_ "roux-course" $ H.toHtml c
         Nothing -> pure ()
     H.div ! A.style "display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;" $ do
-        H.h1 $ H.toHtml (titleText recipe)
+        H.h1 ! A.class_ "roux-recipe-title" $ H.toHtml (titleText recipe)
         case metaSource meta of
             Just url -> H.a ! A.class_ "roux-source-link" ! A.href (H.toValue url) ! A.target "_blank" ! A.rel "noopener noreferrer" $ do
                 "↗ Original"