Update the results after pressing the Back button

src/components/HTMLPreview.svelte

@@ -1,6 +1,6 @@
 <script>
 	import dayjs from 'dayjs'
-	import { search, query, hasQuery, channels } from '../store.js'
+	import { search, query, hasQuery, channels, setSearchParam } from '../store.js'
 
 	export let data
 	export let close
@@ -40,9 +40,12 @@
 	function searchBy(name, value) {
 		value = value.includes(' ') ? `"${value}"` : value
 		const q = `${name}:${value}`
+		if($query !== q) {
 			query.set(q)
 			hasQuery.set(true)
 			search(q)
+			setSearchParam('q', q)
+		}
 		close()
 	}
 </script>

src/routes/index.svelte

@@ -1,6 +1,6 @@
 <script>
   import InfiniteLoading from 'svelte-infinite-loading'
-  import { fetchChannels, hasQuery, countries, filteredChannels, query, search } from '../store.js'
+  import { fetchChannels, hasQuery, countries, filteredChannels, query, search, setSearchParam, setPageTitle } from '../store.js'
   import { onMount, onDestroy } from 'svelte'
   import CountryItem from '../components/CountryItem.svelte'
   import SearchField from '../components/SearchField.svelte'
@@ -19,12 +19,8 @@
 
   $: grouped = _.groupBy($filteredChannels, 'country.code')
 
-  function reset() {
+  function loadMore({ detail }) {
-    limit = initLimit
+    let { loaded, complete } = detail
-    infiniteId = +new Date()
-  }
-
-  function loadMore({ detail: { loaded, complete } }) {
     if (limit < _countries.length) {
       limit++
       loaded()
@@ -33,10 +29,16 @@
     }
   }
 
+  function reset() {
+    infiniteId = +new Date()
+    limit = initLimit
+  }
+
   onMount(async () => {
     const params = new URLSearchParams(window.location.search)
     const q = params.get('q')
     if (q) {
+      setPageTitle(q)
       query.set(q)
       hasQuery.set(true)
     }
@@ -48,6 +50,19 @@
     if($hasQuery) {
       search($query)
     }
+
+    window.onpopstate = (event) => {
+      const q = event.state.q
+      if (q) {
+        setPageTitle(q)
+        query.set(q)
+        hasQuery.set(true)
+        search($query)
+      } else {
+        setPageTitle(null)
+        hasQuery.set(false)
+      }
+    }
   })
 </script>
 

src/store.js

@@ -9,7 +9,6 @@ export const countries = writable({})
 export const filteredChannels = writable([])
 
 export function search(_query) {
-	setSearchParam('q', _query)
 	const parts = _query.toLowerCase().match(/(".*?"|[^"\s]+)+(?=\s*|\s*$)/g) || []
 	const filters = []
 	for (let value of parts) {
@@ -180,11 +179,19 @@ function generateSearchable(c) {
 	return searchable
 }
 
-function setSearchParam(key, value) {
+export function setSearchParam(key, value) {
 	if (window.history.pushState) {
 		let query = key && value ? `?${key}=${value}` : ''
 		query = query.replace(/\+/g, '%2B')
 		const url = `${window.location.protocol}//${window.location.host}${window.location.pathname}${query}`
-		window.history.pushState({ path: url }, '', url)
+		const state = {}
+		state[key] = value
+		window.history.pushState(state, '', url)
+		setPageTitle(value)
 	}
 }
+
+export function setPageTitle(value) {
+	const title = value ? `${value} · iptv-org` : 'iptv-org'
+	document.title = title
+}