mirror of
https://github.com/fosrl/pangolin.git
synced 2026-07-06 04:10:13 +00:00
improve responsiveness
This commit is contained in:
@@ -180,7 +180,6 @@ export function LauncherGroupSection({
|
|||||||
<LauncherResourceList
|
<LauncherResourceList
|
||||||
resources={resources}
|
resources={resources}
|
||||||
showLabels={config.showLabels}
|
showLabels={config.showLabels}
|
||||||
showSiteTags={config.showSiteTags}
|
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
<div
|
<div
|
||||||
|
|||||||
@@ -48,7 +48,7 @@ export function LauncherGroupTrigger({
|
|||||||
isOpen
|
isOpen
|
||||||
}: LauncherGroupTriggerProps) {
|
}: LauncherGroupTriggerProps) {
|
||||||
return (
|
return (
|
||||||
<CollapsibleTrigger className="sticky top-0 z-20 md:top-16 flex w-full items-center gap-2.5 rounded-md bg-accent px-4 py-2.5 text-left transition-colors cursor-pointer">
|
<CollapsibleTrigger className="flex w-full items-center gap-2.5 rounded-md bg-accent px-4 py-2.5 text-left transition-colors cursor-pointer">
|
||||||
{group.groupType === "site" || group.groupType === "label" ? (
|
{group.groupType === "site" || group.groupType === "label" ? (
|
||||||
<LauncherGroupStatusDot group={group} />
|
<LauncherGroupStatusDot group={group} />
|
||||||
) : null}
|
) : null}
|
||||||
|
|||||||
@@ -6,13 +6,11 @@ import { LauncherResourceRow } from "./LauncherResourceRow";
|
|||||||
type LauncherResourceListProps = {
|
type LauncherResourceListProps = {
|
||||||
resources: LauncherResource[];
|
resources: LauncherResource[];
|
||||||
showLabels: boolean;
|
showLabels: boolean;
|
||||||
showSiteTags: boolean;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export function LauncherResourceList({
|
export function LauncherResourceList({
|
||||||
resources,
|
resources,
|
||||||
showLabels,
|
showLabels
|
||||||
showSiteTags
|
|
||||||
}: LauncherResourceListProps) {
|
}: LauncherResourceListProps) {
|
||||||
return (
|
return (
|
||||||
<div className="w-full max-md:overflow-x-auto max-md:overflow-y-hidden">
|
<div className="w-full max-md:overflow-x-auto max-md:overflow-y-hidden">
|
||||||
@@ -22,7 +20,6 @@ export function LauncherResourceList({
|
|||||||
key={resource.launcherResourceKey}
|
key={resource.launcherResourceKey}
|
||||||
resource={resource}
|
resource={resource}
|
||||||
showLabels={showLabels}
|
showLabels={showLabels}
|
||||||
showSiteTags={showSiteTags}
|
|
||||||
isLast={index === resources.length - 1}
|
isLast={index === resources.length - 1}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { LabelBadge } from "@app/components/label-badge";
|
|
||||||
import { cn } from "@app/lib/cn";
|
import { cn } from "@app/lib/cn";
|
||||||
import type { LauncherResource } from "@server/routers/launcher/types";
|
import type { LauncherResource } from "@server/routers/launcher/types";
|
||||||
import { LauncherLabelsRow } from "./LauncherLabelsRow";
|
import { LauncherLabelsRow } from "./LauncherLabelsRow";
|
||||||
@@ -14,19 +13,15 @@ import {
|
|||||||
type LauncherResourceRowProps = {
|
type LauncherResourceRowProps = {
|
||||||
resource: LauncherResource;
|
resource: LauncherResource;
|
||||||
showLabels: boolean;
|
showLabels: boolean;
|
||||||
showSiteTags: boolean;
|
|
||||||
isLast?: boolean;
|
isLast?: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
export function LauncherResourceRow({
|
export function LauncherResourceRow({
|
||||||
resource,
|
resource,
|
||||||
showLabels,
|
showLabels,
|
||||||
showSiteTags,
|
|
||||||
isLast = false
|
isLast = false
|
||||||
}: LauncherResourceRowProps) {
|
}: LauncherResourceRowProps) {
|
||||||
const hasTags =
|
const hasTags = showLabels && resource.labels.length > 0;
|
||||||
(showSiteTags && resource.site) ||
|
|
||||||
(showLabels && resource.labels.length > 0);
|
|
||||||
const { handleAction, isClickable } = useLauncherResourceAction({
|
const { handleAction, isClickable } = useLauncherResourceAction({
|
||||||
accessUrl: resource.accessUrl,
|
accessUrl: resource.accessUrl,
|
||||||
accessCopyValue: resource.accessCopyValue
|
accessCopyValue: resource.accessCopyValue
|
||||||
@@ -45,24 +40,15 @@ export function LauncherResourceRow({
|
|||||||
role={clickProps.role}
|
role={clickProps.role}
|
||||||
tabIndex={clickProps.tabIndex}
|
tabIndex={clickProps.tabIndex}
|
||||||
>
|
>
|
||||||
<div
|
<LauncherResourceIcon
|
||||||
className={cn(
|
iconUrl={resource.iconUrl}
|
||||||
"flex shrink-0 items-center gap-2.5",
|
name={resource.name}
|
||||||
"max-md:sticky max-md:left-0 max-md:z-10 max-md:min-w-[9rem]",
|
variant="list"
|
||||||
"max-md:-my-4 max-md:-ml-4 max-md:py-4 max-md:pl-4 max-md:pr-3",
|
/>
|
||||||
"max-md:bg-card max-md:[mask-image:linear-gradient(to_left,transparent_0%,black_20px)]"
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<LauncherResourceIcon
|
|
||||||
iconUrl={resource.iconUrl}
|
|
||||||
name={resource.name}
|
|
||||||
variant="list"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<span className="text-sm font-semibold text-foreground">
|
<span className="shrink-0 text-sm font-semibold text-foreground">
|
||||||
{resource.name}
|
{resource.name}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
|
||||||
|
|
||||||
<LauncherResourceAccess
|
<LauncherResourceAccess
|
||||||
accessDisplay={resource.accessDisplay}
|
accessDisplay={resource.accessDisplay}
|
||||||
@@ -73,21 +59,11 @@ export function LauncherResourceRow({
|
|||||||
|
|
||||||
{hasTags ? (
|
{hasTags ? (
|
||||||
<div className="flex min-w-0 max-w-md shrink items-center justify-end gap-1 max-md:shrink-0 max-md:max-w-none md:ml-auto">
|
<div className="flex min-w-0 max-w-md shrink items-center justify-end gap-1 max-md:shrink-0 max-md:max-w-none md:ml-auto">
|
||||||
{showSiteTags && resource.site ? (
|
<LauncherLabelsRow
|
||||||
<LabelBadge
|
labels={resource.labels}
|
||||||
name={resource.site.name}
|
variant="single-row"
|
||||||
color="#a1a1aa"
|
className="w-auto shrink-0 justify-end"
|
||||||
displayOnly
|
/>
|
||||||
className="shrink-0"
|
|
||||||
/>
|
|
||||||
) : null}
|
|
||||||
{showLabels ? (
|
|
||||||
<LauncherLabelsRow
|
|
||||||
labels={resource.labels}
|
|
||||||
variant="single-row"
|
|
||||||
className="w-auto shrink-0 justify-end"
|
|
||||||
/>
|
|
||||||
) : null}
|
|
||||||
</div>
|
</div>
|
||||||
) : null}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -115,21 +115,6 @@ export function LauncherSettingsMenu({
|
|||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center justify-between gap-3">
|
|
||||||
<Label
|
|
||||||
htmlFor="show-site-tags"
|
|
||||||
className="text-sm font-semibold"
|
|
||||||
>
|
|
||||||
{t("resourceLauncherShowSiteTags")}
|
|
||||||
</Label>
|
|
||||||
<Switch
|
|
||||||
id="show-site-tags"
|
|
||||||
checked={config.showSiteTags}
|
|
||||||
onCheckedChange={(checked) =>
|
|
||||||
onConfigChange({ showSiteTags: checked })
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{!isDefaultView ? (
|
{!isDefaultView ? (
|
||||||
|
|||||||
@@ -372,7 +372,7 @@ export default function ResourceLauncher({
|
|||||||
|
|
||||||
<div className="flex flex-col gap-3 mb-6">
|
<div className="flex flex-col gap-3 mb-6">
|
||||||
<div className="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
|
<div className="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
|
||||||
<div className="flex items-center gap-2 shrink-0 justify-start xl:justify-end order-1 sm:order-2 xl:order-2">
|
<div className="flex items-center gap-2 shrink-0 justify-start xl:justify-end order-1 xl:order-2">
|
||||||
<LauncherSaveViewMenu
|
<LauncherSaveViewMenu
|
||||||
isDefaultView={isDefaultView}
|
isDefaultView={isDefaultView}
|
||||||
isAdmin={isAdmin}
|
isAdmin={isAdmin}
|
||||||
@@ -420,7 +420,7 @@ export default function ResourceLauncher({
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col sm:flex-row sm:items-center gap-3 min-w-0 flex-1 order-2 sm:order-1 xl:order-1">
|
<div className="flex flex-col sm:flex-row sm:items-center gap-3 min-w-0 flex-1 order-2 xl:order-1">
|
||||||
<div className="relative w-full sm:max-w-sm shrink-0">
|
<div className="relative w-full sm:max-w-sm shrink-0">
|
||||||
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
|
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
|
||||||
<Input
|
<Input
|
||||||
|
|||||||
@@ -18,7 +18,6 @@ export type LauncherUrlConfigOverrides = Partial<
|
|||||||
| "layout"
|
| "layout"
|
||||||
| "order"
|
| "order"
|
||||||
| "showLabels"
|
| "showLabels"
|
||||||
| "showSiteTags"
|
|
||||||
| "siteIds"
|
| "siteIds"
|
||||||
| "labelIds"
|
| "labelIds"
|
||||||
| "query"
|
| "query"
|
||||||
@@ -43,7 +42,6 @@ const LAUNCHER_CONFIG_PARAM_KEYS = [
|
|||||||
"layout",
|
"layout",
|
||||||
"order",
|
"order",
|
||||||
"showLabels",
|
"showLabels",
|
||||||
"showSiteTags",
|
|
||||||
"siteIds",
|
"siteIds",
|
||||||
"labelIds"
|
"labelIds"
|
||||||
] as const;
|
] as const;
|
||||||
@@ -137,14 +135,6 @@ function parseConfigOverrides(
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const showSiteTags = searchParams.get("showSiteTags");
|
|
||||||
if (showSiteTags !== null) {
|
|
||||||
const parsed = launcherUrlBooleanSchema.safeParse(showSiteTags);
|
|
||||||
if (parsed.success) {
|
|
||||||
overrides.showSiteTags = parsed.data;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const siteIds = searchParams.get("siteIds");
|
const siteIds = searchParams.get("siteIds");
|
||||||
if (siteIds !== null) {
|
if (siteIds !== null) {
|
||||||
overrides.siteIds = parseIdListParam(siteIds);
|
overrides.siteIds = parseIdListParam(siteIds);
|
||||||
@@ -263,10 +253,6 @@ export function serializeLauncherUrlState({
|
|||||||
params.set("showLabels", config.showLabels ? "1" : "0");
|
params.set("showLabels", config.showLabels ? "1" : "0");
|
||||||
}
|
}
|
||||||
|
|
||||||
if (config.showSiteTags !== baseConfig.showSiteTags) {
|
|
||||||
params.set("showSiteTags", config.showSiteTags ? "1" : "0");
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!idListsEqual(config.siteIds, baseConfig.siteIds)) {
|
if (!idListsEqual(config.siteIds, baseConfig.siteIds)) {
|
||||||
if (config.siteIds.length > 0) {
|
if (config.siteIds.length > 0) {
|
||||||
params.set("siteIds", config.siteIds.join(","));
|
params.set("siteIds", config.siteIds.join(","));
|
||||||
|
|||||||
Reference in New Issue
Block a user