feat: Enhance CommunitiesManager and FilterManager with improved tab styling and query parameter prefill functionality for better user experience and server selection.
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 2m2s

This commit is contained in:
2025-12-06 20:35:15 +07:00
parent cba1615cdf
commit 1566d3f998
2 changed files with 23 additions and 5 deletions
+4 -3
View File
@@ -403,10 +403,10 @@ function CommunitiesManager() {
</div> </div>
)} )}
{/* Вкладки: Список / Статистика */} {/* Вкладки: Список / Статистика в стиле Tabler */}
<div className="card mb-3"> <div className="card mb-3">
<div className="card-body p-2"> <div className="card-header border-0 pb-0">
<ul className="nav nav-tabs nav-tabs-bg" role="tablist"> <ul className="nav nav-tabs card-header-tabs" role="tablist">
<li className="nav-item" role="presentation"> <li className="nav-item" role="presentation">
<button <button
className={`nav-link ${activeTab === 'list' ? 'active' : ''}`} className={`nav-link ${activeTab === 'list' ? 'active' : ''}`}
@@ -417,6 +417,7 @@ function CommunitiesManager() {
> >
<IconList className="me-2" size={18} /> <IconList className="me-2" size={18} />
Список communities Список communities
<span className="badge bg-blue-lt text-blue ms-2">{filtered.length}</span>
</button> </button>
</li> </li>
<li className="nav-item" role="presentation"> <li className="nav-item" role="presentation">
+19 -2
View File
@@ -70,14 +70,31 @@ function FilterManager() {
const [sortBy, setSortBy] = useState('community'); // community | gateway | description const [sortBy, setSortBy] = useState('community'); // community | gateway | description
const [sortDir, setSortDir] = useState('asc'); // asc | desc const [sortDir, setSortDir] = useState('asc'); // asc | desc
// Префилл поиска из query-параметра ?community=... // Префилл из query (?community=..., ?serverId=..., ?server=...) и автоселект сервера
const prefillAppliedRef = useRef(false);
useEffect(() => { useEffect(() => {
if (prefillAppliedRef.current) return;
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
const communityFromQuery = params.get('community'); const communityFromQuery = params.get('community');
const serverIdFromQuery = params.get('serverId');
const serverNameFromQuery = params.get('server');
if (communityFromQuery) { if (communityFromQuery) {
setFilterSearch(communityFromQuery); setFilterSearch(communityFromQuery);
} }
}, []);
if (servers.length > 0) {
let target =
(serverIdFromQuery && servers.find((s) => s.id === serverIdFromQuery)) ||
(serverNameFromQuery && servers.find((s) => s.name === serverNameFromQuery)) ||
servers.find((s) => s.enabled) ||
servers[0];
if (target) {
setSelectedServer(target);
}
prefillAppliedRef.current = true;
}
}, [servers]);
// Состояние управления серверами // Состояние управления серверами
const [serverListModalOpen, setServerListModalOpen] = useState(false); const [serverListModalOpen, setServerListModalOpen] = useState(false);