improve responsiveness

This commit is contained in:
miloschwartz
2026-07-01 10:03:06 -04:00
parent bc759c5c9e
commit 561f75b6b1
7 changed files with 18 additions and 75 deletions

View File

@@ -180,7 +180,6 @@ export function LauncherGroupSection({
<LauncherResourceList <LauncherResourceList
resources={resources} resources={resources}
showLabels={config.showLabels} showLabels={config.showLabels}
showSiteTags={config.showSiteTags}
/> />
)} )}
<div <div

View File

@@ -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}

View File

@@ -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}
/> />
))} ))}

View File

@@ -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>

View File

@@ -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 ? (

View File

@@ -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

View File

@@ -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(","));