always display search bar

.goreleaser.yaml

@@ -1,5 +1,4 @@
-# This is an example .goreleaser.yml file with some sensible defaults.
-# Make sure to check the documentation at https://goreleaser.com
+version: 2
 before:
   hooks:
     # You may remove this if you don't use go modules.
@@ -33,7 +32,7 @@ archives:
 checksum:
   name_template: 'checksums.txt'
 snapshot:
-  name_template: "{{ incpatch .Version }}-next"
+  version_template: "{{ incpatch .Version }}-next"
 changelog:
   sort: asc
   filters:

frontend/src/pages/Home.css

@@ -15,4 +15,5 @@
 .footer ion-toolbar {
   text-align: center;
   color: #8c8c8c;
+  cursor: pointer;
 }

frontend/src/pages/Home.tsx

@@ -1,6 +1,7 @@
 import {
   IonContent,
   IonPage,
+  IonIcon,
   IonItem,
   IonList,
   IonSpinner,
@@ -13,9 +14,9 @@ import {
 import Fuse from "fuse.js";
 import { create } from "zustand";
 import { useState } from "react";
-import { warningOutline } from "ionicons/icons";
+import { warningOutline, refreshOutline } from "ionicons/icons";
 
-import { useStore, Bot } from "../store";
+import { useStore, Bot, api } from "../store";
 import BotItem from "../components/BotItem";
 import { getText as _, format } from "../i18n";
 import "./Home.css";
@@ -58,20 +59,17 @@ const Home: React.FC = () => {
 
   return (
     <IonPage>
+      {state.bots.length > 0 && (
+        <IonToolbar>
+          <br />
+          <IonSearchbar
+            debounce={200}
+            onIonInput={(ev) => handleInput(ev)}
+            placeholder={format(_("search-placeholder"), state.bots.length)}
+          ></IonSearchbar>
+        </IonToolbar>
+      )}
       <IonContent fullscreen>
-        {state.syncing && state.hash && (
-          <IonProgressBar type="indeterminate"></IonProgressBar>
-        )}
-        {state.bots.length > 0 && (
-          <>
-            <br />
-            <IonSearchbar
-              debounce={200}
-              onIonInput={(ev) => handleInput(ev)}
-              placeholder={format(_("search-placeholder"), state.bots.length)}
-            ></IonSearchbar>
-          </>
-        )}
         {state.hash ? (
           <IonList>
             {results.map((bot) => (
@@ -95,9 +93,13 @@ const Home: React.FC = () => {
         )}
       </IonContent>
       {state.lastSync && (
-        <IonFooter translucent collapse="fade" class="footer">
-          <IonToolbar>
+        <IonFooter collapse="fade" class="footer">
+          <IonToolbar onClick={() => api.sync(true)}>
+            <IonIcon slot="start" icon={refreshOutline} />
             {format(_("last-updated"), state.lastSync.toLocaleString())}
+            {state.syncing && state.hash && (
+              <IonProgressBar type="indeterminate"></IonProgressBar>
+            )}
           </IonToolbar>
         </IonFooter>
       )}

frontend/src/store.ts

@@ -8,15 +8,16 @@ function isOnline(lastSync: Date, lastSeen?: Date): boolean {
   return timeAgo <= recently;
 }
 
-const api = (() => {
+export const api = (() => {
   return {
-    sync: () => {
+    sync: (force: boolean = false) => {
       const lastSyncReq =
         localStorage.getItem(lastSyncReqKey) ||
         localStorage.getItem(lastSyncKey) ||
         "";
       const hash = localStorage.getItem(hashKey) || null;
       if (
+        !force &&
         lastSyncReq &&
         new Date().getTime() - new Date(lastSyncReq).getTime() <=
           1000 * 60 * (hash ? 10 : 1)