Skip to content

Add a button to copy the currently viewed article's link #40

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
fulopkovacs merged 4 commits into from
Jan 4, 2026
Merged

Add a button to copy the currently viewed article's link #40

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
93fc8e1
Rename a query param
fulopkovacs Jan 4, 2026
898deb3
Add a button to copy the currently viewed article's link
fulopkovacs Jan 4, 2026
08d07ab
Show an error message if the url cannot be copied
fulopkovacs Jan 4, 2026
6b33aef
Fix a formatting issue
fulopkovacs Jan 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 77 additions & 10 deletions src/components/tutorial/TutorialWindow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Tabs, TabsContent } from "@radix-ui/react-tabs";
import { useNavigate, useRouter, useSearch } from "@tanstack/react-router";
import { DatabaseZapIcon, XIcon } from "lucide-react";
import { CheckIcon, DatabaseZapIcon, LinkIcon, XIcon } from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
import {
useCallback,
Expand All @@ -9,7 +9,8 @@ import {
useRef,
useState,
} from "react";
import { steps } from "@/data/tutorial";
import { toast } from "sonner";
import { steps as articles } from "@/data/tutorial";
import { useScrollShadow } from "@/hooks/use-scroll-shadow";
import { cn } from "@/lib/utils";
import {
Expand All @@ -22,6 +23,65 @@ import { ScrollArea } from "../ui/scroll-area";
import { ScrollShadow } from "../ui/scroll-shadow";
import { TutorialTableOfContents } from "./TutorialTableOfContents";

function CopyArticleLinkButton({ activeStep }: { activeStep: string | null }) {
const [copied, setCopied] = useState(false);

const copyLink = useCallback(() => {
if (!activeStep) return;

const url = new URL(window.location.href);
url.searchParams.set(
"article",
encodeURIComponent(activeStep.toLowerCase()),
);

navigator.clipboard
.writeText(url.toString())
.then(() => {
setCopied(true);
setTimeout(() => setCopied(false), 2000);
})
.catch((_) => {
toast.error("Couldn't copy the url");
});
}, [activeStep]);

return (
<Button
variant="outline"
size="sm"
onClick={copyLink}
className="absolute top-2 right-4 z-20"
title="Copy link to this article"
>
<AnimatePresence mode="wait" initial={false}>
{copied ? (
<motion.div
key="check"
initial={{ scale: 0.5, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
exit={{ scale: 0.5, opacity: 0 }}
transition={{ duration: 0.15 }}
>
<CheckIcon className="h-4 w-4 text-green-600" />
</motion.div>
) : (
<motion.div
key="link"
initial={{ scale: 0.5, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
exit={{ scale: 0.5, opacity: 0 }}
transition={{ duration: 0.15 }}
>
<LinkIcon className="h-4 w-4" />
</motion.div>
)}
</AnimatePresence>
{copied ? "Copied!" : "Copy link"}
</Button>
);
}
Comment on lines +26 to +83
Copy link

@coderabbitai coderabbitai bot Jan 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

cd /tmp && find . -name "TutorialWindow.tsx" -type f 2>/dev/null | head -20

Repository: fulopkovacs/trytanstackdb.com

Length of output: 55

🏁 Script executed:

cat -n "src/components/tutorial/TutorialWindow.tsx" | sed -n '26,83p'

Repository: fulopkovacs/trytanstackdb.com

Length of output: 2090

🏁 Script executed:

# Search for clipboard-related utilities or polyfills
rg -i "clipboard|navigator\.clipboard" --type tsx --type ts -B 2 -A 2

Repository: fulopkovacs/trytanstackdb.com

Length of output: 100

🏁 Script executed:

# Check browserslist configuration
fd -e "browserslist" -o -e "package.json" | head -5 | xargs cat

Repository: fulopkovacs/trytanstackdb.com

Length of output: 189

🏁 Script executed:

# Check for linting/formatting issues in the file
cd src/components/tutorial && head -100 TutorialWindow.tsx

Repository: fulopkovacs/trytanstackdb.com

Length of output: 3232

🏁 Script executed:

# Check if there are any type utilities for props
rg "type.*Props|interface.*Props" src/components/tutorial/ -A 3

Repository: fulopkovacs/trytanstackdb.com

Length of output: 395

🏁 Script executed:

cat package.json | grep -A 10 -E "browserslist|version"

Repository: fulopkovacs/trytanstackdb.com

Length of output: 524

🏁 Script executed:

# Search for clipboard utilities/helpers
rg -i "clipboard|useClipboard" --type ts --type js -B 2 -A 5

Repository: fulopkovacs/trytanstackdb.com

Length of output: 585

🏁 Script executed:

# Check if there's a clipboard utility
fd -e "clipboard" -e "clip" src/

Repository: fulopkovacs/trytanstackdb.com

Length of output: 394

🏁 Script executed:

# Run pnpm check to identify formatting/linting issues
cd src/components/tutorial && cat TutorialWindow.tsx | head -100 | tail -70

Repository: fulopkovacs/trytanstackdb.com

Length of output: 2112

🏁 Script executed:

# Look for any type extraction patterns in the file
grep -n "^type\|^interface" src/components/tutorial/TutorialWindow.tsx

Repository: fulopkovacs/trytanstackdb.com

Length of output: 55

🏁 Script executed:

# Search for type definitions in TutorialWindow.tsx
grep -n "^type\|^interface" src/components/tutorial/TutorialWindow.tsx

Repository: fulopkovacs/trytanstackdb.com

Length of output: 55

🏁 Script executed:

# Check for browserslist configuration
cat .browserslistrc 2>/dev/null || cat package.json | grep -A 3 '"browserslist"'

Repository: fulopkovacs/trytanstackdb.com

Length of output: 55

🏁 Script executed:

# Look for clipboard-related code patterns in the entire codebase
rg "navigator\.clipboard" --type ts --type js

Repository: fulopkovacs/trytanstackdb.com

Length of output: 139

🏁 Script executed:

# Check the full file structure to identify all components and their type patterns
ast-grep --pattern 'function $_({ $$ }: { $$ }) { $$$ }' src/components/tutorial/TutorialWindow.tsx

Repository: fulopkovacs/trytanstackdb.com

Length of output: 55

🏁 Script executed:

# Verify if there's a linting config for type style preferences
cat tsconfig.json | grep -A 10 "strict\|jsx"

Repository: fulopkovacs/trytanstackdb.com

Length of output: 588

🏁 Script executed:

# Check if there are any linting/formatting issues by examining the full component
cat src/components/tutorial/TutorialWindow.tsx | head -90 | tail -20

Repository: fulopkovacs/trytanstackdb.com

Length of output: 827

🏁 Script executed:

# Search for all inline type definitions in the file to understand the pattern
rg -n "function.*\{.*:.*\}" src/components/tutorial/TutorialWindow.tsx

Repository: fulopkovacs/trytanstackdb.com

Length of output: 238

🏁 Script executed:

# Check if there's an eslint or prettier config
fd -type f "eslint\|prettier" . --max-depth 3

Repository: fulopkovacs/trytanstackdb.com

Length of output: 243

🏁 Script executed:

# Look at package.json to understand build/lint setup
cat package.json | grep -E '"scripts"|"devDependencies"' -A 20

Repository: fulopkovacs/trytanstackdb.com

Length of output: 1399

🏁 Script executed:

# Check for formatting/linting issues using Biome
cd src/components/tutorial && cat TutorialWindow.tsx | wc -l

Repository: fulopkovacs/trytanstackdb.com

Length of output: 76

🏁 Script executed:

# Look at the entire function component to check for style issues
sed -n '26,47p' src/components/tutorial/TutorialWindow.tsx

Repository: fulopkovacs/trytanstackdb.com

Length of output: 678

🏁 Script executed:

# Check if the project has any clipboard utility helpers that might handle this
find src -name "*.ts" -o -name "*.tsx" | head -20

Repository: fulopkovacs/trytanstackdb.com

Length of output: 738

🏁 Script executed:

# Verify tsconfig targets - check if Clipboard API is part of the target
cat tsconfig.json | grep -E "lib|target" -A 2

Repository: fulopkovacs/trytanstackdb.com

Length of output: 221

🏁 Script executed:

# Look for any hook or utility that wraps clipboard operations
rg "useClipboard|clipboard" src/ --max-count 5

Repository: fulopkovacs/trytanstackdb.com

Length of output: 139

🏁 Script executed:

# Verify if there are formatting/linting issues
cd src/components/tutorial && pnpm check TutorialWindow.tsx 2>&1 || true

Repository: fulopkovacs/trytanstackdb.com

Length of output: 919

🏁 Script executed:

# Check the biome config to understand formatting rules
cat biome.json 2>/dev/null || cat .biome.json 2>/dev/null || echo "No biome config found"

Repository: fulopkovacs/trytanstackdb.com

Length of output: 1172

🏁 Script executed:

# Look at how other components in the same directory define props
ls -la src/components/tutorial/*.tsx | head -5

Repository: fulopkovacs/trytanstackdb.com

Length of output: 351

🏁 Script executed:

# Check TutorialTableOfContents to see the extracted type pattern
sed -n '1,30p' src/components/tutorial/TutorialTableOfContents.tsx

Repository: fulopkovacs/trytanstackdb.com

Length of output: 726

Extract type definition and add explicit clipboard API check.

The inline prop type should be extracted to follow the type definition style guideline (prefer type over inline types). Additionally, explicitly check for navigator.clipboard availability before attempting to use it for clearer error handling:

🔎 Proposed changes 
+type CopyArticleLinkButtonProps = {
+  activeStep: string | null;
+};
+
-function CopyArticleLinkButton({ activeStep }: { activeStep: string | null }) {
+function CopyArticleLinkButton({ activeStep }: CopyArticleLinkButtonProps) {
   const [copied, setCopied] = useState(false);

   const copyLink = useCallback(() => {
     if (!activeStep) return;
+
+    if (!navigator.clipboard) {
+      toast.error("Clipboard API not available");
+      return;
+    }

     const url = new URL(window.location.href);
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
function CopyArticleLinkButton({ activeStep }: { activeStep: string | null }) {
const [copied, setCopied] = useState(false);
const copyLink = useCallback(() => {
if (!activeStep) return;
const url = new URL(window.location.href);
url.searchParams.set(
"article",
encodeURIComponent(activeStep.toLowerCase()),
);
navigator.clipboard
.writeText(url.toString())
.then(() => {
setCopied(true);
setTimeout(() => setCopied(false), 2000);
})
.catch((_) => {
toast.error("Couldn't copy the url");
});
}, [activeStep]);
return (
<Button
variant="outline"
size="sm"
onClick={copyLink}
className="absolute top-2 right-4 z-20"
title="Copy link to this article"
>
<AnimatePresence mode="wait" initial={false}>
{copied ? (
<motion.div
key="check"
initial={{ scale: 0.5, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
exit={{ scale: 0.5, opacity: 0 }}
transition={{ duration: 0.15 }}
>
<CheckIcon className="h-4 w-4 text-green-600" />
</motion.div>
) : (
<motion.div
key="link"
initial={{ scale: 0.5, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
exit={{ scale: 0.5, opacity: 0 }}
transition={{ duration: 0.15 }}
>
<LinkIcon className="h-4 w-4" />
</motion.div>
)}
</AnimatePresence>
{copied ? "Copied!" : "Copy link"}
</Button>
);
}
type CopyArticleLinkButtonProps = {
activeStep: string | null;
};
function CopyArticleLinkButton({ activeStep }: CopyArticleLinkButtonProps) {
const [copied, setCopied] = useState(false);
const copyLink = useCallback(() => {
if (!activeStep) return;
if (!navigator.clipboard) {
toast.error("Clipboard API not available");
return;
}
const url = new URL(window.location.href);
url.searchParams.set(
"article",
encodeURIComponent(activeStep.toLowerCase()),
);
navigator.clipboard
.writeText(url.toString())
.then(() => {
setCopied(true);
setTimeout(() => setCopied(false), 2000);
})
.catch((_) => {
toast.error("Couldn't copy the url");
});
}, [activeStep]);
return (
<Button
variant="outline"
size="sm"
onClick={copyLink}
className="absolute top-2 right-4 z-20"
title="Copy link to this article"
>
<AnimatePresence mode="wait" initial={false}>
{copied ? (
<motion.div
key="check"
initial={{ scale: 0.5, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
exit={{ scale: 0.5, opacity: 0 }}
transition={{ duration: 0.15 }}
>
<CheckIcon className="h-4 w-4 text-green-600" />
</motion.div>
) : (
<motion.div
key="link"
initial={{ scale: 0.5, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
exit={{ scale: 0.5, opacity: 0 }}
transition={{ duration: 0.15 }}
>
<LinkIcon className="h-4 w-4" />
</motion.div>
)}
</AnimatePresence>
{copied ? "Copied!" : "Copy link"}
</Button>
);
}
🤖 Prompt for AI Agents 
In src/components/tutorial/TutorialWindow.tsx around lines 26 to 83, the
component uses an inline prop type and assumes navigator.clipboard exists;
extract the prop type into a named type (e.g., type CopyArticleLinkButtonProps =
{ activeStep: string | null }) and use it for the component signature, and add
an explicit runtime check before using the Clipboard API (if
(!navigator.clipboard) { toast.error("Clipboard not supported"); return; }) so
the copyLink callback fails gracefully; keep the rest of the copy flow and error
handling unchanged and ensure the useCallback dependency array still includes
activeStep.


function FloatingWindowHeader({ toggleWindow }: { toggleWindow: () => void }) {
return (
<div className="text-sm bg-linear-to-r bg-primary text-primary-foreground border-b border-border dark:border-b-primary px-2 py-1 flex items-center">
Expand Down Expand Up @@ -365,6 +425,7 @@ function FloatingWindow({
isResizing && "pointer-events-none",
)}
>
<CopyArticleLinkButton activeStep={activeStep} />
<ScrollShadow
position="top"
visible={canScrollUp}
Expand All @@ -379,7 +440,7 @@ function FloatingWindow({
isResizing ? "contain-strict" : "contain-none",
)}
>
{steps.map((step) => (
{articles.map((step) => (
<TabsContent
key={step.title}
value={step.title}
Expand Down Expand Up @@ -424,20 +485,26 @@ export function TutorialWindow({
}) {
const [isClosed, setIsClosed] = useState(tutorialData.isClosed);

const { step: activeStepFromSearch } = useSearch({ strict: false });
const { article: activeArticleFromSearch } = useSearch({ strict: false });

const [activeStep, setActiveStep] = useState(
tutorialData.tutorialStep || steps[0].title,
tutorialData.tutorialStep || articles[0].title,
);

useEffect(() => {
if (activeStepFromSearch && typeof activeStepFromSearch === "string") {
const stepInSearch = decodeURIComponent(activeStepFromSearch);
if (steps.find((step) => step.title === stepInSearch)) {
setActiveStep(stepInSearch);
if (
activeArticleFromSearch &&
typeof activeArticleFromSearch === "string"
) {
const articleInSearch = decodeURIComponent(
activeArticleFromSearch.toLowerCase(),
);

if (articles.find((a) => a.title === articleInSearch)) {
setActiveStep(articleInSearch);
}
}
}, [activeStepFromSearch]);
}, [activeArticleFromSearch]);

const router = useRouter();

Expand Down
4 changes: 2 additions & 2 deletions src/components/tutorial/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,15 +99,15 @@ export function LinkToArticle({
articleTitle: string;
}) {
const encodedTitle = useMemo(
() => encodeURIComponent(articleTitle),
() => encodeURIComponent(articleTitle.toLowerCase()),
[articleTitle],
);

return (
<Link
to="."
search={{
step: encodedTitle,
article: encodedTitle,
}}
className="text-orange-500 underline hover:text-orange-600 transition-colors cursor-pointer"
>
Expand Down
2 changes: 1 addition & 1 deletion src/routes/_tutorial.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export const Route = createFileRoute("/_tutorial")({
validateSearch: z
.object({
temp_db_missing: z.string().optional(),
step: z.string().optional(),
article: z.string().optional(),
})
.extend(highlightParamSchema.shape),
loader: async () => {
Expand Down