From 81d4a718857b2427e688a5b063e600c3c18575b6 Mon Sep 17 00:00:00 2001
From: Peifan Li <frank.li.oxygen@gmail.com>
Date: Sat, 20 Dec 2025 23:34:09 -0500
Subject: [PATCH] feat: Add paste functionality to search input

---
 .../src/components/Header/SearchInput.tsx     | 39 ++++++++++++++++++-
 1 file changed, 38 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Header/SearchInput.tsx b/frontend/src/components/Header/SearchInput.tsx
index 163a297..3260905 100644
--- a/frontend/src/components/Header/SearchInput.tsx
+++ b/frontend/src/components/Header/SearchInput.tsx
@@ -1,4 +1,4 @@
-import { Clear, Search } from '@mui/icons-material';
+import { Clear, ContentPaste, Search } from '@mui/icons-material';
 import {
     alpha,
     Box,
@@ -40,6 +40,19 @@ const SearchInput: React.FC<SearchInputProps> = ({
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
 
+    const handlePaste = async () => {
+        try {
+            const text = await navigator.clipboard.readText();
+            setVideoUrl(text);
+        } catch (err) {
+            console.error('Failed to paste from clipboard:', err);
+        }
+    };
+
+    const handleClear = () => {
+        setVideoUrl('');
+    };
+
     return (
         <Box component="form" onSubmit={onSubmit} sx={{ flexGrow: 1, display: 'flex', justifyContent: 'center', width: '100%' }}>
             <TextField
@@ -60,6 +73,19 @@ const SearchInput: React.FC<SearchInputProps> = ({
                 }}
                 slotProps={{
                     input: {
+                        startAdornment: (
+                            <InputAdornment position="start">
+                                <IconButton
+                                    onClick={handlePaste}
+                                    edge="start"
+                                    size="small"
+                                    disabled={isSubmitting || visitorMode}
+                                    sx={{ ml: 0 }}
+                                >
+                                    <ContentPaste />
+                                </IconButton>
+                            </InputAdornment>
+                        ),
                         endAdornment: (
                             <InputAdornment position="end">
                                 {isSearchMode && searchTerm && (
@@ -67,6 +93,17 @@ const SearchInput: React.FC<SearchInputProps> = ({
                                         <Clear />
                                     </IconButton>
                                 )}
+                                {videoUrl && (
+                                    <IconButton
+                                        onClick={handleClear}
+                                        edge="end"
+                                        size="small"
+                                        disabled={isSubmitting || visitorMode}
+                                        sx={{ mr: 0.5 }}
+                                    >
+                                        <Clear />
+                                    </IconButton>
+                                )}
                                 <Button
                                     type="submit"
                                     variant="contained"