From cee6c7c4010e87066d94abdeae952af1cf813521 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Thu, 27 Jul 2023 22:21:18 +0800
Subject: [PATCH] feat: adjust buttons position

---
 web/src/components/FilterView.tsx   |  2 +-
 web/src/components/Navigator.tsx    |  2 +-
 web/src/components/OrderSetting.tsx |  3 ++-
 web/src/components/ShortcutView.tsx |  2 +-
 web/src/pages/Home.tsx              | 16 ++++++++--------
 5 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/web/src/components/FilterView.tsx b/web/src/components/FilterView.tsx
index 8d298e5..ff5ab17 100644
--- a/web/src/components/FilterView.tsx
+++ b/web/src/components/FilterView.tsx
@@ -22,7 +22,7 @@ const FilterView = () => {
           onClick={() => viewStore.setFilter({ tag: undefined })}
         >
           <Icon.Tag className="w-4 h-auto mr-1" />
-          <span className="max-w-[12rem] truncate">#{filter.tag}</span>
+          <span className="max-w-[8rem] truncate">#{filter.tag}</span>
           <Icon.X className="w-4 h-auto ml-1" />
         </button>
       )}
diff --git a/web/src/components/Navigator.tsx b/web/src/components/Navigator.tsx
index bede13d..629f049 100644
--- a/web/src/components/Navigator.tsx
+++ b/web/src/components/Navigator.tsx
@@ -36,7 +36,7 @@ const Navigator = () => {
           variant={currentTab === `tag:${tag}` ? "solid" : "plain"}
           color="neutral"
           size="sm"
-          onClick={() => viewStore.setFilter({ tab: `tag:${tag}` })}
+          onClick={() => viewStore.setFilter({ tab: `tag:${tag}`, tag: undefined })}
         >
           <Icon.Hash className="w-4 h-auto mr-1" />
           <span className="max-w-[8rem] truncate font-normal">{tag}</span>
diff --git a/web/src/components/OrderSetting.tsx b/web/src/components/OrderSetting.tsx
index 50533a7..19839be 100644
--- a/web/src/components/OrderSetting.tsx
+++ b/web/src/components/OrderSetting.tsx
@@ -17,10 +17,11 @@ const OrderSetting = () => {
   return (
     <Dropdown
       trigger={
-        <button className="p-1 mr-2">
+        <button className="p-1">
           <Icon.ListFilter className="w-5 h-auto text-gray-500" />
         </button>
       }
+      actionsClassName="right-10 translate-x-full"
       actions={
         <div className="w-52 p-2 pt-0 gap-2 flex flex-col justify-start items-start" onClick={(e) => e.stopPropagation()}>
           <div className="w-full flex flex-row justify-between items-center mt-1">
diff --git a/web/src/components/ShortcutView.tsx b/web/src/components/ShortcutView.tsx
index 2af139a..76b6de3 100644
--- a/web/src/components/ShortcutView.tsx
+++ b/web/src/components/ShortcutView.tsx
@@ -135,7 +135,7 @@ const ShortcutView = (props: Props) => {
               return (
                 <span
                   key={tag}
-                  className="max-w-xs truncate text-gray-400 text-sm font-mono leading-4 cursor-pointer hover:text-gray-600"
+                  className="max-w-[8rem] truncate text-gray-400 text-sm font-mono leading-4 cursor-pointer hover:text-gray-600"
                   onClick={() => viewStore.setFilter({ tag: tag })}
                 >
                   #{tag}
diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
index e69dd22..418e210 100644
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@@ -47,15 +47,8 @@ const Home: React.FC = () => {
         <Navigator />
         <div className="w-full flex flex-row justify-between items-center mb-4">
           <div className="flex flex-row justify-start items-center">
-            <span className="font-mono text-gray-400 mr-2">Shortcuts</span>
-            <Button className="hover:shadow" variant="soft" size="sm" onClick={() => setShowCreateShortcutDialog(true)}>
-              <Icon.Plus className="w-5 h-auto" />
-            </Button>
-          </div>
-          <div className="flex flex-row justify-end items-center">
-            <OrderSetting />
             <Input
-              className="w-32"
+              className="w-32 mr-2"
               type="text"
               size="sm"
               placeholder="Search"
@@ -66,6 +59,13 @@ const Home: React.FC = () => {
               value={filter.search}
               onChange={(e) => viewStore.setFilter({ search: e.target.value })}
             />
+            <OrderSetting />
+          </div>
+          <div className="flex flex-row justify-end items-center">
+            <Button className="hover:shadow" variant="soft" size="sm" onClick={() => setShowCreateShortcutDialog(true)}>
+              <Icon.Plus className="w-5 h-auto" />
+              <span className="hidden sm:block ml-0.5">Create</span>
+            </Button>
           </div>
         </div>
         <FilterView />