fix search and star function

internal/template/templates/common/layout.html

@@ -122,7 +122,7 @@
                     </svg>
                 </summary>
                 <form action="{{ route "searchEntries" }}" aria-labelledby="search-input-label">
-                    <input type="search" name="q" aria-label="{{ t "search.label" }}" {{ if $.searchQuery }}value="{{ .searchQuery }}"{{ end }} required>
+                    <input type="search" name="q" id="search-input" aria-label="{{ t "search.label" }}" {{ if $.searchQuery }}value="{{ .searchQuery }}"{{ end }} required>
                     <button type="submit">{{ t "search.submit" }}</button>
                 </form>
             </details>

internal/template/templates/views/entry.html

@@ -1,8 +1,8 @@
 {{ define "title"}}{{ .entry.Title }}{{ end }}
 
 {{ define "page_header"}}
-<section class="page-header" aria-labelledby="page-header-title">
-    <div class="entry-header">
+<section class="entry page-header" data-id="{{ .entry.ID }}" aria-labelledby="page-header-title">
+    <header class="entry-header">
         <h1 id="page-header-title" dir="auto">
             <a href="{{ .entry.URL | safeURL }}" target="_blank" rel="noopener noreferrer" referrerpolicy="no-referrer">{{ .entry.Title }}</a>
         </h1>
@@ -143,7 +143,7 @@
             </span>
             {{ end }}
         </div>
-    </div>
+    </header>
 </section>
 {{ end }}
 

internal/ui/static/js/app.js

@@ -27,7 +27,6 @@ function onAuxClick(selector, callback, noPreventDefault) {
 
 // Show and hide the main menu on mobile devices.
 function toggleMainMenu() {
-    console.log("clc")
     let menu = document.querySelector(".header nav ul");
     let menuToggleButton = document.querySelector(".header button[aria-controls='header-menu']");
     if (menu.classList.contains("js-menu-show")) {
@@ -69,8 +68,16 @@ function handleSubmitButtons() {
 function setFocusToSearchInput(event) {
     event.preventDefault();
     event.stopPropagation();
+	  const toggleSearchButton = document.querySelector(".search details")
+    console.log(toggleSearchButton.getAttribute("open"))
+    if (!toggleSearchButton.getAttribute("open")) {
+      toggleSearchButton.setAttribute("open", "")
+      const searchInputElement = document.getElementById("search-input");
+      searchInputElement.focus();
+      searchInputElement.value = "";
+    }
 
-    let toggleSwitchElement = document.querySelector(".search-toggle-switch");
+    /* let toggleSwitchElement = document.querySelector(".search-toggle-switch");
     if (toggleSwitchElement) {
         toggleSwitchElement.style.display = "none";
     }
@@ -84,7 +91,7 @@ function setFocusToSearchInput(event) {
     if (searchInputElement) {
         searchInputElement.focus();
         searchInputElement.value = "";
-    }
+    } */
 }
 
 // Show modal dialog with the list of keyboard shortcuts.

internal/ui/static/js/bootstrap.js

@@ -82,7 +82,6 @@ document.addEventListener("DOMContentLoaded", () => {
     onClick("a[data-save-entry]", (event) => handleSaveEntry(event.target));
     onClick("a[data-toggle-bookmark]", (event) => handleBookmark(event.target));
     onClick("a[data-fetch-content-entry]", () => handleFetchOriginalContent());
-    onClick("a[data-action=search]", (event) => setFocusToSearchInput(event));
     onClick("a[data-share-status]", () => handleShare());
     onClick("a[data-action=markPageAsRead]", (event) => handleConfirmationMessage(event.target, () => markPageAsRead()));
     onClick("a[data-toggle-status]", (event) => handleEntryStatus("next", event.target));