From a9b7ba78b58541559e13cd8a908e5998eda57015 Mon Sep 17 00:00:00 2001
From: Mahmoud Hamdy <hmdy7486@gmail.com>
Date: Tue, 12 May 2026 06:13:38 +0300
Subject: [PATCH] Add "Go to Hadith Number" input to collection navigation

Adds a numeric input plus "Go" button that lets users jump directly to
a hadith by its number within the current collection. The widget is
rendered on the collection landing page and on the book/single-hadith
pages (collection/index.php and collection/dispbook.php).

Input is restricted to numeric values via input attributes and a
client-side regex check; the URL is built in JavaScript using the
existing `<collectionName>:<hadithNumber>` route, so no new server-side
handling is needed. Styling uses the same CSS variables as the search
box widget, so the field picks up the existing light/dark themes.

Fixes #153
---
 .../front/views/collection/_go_to_hadith.php  | 115 ++++++++++++++++++
 .../front/views/collection/dispbook.php       |   1 +
 .../modules/front/views/collection/index.php  |   1 +
 3 files changed, 117 insertions(+)
 create mode 100644 application/modules/front/views/collection/_go_to_hadith.php

diff --git a/application/modules/front/views/collection/_go_to_hadith.php b/application/modules/front/views/collection/_go_to_hadith.php
new file mode 100644
index 00000000..2fe3468d
--- /dev/null
+++ b/application/modules/front/views/collection/_go_to_hadith.php
@@ -0,0 +1,115 @@
+<?php
+/**
+ * "Go to Hadith Number" widget.
+ *
+ * Renders a small form that lets the user jump directly to a hadith by its
+ * number within the current collection. The URL pattern matches the
+ * `<collectionName>:<hadithNumber>` route defined in application/config/main.php.
+ *
+ * @var string $collectionName  The collection slug (e.g. "bukhari", "muslim").
+ */
+
+$inputId = 'goToHadithInput_' . uniqid();
+$formId  = 'goToHadithForm_' . uniqid();
+$collectionNameJs = json_encode($collectionName, JSON_UNESCAPED_SLASHES);
+?>
+<div class="go_to_hadith">
+    <form id="<?= $formId ?>" class="go_to_hadith_form" role="search" aria-label="Go to hadith number">
+        <label class="go_to_hadith_label" for="<?= $inputId ?>">Go to hadith #</label>
+        <input
+            type="number"
+            inputmode="numeric"
+            pattern="[0-9]*"
+            min="1"
+            step="1"
+            id="<?= $inputId ?>"
+            class="go_to_hadith_input"
+            placeholder="e.g. 1"
+            aria-label="Hadith number" />
+        <button type="submit" class="go_to_hadith_button">Go</button>
+    </form>
+</div>
+
+<script>
+(function () {
+    var form = document.getElementById(<?= json_encode($formId) ?>);
+    if (!form) return;
+    var input = document.getElementById(<?= json_encode($inputId) ?>);
+    var collectionName = <?= $collectionNameJs ?>;
+
+    form.addEventListener('submit', function (event) {
+        event.preventDefault();
+        var raw = (input.value || '').trim();
+        if (!raw) {
+            input.focus();
+            return;
+        }
+        // Strip leading zeros but allow plain "0" through to the server, which
+        // already 301-redirects /<col>:0N -> /<col>:N (CollectionController).
+        var num = raw.replace(/^0+(?=\d)/, '');
+        if (!/^\d+$/.test(num)) {
+            input.focus();
+            return;
+        }
+        window.location.href = '/' + encodeURIComponent(collectionName) + ':' + num;
+    });
+})();
+</script>
+
+<style>
+.go_to_hadith {
+    margin: 10px 0;
+    text-align: center;
+}
+
+.go_to_hadith_form {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.go_to_hadith_label {
+    font-size: 14px;
+    color: var(--secondary-text-color, inherit);
+}
+
+.go_to_hadith_input {
+    width: 90px;
+    height: 30px;
+    padding: 4px 8px;
+    box-sizing: border-box;
+    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.2));
+    border-radius: 4px;
+    background-color: var(--input-bg, #fff);
+    color: var(--primary-text-color, inherit);
+    font-size: 14px;
+}
+
+.go_to_hadith_input::-webkit-outer-spin-button,
+.go_to_hadith_input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+.go_to_hadith_input[type="number"] {
+    -moz-appearance: textfield;
+}
+
+.go_to_hadith_button {
+    height: 30px;
+    padding: 0 14px;
+    box-sizing: border-box;
+    border: none;
+    border-radius: 4px;
+    background-color: var(--chip-selected-bg, #3ba08f);
+    color: #fff;
+    font-size: 14px;
+    cursor: pointer;
+}
+
+.go_to_hadith_button:hover {
+    background-color: #1c625d;
+}
+</style>
diff --git a/application/modules/front/views/collection/dispbook.php b/application/modules/front/views/collection/dispbook.php
index 37edcf16..25c13abc 100644
--- a/application/modules/front/views/collection/dispbook.php
+++ b/application/modules/front/views/collection/dispbook.php
@@ -98,6 +98,7 @@ function displayBab($chapter, $collection, $ourBookID, $showIntro = true) {
     		<div class=clear></div>
 		</div>
     	<div class=clear></div>
+		<?php echo $this->render('/collection/_go_to_hadith', array('collectionName' => $collection->name)); ?>
 		<!-- <div style="width: 20%; float: left; text-align: center; font-size: 20px; padding-top: 16px;"><b><?php echo $totalCount; ?></b> hadith</div> -->
 
 	<?php
diff --git a/application/modules/front/views/collection/index.php b/application/modules/front/views/collection/index.php
index a8dc9409..5cbf0b8b 100644
--- a/application/modules/front/views/collection/index.php
+++ b/application/modules/front/views/collection/index.php
@@ -39,6 +39,7 @@
 	<div class=clear></div>
 	</div>
 
+	<?php echo $this->render('/collection/_go_to_hadith', array('collectionName' => $collectionName)); ?>
 
 		<div class="book_titles titles">
 				<?php