Final cmd-k adjustments

src/components/CommandKClient.tsx

@@ -32,9 +32,11 @@ export type CommandKSection = {
 export default function CommandKClient({
   onQueryChange,
   sections = [],
+  footer,
 }: {
   onQueryChange?: (query: string) => Promise<CommandKSection[]>
   sections?: CommandKSection[]
+  footer?: string
 }) {
   const {
     isCommandKOpen: isOpen,
@@ -231,6 +233,10 @@ export default function CommandKClient({
                       </div>
                     </Command.Item>)}
                 </Command.Group>)}
+            {footer && !queryLive &&
+              <div className="text-center text-dim pt-3 sm:pt-4">
+                {footer}
+              </div>}
           </Command.List>
         </div>
       </Modal>

src/site/CommandK.tsx

@@ -1,5 +1,6 @@
 import CommandKClient, { CommandKSection } from '@/components/CommandKClient';
 import {
+  getPhotosCountCached,
   getUniqueCamerasCached,
   getUniqueFilmSimulationsCached,
   getUniqueTagsCached,
@@ -17,7 +18,7 @@ import {
 import { formatCameraText } from '@/camera';
 import { authCached } from '@/auth/cache';
 import { getPhotos } from '@/services/vercel-postgres';
-import { titleForPhoto } from '@/photo';
+import { photoQuantityText, titleForPhoto } from '@/photo';
 import PhotoTiny from '@/photo/PhotoTiny';
 import { formatDate } from '@/utility/date';
 import { formatCount, formatCountDescriptive } from '@/utility/string';
@@ -31,10 +32,12 @@ import { HiDocumentText } from 'react-icons/hi';
 
 export default async function CommandK() {
   const [
+    count,
     tags,
     cameras,
     filmSimulations,
   ] = await Promise.all([
+    getPhotosCountCached().catch(() => 0),
     getUniqueTagsCached().catch(() => []),
     getUniqueCamerasCached().catch(() => []),
     getUniqueFilmSimulationsCached().catch(() => []),
@@ -119,7 +122,7 @@ export default async function CommandK() {
     ]}
     onQueryChange={async (query) => {
       'use server';
-      const photos = (await getPhotos({ title: query }))
+      const photos = (await getPhotos({ title: query, limit: 10 }))
         .filter(({ title }) => Boolean(title));
       return photos.length > 0
         ? [{
@@ -134,5 +137,6 @@ export default async function CommandK() {
         }]
         : [];
     }}
+    footer={photoQuantityText(count, false)}
   />;
 }

src/site/NavClient.tsx

@@ -59,7 +59,7 @@ export default function NavClient({
                 'w-full min-h-[4rem]',
                 'leading-none',
               )}>
-              <div className="flex flex-grow items-center gap-4">
+              <div className="flex-grow">
                 <ViewSwitcher
                   currentSelection={switcherSelectionForPath()}
                   showAdmin={showAdmin}

src/site/ViewSwitcher.tsx

@@ -19,7 +19,7 @@ export default function ViewSwitcher({
   const { setIsCommandKOpen } = useAppState();
 
   return (
-    <div className="flex gap-2">
+    <div className="flex gap-1 sm:gap-2">
       <Switcher>
         <SwitcherItem
           icon={<IconFullFrame />}