From 731a075f72d9b385db8d368b8dcefd39c84ad116 Mon Sep 17 00:00:00 2001 From: maria-rcks <254055478+maria-rcks@users.noreply.github.com> Date: Mon, 31 Aug 2026 23:55:03 +0000 Subject: [PATCH 1/2] fix(settings): simplify open source license notices --- .../settings/OpenSourceLicenses.tsx | 300 +++++++++++------- 1 file changed, 182 insertions(+), 118 deletions(-) diff --git a/apps/web/src/components/settings/OpenSourceLicenses.tsx b/apps/web/src/components/settings/OpenSourceLicenses.tsx index 28932ae10ece..2a93d4d32ba5 100644 --- a/apps/web/src/components/settings/OpenSourceLicenses.tsx +++ b/apps/web/src/components/settings/OpenSourceLicenses.tsx @@ -5,14 +5,16 @@ import { decodeThirdPartyLicenseManifest, filterThirdPartyLicenseEntries, formatLicenseBundles, + thirdPartyLicenseEntryKey, type ThirdPartyLicenseEntry, type ThirdPartyLicenseManifest, } from "@t3tools/shared/thirdPartyLicenses"; -import { cn } from "../../lib/utils"; import { Button } from "../ui/button"; +import { Collapsible, CollapsiblePanel, CollapsibleTrigger } from "../ui/collapsible"; import { Input } from "../ui/input"; -import { SettingsPageContainer } from "./settingsLayout"; +import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip"; +import { SettingsPageContainer, SettingsSection } from "./settingsLayout"; type LicenseManifestState = | { readonly status: "loading" } @@ -30,80 +32,153 @@ async function loadLicenseManifest(signal: AbortSignal): Promise void; +}) { return ( -
- - {open ? ( -
-
-
-

- {entry.name} - {versionLabel} -

- {entry.sourceUrl ? ( - - Project source - - + +
+
+ + + + {entry.name} + {entry.version ? ( + {entry.version} ) : null} -
- 
-              {entry.noticeText}
-
-
+ + + {entry.license} · {formatLicenseBundles(entry.bundles)} + + + {entry.sourceUrl ? ( + + ) : null}
- ) : null} -
+ + {open ? ( +
+ 
+                {entry.noticeText}
+
+
+ ) : null} + + + + ); +} + +function LicenseCount({ + filteredCount, + totalCount, +}: { + filteredCount: number; + totalCount: number; +}) { + return ( +

+ {filteredCount === totalCount + ? `${String(totalCount)} notices` + : `${String(filteredCount)} of ${String(totalCount)}`} +

+ ); +} + +function LicenseHeaderAction({ + query, + onQueryChange, + searchOpen, + onSearchOpenChange, + filteredCount, + totalCount, +}: { + query: string; + onQueryChange: (value: string) => void; + searchOpen: boolean; + onSearchOpenChange: (open: boolean) => void; + filteredCount: number; + totalCount: number; +}) { + if (!searchOpen) { + return ( +
+ + + onSearchOpenChange(true)} + size="icon-micro" + type="button" + variant="ghost-muted" + > + + + } + /> + Search licenses + +
+ ); + } + + return ( +
+
+ +
+
+ + { + if (query.length === 0) onSearchOpenChange(false); + }} + onChange={(event) => onQueryChange(event.currentTarget.value)} + onKeyDown={(event) => { + if (event.key !== "Escape") return; + event.preventDefault(); + onQueryChange(""); + onSearchOpenChange(false); + }} + placeholder="Search licenses" + size="compact" + type="search" + value={query} + /> +
+
); } function LicenseManifestError({ message, onRetry }: { message: string; onRetry: () => void }) { return ( -
+
-

- Open-source notices are unavailable -

-

+

Open-source notices are unavailable

+

{message}

@@ -117,6 +192,8 @@ function LicenseManifestError({ message, onRetry }: { message: string; onRetry: export function OpenSourceLicensesPanel() { const [state, setState] = useState({ status: "loading" }); const [query, setQuery] = useState(""); + const [searchOpen, setSearchOpen] = useState(false); + const [openEntryKey, setOpenEntryKey] = useState(null); const [requestVersion, setRequestVersion] = useState(0); useEffect(() => { @@ -143,63 +220,50 @@ export function OpenSourceLicensesPanel() { const retry = useCallback(() => setRequestVersion((value) => value + 1), []); return ( - -
-

- Open source licenses -

-

- Third-party notices for dependencies and assets included in T3 Code. -

-
- - {state.status === "ready" ? ( -
-
- -

- {filteredEntries.length === entries.length - ? `${String(entries.length)} notices` - : `${String(filteredEntries.length)} of ${String(entries.length)} notices`} -

-
- -
+ + + ) : null + } + > + {state.status === "ready" ? ( +
{filteredEntries.length > 0 ? ( - filteredEntries.map((entry) => ( - - )) + filteredEntries.map((entry) => { + const entryKey = thirdPartyLicenseEntryKey(entry); + return ( + setOpenEntryKey(open ? entryKey : null)} + /> + ); + }) ) : ( -

+

No licenses match that search.

)}
-
- ) : state.status === "error" ? ( - - ) : ( -

- Loading open-source notices… -

- )} + ) : state.status === "error" ? ( + + ) : ( +

+ Loading open-source notices… +

+ )} + ); } From be8e9614cf786aabdd20a605326162898411eadd Mon Sep 17 00:00:00 2001 From: maria-rcks <254055478+maria-rcks@users.noreply.github.com> Date: Tue, 1 Sep 2026 00:14:42 +0000 Subject: [PATCH 2/2] fix(settings): use shared license search input --- .../components/settings/OpenSourceLicenses.tsx | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/apps/web/src/components/settings/OpenSourceLicenses.tsx b/apps/web/src/components/settings/OpenSourceLicenses.tsx index 2a93d4d32ba5..dc4703cad51a 100644 --- a/apps/web/src/components/settings/OpenSourceLicenses.tsx +++ b/apps/web/src/components/settings/OpenSourceLicenses.tsx @@ -12,7 +12,7 @@ import { import { Button } from "../ui/button"; import { Collapsible, CollapsiblePanel, CollapsibleTrigger } from "../ui/collapsible"; -import { Input } from "../ui/input"; +import { InputGroup, InputGroupAddon, InputGroupInput } from "../ui/input-group"; import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip"; import { SettingsPageContainer, SettingsSection } from "./settingsLayout"; @@ -147,12 +147,13 @@ function LicenseHeaderAction({
-
- - + + + + { if (query.length === 0) onSearchOpenChange(false); }} @@ -164,11 +165,11 @@ function LicenseHeaderAction({ onSearchOpenChange(false); }} placeholder="Search licenses" - size="compact" + size="sm" type="search" value={query} /> -
+
); }