nezumi/9router
1
0
Fork 0
mirror of https://github.com/Nezumi-2711/9router.git synced 2026-09-22 20:00:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: resolve SonarQube findings and Next.js Image warnings

Browse Source 
SonarQube/SonarLint fixes:
- Remove unused imports (useMemo, PROVIDER_ENDPOINTS, updateSettings, APP_CONFIG)
- Add PropTypes validation to all components receiving props
- Fix accessibility issues (semantic buttons, ARIA attributes, form labels)
- Replace array index keys with stable identifiers
- Extract duplicate getStatusDisplay function in providers page
- Fix negated conditions for better readability
- Add node: prefix to Node.js imports in localDb.js
- Fix optional chaining in pricing lookup
- Add explanatory comments to empty catch blocks
- Consolidate duplicate OAuth flow branches
- Change parseInt to Number.parseInt
- Disable false positive rules in VS Code settings

Next.js Image fixes:
- Add style={{ width: "auto", height: "auto" }} to all Image components
- Resolves aspect ratio warnings without triggering lint issues

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
apeltekci
2026-01-20 13:31:36 +07:00
committed by decolua
co-authored by Claude Opus 4.5
parent d9b8e48725
commit 7058b062e7
14 changed files with 307 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/components/Header.js
+10 -4
View File
@@ -1,11 +1,11 @@
"use client";
import { usePathname } from "next/navigation";
import { usePathname, useRouter } from "next/navigation";
import Link from "next/link";
import Image from "next/image";
import { useRouter } from "next/navigation";
import PropTypes from "prop-types";
import { ThemeToggle } from "@/shared/components";
import { APP_CONFIG, OAUTH_PROVIDERS, APIKEY_PROVIDERS } from "@/shared/constants/config";
import { OAUTH_PROVIDERS, APIKEY_PROVIDERS } from "@/shared/constants/config";
const getPageInfo = (pathname) => {
if (!pathname) return { title: "", description: "", breadcrumbs: [] };
@@ -73,7 +73,7 @@ export default function Header({ onMenuClick, showMenuButton = true }) {
{breadcrumbs.length > 0 ? (
<div className="flex items-center gap-2">
{breadcrumbs.map((crumb, index) => (
<div key={index} className="flex items-center gap-2">
<div key={`${crumb.label}-${crumb.href || "current"}`} className="flex items-center gap-2">
{index > 0 && (
<span className="material-symbols-outlined text-text-muted text-base">
chevron_right
@@ -95,6 +95,7 @@ export default function Header({ onMenuClick, showMenuButton = true }) {
width={28}
height={28}
className="object-contain rounded"
style={{ width: "auto", height: "auto" }}
onError={(e) => { e.currentTarget.style.display = "none"; }}
/>
)}
@@ -134,3 +135,8 @@ export default function Header({ onMenuClick, showMenuButton = true }) {
);
}
Header.propTypes = {
onMenuClick: PropTypes.func,
showMenuButton: PropTypes.bool,
};
src/shared/components/OAuthModal.js
+18 -9
View File
@@ -1,6 +1,7 @@
"use client";
import { useState, useEffect, useRef, useCallback } from "react";
import PropTypes from "prop-types";
import { Modal, Button, Input } from "@/shared/components";
import { useCopyToClipboard } from "@/shared/hooks/useCopyToClipboard";
@@ -151,12 +152,12 @@ export default function OAuthModal({ isOpen, provider, providerInfo, onSuccess,
setAuthData({ ...data, redirectUri });
// For Codex, always use manual input since it requires fixed port 1455
if (provider === "codex") {
// For Codex or non-localhost: use manual input mode
if (provider === "codex" || !isLocalhost) {
setStep("input");
window.open(data.authUrl, "_blank");
} else if (isLocalhost) {
// Other providers on localhost: Open popup and wait for message
} else {
// Localhost (non-Codex): Open popup and wait for message
setStep("waiting");
popupRef.current = window.open(data.authUrl, "oauth_popup", "width=600,height=700");
@@ -164,10 +165,6 @@ export default function OAuthModal({ isOpen, provider, providerInfo, onSuccess,
if (!popupRef.current) {
setStep("input");
}
} else {
// Remote: Show manual input
setStep("input");
window.open(data.authUrl, "_blank");
}
} catch (err) {
setError(err.message);
@@ -256,7 +253,9 @@ export default function OAuthModal({ isOpen, provider, providerInfo, onSuccess,
localStorage.removeItem("oauth_callback");
}
}
} catch (e) {}
} catch {
// localStorage may be unavailable or data may be malformed - ignore silently
}
return () => {
window.removeEventListener("message", handleMessage);
@@ -430,3 +429,13 @@ export default function OAuthModal({ isOpen, provider, providerInfo, onSuccess,
</Modal>
);
}
OAuthModal.propTypes = {
isOpen: PropTypes.bool.isRequired,
provider: PropTypes.string,
providerInfo: PropTypes.shape({
name: PropTypes.string,
}),
onSuccess: PropTypes.func,
onClose: PropTypes.func.isRequired,
};
src/shared/components/UsageStats.js
+26 -10
View File
@@ -1,6 +1,7 @@
"use client";
import { useState, useEffect, useMemo, useCallback } from "react";
import PropTypes from "prop-types";
import { useSearchParams, useRouter } from "next/navigation";
import Card from "./Card";
import Badge from "./Badge";
@@ -11,22 +12,33 @@ function SortIcon({ field, currentSort, currentOrder }) {
return <span className="ml-1">{currentOrder === "asc" ? "↑" : "↓"}</span>;
}
SortIcon.propTypes = {
field: PropTypes.string.isRequired,
currentSort: PropTypes.string.isRequired,
currentOrder: PropTypes.string.isRequired,
};
function MiniBarGraph({ data, colorClass = "bg-primary" }) {
const max = Math.max(...data, 1);
return (
<div className="flex items-end gap-1 h-8 w-24">
{data.slice(-9).map((val, i) => (
{data.slice(-9).map((val, idx) => (
<div
key={i}
key={`bar-${idx}-${val}`}
className={`flex-1 rounded-t-sm transition-all duration-500 ${colorClass}`}
style={{ height: `${Math.max((val / max) * 100, 5)}%` }}
title={val}
title={String(val)}
/>
))}
</div>
);
}
MiniBarGraph.propTypes = {
data: PropTypes.arrayOf(PropTypes.number).isRequired,
colorClass: PropTypes.string,
};
export default function UsageStats() {
const router = useRouter();
const searchParams = useSearchParams();
@@ -235,11 +247,15 @@ export default function UsageStats() {
</div>
{/* Auto Refresh Toggle */}
<label className="text-sm font-medium text-text-muted flex items-center gap-2 cursor-pointer">
<div className="text-sm font-medium text-text-muted flex items-center gap-2">
<span>Auto Refresh ({refreshInterval / 1000}s)</span>
<div
<button
type="button"
onClick={() => setAutoRefresh(!autoRefresh)}
className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors focus:outline-none ${
role="switch"
aria-checked={autoRefresh}
aria-label="Toggle auto refresh"
className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-primary/50 ${
autoRefresh ? "bg-primary" : "bg-bg-subtle border border-border"
}`}
>
@@ -248,8 +264,8 @@ export default function UsageStats() {
autoRefresh ? "translate-x-5" : "translate-x-1"
}`}
/>
</div>
</label>
</button>
</div>
</div>
</div>
@@ -265,9 +281,9 @@ export default function UsageStats() {
Active Requests
</div>
<div className="flex flex-wrap gap-3">
{stats.activeRequests.map((req, i) => (
{stats.activeRequests.map((req) => (
<div
key={i}
key={`${req.model}-${req.provider}-${req.account}`}
className="px-3 py-1.5 rounded-md bg-bg-subtle border border-primary/20 text-xs font-mono shadow-sm"
>
<span className="text-primary font-bold">{req.model}</span>
src/shared/components/layouts/AuthLayout.js
+5
View File
@@ -1,5 +1,6 @@
"use client";
import PropTypes from "prop-types";
import ThemeToggle from "../ThemeToggle";
export default function AuthLayout({ children }) {
@@ -22,3 +23,7 @@ export default function AuthLayout({ children }) {
);
}
AuthLayout.propTypes = {
children: PropTypes.node.isRequired,
};