Add attach file button to note pages

lumen-notes · Jan 30, 2025 · 72d1fc3 · 72d1fc3
1 parent 244cc2e
commit 72d1fc3
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 5 deletions.
diff --git a/src/components/icons.tsx b/src/components/icons.tsx
@@ -283,11 +283,7 @@ export function ChevronRightIcon12(props: IconProps) {
 export function PaperclipIcon16(props: IconProps) {
   return (
     <Icon size={16} {...props}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M12.345 2.405a2.255 2.255 0 0 0-3.19 0L3.533 8.028a3.67 3.67 0 0 0 5.19 5.19L13.5 8.438 14.56 9.5l-4.777 4.778a5.17 5.17 0 1 1-7.31-7.31l5.622-5.623a3.755 3.755 0 1 1 5.31 5.31l-5.5 5.5a2.341 2.341 0 0 1-3.31-3.31L9 4.439 10.06 5.5 5.656 9.905a.841.841 0 0 0 1.19 1.19l5.5-5.5c.88-.881.88-2.309 0-3.19Z"
-      />
+      <path d="M12.345 2.405C12.1356 2.19546 11.8869 2.02924 11.6133 1.91583C11.3396 1.80242 11.0462 1.74405 10.75 1.74405C10.4537 1.74405 10.1604 1.80242 9.88673 1.91583C9.61306 2.02924 9.36441 2.19546 9.15499 2.405L3.53299 8.028C2.85377 8.71811 2.47479 9.64868 2.47864 10.617C2.48248 11.5853 2.86884 12.5128 3.55353 13.1975C4.23821 13.8822 5.16574 14.2685 6.13403 14.2724C7.10232 14.2762 8.03289 13.8972 8.72299 13.218L12.969 8.96928C13.2622 8.67597 13.7377 8.67612 14.0306 8.96961V8.96961C14.3231 9.26263 14.3229 9.73718 14.0302 10.0299L9.78299 14.278C9.30661 14.774 8.73607 15.1699 8.10476 15.4427C7.47346 15.7154 6.79409 15.8595 6.10642 15.8664C5.41876 15.8733 4.73662 15.743 4.09995 15.483C3.46328 15.2231 2.88487 14.8387 2.3986 14.3524C1.91232 13.8661 1.52794 13.2877 1.26798 12.651C1.00801 12.0144 0.877673 11.3322 0.884601 10.6446C0.891529 9.95691 1.03558 9.27753 1.30832 8.64623C1.58107 8.01493 1.97702 7.44438 2.47299 6.968L8.09499 1.345C8.44214 0.98954 8.85638 0.706506 9.3137 0.512302C9.77103 0.318097 10.2624 0.216583 10.7592 0.213643C11.256 0.210703 11.7485 0.306395 12.2081 0.495173C12.6677 0.683951 13.0853 0.962063 13.4366 1.31339C13.7879 1.66472 14.066 2.08228 14.2548 2.54187C14.4436 3.00147 14.5393 3.49395 14.5364 3.9908C14.5334 4.48764 14.4319 4.97896 14.2377 5.43629C14.0435 5.89362 13.7605 6.30786 13.405 6.655L7.90499 12.155C7.4631 12.5794 6.87243 12.8137 6.25977 12.8075C5.64711 12.8013 5.06129 12.5552 4.62806 12.1219C4.19482 11.6887 3.94869 11.1029 3.94251 10.4902C3.93633 9.87756 4.17058 9.28689 4.59499 8.845L8.46949 4.96962C8.76243 4.67662 9.23747 4.6767 9.5303 4.96981V4.96981C9.82289 5.26268 9.82281 5.73724 9.53011 6.03L5.65599 9.905C5.49819 10.0628 5.40954 10.2768 5.40954 10.5C5.40954 10.7232 5.49819 10.9372 5.65599 11.095C5.8138 11.2528 6.02782 11.3415 6.25099 11.3415C6.47416 11.3415 6.68819 11.2528 6.84599 11.095L12.346 5.595C13.226 4.714 13.225 3.286 12.345 2.405Z" />
     </Icon>
   )
 }

diff --git a/src/routes/notes_.$.tsx b/src/routes/notes_.$.tsx
@@ -25,6 +25,7 @@ import {
   FullwidthIcon16,
   MoreIcon16,
   NoteIcon16,
+  PaperclipIcon16,
   PinFillIcon16,
   PinIcon16,
   ShareIcon16,
@@ -47,6 +48,7 @@ import {
   weeklyTemplateAtom,
   widthAtom,
 } from "../global-state"
+import { useAttachFile } from "../hooks/attach-file"
 import { useEditorSettings } from "../hooks/editor-settings"
 import { useGetter } from "../hooks/getter"
 import { useIsScrolled } from "../hooks/is-scrolled"
@@ -172,6 +174,7 @@ function NotePage() {
   // Actions
   const saveNote = useSaveNote()
   const deleteNote = useDeleteNote()
+  const attachFile = useAttachFile()
 
   const handleSave = useCallback(
     (value: string) => {
@@ -332,6 +335,7 @@ function NotePage() {
               Save
             </Button>
           ) : null}
+
           <SegmentedControl aria-label="Mode" size="small" className="hidden sm:flex">
             <SegmentedControl.Segment
               selected={mode === "read"}
@@ -349,6 +353,23 @@ function NotePage() {
             </SegmentedControl.Segment>
           </SegmentedControl>
           <div className="flex items-center">
+            <IconButton
+              aria-label="Attach file"
+              size="small"
+              onClick={() => {
+                const input = document.createElement("input")
+                input.type = "file"
+                input.onchange = (e) => {
+                  const file = (e.target as HTMLInputElement).files?.[0]
+                  if (file) {
+                    attachFile(file, editorRef.current?.view)
+                  }
+                }
+                input.click()
+              }}
+            >
+              <PaperclipIcon16 />
+            </IconButton>
             <DropdownMenu modal={false}>
               <DropdownMenu.Trigger asChild>
                 <IconButton aria-label="More actions" size="small" disableTooltip>