@nightkatana/kronosys-app 1.0.0-beta.0

package/components/dashboard/SavedProjectPicker.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { Fragment } from "react";
+import { formatProjectDisplay, normalizeProjectKey } from "@/lib/taskParsing";
+import {
+  PROJECT_INLINE_SUGGEST,
+  PROJECT_INLINE_SUGGEST_SELECTED,
+} from "./taskFieldStyles";
+import { useDescriptionPopoverAfterMs } from "./useDescriptionPopoverAfterMs";
+
+function SuggestedProjectButton({
+  project,
+  selected,
+  onPick,
+  description,
+}: {
+  project: string;
+  selected: boolean;
+  onPick: () => void;
+  description: string | undefined;
+}) {
+  const { hasDescription, triggerProps, popoverLayer, anchorWrapperProps } =
+    useDescriptionPopoverAfterMs(description);
+
+  const chipClass = selected
+    ? `${PROJECT_INLINE_SUGGEST_SELECTED} cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/35 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-zinc-900`
+    : `${PROJECT_INLINE_SUGGEST} cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/30 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-zinc-900`;
+
+  const btn = (
+    <button
+      type="button"
+      className={chipClass}
+      aria-pressed={selected ? "true" : "false"}
+      {...triggerProps}
+      onClick={onPick}
+    >
+      {formatProjectDisplay(project)}
+    </button>
+  );
+
+  if (!hasDescription) {
+    return btn;
+  }
+
+  return (
+    <Fragment>
+      <span className="relative inline-flex max-w-full shrink-0" {...anchorWrapperProps}>
+        {btn}
+      </span>
+      {popoverLayer}
+    </Fragment>
+  );
+}
+
+export function SavedProjectPicker({
+  knownProjects,
+  selectedProject,
+  onPickProject,
+  projectDescriptions,
+  noTopMargin,
+}: {
+  knownProjects: string[];
+  selectedProject?: string | null;
+  /** `null` : désactiver le projet (clic sur la pastille déjà active). */
+  onPickProject: (name: string | null) => void;
+  projectDescriptions?: Record<string, string>;
+  noTopMargin?: boolean;
+}) {
+  const sel = selectedProject?.trim() ? normalizeProjectKey(selectedProject) : "";
+  const selLower = sel.toLowerCase();
+  if (knownProjects.length === 0) {
+    return null;
+  }
+  return (
+    <div className={`min-w-0 shrink-0 ${noTopMargin ? "" : "mt-1.5"}`}>
+      <div className="flex flex-nowrap items-baseline gap-x-2 gap-y-1 overflow-x-auto pb-0.5 [scrollbar-width:thin]">
+        {knownProjects.map((p) => {
+          const on = normalizeProjectKey(p).toLowerCase() === selLower;
+          return (
+            <SuggestedProjectButton
+              key={p}
+              project={p}
+              selected={on}
+              description={projectDescriptions?.[normalizeProjectKey(p).toLowerCase()]}
+              onPick={() => onPickProject(on ? null : p)}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/components/dashboard/SavedTagPicker.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { Fragment } from "react";
+import {
+  filterKnownTagsForProject,
+  formatTagDisplay,
+  isProjectScopedTag,
+  normalizeTagKey,
+} from "@/lib/taskParsing";
+import {
+  TAG_INLINE_SUGGEST,
+  TAG_INLINE_SUGGEST_SCOPED_SELECTED,
+  TAG_INLINE_SUGGEST_SELECTED,
+} from "./taskFieldStyles";
+import { useDescriptionPopoverAfterMs } from "./useDescriptionPopoverAfterMs";
+
+function SuggestedTagButton({
+  tag,
+  selected,
+  scopedSelectedOutline,
+  onPick,
+  description,
+}: {
+  tag: string;
+  selected: boolean;
+  scopedSelectedOutline: boolean;
+  onPick: () => void;
+  description: string | undefined;
+}) {
+  const { hasDescription, triggerProps, popoverLayer, anchorWrapperProps } =
+    useDescriptionPopoverAfterMs(description);
+
+  const chipClass = selected
+    ? scopedSelectedOutline
+      ? TAG_INLINE_SUGGEST_SCOPED_SELECTED
+      : TAG_INLINE_SUGGEST_SELECTED
+    : TAG_INLINE_SUGGEST;
+
+  const btn = (
+    <button
+      type="button"
+      className={chipClass}
+      aria-pressed={selected ? "true" : "false"}
+      {...triggerProps}
+      onClick={onPick}
+    >
+      {formatTagDisplay(tag)}
+    </button>
+  );
+
+  if (!hasDescription) {
+    return btn;
+  }
+
+  return (
+    <Fragment>
+      <span className="relative inline-flex max-w-full shrink-0" {...anchorWrapperProps}>
+        {btn}
+      </span>
+      {popoverLayer}
+    </Fragment>
+  );
+}
+
+export function SavedTagPicker({
+  knownTags,
+  selectedTags,
+  onPickTag,
+  /** Projet courant : les étiquettes `@projet#code` (stockées `projet#code`) d’un autre projet sont masquées. */
+  project,
+  tagDescriptions,
+  /** Désactive la marge du haut quand le parent gère déjà l’espacement (ex. bloc étiquettes). */
+  noTopMargin,
+}: {
+  knownTags: string[];
+  selectedTags: string[];
+  /** Clic sur une pastille : activer ou désactiver l’étiquette sur la tâche / le brouillon. */
+  onPickTag: (tag: string) => void;
+  project?: string | null;
+  tagDescriptions?: Record<string, string>;
+  noTopMargin?: boolean;
+}) {
+  const selectedKeys = new Set(selectedTags.map((t) => normalizeTagKey(t).toLowerCase()));
+  const scopedPool = filterKnownTagsForProject(knownTags, project);
+  const describe = (tag: string) => {
+    if (!tagDescriptions || Object.keys(tagDescriptions).length === 0) {
+      return undefined;
+    }
+    const k = normalizeTagKey(tag).toLowerCase();
+    return tagDescriptions[k] ?? tagDescriptions[normalizeTagKey(tag)];
+  };
+  if (knownTags.length === 0 || scopedPool.length === 0) {
+    return null;
+  }
+  return (
+    <div className={`min-w-0 shrink-0 ${noTopMargin ? "" : "mt-1.5"}`}>
+      <div className="flex flex-nowrap items-baseline gap-x-2 gap-y-1 overflow-x-auto pb-0.5 [scrollbar-width:thin]">
+        {scopedPool.map((tag) => {
+          const nk = normalizeTagKey(tag).toLowerCase();
+          const selected = selectedKeys.has(nk);
+          return (
+            <SuggestedTagButton
+              key={tag}
+              tag={tag}
+              selected={selected}
+              scopedSelectedOutline={selected && isProjectScopedTag(normalizeTagKey(tag))}
+              description={describe(tag)}
+              onPick={() => onPickTag(tag)}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/components/dashboard/ScrollToTopFab.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { ChevronUp } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+
+const SHOW_AFTER_PX = 320;
+
+export function ScrollToTopFab({ ariaLabel }: Readonly<{ ariaLabel: string }>) {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const onScroll = () => {
+      setVisible(globalThis.scrollY > SHOW_AFTER_PX);
+    };
+    onScroll();
+    globalThis.addEventListener("scroll", onScroll, { passive: true });
+    return () => globalThis.removeEventListener("scroll", onScroll);
+  }, []);
+
+  const goTop = useCallback(() => {
+    const reduce =
+      typeof globalThis.matchMedia === "function" &&
+      globalThis.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    globalThis.scrollTo({ top: 0, behavior: reduce ? "auto" : "smooth" });
+  }, []);
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={goTop}
+      aria-label={ariaLabel}
+      className="fixed bottom-6 right-4 z-40 flex h-11 w-11 items-center justify-center rounded-full border border-zinc-300 bg-white/95 text-zinc-700 shadow-lg shadow-zinc-900/10 backdrop-blur-sm transition-colors hover:border-violet-500/60 hover:bg-violet-50 hover:text-violet-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-500 dark:border-zinc-600 dark:bg-zinc-900/95 dark:text-zinc-200 dark:shadow-black/40 dark:hover:border-violet-500/70 dark:hover:bg-zinc-800 dark:hover:text-violet-100 sm:right-6"
+    >
+      <ChevronUp className="h-6 w-6" strokeWidth={2.25} aria-hidden />
+    </button>
+  );
+}