Misc UI updates/tweaks

solomonhawk · Nov 9, 2024 · 76bf154 · 76bf154
1 parent 4cfa5f2
commit 76bf154
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 17 deletions.
diff --git a/apps/web/src/features/dashboard/components/table-list/index.tsx b/apps/web/src/features/dashboard/components/table-list/index.tsx
@@ -115,7 +115,7 @@ export function TableList({
       </CardHeader>
 
       <CardContent className={cn({ "opacity-50": isPending })}>
-        <AnimatedList className="grid grid-cols-2 gap-12 transition-opacity sm:grid-cols-3 sm:gap-16 md:grid-cols-[repeat(auto-fill,minmax(150px,200px))]">
+        <AnimatedList className="grid grid-cols-3 gap-12 transition-opacity sm:grid-cols-4 sm:gap-16 md:grid-cols-[repeat(auto-fill,minmax(120px,180px))]">
           {listQuery.data.length === 0 && (
             <AnimatedListItem
               className="col-span-full flex items-center gap-16 text-center text-gray-500"
@@ -151,9 +151,10 @@ export function TableList({
                           : `/t/${userProfile.username}/${table.slug}/edit`
                       }
                       state={{ table }}
+                      title={table.title}
                     >
                       <div className="z-20 translate-y-14 transition-transform group-hover:translate-y-0">
-                        <h2 className="whitespace-normal text-center text-lg !leading-tight sm:text-xl">
+                        <h2 className="line-clamp-2 whitespace-normal text-center text-sm !leading-tight sm:text-base md:text-lg">
                           {table.title}
                         </h2>
                       </div>

diff --git a/apps/web/src/features/made-with/pages/root/components/section.tsx b/apps/web/src/features/made-with/pages/root/components/section.tsx
@@ -56,7 +56,7 @@ export function SectionGroup({ title, children }: GroupProps) {
   return (
     <section>
       {title && (
-        <h4 className="mt-16 pb-4 text-sm font-semibold sm:text-base md:pb-8">
+        <h4 className="mt-16 pb-4 text-sm font-semibold sm:text-base">
           {title}
         </h4>
       )}

diff --git a/apps/web/src/features/made-with/pages/root/page.tsx b/apps/web/src/features/made-with/pages/root/page.tsx
@@ -114,8 +114,8 @@ const CLIENT: MadeWithSection = {
           url: "https://tailwindcss.com/",
         },
         {
-          label: "React Query",
-          url: "https://react-query.tanstack.com/",
+          label: "Tanstack React Query",
+          url: "https://tanstack.com/query/v4",
         },
         {
           label: "comlink",

diff --git a/apps/web/src/features/routing/components/launcher.tsx b/apps/web/src/features/routing/components/launcher.tsx
@@ -3,12 +3,16 @@ import {
   CommandGroup,
   CommandItem,
   CommandSeparator,
-  CommandShortcut,
 } from "@manifold/ui/components/ui/command";
 import { Skeleton } from "@manifold/ui/components/ui/skeleton";
 import { useCommandPalette } from "@manifold/ui/hooks/use-command-palette";
 import { GoFile, GoFileSymlinkFile } from "react-icons/go";
-import { Link, useNavigate } from "react-router-dom";
+import {
+  Link,
+  type NavigateOptions,
+  type To,
+  useNavigate,
+} from "react-router-dom";
 
 import { useAuth } from "~features/auth/hooks/use-auth";
 import { useListTables } from "~features/table/api/list";
@@ -26,7 +30,7 @@ export function Launcher() {
     },
   });
 
-  function handleCreateTable() {
+  function navigateAndDismissLauncher(to: To, options?: NavigateOptions) {
     closeCommandPalette();
 
     /**
@@ -47,7 +51,7 @@ export function Launcher() {
      * as of right now.
      */
     requestAnimationFrame(() => {
-      navigate("/table/new");
+      navigate(to, options);
     });
   }
 
@@ -56,10 +60,28 @@ export function Launcher() {
   return (
     <CommandPalette isOpen={isCommandPaletteOpen} onClose={closeCommandPalette}>
       <CommandGroup heading="Quick Actions">
-        <CommandItem onSelect={handleCreateTable}>
-          <GoFileSymlinkFile />
-          <span>Create a new Table</span>
-          <CommandShortcut>⌘E</CommandShortcut>
+        <CommandItem
+          asChild
+          onSelect={() => {
+            navigateAndDismissLauncher("/table/new");
+          }}
+        >
+          <Link to="/table/new">
+            <GoFileSymlinkFile />
+            <span>Create a new Table</span>
+          </Link>
+        </CommandItem>
+
+        <CommandItem
+          asChild
+          onSelect={() => {
+            navigateAndDismissLauncher("/");
+          }}
+        >
+          <Link to="/">
+            <GoFileSymlinkFile />
+            <span>Go to Dashboard</span>
+          </Link>
         </CommandItem>
       </CommandGroup>
 
@@ -70,8 +92,6 @@ export function Launcher() {
           {tablesQuery.isLoading && (
             <div className="space-y-8">
               <Skeleton className="h-44" />
-              <Skeleton className="h-44" />
-              <Skeleton className="h-44" />
             </div>
           )}
 
@@ -83,8 +103,9 @@ export function Launcher() {
                   key={table.id}
                   asChild
                   onSelect={() => {
-                    navigate(`/t/${username}/${table.slug}/edit`);
-                    closeCommandPalette();
+                    navigateAndDismissLauncher(
+                      `/t/${username}/${table.slug}/edit`,
+                    );
                   }}
                 >
                   <Link to={`/t/${username}/${table.slug}/edit`}>