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
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 2m2s
This commit is contained in:
@@ -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">
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
Reference in New Issue
Block a user