use button as a file picker

src/app/page.tsx

@@ -7,6 +7,7 @@ import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '
 import { Input } from '@/components/ui/input'
 import { Card } from '@/components/ui/card'
 import { RecurrencePicker } from '@/components/recurrence-picker'
+import { IcsFilePicker } from '@/components/ics-file-picker'
 
 import { addEvent, deleteEvent, getAllEvents, clearEvents, getDB } from '@/lib/db'
 import { parseICS, generateICS } from '@/lib/ical'
@@ -248,18 +249,13 @@ export default function HomePage() {
       {/* Control Toolbar */}
       <div className="flex flex-wrap gap-2 mb-4">
         <Button onClick={() => setDialogOpen(true)}>Add Event</Button>
+        <IcsFilePicker onFileSelect={handleImport} variant='secondary'>Import .ics</IcsFilePicker>
         {events.length > 0 && (
           <>
             <Button variant="secondary" onClick={handleExport}>Export .ics</Button>
             <Button variant="destructive" onClick={handleClearAll}>Clear All</Button>
           </>
         )}
-        <label className="cursor-pointer">
-          <span className="px-3 py-2 bg-blue-500 text-white rounded">Import .ics</span>
-          <input type="file" accept=".ics" hidden onChange={e => {
-            if (e.target.files?.length) handleImport(e.target.files[0])
-          }} />
-        </label>
       </div>
 
       {/* Event List */}