feat: node info, build info and acrylic web theme

Squash of recent dev work: return_session login, backend switcher, line
detail timeline, overview strips, node platform/country/ISP info with flags
and icons, build info (version, tag, time) behind site.show_build, and the
acrylic display theme.

web/shared/hooks.ts

@@ -5,6 +5,8 @@ export interface QueryState<T> {
   data: T | undefined
   error: ApiError | Error | undefined
   loading: boolean
+  /** 正在加载，而且不是定时刷新引起的（第一次加载、换了条件）：用来显示进度条，定时刷新不打扰用户。 */
+  busy: boolean
   reload: () => void
 }
 
@@ -14,17 +16,23 @@ export function useQuery<T>(fetcher: () => Promise<T>, deps: unknown[], interval
   const [error, setError] = useState<ApiError | Error>()
   const [loading, setLoading] = useState(true)
   const [tick, setTick] = useState(0)
+  const [silent, setSilent] = useState(false)
+  const lastTick = useRef(0)
   const fetcherRef = useRef(fetcher)
   fetcherRef.current = fetcher
 
   useEffect(() => {
     let alive = true
+    // 只有 tick 变了（定时刷新、reload）才算静默刷新；条件变了是用户能感觉到的加载
+    setSilent(lastTick.current !== tick)
+    lastTick.current = tick
     setLoading(true)
     fetcherRef
       .current()
       .then((value) => {
         if (!alive) return
-        setData(value)
+        // 轮询取到一模一样的数据时保持原来的对象，依赖它的图表不会白白重建（那是闪烁的来源）
+        setData((previous) => (previous !== undefined && JSON.stringify(previous) === JSON.stringify(value) ? previous : value))
         setError(undefined)
       })
       .catch((e: unknown) => {
@@ -46,7 +54,7 @@ export function useQuery<T>(fetcher: () => Promise<T>, deps: unknown[], interval
   }, [intervalMs])
 
   const reload = useCallback(() => setTick((t) => t + 1), [])
-  return { data, error, loading, reload }
+  return { data, error, loading, busy: loading && !silent, reload }
 }
 
 export type Theme = 'light' | 'dark'