@spacemade/ui 0.0.1

package/src/components/projects/ProjectPickerNav.tsx

@@ -0,0 +1,440 @@
+'use client'
+
+import { useDisclosure } from '@chakra-ui/react'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { createPortal } from 'react-dom'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { toast } from 'react-toastify'
+import { OptimizedImage } from '@components/common/Image/OptimizedImage'
+import ProjectQuickCreateModal from '@components/projects/ProjectQuickCreateModal'
+import { getDefaultColoredImage } from '@helpers/images'
+import { createProjectSlug } from '@helpers/slugUtils'
+import { canAccessAppWithOrgContext, isSurfaceAdmin } from '@helpers/permissions'
+import { useAppDispatch } from '@store/hooks'
+import {
+  useCreateProjectMutation,
+  useGetActiveProjectQuery,
+  useGetProjectsQuery,
+  useSetActiveProjectMutation,
+} from '@store/slice/api/projectApiSlice'
+import { vectorStoreApiSlice } from '@store/slice/api/vectorStoreApiSlice'
+import { useUserAuthContext } from '@context/UserAuthContext'
+
+type Props = {
+  appPath: string
+  isCollapsed: boolean
+}
+
+const TRIGGER_ICON_SIZE = 32
+const MENU_ICON_SIZE = 24
+
+const getProjectLogo = (project: any) =>
+  project?.featuredMedia?.media?.sourceUrl ||
+  project?.featuredMedia?.media?.source_url ||
+  getDefaultColoredImage()
+
+export default function ProjectPickerNav({ appPath, isCollapsed }: Props) {
+  const dispatch = useAppDispatch()
+  const router = useRouter()
+  const { user, activeOrgId, isConnected } = useUserAuthContext()
+  const permissionRows = user?.permissions
+  const orgPermissionRows = useMemo(() => {
+    if (!Array.isArray(permissionRows)) return []
+    if (!activeOrgId) return permissionRows
+    return permissionRows.filter((row) => row.orgId === activeOrgId)
+  }, [permissionRows, activeOrgId])
+  const orgMemberships = Array.isArray(user?.orgMemberships) ? user.orgMemberships : []
+  const activeMembership =
+    orgMemberships.find((m) => m.orgId === activeOrgId) ||
+    orgMemberships.find((m) => m.org?.orgType === 'personal') ||
+    orgMemberships[0]
+  const activeOrg = activeMembership?.org
+  const canReadProjects = useMemo(() => {
+    if (!isConnected || !user?.id) return false
+    return canAccessAppWithOrgContext({
+      rows: orgPermissionRows,
+      appKey: 'projects',
+      action: 'read',
+      org: activeOrg,
+      membership: activeMembership,
+      userId: user?.id,
+      username: user?.name,
+    })
+  }, [activeMembership, activeOrg, isConnected, orgPermissionRows, user?.id, user?.name])
+
+  const canCreateProjects = useMemo(() => {
+    if (!isConnected || !user?.id) return false
+    if (isSurfaceAdmin(orgPermissionRows, 'projects')) return true
+    return canAccessAppWithOrgContext({
+      rows: orgPermissionRows,
+      appKey: 'projects',
+      action: 'create',
+      org: activeOrg,
+      membership: activeMembership,
+      userId: user?.id,
+      username: user?.name,
+    })
+  }, [activeMembership, activeOrg, isConnected, orgPermissionRows, user?.id, user?.name])
+
+  const shouldSkipProjects = !isConnected || !user?.id || !canReadProjects
+  const { data, isLoading } = useGetProjectsQuery(
+    { limit: 200, page: 1 },
+    { skip: shouldSkipProjects }
+  )
+  const { data: activeProjectData, isLoading: isLoadingActiveProject } = useGetActiveProjectQuery(
+    undefined,
+    { skip: !isConnected || !user?.id }
+  )
+  const [setActiveProject, { isLoading: isSettingActiveProject }] = useSetActiveProjectMutation()
+  const [createProject] = useCreateProjectMutation()
+  const projects = data?.results ?? []
+
+  const [isProjectPickerOpen, setIsProjectPickerOpen] = useState(false)
+  const triggerRef = useRef<HTMLButtonElement | null>(null)
+  const menuRef = useRef<HTMLDivElement | null>(null)
+  const [menuPosition, setMenuPosition] = useState({
+    left: 0,
+    top: 0,
+    width: 220,
+  })
+  const { isOpen: isCreateModalOpen, onOpen: onOpenCreateModal, onClose: onCloseCreateModal } =
+    useDisclosure()
+  const didDefaultProjectRef = useRef(false)
+
+  const selectedProjectId = useMemo(() => {
+    if (!canReadProjects) return ''
+    const raw = activeProjectData?.projectId
+    return typeof raw === 'string' ? raw.trim() : ''
+  }, [activeProjectData?.projectId, canReadProjects])
+
+  const selectedProject = useMemo(
+    () => projects.find((project) => project.id === selectedProjectId),
+    [projects, selectedProjectId]
+  )
+
+  const selectedProjectName = selectedProject?.name || (selectedProjectId ? 'Selected project' : 'All projects')
+
+  const isPickerBusy = isLoading || isLoadingActiveProject || isSettingActiveProject
+
+  useEffect(() => {
+    if (canReadProjects || !isConnected || !user?.id) {
+      didDefaultProjectRef.current = false
+      return
+    }
+    if (didDefaultProjectRef.current) return
+    didDefaultProjectRef.current = true
+    setActiveProject({ projectId: null }).unwrap().catch(() => {})
+  }, [canReadProjects, isConnected, setActiveProject, user?.id])
+
+  const updateMenuPosition = useCallback(() => {
+    const trigger = triggerRef.current
+    if (!trigger) return
+    const rect = trigger.getBoundingClientRect()
+    setMenuPosition({
+      left: rect.left,
+      top: rect.bottom + 4,
+      width: rect.width,
+    })
+  }, [])
+
+  const handleProjectChange = useCallback(
+    async (nextProjectId: string, options?: { replace?: boolean }) => {
+      if (!canReadProjects) return
+      await setActiveProject({
+        projectId: nextProjectId.trim() ? nextProjectId : null,
+      }).unwrap()
+
+      dispatch(vectorStoreApiSlice.util.resetApiState())
+
+      const nextQuery: Record<string, string | string[]> = {}
+      Object.entries(router.query).forEach(([key, raw]) => {
+        if (key === 'project_id' || raw === undefined) return
+        nextQuery[key] = raw as string | string[]
+      })
+
+      if (options?.replace) {
+        await router.replace({
+          pathname: appPath,
+          query: nextQuery,
+        })
+        return
+      }
+
+      await router.push({
+        pathname: appPath,
+        query: nextQuery,
+      })
+    },
+    [appPath, dispatch, router, setActiveProject]
+  )
+
+  useEffect(() => {
+    if (!isProjectPickerOpen) return
+    const onClickAway = (event: MouseEvent) => {
+      if (triggerRef.current?.contains(event.target as Node)) return
+      if (menuRef.current?.contains(event.target as Node)) return
+      setIsProjectPickerOpen(false)
+    }
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') setIsProjectPickerOpen(false)
+    }
+    const onViewportChange = () => updateMenuPosition()
+
+    window.addEventListener('click', onClickAway)
+    window.addEventListener('keydown', onKey)
+    window.addEventListener('resize', onViewportChange)
+    window.addEventListener('scroll', onViewportChange, true)
+    updateMenuPosition()
+
+    return () => {
+      window.removeEventListener('click', onClickAway)
+      window.removeEventListener('keydown', onKey)
+      window.removeEventListener('resize', onViewportChange)
+      window.removeEventListener('scroll', onViewportChange, true)
+    }
+  }, [isProjectPickerOpen, updateMenuPosition])
+
+  const handleCreateProject = useCallback(
+    async ({
+      name,
+      description,
+      featuredMediaId,
+    }: {
+      name: string
+      description?: string | null
+      featuredMediaId?: string | null
+    }) => {
+      try {
+        const created = await createProject({
+          payload: {
+            name,
+            description: description ?? null,
+            ...(featuredMediaId ? { featuredMediaId } : {}),
+          },
+        }).unwrap()
+
+        toast.success('Project created successfully')
+        await handleProjectChange(created.id)
+      } catch (error: any) {
+        toast.error(error?.data?.message || 'Failed to create project')
+        throw error
+      }
+    },
+    [createProject, handleProjectChange]
+  )
+
+  if (isCollapsed) {
+    return (
+      <div className="mt-5 d-flex justify-content-center">
+        <Link
+          href={appPath}
+          className="sidebar-link"
+          title={selectedProjectName}
+          aria-label={selectedProjectName}
+        >
+          {selectedProject ? (
+            <OptimizedImage
+              src={getProjectLogo(selectedProject)}
+              alt={selectedProject.name || 'Project'}
+              width={TRIGGER_ICON_SIZE}
+              height={TRIGGER_ICON_SIZE}
+              className="object-fit-cover rounded-2"
+            />
+          ) : (
+            <i className="bi bi-kanban" />
+          )}
+        </Link>
+      </div>
+    )
+  }
+
+  const canRenderPortal = isProjectPickerOpen && typeof window !== 'undefined'
+
+  return (
+    <>
+      <button
+        ref={triggerRef}
+        type="button"
+        className="w-100 d-flex align-items-center gap-2 px-1 py-2 bg-white border rounded mt-2"
+        onClick={() => {
+          updateMenuPosition()
+          setIsProjectPickerOpen((value) => !value)
+        }}
+        disabled={isPickerBusy}
+        aria-expanded={isProjectPickerOpen}
+        aria-haspopup="listbox"
+      >
+        {selectedProject ? (
+          <OptimizedImage
+            src={getProjectLogo(selectedProject)}
+            alt={selectedProject.name || 'Project'}
+            width={TRIGGER_ICON_SIZE}
+            height={TRIGGER_ICON_SIZE}
+            className="object-fit-cover rounded-2"
+          />
+        ) : (
+          <div
+            className="d-inline-flex align-items-center justify-content-center rounded-2 bg-light"
+            style={{ width: TRIGGER_ICON_SIZE, height: TRIGGER_ICON_SIZE }}
+          >
+            <i className="bi bi-grid" />
+          </div>
+        )}
+        <span className="flex-grow-1 text-start text-truncate">{selectedProjectName}</span>
+        <i className={`bi bi-chevron-${isProjectPickerOpen ? 'up' : 'down'}`} />
+      </button>
+
+      {canRenderPortal &&
+        createPortal(
+          <div
+            ref={menuRef}
+            role="listbox"
+            className="shadow-sm rounded border bg-white"
+            style={{
+              position: 'fixed',
+              zIndex: 3000,
+              left: menuPosition.left,
+              top: menuPosition.top,
+              width: menuPosition.width,
+              maxHeight: 320,
+              overflowY: 'auto',
+              padding: '4px',
+            }}
+          >
+            <button
+              type="button"
+              role="option"
+              className={`w-100 text-start d-flex align-items-center gap-2 px-1 py-2 bg-transparent border-0 rounded project-picker-option ${
+                !selectedProjectId ? 'active' : ''
+              }`}
+              onClick={() => {
+                setIsProjectPickerOpen(false)
+                void handleProjectChange('')
+              }}
+              aria-selected={!selectedProjectId}
+            >
+              <div
+                className="d-inline-flex align-items-center justify-content-center rounded-2 bg-light"
+                style={{ width: MENU_ICON_SIZE, height: MENU_ICON_SIZE }}
+              >
+                <i className="bi bi-grid" />
+              </div>
+              <span className="flex-grow-1 text-truncate">All projects</span>
+              {!selectedProjectId && <i className="bi bi-check2" />}
+            </button>
+
+            {canReadProjects && projects.map((project) => {
+              const isActive = project.id === selectedProjectId
+              const projectName = project.name || 'Project'
+              const projectSlug = createProjectSlug(projectName)
+              const projectDetailHref = `/projects/${project.id}/${projectSlug}`
+              return (
+                <div
+                  key={project.id}
+                  role="option"
+                  tabIndex={0}
+                  className={`w-100 text-start d-flex align-items-center gap-2 px-1 py-2 bg-transparent border-0 rounded project-picker-option ${
+                    isActive ? 'active' : ''
+                  }`}
+                  onClick={() => {
+                    setIsProjectPickerOpen(false)
+                    void handleProjectChange(project.id)
+                  }}
+                  onKeyDown={(event) => {
+                    if (event.key === 'Enter' || event.key === ' ') {
+                      event.preventDefault()
+                      setIsProjectPickerOpen(false)
+                      void handleProjectChange(project.id)
+                    }
+                  }}
+                  aria-selected={isActive}
+                >
+                  <OptimizedImage
+                    src={getProjectLogo(project)}
+                    alt={projectName}
+                    width={MENU_ICON_SIZE}
+                    height={MENU_ICON_SIZE}
+                    className="object-fit-cover rounded-2"
+                  />
+                  <span className="flex-grow-1 text-truncate">{projectName}</span>
+                  <span className="d-inline-flex align-items-center gap-2">
+                    {isActive && <i className="bi bi-check2" />}
+                    <button
+                      type="button"
+                      className="project-picker-detail-link d-inline-flex align-items-center justify-content-center border-0 bg-transparent p-0"
+                      onClick={(event) => {
+                        event.preventDefault()
+                        event.stopPropagation()
+                        setIsProjectPickerOpen(false)
+                        void router.push(projectDetailHref)
+                      }}
+                      aria-label={`Open ${projectName} details`}
+                      title="Open project details"
+                    >
+                      <i className="bi bi-kanban-fill" />
+                    </button>
+                  </span>
+                </div>
+              )
+            })}
+
+            {canCreateProjects ? (
+              <div className="border-top mt-1 pt-1">
+                <button
+                  type="button"
+                  className="w-100 text-start d-flex align-items-center gap-2 px-1 py-2 bg-transparent border-0 rounded project-picker-option"
+                  onClick={() => {
+                    setIsProjectPickerOpen(false)
+                    onOpenCreateModal()
+                  }}
+                >
+                  <div
+                    className="d-flex align-items-center justify-content-center rounded-circle bg-light"
+                    style={{ width: 24, height: 24 }}
+                  >
+                    <i className="bi bi-plus" style={{ fontSize: '1rem' }} />
+                  </div>
+                  <span className="flex-grow-1 fw-semibold">Add Project</span>
+                </button>
+              </div>
+            ) : null}
+          </div>,
+          document.body
+        )}
+
+      <ProjectQuickCreateModal
+        isOpen={isCreateModalOpen}
+        onClose={onCloseCreateModal}
+        onCreate={handleCreateProject}
+      />
+
+      <style jsx global>{`
+        .project-picker-option {
+          transition: background-color 0.12s ease;
+        }
+        .project-picker-option:hover,
+        .project-picker-option:focus-visible {
+          background: var(--bs-light, #f8f9fa) !important;
+          outline: none;
+        }
+        .project-picker-option.active {
+          background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.12) !important;
+          color: var(--bs-primary, #0d6efd);
+        }
+        .project-picker-detail-link {
+          color: #adb5bd;
+          opacity: 0.65;
+          line-height: 1;
+          transition: color 0.12s ease, opacity 0.12s ease;
+        }
+        .project-picker-detail-link:hover,
+        .project-picker-detail-link:focus-visible {
+          color: #6c757d;
+          opacity: 1;
+          outline: none;
+        }
+      `}</style>
+    </>
+  )
+}

package/src/components/projects/ProjectQuickCreateModal.tsx

@@ -0,0 +1,159 @@
+'use client'
+
+import {
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+} from '@chakra-ui/react'
+import { useRef, useState } from 'react'
+import { FieldValues, SubmitHandler, useForm } from 'react-hook-form'
+
+import Button from '@components/common/button/Button'
+import Input from '@components/common/forms/Input'
+import HeaderProjectAvatar from '@components/projects/block/HeaderProjectImagePicker'
+
+interface FormValues extends FieldValues {
+  name: string
+  description: string
+}
+
+export default function ProjectQuickCreateModal({
+  isOpen,
+  onClose,
+  onCreate,
+}: {
+  isOpen: boolean
+  onClose: () => void
+  onCreate: (data: {
+    name: string
+    description?: string | null
+    featuredMediaId?: string | null
+  }) => Promise<void> | void
+}) {
+  const cancelRef = useRef<HTMLButtonElement>(null!)
+  const [featuredMediaId, setFeaturedMediaId] = useState<string | null>(null)
+  const {
+    register,
+    handleSubmit,
+    getValues,
+    reset,
+    formState: { errors, isSubmitting },
+  } = useForm<FormValues>({
+    defaultValues: {
+      name: '',
+      description: '',
+    },
+  })
+
+  const handleClose = () => {
+    reset()
+    setFeaturedMediaId(null)
+    onClose()
+  }
+
+  const onSubmit: SubmitHandler<FormValues> = async (data) => {
+    const name = data.name.trim()
+    const description = data.description.trim()
+
+    await onCreate({
+      name,
+      description: description.length ? description : null,
+      featuredMediaId,
+    })
+
+    reset()
+    setFeaturedMediaId(null)
+    onClose()
+  }
+
+  return (
+    <AlertDialog
+      isOpen={isOpen}
+      leastDestructiveRef={cancelRef}
+      onClose={handleClose}
+      isCentered
+    >
+      <AlertDialogOverlay className="dialog">
+        <AlertDialogContent>
+          <div className="w-xs-300p w-md-450p">
+            <AlertDialogHeader>Add Project</AlertDialogHeader>
+
+            <AlertDialogBody>
+              <form onSubmit={handleSubmit(onSubmit)}>
+                <div className="mb-3 d-flex align-items-center gap-2">
+                  <HeaderProjectAvatar key={`project-logo-${isOpen}`} onSelectMedia={setFeaturedMediaId} />
+                  <div className="small text-muted">Logo</div>
+                </div>
+
+                <div className="mb-3">
+                  <Input
+                    label="Project Name"
+                    placeholder="Default"
+                    register={register('name', {
+                      required: 'Project name is required',
+                      minLength: {
+                        value: 2,
+                        message: 'Project name must be at least 2 characters',
+                      },
+                      maxLength: {
+                        value: 120,
+                        message: 'Project name must be 120 characters or less',
+                      },
+                    })}
+                    errors={errors}
+                    getValues={getValues}
+                  />
+                </div>
+
+                <div>
+                  <label htmlFor="project-description" className="form-label small fw-semibold mb-1">
+                    Description
+                  </label>
+                  <textarea
+                    id="project-description"
+                    className="form-control"
+                    rows={3}
+                    placeholder="Optional project description"
+                    {...register('description', {
+                      maxLength: {
+                        value: 1000,
+                        message: 'Description must be 1000 characters or less',
+                      },
+                    })}
+                  />
+                  {errors.description?.message && (
+                    <div className="invalid-feedback d-block">{`${errors.description.message}`}</div>
+                  )}
+                </div>
+              </form>
+            </AlertDialogBody>
+
+            <AlertDialogFooter className="d-flex justify-content-end gap-3">
+              <Button
+                className="me-2"
+                onClick={handleClose}
+                buttonRef={cancelRef}
+                disabled={isSubmitting}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="button"
+                color="primary"
+                className="text-white"
+                isLoading={isSubmitting}
+                disabled={isSubmitting}
+                onClick={() => handleSubmit(onSubmit)()}
+              >
+                Create Project
+              </Button>
+            </AlertDialogFooter>
+          </div>
+        </AlertDialogContent>
+      </AlertDialogOverlay>
+    </AlertDialog>
+  )
+}