fix: ui bug (#274)

* fix: shortcut search fix shortcut modal ui fixes shortcut search fix email us label change * fix: email us label updated
makeplane · Feb 13, 2023 · c6f0990 · c6f0990 · vercel · Feb 13, 2023
1 parent 214e860
commit c6f0990
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 21 deletions.
diff --git a/apps/app/components/command-palette/shortcuts-modal.tsx b/apps/app/components/command-palette/shortcuts-modal.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // icons
@@ -15,7 +15,7 @@ const shortcuts = [
   {
     title: "Navigation",
     shortcuts: [
-      { keys: "Ctrl,Cmd,K", description: "To open navigator" },
+      { keys: "Ctrl,/,Cmd,K", description: "To open navigator" },
       { keys: "↑", description: "Move up" },
       { keys: "↓", description: "Move down" },
       { keys: "←", description: "Move left" },
@@ -34,22 +34,26 @@ const shortcuts = [
       { keys: "Delete", description: "To bulk delete issues" },
       { keys: "H", description: "To open shortcuts guide" },
       {
-        keys: "Ctrl,Cmd,Alt,C",
+        keys: "Ctrl,/,Cmd,Alt,C",
         description: "To copy issue url when on issue detail page.",
       },
     ],
   },
 ];
 
+const allShortcuts = shortcuts.map((i) => i.shortcuts).flat(1);
+
 export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
   const [query, setQuery] = useState("");
 
-  const filteredShortcuts = shortcuts.filter((shortcut) =>
-    shortcut.shortcuts.some((item) => item.description.includes(query.trim())) || query === ""
-      ? true
-      : false
+  const filteredShortcuts = allShortcuts.filter((shortcut) =>
+    shortcut.description.includes(query.trim()) || query === "" ? true : false
   );
 
+  useEffect(() => {
+    if (!isOpen) setQuery("");
+  }, [isOpen]);
+
   return (
     <Transition.Root show={isOpen} as={React.Fragment}>
       <Dialog as="div" className="relative z-20" onClose={setIsOpen}>
@@ -104,8 +108,40 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                         />
                       </div>
                       <div className="flex w-full flex-col gap-y-3">
-                        {filteredShortcuts.length > 0 ? (
-                          filteredShortcuts.map(({ title, shortcuts }) => (
+                        {query.trim().length > 0 ? (
+                          filteredShortcuts.length > 0 ? (
+                            filteredShortcuts.map((shortcut) => (
+                              <div key={shortcut.keys} className="flex w-full flex-col">
+                                <div className="flex flex-col gap-y-3">
+                                  <div className="flex justify-between">
+                                    <p className="text-sm text-gray-500">{shortcut.description}</p>
+                                    <div className="flex items-center gap-x-1">
+                                      {shortcut.keys.split(",").map((key, index) => (
+                                        <span key={index} className="flex items-center gap-1">
+                                          <kbd className="rounded bg-gray-200 px-1 text-sm">
+                                            {key}
+                                          </kbd>
+                                        </span>
+                                      ))}
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            ))
+                          ) : (
+                            <div className="flex flex-col gap-y-3">
+                              <p className="text-sm text-gray-500">
+                                No shortcuts found for{" "}
+                                <span className="font-semibold italic">
+                                  {`"`}
+                                  {query}
+                                  {`"`}
+                                </span>
+                              </p>
+                            </div>
+                          )
+                        ) : (
+                          shortcuts.map(({ title, shortcuts }) => (
                             <div key={title} className="flex w-full flex-col">
                               <p className="mb-4 font-medium">{title}</p>
                               <div className="flex flex-col gap-y-3">
@@ -126,17 +162,6 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                               </div>
                             </div>
                           ))
-                        ) : (
-                          <div className="flex flex-col gap-y-3">
-                            <p className="text-sm text-gray-500">
-                              No shortcuts found for{" "}
-                              <span className="font-semibold italic">
-                                {`"`}
-                                {query}
-                                {`"`}
-                              </span>
-                            </p>
-                          </div>
                         )}
                       </div>
                     </div>

diff --git a/apps/app/components/workspace/help-section.tsx b/apps/app/components/workspace/help-section.tsx
@@ -32,7 +32,7 @@ const helpOptions = [
     Icon: GithubIcon,
   },
   {
-    name: "Chat with us",
+    name: "Email us",
     href: "mailto:hello@plane.so",
     Icon: CommentIcon,
   },