From 35efada24b27191178e3107da2b1fe755918e436 Mon Sep 17 00:00:00 2001 From: Sam Becker Date: Wed, 21 Feb 2024 17:26:55 -0600 Subject: [PATCH] Refine cmd-k modal, primary navigation UI --- package.json | 2 +- pnpm-lock.yaml | 92 +++++++++++++++---------------- src/components/CommandKClient.tsx | 4 +- src/components/Modal.tsx | 2 +- src/components/Switcher.tsx | 11 ++-- src/components/SwitcherItem.tsx | 9 ++- src/site/IconSearch.tsx | 6 +- src/site/ViewSwitcher.tsx | 2 +- 8 files changed, 67 insertions(+), 61 deletions(-) diff --git a/package.json b/package.json index 1a2bee9c..eb296c0a 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", "nanoid": "^5.0.6", - "next": "14.1.1-canary.67", + "next": "14.1.1-canary.68", "next-auth": "5.0.0-beta.9", "next-themes": "^0.2.1", "postcss": "8.4.35", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0734155d..6a9a4043 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -46,7 +46,7 @@ dependencies: version: 7.0.2(eslint@8.56.0)(typescript@5.3.3) '@vercel/analytics': specifier: ^1.2.2 - version: 1.2.2(next@14.1.1-canary.67)(react@18.2.0) + version: 1.2.2(next@14.1.1-canary.68)(react@18.2.0) '@vercel/blob': specifier: ^0.22.0 version: 0.22.0 @@ -55,7 +55,7 @@ dependencies: version: 0.7.2 '@vercel/speed-insights': specifier: ^1.0.10 - version: 1.0.10(next@14.1.1-canary.67)(react@18.2.0) + version: 1.0.10(next@14.1.1-canary.68)(react@18.2.0) autoprefixer: specifier: 10.4.17 version: 10.4.17(postcss@8.4.35) @@ -93,14 +93,14 @@ dependencies: specifier: ^5.0.6 version: 5.0.6 next: - specifier: 14.1.1-canary.67 - version: 14.1.1-canary.67(@babel/core@7.23.9)(react-dom@18.2.0)(react@18.2.0) + specifier: 14.1.1-canary.68 + version: 14.1.1-canary.68(@babel/core@7.23.9)(react-dom@18.2.0)(react@18.2.0) next-auth: specifier: 5.0.0-beta.9 - version: 5.0.0-beta.9(next@14.1.1-canary.67)(react@18.2.0) + version: 5.0.0-beta.9(next@14.1.1-canary.68)(react@18.2.0) next-themes: specifier: ^0.2.1 - version: 0.2.1(next@14.1.1-canary.67)(react-dom@18.2.0)(react@18.2.0) + version: 0.2.1(next@14.1.1-canary.68)(react-dom@18.2.0)(react@18.2.0) postcss: specifier: 8.4.35 version: 8.4.35 @@ -1563,8 +1563,8 @@ packages: - utf-8-validate dev: false - /@next/env@14.1.1-canary.67: - resolution: {integrity: sha512-v7nB6WURXs7qqpCeChafiomTRmkcpwg7hhbjnusV0LRAtQ/kQrf7to7W/O5kC9d732t6INe7UBNz3Ib7WKd1uQ==} + /@next/env@14.1.1-canary.68: + resolution: {integrity: sha512-yoicBuz9kJC0jIS7XXU+W8a1a0Tr5sFuBuJO2w5DiYPhNHCQiSZsWgvkXY8ddFjZuxztoWPIvKPJvWzeVh3d2Q==} dev: false /@next/eslint-plugin-next@14.1.0: @@ -1573,8 +1573,8 @@ packages: glob: 10.3.10 dev: false - /@next/swc-darwin-arm64@14.1.1-canary.67: - resolution: {integrity: sha512-wFmNv3aQ7Op6GZ3mCyXbNVgWxqHrvaOkloPWWvc+D9MZNtywT0/RU83t/WUuDU5NnkLi0S2zht4dqNrcgfZqtQ==} + /@next/swc-darwin-arm64@14.1.1-canary.68: + resolution: {integrity: sha512-L7uuGuuhQlEFioGUj1xNIGyp9RZs0QaVuPS/Y9tiPAlEdIK12HTequRoplI/zD9pGoF6TjnuWu1s81RuBXQM1w==} engines: {node: '>= 10'} cpu: [arm64] os: [darwin] @@ -1582,8 +1582,8 @@ packages: dev: false optional: true - /@next/swc-darwin-x64@14.1.1-canary.67: - resolution: {integrity: sha512-HbTOQzbL8BTKAygCVjJ27E0GShdW8gn1nG7js1msGo1XYtj85nC/VnEftcyDa3zsNJvC/xmfHAd5BkENOZWDNQ==} + /@next/swc-darwin-x64@14.1.1-canary.68: + resolution: {integrity: sha512-4wc0BgPoGhrdETnscCe4Q2MX+LwRTyn3cZlBUNAFqPll7Q/sW2959HNepPKIOMvkb0gdGqXyYnPhCwIBeW1Z/A==} engines: {node: '>= 10'} cpu: [x64] os: [darwin] @@ -1591,8 +1591,8 @@ packages: dev: false optional: true - /@next/swc-linux-arm64-gnu@14.1.1-canary.67: - resolution: {integrity: sha512-wMbqR2r2Tsi/TWU/LqEC2Mn+BVDgng/aXAQo+PlOhpmZEFSdqiMwXuZCxAgtgC/NbopaRM4jm4Xi0JLwwHnotw==} + /@next/swc-linux-arm64-gnu@14.1.1-canary.68: + resolution: {integrity: sha512-+c43JmcLmyCVnFBffUrjGQttv0Tc9XM64QJjUnwABqp0Q/k48gnJjGFiUOSnhrj6sHxL4iU9h8W+ti7I0br1aA==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] @@ -1600,8 +1600,8 @@ packages: dev: false optional: true - /@next/swc-linux-arm64-musl@14.1.1-canary.67: - resolution: {integrity: sha512-CwcPVm5oHk9SvzVMZVhRap6ETlyrFHuHFbWKNXhMLzuRdIP+6M2podqQ0rojFXyqysPmg5/g3/s3iKGbZmCogw==} + /@next/swc-linux-arm64-musl@14.1.1-canary.68: + resolution: {integrity: sha512-1Lsk/mCPKxM8vuqYQKFmCrNoyRwGa08ZVtM/+QHJADIw8DLp70jXTJ9teyJ3TzrEBk1ZfQdloHnUasgG50B/GA==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] @@ -1609,8 +1609,8 @@ packages: dev: false optional: true - /@next/swc-linux-x64-gnu@14.1.1-canary.67: - resolution: {integrity: sha512-VbiDqplc6TRL72//YuPc8pQnD+6W41g+438AE23Uq2JcN+M8uu3A//grZkWkObA/ICr52bG4afbs2iKVkYMlFw==} + /@next/swc-linux-x64-gnu@14.1.1-canary.68: + resolution: {integrity: sha512-4XHLafF58VKcKMxoFJR9MqcH4LO1mO1p00CQmSzPB9TkNivFHuIoAsO/5f9rKcCzZMvRf44Akuqne2avfTtE8Q==} engines: {node: '>= 10'} cpu: [x64] os: [linux] @@ -1618,8 +1618,8 @@ packages: dev: false optional: true - /@next/swc-linux-x64-musl@14.1.1-canary.67: - resolution: {integrity: sha512-qyuFmtImFpMoMdA19QOuCcUvjkA3HolZFqnPi31eQzed4eLW5EIBURWHCTj3yeYXGLR0na9hW7fFzRcg0Bu/xQ==} + /@next/swc-linux-x64-musl@14.1.1-canary.68: + resolution: {integrity: sha512-gRve6Sw5SMff1m21PSxbcIUc7FSn3PugubGCDYPSoMi7qdmejOWZopioLupcaAg5qxnB+i/n+C+NP3x5L24sqQ==} engines: {node: '>= 10'} cpu: [x64] os: [linux] @@ -1627,8 +1627,8 @@ packages: dev: false optional: true - /@next/swc-win32-arm64-msvc@14.1.1-canary.67: - resolution: {integrity: sha512-Di/JSatsweg9oACMFZrYtAfia+BFXpz2cdioNaXVT2fL+RXQ6V1LRU4jKFw8TLXt7dA4S5PfK/r/rxnjR5xN/Q==} + /@next/swc-win32-arm64-msvc@14.1.1-canary.68: + resolution: {integrity: sha512-1tIuQfsS7OPWYy535/nnOd5/4wOTsWZoOTZpqKXdTYkroYWw2aN7nCsK11Mwz5XKqyFUSP8jofXg6kj07VhTNQ==} engines: {node: '>= 10'} cpu: [arm64] os: [win32] @@ -1636,8 +1636,8 @@ packages: dev: false optional: true - /@next/swc-win32-ia32-msvc@14.1.1-canary.67: - resolution: {integrity: sha512-Gr+v1NAOEpo+cajhlytm3RzKLYj3uyD9AKlAb1z9Qx6iTJC8o+PFYH9wnG9JndHb1dCLpWiCXEtU3ZHDpkD7NQ==} + /@next/swc-win32-ia32-msvc@14.1.1-canary.68: + resolution: {integrity: sha512-wGS8neaZKlsliTGla3AuTFwK16/KqE4TBnxrc8er4T+ZpiBrluVPX6OR7x017cWf1nkruNAAgXyAdCZlPCe8mg==} engines: {node: '>= 10'} cpu: [ia32] os: [win32] @@ -1645,8 +1645,8 @@ packages: dev: false optional: true - /@next/swc-win32-x64-msvc@14.1.1-canary.67: - resolution: {integrity: sha512-bU+gq2EUl6cJi/TaaS03hoK4NGT3LRLcrkevMdLBHLVxgJRe2GUpqpXU0ZGFFoVdjJyZb28rFF0JRjJTtIpD4Q==} + /@next/swc-win32-x64-msvc@14.1.1-canary.68: + resolution: {integrity: sha512-LpMabXAnbJ+/2NBv4HphFfYhvfIFpxTXoLHZ8lI4V15YJ6KlFbBvKYi0LoyL1UEOBywyhgc7zJ9oASlf/ZKgfg==} engines: {node: '>= 10'} cpu: [x64] os: [win32] @@ -3243,7 +3243,7 @@ packages: resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==} dev: false - /@vercel/analytics@1.2.2(next@14.1.1-canary.67)(react@18.2.0): + /@vercel/analytics@1.2.2(next@14.1.1-canary.68)(react@18.2.0): resolution: {integrity: sha512-X0rctVWkQV1e5Y300ehVNqpOfSOufo7ieA5PIdna8yX/U7Vjz0GFsGf4qvAhxV02uQ2CVt7GYcrFfddXXK2Y4A==} peerDependencies: next: '>= 13' @@ -3254,7 +3254,7 @@ packages: react: optional: true dependencies: - next: 14.1.1-canary.67(@babel/core@7.23.9)(react-dom@18.2.0)(react@18.2.0) + next: 14.1.1-canary.68(@babel/core@7.23.9)(react-dom@18.2.0)(react@18.2.0) react: 18.2.0 server-only: 0.0.1 dev: false @@ -3278,7 +3278,7 @@ packages: ws: 8.14.2(bufferutil@4.0.8)(utf-8-validate@6.0.3) dev: false - /@vercel/speed-insights@1.0.10(next@14.1.1-canary.67)(react@18.2.0): + /@vercel/speed-insights@1.0.10(next@14.1.1-canary.68)(react@18.2.0): resolution: {integrity: sha512-4uzdKB0RW6Ff2FkzshzjZ+RlJfLPxgm/00i0XXgxfMPhwnnsk92YgtqsxT9OcPLdJUyVU1DqFlSWWjIQMPkh0g==} requiresBuild: true peerDependencies: @@ -3302,7 +3302,7 @@ packages: vue-router: optional: true dependencies: - next: 14.1.1-canary.67(@babel/core@7.23.9)(react-dom@18.2.0)(react@18.2.0) + next: 14.1.1-canary.68(@babel/core@7.23.9)(react-dom@18.2.0)(react@18.2.0) react: 18.2.0 dev: false @@ -6188,7 +6188,7 @@ packages: resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==} dev: false - /next-auth@5.0.0-beta.9(next@14.1.1-canary.67)(react@18.2.0): + /next-auth@5.0.0-beta.9(next@14.1.1-canary.68)(react@18.2.0): resolution: {integrity: sha512-BWFiwJ/wzfxWpHnGpAoFsXHSlVofWgFns6tjtIGeDrXfEf3D+afnBpmzCNyek2RNYDVgMHi8Q5uXzFoNBd2l5g==} peerDependencies: '@simplewebauthn/browser': ^9.0.1 @@ -6205,24 +6205,24 @@ packages: optional: true dependencies: '@auth/core': 0.26.3 - next: 14.1.1-canary.67(@babel/core@7.23.9)(react-dom@18.2.0)(react@18.2.0) + next: 14.1.1-canary.68(@babel/core@7.23.9)(react-dom@18.2.0)(react@18.2.0) react: 18.2.0 dev: false - /next-themes@0.2.1(next@14.1.1-canary.67)(react-dom@18.2.0)(react@18.2.0): + /next-themes@0.2.1(next@14.1.1-canary.68)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==} peerDependencies: next: '*' react: '*' react-dom: '*' dependencies: - next: 14.1.1-canary.67(@babel/core@7.23.9)(react-dom@18.2.0)(react@18.2.0) + next: 14.1.1-canary.68(@babel/core@7.23.9)(react-dom@18.2.0)(react@18.2.0) react: 18.2.0 react-dom: 18.2.0(react@18.2.0) dev: false - /next@14.1.1-canary.67(@babel/core@7.23.9)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-oCNdivm5oDvWJ91dUPq/vdt1bCjkQCypkKdiiUzEH1lxcsEOUbQbgxmk+YRh91Wm+HLhHtuZsyf+jwD6Lju+gw==} + /next@14.1.1-canary.68(@babel/core@7.23.9)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-fYS6LFYwEI3rMzLc/htS3L3z/eTHNiXA33nioXYApShvUUewI3KSRwbpjFOONxW0crux2JZXNrPWEG2N41iHSA==} engines: {node: '>=18.17.0'} hasBin: true peerDependencies: @@ -6236,7 +6236,7 @@ packages: sass: optional: true dependencies: - '@next/env': 14.1.1-canary.67 + '@next/env': 14.1.1-canary.68 '@swc/helpers': 0.5.5 busboy: 1.6.0 caniuse-lite: 1.0.30001585 @@ -6246,15 +6246,15 @@ packages: react-dom: 18.2.0(react@18.2.0) styled-jsx: 5.1.1(@babel/core@7.23.9)(react@18.2.0) optionalDependencies: - '@next/swc-darwin-arm64': 14.1.1-canary.67 - '@next/swc-darwin-x64': 14.1.1-canary.67 - '@next/swc-linux-arm64-gnu': 14.1.1-canary.67 - '@next/swc-linux-arm64-musl': 14.1.1-canary.67 - '@next/swc-linux-x64-gnu': 14.1.1-canary.67 - '@next/swc-linux-x64-musl': 14.1.1-canary.67 - '@next/swc-win32-arm64-msvc': 14.1.1-canary.67 - '@next/swc-win32-ia32-msvc': 14.1.1-canary.67 - '@next/swc-win32-x64-msvc': 14.1.1-canary.67 + '@next/swc-darwin-arm64': 14.1.1-canary.68 + '@next/swc-darwin-x64': 14.1.1-canary.68 + '@next/swc-linux-arm64-gnu': 14.1.1-canary.68 + '@next/swc-linux-arm64-musl': 14.1.1-canary.68 + '@next/swc-linux-x64-gnu': 14.1.1-canary.68 + '@next/swc-linux-x64-musl': 14.1.1-canary.68 + '@next/swc-win32-arm64-msvc': 14.1.1-canary.68 + '@next/swc-win32-ia32-msvc': 14.1.1-canary.68 + '@next/swc-win32-x64-msvc': 14.1.1-canary.68 transitivePeerDependencies: - '@babel/core' - babel-plugin-macros diff --git a/src/components/CommandKClient.tsx b/src/components/CommandKClient.tsx index 2c02e9af..557f201c 100644 --- a/src/components/CommandKClient.tsx +++ b/src/components/CommandKClient.tsx @@ -134,11 +134,11 @@ export default function CommandKClient({ fast >
-
+
setQueryLive(e.currentTarget.value)} className={clsx( - 'w-full !max-w-full !min-w-0', + 'w-full !min-w-0', 'focus:ring-0', isPlaceholderVisible || isLoading && '!pr-8', '!border-gray-200 dark:!border-gray-800', diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index fb75a8ed..6c35b83b 100644 --- a/src/components/Modal.tsx +++ b/src/components/Modal.tsx @@ -87,7 +87,7 @@ export default function Modal({ ref={contentRef} key="modalContent" className={clsx( - 'w-[calc(100vw-1.5rem)] sm:w-[min(500px,90vw)]', + 'w-[calc(100vw-1.5rem)] sm:w-[min(540px,90vw)]', 'p-3 rounded-lg', 'md:p-4 md:rounded-xl', 'bg-white dark:bg-black', diff --git a/src/components/Switcher.tsx b/src/components/Switcher.tsx index 74acf151..63be9212 100644 --- a/src/components/Switcher.tsx +++ b/src/components/Switcher.tsx @@ -3,17 +3,20 @@ import { clsx } from 'clsx/lite'; export default function Switcher({ children, + type = 'regular', }: { children: ReactNode + type?: 'regular' | 'borderless' }) { return (
{children}
diff --git a/src/components/SwitcherItem.tsx b/src/components/SwitcherItem.tsx index 4e41be1b..0a91e636 100644 --- a/src/components/SwitcherItem.tsx +++ b/src/components/SwitcherItem.tsx @@ -20,12 +20,15 @@ export default function SwitcherItem({ classNameProp, 'py-0.5 px-1.5', 'cursor-pointer', - 'hover:bg-gray-50 active:bg-gray-100 active:text-gray-400', + 'hover:bg-gray-100/60 active:bg-gray-100', // eslint-disable-next-line max-len - 'dark:hover:bg-gray-950 dark:active:bg-gray-900/75 dark:active:text-gray-600', + 'dark:hover:bg-gray-900/75 dark:active:bg-gray-900', active ? 'text-black dark:text-white' - : 'text-gray-300 dark:text-gray-700', + : 'text-gray-400 dark:text-gray-600', + active + ? 'hover:text-black hover:dark:text-white' + : 'hover:text-gray-700 dark:hover:text-gray-400', ); const renderIcon = () => noPadding diff --git a/src/site/IconSearch.tsx b/src/site/IconSearch.tsx index d7ae0ff9..102f672f 100644 --- a/src/site/IconSearch.tsx +++ b/src/site/IconSearch.tsx @@ -19,9 +19,9 @@ export default function IconSearch({ stroke="currentColor" xmlns="http://www.w3.org/2000/svg" > - {includeTitle && Search} - - + {includeTitle && Search ⌘K} + + ); } diff --git a/src/site/ViewSwitcher.tsx b/src/site/ViewSwitcher.tsx index cb91b9c2..a4816c14 100644 --- a/src/site/ViewSwitcher.tsx +++ b/src/site/ViewSwitcher.tsx @@ -40,7 +40,7 @@ export default function ViewSwitcher({ active={currentSelection === 'admin'} />} - + } onClick={() => setIsCommandKOpen?.(true)}