Add copy button for sorted results

app/sort/sort.tsx

@@ -9,9 +9,10 @@ import { Page } from "@/components/layout";
 import { H1, H3 } from "@/components/text";
 import { SortStatus } from "@/lib//interruptibleSort";
 import { SortAppState, useSortState } from "@/sortState/useSortState";
+import { ident } from "@/utils/ident";
 import Head from "next/head";
 import Link from "next/link";
-import React, { ProgressHTMLAttributes, useEffect } from "react";
+import React, { ProgressHTMLAttributes, useEffect, useState } from "react";
 import {
   FacebookIcon,
   FacebookShareButton,
@@ -23,7 +24,6 @@ import {
   WhatsappShareButton,
 } from "react-share";
 import styles from "./sort.module.css";
-import { ident } from "@/utils/ident";
 
 const Centered = ({ children }: React.PropsWithChildren) => (
   <div className={styles.centered}>{children}</div>
@@ -170,6 +170,7 @@ function DoneLayout({ state }: { state: SortAppState }) {
           onReorder={insertBelow}
         />
         <UndoButton undo={undo} />
+        <CopyResultButton sorted={status.sorted} />
         <H3>Share this list</H3>
         <SharePanel sorted={status.sorted} />
       </Page>
@@ -200,6 +201,27 @@ function UndoButton({ undo }: { undo?: null | undefined | (() => void) }) {
   ) : null;
 }
 
+function CopyResultButton({ sorted }: { sorted: readonly string[] }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    const text = sorted.map((item, index) => `${index + 1}. ${item}`).join("\n");
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error("Failed to copy:", err);
+    }
+  };
+
+  return (
+    <FullMobileButton variant="secondary" onClick={handleCopy}>
+      {copied ? "Copied!" : "Copy Result"}
+    </FullMobileButton>
+  );
+}
+
 function SharePanel({ sorted }: { sorted: readonly string[] }) {
   const top3 = sorted.slice(0, 3).join(" > ");
 

components/IconButtons.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { CrossIcon, RedoIcon } from "./Icons";
+import { CopyIcon, CrossIcon, RedoIcon } from "./Icons";
 
 import styles from "./IconButtons.module.css";
 import { twMerge } from "tailwind-merge";
@@ -41,3 +41,17 @@ export function RedoItemButton({ name, onClick }: IconButtonProps) {
     </button>
   );
 }
+
+export function CopyItemButton({ name, onClick, className }: IconButtonProps) {
+  return (
+    <button
+      type="button"
+      className={twMerge(styles.iconButton, className)}
+      onClick={onClick}
+      aria-label={name ? `Copy ${name}` : "Copy to clipboard"}
+      title="Copy to clipboard"
+    >
+      <CopyIcon />
+    </button>
+  );
+}

components/Icons.tsx

@@ -75,3 +75,17 @@ export const RightButton = ({ title }: { title?: string }) => (
     />
   </svg>
 );
+
+export const CopyIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="16"
+    height="16"
+  >
+    <path
+      fill="currentColor"
+      d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"
+    />
+  </svg>
+);