diff --git a/api/tabs.php b/api/tabs.php index 9132e6e..6cb19b4 100644 --- a/api/tabs.php +++ b/api/tabs.php @@ -19,8 +19,8 @@ try { // Create a new tab $data = json_decode(file_get_contents('php://input'), true); if (isset($data['name'])) { - $stmt = $pdo->prepare("INSERT INTO tabs (name, user_id) VALUES (?, ?)"); - $stmt->execute([$data['name'], $data['user_id'] ?? null]); + $stmt = $pdo->prepare("INSERT INTO tabs (name, user_id, show_search_bar) VALUES (?, ?, ?)"); + $stmt->execute([$data['name'], $data['user_id'] ?? null, $data['show_search_bar'] ?? 1]); $response = ['id' => $pdo->lastInsertId(), 'name' => $data['name']]; } else { http_response_code(400); // Bad Request @@ -42,6 +42,7 @@ try { 'theme' => $data['theme'] ?? null, 'theme_transparency' => $data['theme_transparency'] ?? null, 'column_count' => $data['column_count'] ?? 5, + 'show_search_bar' => $data['show_search_bar'] ?? 1, ]; // Handle empty strings to set them to NULL for proper fallback @@ -65,7 +66,8 @@ try { background_saturation = :background_saturation, theme = :theme, theme_transparency = :theme_transparency, - column_count = :column_count + column_count = :column_count, + show_search_bar = :show_search_bar WHERE id = :id "); diff --git a/api/update_database.php b/api/update_database.php index accd9c2..d8b0b90 100644 --- a/api/update_database.php +++ b/api/update_database.php @@ -23,7 +23,8 @@ try { 'background_saturation' => 'INTEGER DEFAULT 100', 'theme' => 'TEXT DEFAULT NULL', 'theme_transparency' => 'INTEGER DEFAULT NULL', - 'login_token' => 'VARCHAR(255)' + 'login_token' => 'VARCHAR(255)', + 'show_search_bar' => 'INTEGER DEFAULT 1' ]; $columns_added = false; @@ -77,6 +78,17 @@ try { } } + // --- Check settings table for show_search_bar setting --- + $settings_check = $pdo->prepare("SELECT value FROM settings WHERE key = 'show_search_bar'"); + $settings_check->execute(); + if (!$settings_check->fetch()) { + $pdo->prepare("INSERT INTO settings (key, value) VALUES (?, ?)")->execute(['show_search_bar', '1']); + $messages[] = "Added 'show_search_bar' setting to settings table."; + $columns_added = true; + } else { + $messages[] = "Setting 'show_search_bar' already exists in settings table."; + } + if ($columns_added) { echo json_encode(['success' => true, 'message' => 'Database updated successfully!', 'details' => $messages]); } else { diff --git a/include/css/style.css b/include/css/style.css index b7e3e1b..80e3ab7 100644 --- a/include/css/style.css +++ b/include/css/style.css @@ -192,9 +192,6 @@ body.dark-background-active .form-text, } /* Custom styles for transparent theme */ -[data-bs-theme="transparent"] { - /* Transparent theme styles can be added here if needed */ -} /* New navbar layout */ .container-fluid { @@ -232,20 +229,64 @@ body.user-settings-page .search-container-center { position: absolute; left: 50%; transform: translateX(-50%); - max-width: 600px; + max-width: 500px; width: 100%; z-index: 10; } +.search-container-center .input-group { + border-radius: 25px; + overflow: hidden; + background-color: rgba(255, 255, 255, 0.05); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.1); +} + .search-container-center .form-control { - font-size: 1.1rem; - padding: 0.75rem 1rem; + font-size: 1rem; + padding: 0.6rem 1rem; height: auto; + border: none; + background-color: transparent; + color: white; + box-shadow: none; +} + +.search-container-center .form-control:focus { + border: none; + box-shadow: none; + background-color: transparent; + outline: none; +} + +.search-container-center .form-control::placeholder { + color: rgba(255, 255, 255, 0.6); } .search-container-center .btn { - padding: 0.75rem 1rem; - font-size: 1.1rem; + padding: 0.6rem 0.8rem; + font-size: 1rem; + background-color: transparent; + border: none; + color: rgba(255, 255, 255, 0.7); + transition: all 0.2s ease; +} + +.search-container-center .btn:hover { + background-color: rgba(255, 255, 255, 0.1); + color: white; +} + +/* Reset button styling */ +.search-container-center #searchResetButton { + background-color: transparent; + border: none; + color: rgba(255, 255, 255, 0.5); +} + +.search-container-center #searchResetButton:hover { + background-color: rgba(255, 255, 255, 0.1); + color: white; } .search-results { diff --git a/include/header.php b/include/header.php index 79f95e4..04c6646 100644 --- a/include/header.php +++ b/include/header.php @@ -115,18 +115,34 @@ if ($theme === 'dark' || in_array('dark-background-active', $body_classes)) { +
- -
+
diff --git a/include/init.php b/include/init.php index 91194b3..3133e61 100644 --- a/include/init.php +++ b/include/init.php @@ -53,6 +53,13 @@ if ($db_initialized) { $pdo->exec("ALTER TABLE users ADD COLUMN role TEXT NOT NULL DEFAULT 'user'"); $pdo->exec("UPDATE users SET role = 'admin' WHERE id = 1"); } + + // Add show_search_bar setting if it doesn't exist + $stmt = $pdo->prepare("SELECT value FROM settings WHERE key = 'show_search_bar'"); + $stmt->execute(); + if (!$stmt->fetch()) { + $pdo->prepare("INSERT INTO settings (key, value) VALUES (?, ?)")->execute(['show_search_bar', '1']); + } } if (!$db_initialized) { @@ -85,6 +92,7 @@ if (!$db_initialized) { 'language' => 'en', 'favicon_extractor_url' => 'https://favicon.hibbit.cloud', 'debug_mode' => '0', + 'show_search_bar' => '1', 'theme' => 'transparent', 'background_image_url' => '', 'background_brightness' => '50', @@ -174,6 +182,11 @@ if (tableExists($pdo, 'tabs') && !columnExists($pdo, 'tabs', 'column_count')) { $pdo->exec("ALTER TABLE tabs ADD COLUMN column_count INTEGER DEFAULT 5"); } +// Migration: Add show_search_bar to tabs table if it doesn't exist +if (tableExists($pdo, 'tabs') && !columnExists($pdo, 'tabs', 'show_search_bar')) { + $pdo->exec("ALTER TABLE tabs ADD COLUMN show_search_bar INTEGER DEFAULT 1"); +} + // Check if tab_id column exists in bookmarks table if (!columnExists($pdo, 'bookmarks', 'tab_id')) { $pdo->exec("ALTER TABLE bookmarks ADD COLUMN tab_id INTEGER"); diff --git a/include/js/script.js b/include/js/script.js index 9a4221f..5088c82 100644 --- a/include/js/script.js +++ b/include/js/script.js @@ -394,9 +394,10 @@ function optimizeImage(path) { function initSearch() { const searchInput = document.getElementById('searchInput'); const searchButton = document.getElementById('searchButton'); - const searchEngineButton = document.getElementById('searchEngineButton'); + const searchResetButton = document.getElementById('searchResetButton'); const searchResults = document.getElementById('searchResults'); + // Check if search bar is enabled and elements exist if (!searchInput || !searchResults) return; let searchTimeout; @@ -410,6 +411,13 @@ function initSearch() { clearTimeout(searchTimeout); const query = this.value.trim(); + // Show/hide reset button based on input content + if (query.length > 0) { + searchResetButton.style.display = 'block'; + } else { + searchResetButton.style.display = 'none'; + } + if (query.length < 2) { hideSearchResults(); return; @@ -430,16 +438,17 @@ function initSearch() { }); } - // Search engine button click - if (searchEngineButton) { - searchEngineButton.addEventListener('click', function() { - const query = searchInput.value.trim(); - if (query) { - searchOnWeb(query); - } + // Reset button click + if (searchResetButton) { + searchResetButton.addEventListener('click', function() { + searchInput.value = ''; + searchResetButton.style.display = 'none'; + hideSearchResults(); + searchInput.focus(); }); } + // Hide search results when clicking outside document.addEventListener('click', function(event) { if (!searchInput.contains(event.target) && !searchResults.contains(event.target)) { @@ -525,20 +534,6 @@ function initSearch() {
`; } else { - // Add search engine options - searchResults.innerHTML = ` -
-
- - Zoek "${query}" op Google -
-
- - Zoek "${query}" op DuckDuckGo -
-
- `; - // Add bookmark results results.forEach(bookmark => { const resultItem = document.createElement('div'); @@ -576,14 +571,3 @@ function initSearch() { searchResults.classList.remove('show'); } } - -// Search engine functions -function searchOnWeb(query) { - const searchUrl = `https://www.google.com/search?q=${encodeURIComponent(query)}`; - window.open(searchUrl, '_blank'); -} - -function searchOnDuckDuckGo(query) { - const searchUrl = `https://duckduckgo.com/?q=${encodeURIComponent(query)}`; - window.open(searchUrl, '_blank'); -} \ No newline at end of file diff --git a/lang/en.php b/lang/en.php index ea42409..1dd3c19 100644 --- a/lang/en.php +++ b/lang/en.php @@ -70,6 +70,7 @@ return [ 'settings_favicon_extractor_url' => 'Favicon Extractor Base URL', 'settings_favicon_extractor_url_help' => 'Provide the service base URL (e.g., http://localhost:3000). The path /favicon/{URL}?larger=true will be appended automatically.', 'settings_debug_mode' => 'Enable Debug mode', + 'settings_show_search_bar' => 'Show search bar', 'settings_save_settings_button' => 'Save Settings', 'settings_user_account_title' => 'User Account', 'settings_new_password' => 'New Password (leave blank to keep current)', @@ -146,4 +147,6 @@ return [ 'tab_clear_token_confirm' => 'Are you sure you want to clear the login token? The unique URL will no longer work.', 'tooltip_copy_to_clipboard' => 'Copy to clipboard', 'tooltip_copied' => 'Copied!', + 'tab_show_search_bar' => 'Show search bar', + 'tab_show_search_bar_help' => 'Enable or disable the search bar for this specific tab. This overrides the global search bar setting.', ]; diff --git a/lang/nl.php b/lang/nl.php index 7d36566..4731d3f 100644 --- a/lang/nl.php +++ b/lang/nl.php @@ -70,6 +70,7 @@ return [ 'settings_favicon_extractor_url' => 'Favicon Extractor Basis URL', 'settings_favicon_extractor_url_help' => 'Geef de basis-URL van de service op (bijv. http://localhost:3000). Het pad /favicon/{URL}?larger=true wordt automatisch toegevoegd.', 'settings_debug_mode' => 'Foutopsporingsmodus inschakelen', + 'settings_show_search_bar' => 'Zoekbalk weergeven', 'settings_save_settings_button' => 'Instellingen Opslaan', 'settings_user_account_title' => 'Gebruikersaccount', 'settings_new_password' => 'Nieuw Wachtwoord (laat leeg om huidige te behouden)', @@ -147,6 +148,8 @@ return [ 'tab_clear_token_confirm' => 'Weet je zeker dat je de inlog-token wilt wissen? De unieke URL werkt dan niet meer.', 'tooltip_copy_to_clipboard' => 'Kopieer naar klembord', 'tooltip_copied' => 'Gekopieerd!', + 'tab_show_search_bar' => 'Zoekbalk weergeven', + 'tab_show_search_bar_help' => 'Schakel de zoekbalk in of uit voor dit specifieke tabblad. Dit overschrijft de globale zoekbalk instelling.', // Search functionality 'search_placeholder' => 'Zoeken (Ctrl+K)', diff --git a/settings.php b/settings.php index d67c830..edf41c4 100644 --- a/settings.php +++ b/settings.php @@ -31,7 +31,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') { } // Handle checkboxes separately, as they are not sent when unchecked - $checkboxes = ['display_site_title', 'open_new_tab', 'dashboard_protected']; + $checkboxes = ['display_site_title', 'open_new_tab', 'dashboard_protected', 'show_search_bar']; foreach ($checkboxes as $key) { $upsert_stmt->execute([$key, isset($_POST[$key]) ? '1' : '0']); } @@ -292,6 +292,10 @@ require_once 'include/header.php'; > +
+ > + +
-
- - +
+
+ + +
+
+
+ + +
+
+
@@ -365,6 +374,7 @@ document.addEventListener('DOMContentLoaded', function() { document.getElementById('edit-tab-name').value = tabData.name; document.getElementById('edit-tab-owner').value = tabData.user_id || ''; document.getElementById('edit-tab-column-count').value = tabData.column_count || '5'; + document.getElementById('edit-tab-show-search-bar').checked = (tabData.show_search_bar ?? 1) == 1; // Populate login url const loginUrlInput = document.getElementById('edit-tab-login-url'); @@ -510,6 +520,7 @@ document.addEventListener('DOMContentLoaded', function() { const name = document.getElementById('edit-tab-name').value.trim(); const ownerId = document.getElementById('edit-tab-owner').value; const columnCount = document.getElementById('edit-tab-column-count').value; + const showSearchBar = document.getElementById('edit-tab-show-search-bar').checked ? 1 : 0; // Get theme and background values from the other modal's inputs const theme = document.getElementById('edit-tab-theme').value; @@ -529,6 +540,7 @@ document.addEventListener('DOMContentLoaded', function() { name: name, user_id: ownerId, column_count: columnCount, + show_search_bar: showSearchBar, theme: theme, theme_transparency: transparency, background_image_url: backgroundUrl, @@ -555,7 +567,7 @@ document.addEventListener('DOMContentLoaded', function() { await fetch('api/tabs.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ name: name, user_id: userId }) + body: JSON.stringify({ name: name, user_id: userId, show_search_bar: 1 }) }); newTabNameInput.value = ''; newTabUserInput.value = '';