Add printer icon and print option to note page

lumen-notes · Jan 30, 2025 · 026f83c · 026f83c
1 parent 55f32c0
commit 026f83c
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 1 deletion.
diff --git a/src/components/icons.tsx b/src/components/icons.tsx
@@ -288,6 +288,18 @@ export function PaperclipIcon16(props: IconProps) {
   )
 }
 
+export function PrinterIcon16(props: IconProps) {
+  return (
+    <Icon size={16} {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3 2C3 0.895431 3.89543 0 5 0H11C12.1046 0 13 0.895431 13 2V4.5H13.5C14.8807 4.5 16 5.61929 16 7V10.5C16 11.8807 14.8807 13 13.5 13H13.3532L13.47 13.6422C13.6932 14.8699 12.75 16 11.5022 16H4.49777C3.24996 16 2.30681 14.8699 2.53003 13.6422L2.6468 13H2.5C1.11929 13 0 11.8807 0 10.5V7C0 5.61929 1.11929 4.5 2.5 4.5H3V2ZM2.91952 11.5L3.07548 10.6422C3.24839 9.69125 4.07665 9 5.04322 9H10.9568C11.9234 9 12.7516 9.69125 12.9245 10.6422L13.0805 11.5H13.5C14.0523 11.5 14.5 11.0523 14.5 10.5V7C14.5 6.44772 14.0523 6 13.5 6H12.25H3.75H2.5C1.94772 6 1.5 6.44772 1.5 7V10.5C1.5 11.0523 1.94772 11.5 2.5 11.5H2.91952ZM4.5 4.5H11.5V2C11.5 1.72386 11.2761 1.5 11 1.5H5C4.72386 1.5 4.5 1.72386 4.5 2V4.5ZM4.55129 10.9106C4.59451 10.6728 4.80158 10.5 5.04322 10.5H10.9568C11.1984 10.5 11.4055 10.6728 11.4487 10.9106L11.9942 13.9106C12.05 14.2175 11.8142 14.5 11.5022 14.5H4.49777C4.18581 14.5 3.95003 14.2175 4.00583 13.9106L4.55129 10.9106Z"
+      />
+    </Icon>
+  )
+}
+
 export function FileIcon16(props: IconProps) {
   return (
     <Icon size={16} {...props}>

diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
@@ -87,7 +87,7 @@ function RootComponent() {
 
   return (
     <div
-      className="flex h-screen w-screen flex-col bg-bg pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)] pr-[env(safe-area-inset-right)] print:h-auto [@supports(height:100svh)]:h-[100svh]"
+      className="flex h-screen w-screen flex-col bg-bg pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)] pr-[env(safe-area-inset-right)] print:h-auto print:w-full [@supports(height:100svh)]:h-[100svh]"
       data-vaul-drawer-wrapper=""
     >
       {isSignedOut ? (

diff --git a/src/routes/notes_.$.tsx b/src/routes/notes_.$.tsx
@@ -28,6 +28,7 @@ import {
   PaperclipIcon16,
   PinFillIcon16,
   PinIcon16,
+  PrinterIcon16,
   ShareIcon16,
   TrashIcon16,
   UndoIcon16,
@@ -465,6 +466,9 @@ function NotePage() {
                 >
                   Export as Gist
                 </DropdownMenu.Item>
+                <DropdownMenu.Item icon={<PrinterIcon16 />} onSelect={() => window.print()}>
+                  Print
+                </DropdownMenu.Item>
                 <DropdownMenu.Separator />
                 <DropdownMenu.Item
                   variant="danger"