fix(web): Fix save action on empty card. Fixes #225 (#243)

* fix: Empty item save action * fix: resolve comments * chore: prettier
hoarder-app · Jun 22, 2024 · ccfff6b · ccfff6b
1 parent 16f21bf
commit ccfff6b
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 5 deletions.
diff --git a/apps/web/components/dashboard/bookmarks/EditorCard.tsx b/apps/web/components/dashboard/bookmarks/EditorCard.tsx
@@ -13,7 +13,7 @@ import {
   useBookmarkLayout,
   useBookmarkLayoutSwitch,
 } from "@/lib/userLocalSettings/bookmarksLayout";
-import { cn } from "@/lib/utils";
+import { cn, getOS } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
@@ -123,6 +123,7 @@ export default function EditorCard({ className }: { className?: string }) {
 
   const onSubmit: SubmitHandler<z.infer<typeof formSchema>> = (data) => {
     const text = data.text.trim();
+    if (!text.length) return;
     try {
       tryToImportUrls(text);
     } catch (e) {
@@ -162,12 +163,14 @@ export default function EditorCard({ className }: { className?: string }) {
     }
   };
 
+  const OS = getOS();
+
   return (
     <Form {...form}>
       <form
         className={cn(
           className,
-          "flex flex-col gap-2 rounded-xl bg-card p-4",
+          "relative flex flex-col gap-2 rounded-xl bg-card p-4",
           cardHeight,
         )}
         onSubmit={form.handleSubmit(onSubmit, onError)}
@@ -187,7 +190,7 @@ export default function EditorCard({ className }: { className?: string }) {
               ref={inputRef}
               disabled={isPending}
               className={cn(
-                "h-full w-full border-none text-lg focus-visible:ring-0",
+                "h-full w-full border-none p-0 text-lg focus-visible:ring-0",
                 { "resize-none": bookmarkLayout !== "list" },
               )}
               placeholder={
@@ -216,7 +219,7 @@ export default function EditorCard({ className }: { className?: string }) {
           {form.formState.dirtyFields.text
             ? demoMode
               ? "Submissions are disabled"
-              : "Press ⌘ + Enter to Save"
+              : `Save (${OS === "macos" ? "⌘" : "Ctrl"} + Enter)`
             : "Save"}
         </ActionButton>
 

diff --git a/apps/web/components/ui/info-tooltip.tsx b/apps/web/components/ui/info-tooltip.tsx
@@ -21,7 +21,11 @@ export default function InfoTooltip({
     <Tooltip>
       <TooltipTrigger asChild>
         {variant === "tip" ? (
-          <Info className={cn("cursor-pointer", className)} size={size} />
+          <Info
+            color="#494949"
+            className={cn("cursor-pointer", className)}
+            size={size}
+          />
         ) : (
           <HelpCircle className={cn("cursor-pointer", className)} size={size} />
         )}

diff --git a/apps/web/lib/utils.ts b/apps/web/lib/utils.ts
@@ -5,3 +5,27 @@ import { twMerge } from "tailwind-merge";
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
+
+export type OS = "macos" | "ios" | "windows" | "android" | "linux" | null;
+
+export function getOS() {
+  if (typeof window === "undefined") return;
+  const userAgent = window.navigator.userAgent.toLowerCase();
+  const macosPlatforms = /(macintosh|macintel|macppc|mac68k|macos)/i;
+  const windowsPlatforms = /(win32|win64|windows|wince)/i;
+  const iosPlatforms = /(iphone|ipad|ipod)/i;
+  let os: OS = null;
+
+  if (macosPlatforms.test(userAgent)) {
+    os = "macos";
+  } else if (iosPlatforms.test(userAgent)) {
+    os = "ios";
+  } else if (windowsPlatforms.test(userAgent)) {
+    os = "windows";
+  } else if (/android/.test(userAgent)) {
+    os = "android";
+  } else if (!os && /linux/.test(userAgent)) {
+    os = "linux";
+  }
+  return os;
+}