Piefed create edit polls

src/components/icons.tsx

@@ -23,6 +23,7 @@ export {
   FaRobot as Robot,
   FaLock as Lock,
   FaCheck as Check,
+  FaTrash as Trash,
 } from "react-icons/fa6";
 export { PiShareFat as Share } from "react-icons/pi";
 export { CgSearch as Search, CgSpinner as Spinner } from "react-icons/cg";

src/components/markdown/editor.tsx

@@ -503,7 +503,7 @@
 
   useEffect(() => {
     // @ts-expect-error
     if (editor?.storage["markdown"].getMarkdown() !== content) {
       editor?.commands.setContent(content);
     }
   }, [content]);
@@ -515,6 +515,7 @@
           "flex flex-row justify-between py-1.5 px-2 pb-0 max-md:hidden",
           hideMenu && "hidden",
         )}
+        onMouseDown={(e) => e.preventDefault()}
       >
         <MenuBar
           editor={editor}
@@ -564,6 +565,7 @@
           "flex flex-row justify-between px-2 py-1 md:hidden sticky bottom-0 bg-background/50 backdrop-blur",
           hideMenu && "hidden",
         )}
+        onMouseDown={(e) => e.preventDefault()}
       >
         <MenuBar
           className="gap-2.5"
@@ -636,6 +638,7 @@
           "flex flex-row justify-end py-1.5 px-2 pb-0 max-md:hidden",
           hideMenu && "hidden",
         )}
+        onMouseDown={(e) => e.preventDefault()}
       >
         <Button
           size="sm"
@@ -672,6 +675,7 @@
           "flex flex-row justify-end px-2 py-1 sticky bottom-0 md:hidden",
           hideMenu && "hidden",
         )}
+        onMouseDown={(e) => e.preventDefault()}
       >
         <Button
           size="sm"
@@ -704,6 +708,7 @@
   autoFocus: autoFocusDefault,
   placeholder,
   onFocus,
+  onBlur,
   onChageEditorType,
   footer,
   id,
@@ -715,6 +720,7 @@
   autoFocus?: boolean;
   placeholder?: string;
   onFocus?: () => void;
+  onBlur?: () => void;
   onChageEditorType?: () => void;
   footer?: React.ReactNode;
   id?: string;
@@ -738,6 +744,7 @@
           autoFocus={autoFocus}
           placeholder={placeholder}
           onFocus={onFocus}
+          onBlur={onBlur}
           id={id}
           hideMenu={hideMenu}
         />
@@ -753,6 +760,7 @@
           autoFocus={autoFocus}
           placeholder={placeholder}
           onFocus={onFocus}
+          onBlur={onBlur}
           id={id}
           hideMenu={hideMenu}
         />

src/components/ui/input.tsx

@@ -46,7 +46,7 @@ function Input({
       />
 
       {endAdornment && (
-        <div className="ms-2 flex shrink-0 items-center text-muted-foreground">
+        <div className="ms-2 flex shrink-0 items-center text-muted-foreground text-base">
           {endAdornment}
         </div>
       )}

src/components/ui/multi-select.tsx

@@ -6,8 +6,9 @@ import {
   DropdownMenuTrigger,
 } from "@/src/components/ui/dropdown-menu";
 import { ChevronDown } from "lucide-react";
-import { isNotNil } from "@/src/lib/utils";
+import { cn, isNotNil } from "@/src/lib/utils";
 import { Fragment } from "react/jsx-runtime";
+import { ComponentProps } from "react";
 
 interface Option<V> {
   value: V;
@@ -21,6 +22,9 @@ interface MultiSelectProps<V> {
   placeholder?: string;
   renderOption: (opt: Option<V>) => React.ReactNode;
   keyExtractor: (opt: V) => string | number;
+  buttonVariant?: ComponentProps<typeof Button>["variant"];
+  buttonClassName?: string;
+  id?: string;
 }
 
 export function MultiSelect<V>({
@@ -30,6 +34,9 @@ export function MultiSelect<V>({
   placeholder,
   renderOption,
   keyExtractor,
+  buttonVariant = "outline",
+  buttonClassName,
+  id,
 }: MultiSelectProps<V>) {
   const selected = value
     .map((value) =>
@@ -40,7 +47,11 @@ export function MultiSelect<V>({
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="outline" className="rounded-md">
+        <Button
+          id={id}
+          variant={buttonVariant}
+          className={cn("rounded-md", buttonClassName)}
+        >
           {selected.length === 0 && placeholder && (
             <span className="text-muted-foreground font-normal">
               {placeholder}

src/components/ui/simple-select.tsx

@@ -0,0 +1,48 @@
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/src/components/ui/select";
+
+interface SimpleSelectProps<O> {
+  options: O[];
+  value: O | undefined;
+  onChange: (value: O) => void;
+  valueGetter: (option: O) => string;
+  labelGetter: (option: O) => string;
+  placeholder?: string;
+  className?: string;
+}
+
+export function SimpleSelect<O>({
+  options,
+  value,
+  onChange,
+  valueGetter,
+  labelGetter,
+  placeholder,
+  className,
+}: SimpleSelectProps<O>) {
+  return (
+    <Select
+      value={value !== undefined ? valueGetter(value) : undefined}
+      onValueChange={(key) => {
+        const match = options.find((o) => valueGetter(o) === key);
+        if (match !== undefined) onChange(match);
+      }}
+    >
+      <SelectTrigger className={className}>
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent>
+        {options.map((o) => (
+          <SelectItem key={valueGetter(o)} value={valueGetter(o)}>
+            {labelGetter(o)}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}