feature: Add Docspane to Code Editor

src/client/components/CoreUI.js

@@ -28,6 +28,7 @@ import { hasRole, uuid } from '../../core/utils'
 import { ControlPriorities } from '../../core/extras/ControlPriorities'
 import { AppsPane } from './AppsPane'
 import { SettingsPane } from './SettingsPane'
+import { Docspane } from './DocsPane'
 
 export function CoreUI({ world }) {
   const [ref, width, height] = useElemSize()
@@ -55,12 +56,14 @@ function Content({ world, width, height }) {
   const [disconnected, setDisconnected] = useState(false)
   const [settings, setSettings] = useState(false)
   const [apps, setApps] = useState(false)
+  const [docs, setDocs] = useState(false)
   const [kicked, setKicked] = useState(null)
   useEffect(() => {
     world.on('ready', setReady)
     world.on('player', setPlayer)
     world.on('inspect', setInspect)
     world.on('code', setCode)
+    world.on('docs', setDocs)
     world.on('avatar', setAvatar)
     world.on('kick', setKicked)
     world.on('disconnect', setDisconnected)
@@ -69,6 +72,7 @@ function Content({ world, width, height }) {
       world.off('player', setPlayer)
       world.off('inspect', setInspect)
       world.off('code', setCode)
+      world.off('docs', setDocs)
       world.off('avatar', setAvatar)
       world.off('kick', setKicked)
       world.off('disconnect', setDisconnected)
@@ -99,6 +103,7 @@ function Content({ world, width, height }) {
     >
       {inspect && <InspectPane key={`inspect-${inspect.data.id}`} world={world} entity={inspect} />}
       {inspect && code && <CodePane key={`code-${inspect.data.id}`} world={world} entity={inspect} />}
+      {inspect && code && docs && <Docspane key={`docs-${inspect.data.id}`} world={world} />}
       {avatar && <AvatarPane key={avatar.hash} world={world} info={avatar} />}
       {disconnected && <Disconnected />}
       <Reticle world={world} />

src/client/components/DocsPane.js

@@ -0,0 +1,334 @@
+import { css } from '@firebolt-dev/css'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import {
+  BookIcon,
+  SearchIcon,
+  LoaderIcon,
+  ArrowRightIcon,
+  XIcon,
+  RotateCcwIcon,
+} from 'lucide-react'
+
+import documentationData from '../public/data/docs.json'
+import { usePane } from './usePane'
+
+export function Docspane({ world, close }) {
+  const paneRef = useRef()
+  const headRef = useRef()
+  usePane('docs', paneRef, headRef)
+  const [query, setQuery] = useState('')
+  const [refresh, setRefresh] = useState(0)
+
+  return (
+    <div
+      ref={paneRef}
+      className='docspane'
+      css={css`
+        position: absolute;
+        top: 20px;
+        left: 20px;
+        width: 540px;
+        height: 600px;
+        background: rgba(22, 22, 28, 1);
+        border: 1px solid rgba(255, 255, 255, 0.03);
+        border-radius: 10px;
+        box-shadow: rgba(0, 0, 0, 0.5) 0px 10px 30px;
+        pointer-events: auto;
+        display: flex;
+        flex-direction: column;
+        .docspane-head {
+          height: 50px;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+          display: flex;
+          align-items: center;
+          padding: 0 13px 0 20px;
+          &-title {
+            padding-left: 7px;
+            font-weight: 500;
+            flex: 1;
+          }
+          &-search {
+            width: 150px;
+            display: flex;
+            align-items: center;
+            svg {
+              margin-right: 5px;
+            }
+            input {
+              flex: 1;
+              font-size: 14px;
+              background: transparent;
+              border: none;
+              color: white;
+              outline: none;
+              &::placeholder {
+                color: rgba(255, 255, 255, 0.5);
+              }
+            }
+          }
+          &-btn {
+            width: 30px;
+            height: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: rgba(255, 255, 255, 0.5);
+            &:hover {
+              cursor: pointer;
+              color: white;
+            }
+          }
+        }
+      `}
+    >
+      <div className='docspane-head' ref={headRef}>
+        <BookIcon size={16} />
+        <div className='docspane-head-title'>Documentation</div>
+        <div className='docspane-head-search'>
+          <SearchIcon size={16} />
+          <input type='text' placeholder='Search' value={query} onChange={e => setQuery(e.target.value)} />
+        </div>
+        <div className='docspane-head-btn' onClick={() => setRefresh(n => n + 1)}>
+          <RotateCcwIcon size={16} />
+        </div>
+        <div className='docspane-head-btn' onClick={() => world.emit('docs', null)}>
+          <XIcon size={20} />
+        </div>
+      </div>
+      <DocspaneContent world={world} query={query} refresh={refresh} />
+    </div>
+  )
+}
+
+function DocspaneContent({ query, refresh }) {
+  const [expandedSections, setExpandedSections] = useState({})
+  const [data, setData] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(null)
+
+  useEffect(() => {
+    const loadData = async () => {
+      try {
+        setLoading(true)
+        setData(documentationData)
+      } catch (err) {
+        setError(err)
+      } finally {
+        setLoading(false)
+      }
+    }
+    loadData()
+  }, [refresh])
+
+  const filteredData = useMemo(() => {
+    if (!data || !query) return data
+
+    const lowerCaseQuery = query.toLowerCase()
+    return Object.keys(data).reduce((acc, key) => {
+      const item = data[key]
+      const matchesTitle = item.title.toLowerCase().includes(lowerCaseQuery)
+      const matchesDescription = item.description.toLowerCase().includes(lowerCaseQuery)
+      const matchesProperties = Object.values(item.properties || {}).some(prop =>
+        prop.description.toLowerCase().includes(lowerCaseQuery)
+      )
+      const matchesMethods = Object.values(item.methods || {}).some(method =>
+        method.description.toLowerCase().includes(lowerCaseQuery)
+      )
+
+      if (matchesTitle || matchesDescription || matchesProperties || matchesMethods) {
+        acc[key] = item
+      }
+      return acc
+    }, {})
+  }, [data, query])
+
+  const toggleSection = (key) => {
+    setExpandedSections(prevState => {
+      // Check if the section is already expanded
+      if (prevState[key]) {
+        return {
+          ...prevState,
+          [key]: false
+        }
+      }
+
+      // Close all other sections and expand the clicked one
+      const newExpanded = Object.keys(prevState).reduce((acc, k) => {
+        acc[k] = false
+        return acc
+      }, {})
+
+      newExpanded[key] = true
+
+      return newExpanded
+    })
+  }
+
+  if (loading) {
+    return (
+      <div className='docspane-loader' css={css`
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 20px;
+        color: rgba(255, 255, 255, 0.5);
+      `}>
+        <LoaderIcon size={16} />
+        <span style={{ marginLeft: '10px' }}>Loading...</span>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className='docspane-error' css={css`
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 20px;
+        color: rgba(255, 0, 0, 0.5);
+      `}>
+        <XIcon size={16} />
+        <span style={{ marginLeft: '10px' }}>Error loading documentation</span>
+      </div>
+    )
+  }
+
+  return (
+    <div
+      className='docspane-content'
+      css={css`
+        flex: 1;
+        padding: 20px 20px 0;
+        overflow-y: auto;
+        maxHeight: 450px;
+         scrollbar-width: none;  /* For Firefox */
+        &::-webkit-scrollbar {
+          display: none;  /* For Chrome, Safari and Opera */
+        }
+        .docspane-section {
+          margin-bottom: 10px;
+          max-height: 500px;
+          border: 1px solid rgba(255, 255, 255, 0.05);
+          border-radius: 10px;
+          background: rgba(35, 35, 45, 1);
+          overflow-y: auto;
+          scrollbar-width: none;  /* For Firefox */
+          &::-webkit-scrollbar {
+            display: none;  /* For Chrome, Safari and Opera */
+          }
+
+          &-header {
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+            padding: 10px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+
+            &:hover {
+              background: rgba(45, 45, 55, 1);
+            }
+          }
+
+          &-title {
+            font-size: 16px;
+            font-weight: 500;
+            margin-left: 10px;
+          }
+
+          &-description {
+            padding: 10px;
+            color: rgba(255, 255, 255, 0.7);
+            font-size: 14px;
+          }
+
+          &-content {
+            padding: 0 10px;
+            background: rgba(45, 45, 55, 1);
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.2s ease-out, padding 0.2s ease-out;
+
+            &.expanded {
+              max-height: 500px;
+              padding: 10px;
+              overflow-y: auto;
+              scrollbar-width: none;  /* For Firefox */
+              &::-webkit-scrollbar {
+              display: none;  /* For Chrome, Safari and Opera */
+              }
+
+            }
+          }
+        }
+
+        .docspane-item {
+          margin-bottom: 10px;
+          padding: 10px;
+          border-radius: 6px;
+          background: rgba(35, 35, 45, 1);
+
+          &-name {
+            font-weight: 500;
+            margin-bottom: 4px;
+          }
+
+          &-type {
+            font-size: 12px;
+            color: rgba(255, 255, 255, 0.5);
+            margin-bottom: 4px;
+          }
+
+          &-description {
+            font-size: 14px;
+            color: rgba(255, 255, 255, 0.7);
+          }
+        }
+      `}
+    >
+      {!filteredData || Object.keys(filteredData).length === 0 ? (
+        <div className='docspane-empty' css={css`
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          padding: 20px;
+          color: rgba(255, 255, 255, 0.5);
+        `}>
+          <span>No results found</span>
+        </div>
+      ) : (
+        Object.entries(filteredData).map(([key, item]) => (
+          <div key={key} className='docspane-section'>
+            <div className='docspane-section-header' onClick={() => toggleSection(key)}>
+              <ArrowRightIcon
+                size={16}
+                css={css`
+                  transform: ${expandedSections[key] ? 'rotate(90deg)' : 'rotate(0deg)'};
+                  transition: transform 0.2s;
+                `}
+              />
+              <div className='docspane-section-title'>{item.title}</div>
+            </div>
+            <div className='docspane-section-description'>{item.description}</div>
+            <div className={`docspane-section-content ${expandedSections[key] ? 'expanded' : ''}`}>
+              {item.properties && Object.entries(item.properties).map(([propKey, prop]) => (
+                <div key={propKey} className='docspane-item'>
+                  <div className='docspane-item-name'>{propKey}</div>
+                  <div className='docspane-item-type'>{prop.type}</div>
+                  <div className='docspane-item-description'>{prop.description}</div>
+                </div>
+              ))}
+              {item.methods && Object.entries(item.methods).map(([methodKey, method]) => (
+                <div key={methodKey} className='docspane-item'>
+                  <div className='docspane-item-name'>{methodKey}</div>
+                  <div className='docspane-item-description'>{method.description}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        ))
+      )}
+    </div>
+  )
+}