chore: update default layout to grid

web/src/components/ShortcutsContainer.tsx

@@ -11,7 +11,7 @@ interface Props {
 const ShortcutsContainer: React.FC<Props> = (props: Props) => {
   const { shortcutList } = props;
   const viewStore = useViewStore();
-  const layout = viewStore.layout || "list";
+  const layout = viewStore.layout || "grid";
   const [editingShortcutId, setEditingShortcutId] = useState<ShortcutId | undefined>();
 
   return (

web/src/components/ViewSetting.tsx

@@ -1,4 +1,4 @@
-import { Select, Option, Button } from "@mui/joy";
+import { Select, Option, Button, Divider } from "@mui/joy";
 import { toast } from "react-hot-toast";
 import useViewStore from "../stores/v1/view";
 import Dropdown from "./common/Dropdown";
@@ -8,7 +8,7 @@ const ViewSetting = () => {
   const viewStore = useViewStore();
   const order = viewStore.getOrder();
   const { field, direction } = order;
-  const layout = viewStore.layout || "list";
+  const layout = viewStore.layout || "grid";
 
   const handleReset = () => {
     viewStore.setOrder({ field: "name", direction: "asc" });
@@ -47,11 +47,12 @@ const ViewSetting = () => {
               <Option value={"desc"}>DESC</Option>
             </Select>
           </div>
+          <Divider />
           <div className="w-full flex flex-row justify-between items-center">
             <span className="text-sm shrink-0 mr-2">Layout</span>
             <Select size="sm" value={layout} onChange={(_, value) => viewStore.setLayout(value as any)}>
-              <Option value={"list"}>List</Option>
               <Option value={"grid"}>Grid</Option>
+              <Option value={"list"}>List</Option>
             </Select>
           </div>
         </div>

web/src/stores/v1/view.ts

@@ -33,7 +33,7 @@ const useViewStore = create<ViewState>()(
         field: "name",
         direction: "asc",
       },
-      layout: "list",
+      layout: "grid",
       setFilter: (filter: Partial<Filter>) => {
         set({ filter: { ...get().filter, ...filter } });
       },