Feat: fleshed out linear

linear/app/src/components/common/Badge.tsx

@@ -4,27 +4,30 @@ interface BadgeProps {
   children: React.ReactNode;
   variant?: "default";
   className?: string;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
 export default function Badge({
   children,
   variant = "default",
   className,
+  onClick,
 }: BadgeProps) {
   const variantClasses = {
     default:
       "bg-badge-bg border border-badge-border text-badge-text hover:bg-badge-hover",
   };
 
   return (
-    <div
+    <button
       className={cn(
         "inline-flex items-center px-1 h-[22px] rounded text-[11px] font-[450] transition-colors",
         variantClasses[variant],
         className
       )}
+      onClick={onClick}
     >
       {children}
-    </div>
+    </button>
   );
 }

linear/app/src/components/common/dropdowns/base/SingleSelectDropdown.tsx

@@ -69,6 +69,7 @@ export function SingleSelectDropdown({
           width,
           "bg-card-bg border-border p-0 flex flex-col overflow-hidden"
         )}
+        onCloseAutoFocus={(e) => e.preventDefault()}
       >
         {showSearch && (
           <div className="flex items-center pl-[14px] pr-3 border-b border-border justify-between gap-[14px] flex-shrink-0">

linear/app/src/components/common/new-issue-modal.tsx/NewIssueModal.tsx

@@ -20,16 +20,6 @@ interface NewIssueModalProps {
 }
 
 export default function NewIssueModal({ open, onClose }: NewIssueModalProps) {
-  const [title, setTitle] = useState("");
-  const [description, setDescription] = useState("");
-  const [status, setStatus] = useState<IssueStatus>("queued");
-  const [priority, setPriority] = useState<Priority>("none");
-  const [assigneeId, setAssigneeId] = useState<string | undefined>("8");
-  const [projectId, setProjectId] = useState<string | undefined>(undefined);
-  const [milestoneId, setMilestoneId] = useState<string | undefined>(undefined);
-  const [labelIds, setLabelIds] = useState<string[]>([]);
-  const [cycleId, setCycleId] = useState<string | undefined>(undefined);
-  const [shouldCreateMore, setShouldCreateMore] = useState(false);
   const {
     addIssue,
     users,
@@ -38,25 +28,55 @@ export default function NewIssueModal({ open, onClose }: NewIssueModalProps) {
     projects,
     milestones,
     teamIdentifier,
+    initialIssueValues,
+    clearInitialIssueValues,
   } = useLinearState();
+
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [status, setStatus] = useState<IssueStatus>(
+    initialIssueValues?.status ?? "queued"
+  );
+  const [priority, setPriority] = useState<Priority>("none");
+  const [assigneeId, setAssigneeId] = useState<string | undefined>(
+    initialIssueValues?.assigneeId ?? "8"
+  );
+  const [projectId, setProjectId] = useState<string | undefined>(undefined);
+  const [milestoneId, setMilestoneId] = useState<string | undefined>(undefined);
+  const [labelIds, setLabelIds] = useState<string[]>([]);
+  const [cycleId, setCycleId] = useState<string | undefined>(undefined);
+  const [shouldCreateMore, setShouldCreateMore] = useState(false);
   const descriptionRef = useRef<HTMLTextAreaElement>(null);
 
+  // Sync state with initial values when they change
+  useEffect(() => {
+    if (open && initialIssueValues) {
+      if (initialIssueValues.status) {
+        setStatus(initialIssueValues.status);
+      }
+      if (initialIssueValues.assigneeId !== undefined) {
+        setAssigneeId(initialIssueValues.assigneeId);
+      }
+    }
+  }, [open, initialIssueValues]);
+
   useEffect(() => {
     if (!open) {
       setTimeout(() => {
         setTitle("");
         setDescription("");
-        setStatus("queued");
+        setStatus(initialIssueValues?.status ?? "queued");
         setPriority("none");
-        setAssigneeId("8");
+        setAssigneeId(initialIssueValues?.assigneeId ?? "8");
         setProjectId(undefined);
         setMilestoneId(undefined);
         setLabelIds([]);
         setCycleId(undefined);
         setShouldCreateMore(false);
+        clearInitialIssueValues();
       }, 500);
     }
-  }, [open]);
+  }, [open, initialIssueValues, clearInitialIssueValues]);
 
   const handleTitleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     if (event.key === "Enter") {
@@ -90,9 +110,9 @@ export default function NewIssueModal({ open, onClose }: NewIssueModalProps) {
     });
     setTitle("");
     setDescription("");
-    setStatus("queued");
+    setStatus(initialIssueValues?.status ?? "queued");
     setPriority("none");
-    setAssigneeId("8");
+    setAssigneeId(initialIssueValues?.assigneeId ?? "8");
     setProjectId(undefined);
     setMilestoneId(undefined);
     setLabelIds([]);
@@ -114,6 +134,7 @@ export default function NewIssueModal({ open, onClose }: NewIssueModalProps) {
     addIssue,
     onClose,
     shouldCreateMore,
+    initialIssueValues,
   ]);
 
   return (

linear/app/src/components/icons/AllHidden.tsx

@@ -0,0 +1,188 @@
+export function AllHidden({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 134 82"
+      width="154"
+      height="102"
+      fill="none"
+      aria-hidden="true"
+      className={className}
+    >
+      <path
+        fill="url(#Dj)"
+        fillRule="evenodd"
+        d="M128 1.5H6A4.5 4.5 0 0 0 1.5 6v10A4.5 4.5 0 0 0 6 20.5h122a4.5 4.5 0 0 0 4.5-4.5V6a4.5 4.5 0 0 0-4.5-4.5ZM6 0a6 6 0 0 0-6 6v10a6 6 0 0 0 6 6h122a6 6 0 0 0 6-6V6a6 6 0 0 0-6-6H6Z"
+        clipRule="evenodd"
+      ></path>
+      <path
+        fill="url(#Dk)"
+        fillRule="evenodd"
+        d="M128 31.5H6A4.5 4.5 0 0 0 1.5 36v10A4.5 4.5 0 0 0 6 50.5h122a4.5 4.5 0 0 0 4.5-4.5V36a4.5 4.5 0 0 0-4.5-4.5ZM6 30a6 6 0 0 0-6 6v10a6 6 0 0 0 6 6h122a6 6 0 0 0 6-6V36a6 6 0 0 0-6-6H6Z"
+        clipRule="evenodd"
+      ></path>
+      <path
+        fill="url(#Dl)"
+        fillRule="evenodd"
+        d="M128 61.5H6A4.5 4.5 0 0 0 1.5 66v10A4.5 4.5 0 0 0 6 80.5h122a4.5 4.5 0 0 0 4.5-4.5V66a4.5 4.5 0 0 0-4.5-4.5ZM6 60a6 6 0 0 0-6 6v10a6 6 0 0 0 6 6h122a6 6 0 0 0 6-6V66a6 6 0 0 0-6-6H6Z"
+        clipRule="evenodd"
+      ></path>
+      <rect width="52" height="4" x="22" y="9" fill="url(#Dm)" rx="2"></rect>
+      <rect
+        width="9"
+        height="4"
+        x="8"
+        y="9"
+        fill="lch(19% 3.54 272 / 1)"
+        rx="2"
+      ></rect>
+      <rect
+        width="2"
+        height="2"
+        x="125"
+        y="10"
+        fill="lch(19% 3.54 272 / 1)"
+        rx="1"
+      ></rect>
+      <rect
+        width="2"
+        height="2"
+        x="121"
+        y="10"
+        fill="lch(19% 3.54 272 / 1)"
+        rx="1"
+      ></rect>
+      <rect
+        width="2"
+        height="2"
+        x="117"
+        y="10"
+        fill="lch(19% 3.54 272 / 1)"
+        rx="1"
+      ></rect>
+      <rect width="52" height="4" x="22" y="39" fill="url(#Dm)" rx="2"></rect>
+      <rect
+        width="9"
+        height="4"
+        x="8"
+        y="39"
+        fill="lch(19% 3.54 272 / 1)"
+        rx="2"
+      ></rect>
+      <rect
+        width="2"
+        height="2"
+        x="125"
+        y="40"
+        fill="lch(19% 3.54 272 / 1)"
+        rx="1"
+      ></rect>
+      <rect
+        width="2"
+        height="2"
+        x="121"
+        y="40"
+        fill="lch(19% 3.54 272 / 1)"
+        rx="1"
+      ></rect>
+      <rect
+        width="2"
+        height="2"
+        x="117"
+        y="40"
+        fill="lch(19% 3.54 272 / 1)"
+        rx="1"
+      ></rect>
+      <rect width="52" height="4" x="22" y="69" fill="url(#Dm)" rx="2"></rect>
+      <rect
+        width="9"
+        height="4"
+        x="8"
+        y="69"
+        fill="lch(19% 3.54 272 / 1)"
+        rx="2"
+      ></rect>
+      <rect
+        width="2"
+        height="2"
+        x="125"
+        y="70"
+        fill="lch(19% 3.54 272 / 1)"
+        rx="1"
+      ></rect>
+      <rect
+        width="2"
+        height="2"
+        x="121"
+        y="70"
+        fill="lch(19% 3.54 272 / 1)"
+        rx="1"
+      ></rect>
+      <rect
+        width="2"
+        height="2"
+        x="117"
+        y="70"
+        fill="lch(19% 3.54 272 / 1)"
+        rx="1"
+      ></rect>
+      <defs>
+        <linearGradient
+          id="Dj"
+          x1="67"
+          x2="67"
+          y1="67.5"
+          y2="82"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="lch(19% 3.54 272 / 1)"></stop>
+          <stop
+            offset="1"
+            stopColor="lch(19% 3.54 272 / 1)"
+            stopOpacity="0"
+          ></stop>
+        </linearGradient>
+        <linearGradient
+          id="Dk"
+          x1="67"
+          x2="67"
+          y1="67.5"
+          y2="82"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="lch(19% 3.54 272 / 1)"></stop>
+          <stop
+            offset="1"
+            stopColor="lch(19% 3.54 272 / 1)"
+            stopOpacity="0"
+          ></stop>
+        </linearGradient>
+        <linearGradient
+          id="Dl"
+          x1="67"
+          x2="67"
+          y1="67.5"
+          y2="82"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="lch(19% 3.54 272 / 1)"></stop>
+          <stop
+            offset="1"
+            stopColor="lch(19% 3.54 272 / 1)"
+            stopOpacity="0"
+          ></stop>
+        </linearGradient>
+        <linearGradient
+          id="Dm"
+          x1="67.5"
+          x2="21.5"
+          y1="11.5"
+          y2="11.5"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="lch(19% 3.54 272 / 1)" stopOpacity="0"></stop>
+          <stop offset="1" stopColor="lch(19% 3.54 272 / 1)"></stop>
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}

linear/app/src/components/icons/TriangleDown.tsx

@@ -8,7 +8,7 @@ export function TriangleDown({ className }: TriangleDownProps) {
       width="16"
       height="16"
       viewBox="0 0 16 16"
-      fill="lch(61.683% 1 272 / 1)"
+      fill="currentColor"
       role="img"
       focusable="false"
       aria-hidden="true"

linear/app/src/components/icons/index.tsx

@@ -1,12 +1,12 @@
 export { CopyIssuedId } from "./CopyIssuedId";
-export { Done } from "./Done";
 export { EditBoxLine } from "./EditBoxLine";
 export { IssueUrl } from "./IssueUrl";
 export { LinearArrowDown } from "./LinearArrowDown";
 export { LinearGitBranch } from "./LinearGitBranch";
 export { LongArrowUp } from "./LongArrowUp";
 export { TriangleDown } from "./TriangleDown";
 export { TaskIcon } from "./TaskIcon";
+export { AllHidden } from "./AllHidden";
 export {
   HighPriority,
   MediumPriority,
@@ -21,6 +21,7 @@ export {
   InReview,
   Queued,
   Staging,
+  Done,
 } from "./statuses";
 export {
   Inbox,

linear/app/src/components/icons/Done.tsx → linear/app/src/components/icons/statuses/Done.tsx

@@ -17,9 +17,9 @@ export function Done({ className }: DoneProps) {
         r="6"
         fill="none"
         stroke="lch(48% 59.31 288.43)"
-        stroke-width="1.5"
-        stroke-dasharray="3.14 0"
-        stroke-dashoffset="-0.7"
+        strokeWidth="1.5"
+        strokeDasharray="3.14 0"
+        strokeDashoffset="-0.7"
       ></circle>
       <circle
         className="progress"
@@ -28,9 +28,9 @@ export function Done({ className }: DoneProps) {
         r="3"
         fill="none"
         stroke="lch(48% 59.31 288.43)"
-        stroke-width="6"
-        stroke-dasharray="18.84955592153876 37.69911184307752"
-        stroke-dashoffset="0"
+        strokeWidth="6"
+        strokeDasharray="18.84955592153876 37.69911184307752"
+        strokeDashoffset="0"
         transform="rotate(-90 7 7)"
       ></circle>
       <path

linear/app/src/components/icons/statuses/index.ts

@@ -4,3 +4,4 @@ export { InProgress } from "./InProgress";
 export { InReview } from "./InReview";
 export { Queued } from "./Queued";
 export { Staging } from "./Staging";
+export { Done } from "./Done";