strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Create cmd-k affordance in nav

Browse Source
This commit is contained in:
Sam Becker 2024-02-21 12:33:31 -06:00
parent 0d9ba09dee
commit 02cfa4ee52
11 changed files with 117 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.vscode/settings.json vendored
View File

@ -2,6 +2,7 @@
"cSpell.words": [
"ABCDEFGHIJKLMNOP",
"Acros",
"affordance",
"ARROWLEFT",
"ARROWRIGHT",
"Astia",

6
src/app/layout.tsx
View File

@ -4,7 +4,7 @@ import { clsx } from 'clsx/lite';
import { IBM_Plex_Mono } from 'next/font/google';
import { Metadata } from 'next';
import { BASE_URL, SITE_DESCRIPTION, SITE_TITLE } from '@/site/config';
import StateProvider from '@/state/AppStateProvider';
import AppStateProvider from '@/state/AppStateProvider';
import ThemeProviderClient from '@/site/ThemeProviderClient';
import Nav from '@/site/Nav';
import ToasterWithThemes from '@/toast/ToasterWithThemes';
@ -73,7 +73,7 @@ export default function RootLayout({
suppressHydrationWarning
>
<body className={ibmPlexMono.variable}>
<StateProvider>
<AppStateProvider>
<ThemeProviderClient>
<main className={clsx(
'mx-3 mb-3',
@ -94,7 +94,7 @@ export default function RootLayout({
</main>
<CommandK />
</ThemeProviderClient>
</StateProvider>
</AppStateProvider>
<Analytics />
<SpeedInsights />
<PhotoEscapeHandler />

59
src/components/CommandKClient.tsx
View File

@ -1,7 +1,7 @@
'use client';
import { Command } from 'cmdk';
import { ReactNode, useEffect, useState } from 'react';
import { ReactNode, useEffect, useMemo, useState } from 'react';
import Modal from './Modal';
import { clsx } from 'clsx/lite';
import { useDebounce } from 'use-debounce';
@ -10,6 +10,8 @@ import { useRouter } from 'next/navigation';
import { useTheme } from 'next-themes';
import { BiDesktop, BiMoon, BiSun } from 'react-icons/bi';
import { IoInvertModeSharp } from 'react-icons/io5';
import { useAppState } from '@/state';
import { parameterize } from '@/utility/string';
const LISTENER_KEYDOWN = 'keydown';
const MINIMUM_QUERY_LENGTH = 2;
@ -34,9 +36,22 @@ export default function CommandKClient({
onQueryChange?: (query: string) => Promise<CommandKSection[]>
sections?: CommandKSection[]
}) {
const [isOpen, setIsOpen] = useState(false);
const [queryRaw, setQueryRaw] = useState('');
const [queryDebounced] = useDebounce(queryRaw, 500, { trailing: true });
const {
isCommandKOpen: isOpen,
setIsCommandKOpen: setIsOpen,
} = useAppState();
// Raw query values
const [queryLiveRaw, setQueryLive] = useState('');
const [queryDebouncedRaw] =
useDebounce(queryLiveRaw, 500, { trailing: true });
const isPlaceholderVisible = queryLiveRaw === '';
// Parameterized query values
const queryLive = useMemo(() =>
parameterize(queryLiveRaw), [queryLiveRaw]);
const queryDebounced = useMemo(() =>
parameterize(queryDebouncedRaw), [queryDebouncedRaw]);
const [isLoading, setIsLoading] = useState(false);
const [queriedSections, setQueriedSections] = useState<CommandKSection[]>([]);
@ -49,12 +64,12 @@ export default function CommandKClient({
const down = (e: KeyboardEvent) => {
if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
e.preventDefault();
setIsOpen((open) => !open);
setIsOpen?.((open) => !open);
}
};
document.addEventListener(LISTENER_KEYDOWN, down);
return () => document.removeEventListener(LISTENER_KEYDOWN, down);
}, []);
}, [setIsOpen]);
useEffect(() => {
if (queryDebounced.length >= MINIMUM_QUERY_LENGTH) {
@ -67,16 +82,17 @@ export default function CommandKClient({
}, [queryDebounced, onQueryChange]);
useEffect(() => {
if (queryRaw === '') {
if (queryLive === '') {
setQueriedSections([]);
} else if (queryRaw.length >= MINIMUM_QUERY_LENGTH) {
setIsLoading(false);
} else if (queryLive.length >= MINIMUM_QUERY_LENGTH) {
setIsLoading(true);
}
}, [queryRaw]);
}, [queryLive]);
useEffect(() => {
if (!isOpen) {
setQueryRaw('');
setQueryLive('');
setQueriedSections([]);
setIsLoading(false);
}
@ -114,30 +130,37 @@ export default function CommandKClient({
>
<Modal
anchor='top'
onClose={() => setIsOpen(false)}
onClose={() => setIsOpen?.(false)}
fast
>
<div className="space-y-1.5">
<div className="relative">
<div className="relative w-full max-w-full min-w-0">
<Command.Input
onChangeCapture={(e) => setQueryRaw(e.currentTarget.value)}
onChangeCapture={(e) => setQueryLive(e.currentTarget.value)}
className={clsx(
'w-full',
'w-full !max-w-full !min-w-0',
'focus:ring-0',
isPlaceholderVisible || isLoading && '!pr-8',
'!border-gray-200 dark:!border-gray-800',
'focus:border-gray-200 focus:dark:border-gray-800',
'placeholder:text-gray-400/80',
'placeholder:dark:text-gray-700',
)}
style={{ paddingRight: '2rem' }}
placeholder="Search photos, views, settings ..."
/>
{isLoading &&
<span className="absolute top-2.5 right-3">
<span className={clsx(
'absolute top-2.5 right-0 w-8',
'flex items-center justify-center translate-y-[2px]',
)}>
<Spinner size={16} />
</span>}
</div>
<Command.List className="relative max-h-72 overflow-y-scroll">
<Command.List className={clsx(
'relative overflow-y-scroll',
'h-36 sm:h-auto',
'sm:max-h-72',
)}>
<Command.Empty className="mt-1 pl-3 text-dim">
{isLoading ? 'Searching ...' : 'No results found'}
</Command.Empty>
@ -185,7 +208,7 @@ export default function CommandKClient({
'data-[selected=true]:dark:bg-gray-900/75',
)}
onSelect={() => {
setIsOpen(false);
setIsOpen?.(false);
action?.();
if (path) {
router.push(path);

8
src/components/Modal.tsx
View File

@ -57,7 +57,7 @@ export default function Modal({
className={clsx(
'fixed inset-0 z-50 flex justify-center',
anchor === 'top'
? 'items-start pt-4 sm:pt-24'
? 'items-start pt-4 xs:pt-12 sm:pt-24'
: 'items-center',
'bg-black',
)}
@ -70,16 +70,16 @@ export default function Modal({
<AnimateItems
duration={fast ? 0.1 : 0.3}
items={[<div
ref={contentRef}
key="modalContent"
className={clsx(
'w-[calc(100vw-1.5rem)] xs:w-[min(500px,90vw)]',
'p-3 rounded-lg',
'md:p-4 md:rounded-xl',
'bg-white dark:bg-black',
'dark:border dark:border-gray-800',
'md:p-4 md:rounded-xl',
className,
)}
style={{ width: 'min(500px, 90vw)' }}
ref={contentRef}
>
{children}
</div>]}

27
src/site/IconSearch.tsx Normal file
View File

@ -0,0 +1,27 @@
/* eslint-disable max-len */
const INTRINSIC_WIDTH = 28;
const INTRINSIC_HEIGHT = 24;
export default function IconSearch({
width = INTRINSIC_WIDTH,
includeTitle = true,
}: {
width?: number;
includeTitle?: boolean;
}) {
return (
<svg
width={width}
height={(INTRINSIC_HEIGHT * width) / INTRINSIC_WIDTH}
viewBox="0 0 28 24"
fill="none"
stroke="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
{includeTitle && <title>Search</title>}
<circle cx="13.5" cy="11.5" r="4.875" strokeWidth="1.25" />
<path d="M17 15L21 19" strokeWidth="1.25" strokeLinecap="round" />
</svg>
);
}

31
src/site/IconSets.tsx
View File

@ -1,31 +0,0 @@
/* eslint-disable max-len */
const INTRINSIC_WIDTH = 28;
const INTRINSIC_HEIGHT = 24;
export default function IconSets({
width = INTRINSIC_WIDTH,
includeTitle = true,
}: {
width?: number
includeTitle?: boolean
}) {
return (
<svg
width={width}
height={INTRINSIC_HEIGHT * width / INTRINSIC_WIDTH}
viewBox="0 0 28 24"
fill="none"
stroke="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
{includeTitle && <title>Photo Sets</title>}
<path d="M18.5 16.375L9.75 16.375" strokeWidth="1.25"/>
<path d="M22.25 12.125L9.75 12.125" strokeWidth="1.25"/>
<path d="M20.5 7.875L9.75 7.875" strokeWidth="1.25"/>
<path d="M7.25 16.375L6.25 16.375" strokeWidth="1.25" strokeLinecap="round"/>
<path d="M7.25 12.125L6.25 12.125" strokeWidth="1.25" strokeLinecap="round"/>
<path d="M7.25 7.875L6.25 7.875" strokeWidth="1.25" strokeLinecap="round"/>
</svg>
);
};

3
src/site/NavClient.tsx
View File

@ -11,7 +11,6 @@ import {
isPathAdmin,
isPathGrid,
isPathProtected,
isPathSets,
isPathSignIn,
} from '@/site/paths';
import AnimateItems from '../components/AnimateItems';
@ -40,8 +39,6 @@ export default function NavClient({
return 'full-frame';
} else if (isPathGrid(pathname)) {
return 'grid';
} else if (isPathSets(pathname)) {
return 'sets';
} else if (isPathProtected(pathname)) {
return 'admin';
}

60
src/site/ViewSwitcher.tsx
View File

@ -2,9 +2,10 @@ import Switcher from '@/components/Switcher';
import SwitcherItem from '@/components/SwitcherItem';
import IconFullFrame from '@/site/IconFullFrame';
import IconGrid from '@/site/IconGrid';
import { PATH_ADMIN_PHOTOS, PATH_GRID, PATH_SETS } from '@/site/paths';
import { PATH_ADMIN_PHOTOS, PATH_GRID } from '@/site/paths';
import { BiLockAlt } from 'react-icons/bi';
import IconSets from './IconSets';
import { useAppState } from '@/state';
import IconSearch from './IconSearch';
export type SwitcherSelection = 'full-frame' | 'grid' | 'sets' | 'admin';
@ -15,33 +16,36 @@ export default function ViewSwitcher({
currentSelection?: SwitcherSelection
showAdmin?: boolean
}) {
const { setIsCommandKOpen } = useAppState();
return (
<Switcher>
<SwitcherItem
icon={<IconFullFrame />}
href="/"
active={currentSelection === 'full-frame'}
noPadding
/>
<SwitcherItem
icon={<IconGrid />}
href={PATH_GRID}
active={currentSelection === 'grid'}
noPadding
/>
<SwitcherItem
className="md:hidden"
icon={<IconSets />}
href={PATH_SETS}
active={currentSelection === 'sets'}
noPadding
/>
{showAdmin &&
<div className="flex gap-2">
<Switcher>
<SwitcherItem
icon={<BiLockAlt size={16} className="translate-y-[-0.5px]" />}
href={PATH_ADMIN_PHOTOS}
active={currentSelection === 'admin'}
/>}
</Switcher>
icon={<IconFullFrame />}
href="/"
active={currentSelection === 'full-frame'}
noPadding
/>
<SwitcherItem
icon={<IconGrid />}
href={PATH_GRID}
active={currentSelection === 'grid'}
noPadding
/>
{showAdmin &&
<SwitcherItem
icon={<BiLockAlt size={16} className="translate-y-[-0.5px]" />}
href={PATH_ADMIN_PHOTOS}
active={currentSelection === 'admin'}
/>}
</Switcher>
<Switcher>
<SwitcherItem
icon={<IconSearch />}
onClick={() => setIsCommandKOpen?.(true)}
/>
</Switcher>
</div>
);
}

5
src/site/paths.ts
View File

@ -10,7 +10,6 @@ import { FilmSimulation } from '@/simulation';
// Core paths
export const PATH_ROOT = '/';
export const PATH_GRID = '/grid';
export const PATH_SETS = '/sets';
export const PATH_ADMIN = '/admin';
export const PATH_API = '/api';
export const PATH_SIGN_IN = '/sign-in';
@ -55,7 +54,6 @@ export const PATHS_ADMIN = [
export const PATHS_TO_CACHE = [
PATH_ROOT,
PATH_GRID,
PATH_SETS,
PATH_OG,
PATH_PHOTO_DYNAMIC,
PATH_TAG_DYNAMIC,
@ -236,9 +234,6 @@ export const checkPathPrefix = (pathname = '', prefix: string) =>
export const isPathGrid = (pathname?: string) =>
checkPathPrefix(pathname, PATH_GRID);
export const isPathSets = (pathname?: string) =>
checkPathPrefix(pathname, PATH_SETS);
export const isPathSignIn = (pathname?: string) =>
checkPathPrefix(pathname, PATH_SIGN_IN);

6
src/state/AppStateProvider.tsx
View File

@ -5,7 +5,7 @@ import { AppStateContext } from '.';
import { AnimationConfig } from '@/components/AnimateItems';
import usePathnames from '@/utility/usePathnames';
export default function StateProvider({
export default function AppStateProvider({
children,
}: {
children: ReactNode
@ -17,6 +17,8 @@ export default function StateProvider({
const [nextPhotoAnimation, setNextPhotoAnimation] =
useState<AnimationConfig>();
const [isCommandKOpen, setIsCommandKOpen] = useState(false);
useEffect(() => {
setHasLoaded?.(true);
}, [setHasLoaded]);
@ -28,6 +30,8 @@ export default function StateProvider({
hasLoaded,
setHasLoaded,
nextPhotoAnimation,
isCommandKOpen,
setIsCommandKOpen,
setNextPhotoAnimation,
clearNextPhotoAnimation: () => setNextPhotoAnimation?.(undefined),
}}

6
src/state/index.ts
View File

@ -1,11 +1,13 @@
import { createContext, useContext } from 'react';
import { Dispatch, SetStateAction, createContext, useContext } from 'react';
import { AnimationConfig } from '@/components/AnimateItems';
export interface AppStateContext {
previousPathname?: string
hasLoaded?: boolean
setHasLoaded?: (hasLoaded: boolean) => void
setHasLoaded?: Dispatch<SetStateAction<boolean>>
nextPhotoAnimation?: AnimationConfig
isCommandKOpen?: boolean
setIsCommandKOpen?: Dispatch<SetStateAction<boolean>>
setNextPhotoAnimation?: (animation?: AnimationConfig) => void
clearNextPhotoAnimation?: () => void
}