v3: added localization, use global player for uploaded audio/video files

src/components/SearchBar.tsx

@@ -1,5 +1,6 @@
 import { type FormEvent, useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router";
+import { t } from "@lingui/core/macro";
 
 interface SearchBarProps {
   collapsible?: boolean;
@@ -15,7 +16,7 @@ export function SearchBar({ collapsible = false }: SearchBarProps) {
 
   useEffect(() => {
     if (collapsible && expanded) inputRef.current?.focus();
-  }, [expanded]);
+  }, [expanded, collapsible]);
 
   function handleIconClick() {
     if (!collapsible) return;
@@ -57,17 +58,17 @@ export function SearchBar({ collapsible = false }: SearchBarProps) {
         ref={inputRef}
         type="search"
         className="search-bar-input"
-        placeholder="Search dumps, users, playlists…"
+        placeholder={t`Search dumps, users, playlists…`}
         value={value}
         onChange={(e) => setValue(e.target.value)}
         onKeyDown={handleKeyDown}
-        aria-label="Search"
+        aria-label={t`Search`}
         tabIndex={expanded ? 0 : -1}
       />
       <button
         type={expanded && !collapsible ? "submit" : "button"}
         className="search-bar-btn"
-        aria-label={expanded ? "Submit search" : "Open search"}
+        aria-label={expanded ? t`Submit search` : t`Open search`}
         onClick={collapsible ? handleIconClick : undefined}
       >
         🔍