calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-07-06 12:19:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

many minor visual improvements

Browse Source
This commit is contained in:
miloschwartz
2026-06-04 22:25:03 -07:00
parent 2adb7b64cb
commit add9b8dfb0
20 changed files with 998 additions and 869 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/labels-selector.tsx
View File

@@ -6,7 +6,7 @@ import type { CreateOrEditLabelResponse } from "@server/routers/labels/types";
import { useQuery } from "@tanstack/react-query";
import type { AxiosResponse } from "axios";
import { useTranslations } from "next-intl";
import { useActionState, useMemo, useState } from "react";
import { useActionState, useMemo, useRef, useState } from "react";
import { useDebounce } from "use-debounce";
import { Button } from "./ui/button";
import { Checkbox } from "./ui/checkbox";
@@ -88,6 +88,11 @@ export function LabelsSelector({
colorValues[Math.floor(Math.random() * colorValues.length)];
const [, action, isPending] = useActionState(createLabel, null);
const createFormRef = useRef<HTMLFormElement>(null);
const trimmedQuery = labelSearchQuery.trim();
const canCreateLabel =
trimmedQuery.length > 0 && labelsShown.length === 0 && !isPending;
async function createLabel(_: any, formData: FormData) {
const name = formData.get("name")?.toString();
@@ -120,21 +125,28 @@ export function LabelsSelector({
return (
<Command shouldFilter={false}>
<CommandInput
placeholder={t("labelSearch")}
placeholder={t("labelSearchOrCreate")}
value={labelSearchQuery}
onValueChange={setlabelsSearchQuery}
onKeyDown={(e) => {
if (e.key === "Enter" && canCreateLabel) {
e.preventDefault();
createFormRef.current?.requestSubmit();
}
}}
/>
<CommandList>
<CommandEmpty className="px-3 break-all wrap-anywhere text-wrap">
<CommandEmpty className="px-3 py-6 text-center text-wrap">
{labelSearchQuery.trim().length > 0 ? (
<div className="flex flex-col gap-2 items-center">
<span className="max-w-34">
<span className="max-w-34 break-words">
{t("createNewLabel", {
label: labelSearchQuery.trim()
})}
</span>
<form
ref={createFormRef}
action={action}
className="flex items-center gap-2"
>
@@ -159,14 +171,17 @@ export function LabelsSelector({
className="flex items-center gap-2"
>
<div
className="size-4 rounded-full bg-(--color) flex-none"
className="size-2 rounded-full bg-(--color) flex-none"
style={{
// @ts-expect-error css color
"--color": value
}}
/>
<span data-name>
{color}
{color
.charAt(0)
.toUpperCase() +
color.slice(1)}
</span>
</SelectItem>
)
@@ -176,7 +191,6 @@ export function LabelsSelector({
<Button
variant="outline"
size="sm"
loading={isPending}
type="submit"
>
@@ -185,7 +199,14 @@ export function LabelsSelector({
</form>
</div>
) : (
t("labelsNotFound")
<div className="flex flex-col gap-1 items-center">
<span className="text-muted-foreground">
{t("labelsNotFound")}
</span>
<span className="text-sm">
{t("labelsEmptyCreateHint")}
</span>
</div>
)}
</CommandEmpty>
<CommandGroup>