6712389766
* refactor: migrate web icons to @makeplane/propel Replace confirmed icon symbols across apps/web with their audited @makeplane/propel/icons targets. Unresolved symbols and the State, Priority and Brand icons stay on their existing imports. Lucide size props become explicit width/height, including the two relation icons and the inbox status icon that forward a size variable. Two aliased imports resolve to targets the file already imported, so the aliases are dropped rather than importing the same symbol twice. Widen the member dropdown chain and the AI menu from LucideIcon to ComponentType<SVGProps<SVGSVGElement>> so both Lucide and Propel icons satisfy them; both only ever render the icon with a className. CycleGroupIcon is deliberately not migrated: it dispatches a different glyph and color per cycle status, which CyclesOutline cannot express. apps/web already declared @makeplane/propel, so no dependency change was needed. * fix: address icon migration review on web Restore the six user-facing strings the identifier rename overwrote. The migration replaced every occurrence of a source symbol name, including ones inside string literals and JSX text, so the GitHub empty state read "StarOutline us on GitHub", the exporter column key, header and button label became "DownloadOutline", the project card action title became "SettingsOutline" and a tooltip became "PinOutline". Drop 122 strokeWidth props and 10 text-2 classes. Propel glyphs paint with fill="currentColor", so strokeWidth never changed weight, and text-2 was a bad conversion of stroke-2, which is a stroke width rather than a colour and has no meaning on a fill path. Use StarFilled for the two favorited sidebar stars. Lucide's Star with fill-yellow-500 was a solid star, and StarOutline is a ring path, so filling it does not reproduce that shape.
87 lines
2.7 KiB
TypeScript
87 lines
2.7 KiB
TypeScript
/**
|
|
* Copyright (c) 2023-present Plane Software, Inc. and contributors
|
|
* SPDX-License-Identifier: AGPL-3.0-only
|
|
* See the LICENSE file for details.
|
|
*/
|
|
|
|
import { useRef, useState } from "react";
|
|
import { observer } from "mobx-react";
|
|
// plane hooks
|
|
import { useOutsideClickDetector } from "@plane/hooks";
|
|
// i18n
|
|
import { useTranslation } from "@plane/i18n";
|
|
import { CloseOutline, SearchOutline } from "@makeplane/propel/icons";
|
|
// helpers
|
|
import { cn } from "@plane/utils";
|
|
// hooks
|
|
import { useProjectFilter } from "@/hooks/store/use-project-filter";
|
|
import { IconButton } from "@plane/propel/icon-button";
|
|
|
|
export const ProjectSearch = observer(function ProjectSearch() {
|
|
// i18n
|
|
const { t } = useTranslation();
|
|
// hooks
|
|
const { searchQuery, updateSearchQuery } = useProjectFilter();
|
|
// refs
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
|
// states
|
|
const [isSearchOpen, setIsSearchOpen] = useState(false);
|
|
// outside click detector hook
|
|
useOutsideClickDetector(inputRef, () => {
|
|
if (isSearchOpen && searchQuery.trim() === "") setIsSearchOpen(false);
|
|
});
|
|
|
|
const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
|
if (e.key === "Escape") {
|
|
if (searchQuery && searchQuery.trim() !== "") updateSearchQuery("");
|
|
else setIsSearchOpen(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex items-center">
|
|
{!isSearchOpen && (
|
|
<IconButton
|
|
variant="ghost"
|
|
size="lg"
|
|
className="-mr-1"
|
|
onClick={() => {
|
|
setIsSearchOpen(true);
|
|
inputRef.current?.focus();
|
|
}}
|
|
icon={SearchOutline}
|
|
/>
|
|
)}
|
|
<div
|
|
className={cn(
|
|
"ml-auto flex w-0 items-center justify-start gap-1 overflow-hidden rounded-md border border-transparent bg-surface-1 text-placeholder opacity-0 transition-[width] ease-linear",
|
|
{
|
|
"w-30 border-subtle px-2.5 py-1.5 opacity-100 md:w-64": isSearchOpen,
|
|
}
|
|
)}
|
|
>
|
|
<SearchOutline className="h-3.5 w-3.5" />
|
|
<input
|
|
ref={inputRef}
|
|
className="w-full max-w-[234px] border-none bg-transparent text-13 text-primary placeholder:text-placeholder focus:outline-none"
|
|
placeholder={t("common.search.label")}
|
|
value={searchQuery}
|
|
onChange={(e) => updateSearchQuery(e.target.value)}
|
|
onKeyDown={handleInputKeyDown}
|
|
/>
|
|
{isSearchOpen && (
|
|
<button
|
|
type="button"
|
|
className="grid place-items-center"
|
|
onClick={() => {
|
|
updateSearchQuery("");
|
|
setIsSearchOpen(false);
|
|
}}
|
|
>
|
|
<CloseOutline className="h-3 w-3" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|