feat: final touches before internal launch (#12)

* feat: disable /debug/world polling & allow manual refetch

* refactor: move root header & sidebar into separate components for readability

* style: run prettier

* feat: empty state for bottom bar results

* build: prettier ignore auto generate routetree.gen.ts

* feat: update /debug/world -> /world & add component attributes in sample enitties

* chore: slight font/icon size change in bottom bar

---------

Co-authored-by: Ryan Martin <rmrt1n@users.noreply.github.com>

package.json

@@ -8,7 +8,7 @@
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives",
     "preview": "vite preview",
-    "format": "prettier --ignore-path .gitignore --write ."
+    "format": "prettier --ignore-path .gitignore --ignore-path 'src/routeTree.gen.ts' --write ."
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.1.2",

src/components/bottom-bar.tsx

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query'
-import { ChevronsDown, ChevronsUp } from 'lucide-react'
+import { Braces, ChevronsDown, ChevronsUp } from 'lucide-react'
 import { useEffect, useRef, useState } from 'react'
 import { ImperativePanelHandle } from 'react-resizable-panels'
 
@@ -46,11 +46,22 @@ export function BottomBar() {
           {collapsed ? <ChevronsUp size={20} /> : <ChevronsDown size={20} />}
         </Button>
       </div>
-      <div className="max-h-[calc(100%-4rem)] overflow-y-auto bg-muted px-3 py-1 rounder border border-border">
-        {data && (
+      <div className="h-[calc(100%-4rem)] overflow-y-auto bg-muted px-3 py-1 rounder border border-border">
+        {data ? (
           <div className="font-mono text-xs whitespace-pre-wrap">
             {JSON.stringify(data, null, 2)}
           </div>
+        ) : (
+          <div className="flex flex-col gap-4 items-center justify-center h-full">
+            <Braces size={36} strokeWidth={2.5} className="text-muted-foreground flex-shrink-0" />
+            <div className="space-y-2 text-center">
+              <p className="text-muted-foreground text-sm">
+                No results.
+                <br />
+                You can send messages and queries from the sidebar.
+              </p>
+            </div>
+          </div>
         )}
       </div>
     </ResizablePanel>

src/components/entity-group-sheets.tsx

@@ -37,17 +37,17 @@ import { useToast } from '@/components/ui/use-toast'
 import { useCardinal } from '@/lib/cardinal-provider'
 import { useConfig } from '@/lib/config-provider'
 import { worldQueryOptions } from '@/lib/query-options'
-import { Entity } from '@/lib/types'
+import { Entity, WorldField } from '@/lib/types'
 
-// TODO: update this when registered components endpoint is done
-const sampleEntity = (components: string[]): Entity => {
+const sampleEntity = (selected: string[], components: WorldField[]): Entity => {
+  const componentsMap: { [key: string]: string } = components.reduce((acc, c) => ({ ...acc, [c.name]: c.fields }), {})
   return {
     id: 0,
-    components: components.reduce((acc, c) => ({ ...acc, [c]: { attribute: 'dummy data' } }), {}),
+    components: selected.reduce((acc, c) => ({ ...acc, [c]: componentsMap[c] }), {}),
   }
 }
 
-// TODO: consider zod for form vaidation
+// TODO: consider zod for form validation
 export function NewEntityGroupSheet() {
   const cardinal = useCardinal()
   const { data } = useQuery(worldQueryOptions(cardinal))
@@ -58,7 +58,8 @@ export function NewEntityGroupSheet() {
   const [selected, setSelected] = useState<string[]>([])
   const [selectedError, setSelectedError] = useState('')
 
-  const components = data?.components.map((c) => ({ label: c, value: c })) ?? []
+  const components = data?.components ?? []
+  const options = components.map((c) => ({ label: c.name, value: c.name })) ?? []
   const hasSelectedComponents = selected && selected.length > 0
   const accordionValue = hasSelectedComponents ? 'default' : ''
 
@@ -115,7 +116,7 @@ export function NewEntityGroupSheet() {
               </div>
               <div className="space-y-1">
                 <Label>Components</Label>
-                <MultiSelect options={components} selected={selected} onChange={setSelected} />
+                <MultiSelect options={options} selected={selected} onChange={setSelected} />
                 <small className="text-destructive">{selectedError}</small>
               </div>
               <Accordion
@@ -127,7 +128,7 @@ export function NewEntityGroupSheet() {
                 <AccordionItem value="default" className="border-0 space-y-2">
                   <AccordionTrigger className="py-2 text-sm">Sample entities</AccordionTrigger>
                   <AccordionContent>
-                    {hasSelectedComponents && <EntityCard entity={sampleEntity(selected)} />}
+                    {hasSelectedComponents && <EntityCard entity={sampleEntity(selected, components)} />}
                   </AccordionContent>
                 </AccordionItem>
               </Accordion>
@@ -162,7 +163,8 @@ export function EditEntityGroupSheet({ entityGroup }: EditEntityGroupProps) {
   const [selected, setSelected] = useState<string[]>(entityGroup.components)
   const [selectedError, setSelectedError] = useState('')
 
-  const components = data?.components.map((c) => ({ label: c, value: c })) ?? []
+  const components = data?.components ?? []
+  const options = components.map((c) => ({ label: c.name, value: c.name })) ?? []
   const hasSelectedComponents = selected && selected.length > 0
   const accordionValue = hasSelectedComponents ? 'default' : ''
 
@@ -228,7 +230,7 @@ export function EditEntityGroupSheet({ entityGroup }: EditEntityGroupProps) {
               </div>
               <div className="space-y-1">
                 <Label>Components</Label>
-                <MultiSelect options={components} selected={selected} onChange={setSelected} />
+                <MultiSelect options={options} selected={selected} onChange={setSelected} />
                 <small className="text-destructive">{selectedError}</small>
               </div>
               <Accordion
@@ -240,7 +242,7 @@ export function EditEntityGroupSheet({ entityGroup }: EditEntityGroupProps) {
                 <AccordionItem value="default" className="border-0 space-y-2">
                   <AccordionTrigger className="py-2 text-sm">Sample entities</AccordionTrigger>
                   <AccordionContent>
-                    {hasSelectedComponents && <EntityCard entity={sampleEntity(selected)} />}
+                    {hasSelectedComponents && <EntityCard entity={sampleEntity(selected, components)} />}
                   </AccordionContent>
                 </AccordionItem>
               </Accordion>

src/components/sidebar.tsx

@@ -13,7 +13,7 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { useCardinal } from '@/lib/cardinal-provider'
 import { lastQueryOptions, worldQueryOptions } from '@/lib/query-options'
-import { MessageOrQuery, WorldResponse } from '@/lib/types'
+import { WorldField, WorldResponse } from '@/lib/types'
 
 export function Sidebar() {
   const { cardinalUrl, isCardinalConnected } = useCardinal()
@@ -64,7 +64,7 @@ interface SideBarItemProps {
     title: string
     type: string
     icon: React.ReactNode
-    items: MessageOrQuery[]
+    items: WorldField[]
   }
 }
 
@@ -100,7 +100,7 @@ function SideBarItem({ item }: SideBarItemProps) {
 
 interface MessageQueryAccordionProps {
   type: string
-  msgOrQry: MessageOrQuery
+  msgOrQry: WorldField
 }
 
 function MessageQueryAccordion({ type, msgOrQry }: MessageQueryAccordionProps) {

src/lib/query-options.tsx

@@ -27,7 +27,7 @@ export const worldQueryOptions = ({
 }: cardinalQueryOptionsProps) => ({
   queryKey: ['world'],
   queryFn: async () => {
-    const res = await fetch(`${cardinalUrl}/debug/world`)
+    const res = await fetch(`${cardinalUrl}/world`)
     return res.json() as Promise<WorldResponse>
   },
   enabled: isCardinalConnected,

src/lib/types.ts

@@ -7,15 +7,15 @@ export interface Entity {
   components: Components
 }
 
-export interface MessageOrQuery {
+export interface WorldField {
   name: string
   fields: {
     [param: string]: string
   }
 }
 
 export interface WorldResponse {
-  components: string[]
-  messages: MessageOrQuery[]
-  queries: MessageOrQuery[]
+  components: WorldField[]
+  messages: WorldField[]
+  queries: WorldField[]
 }

src/routeTree.gen.ts

@@ -1,10 +1,15 @@
 /* prettier-ignore-start */
 
 /* eslint-disable */
+
 // @ts-nocheck
+
 // noinspection JSUnusedGlobalSymbols
+
 // This file is auto-generated by TanStack Router
+
 // Import Routes
+
 import { Route as rootRoute } from './routes/__root'
 import { Route as IndexImport } from './routes/index'