@spacemade/ui 0.0.1

package/src/components/nav/TopNav.tsx

@@ -0,0 +1,137 @@
+import UserButton from '@components/common/button/UserButton'
+import { SiteLogoIcon } from '@helpers/images'
+import { useRouter } from '@lib/next-router'
+import Link from 'next/link'
+import { useUserAuthContext } from '@context/UserAuthContext'
+import { useEffect, useMemo, useState } from 'react'
+
+const LOGGED_OUT_TOP_NAV_ITEMS = [
+  { label: 'Marketplace', href: '/marketplace' },
+  { label: 'Providers', href: '/providers' },
+  { label: 'Storage', href: '/storage' },
+  { label: 'Docs', href: '/docs' },
+  { label: 'Blog', href: '/blog' },
+]
+
+const TopNav = ({ hideLinks = false }: { hideLinks?: boolean }) => {
+  const { user } = useUserAuthContext()
+  const isAuthenticated = !!user?.id
+
+  const router = useRouter()
+  const pathname = router.pathname
+  const isHomeRoute = pathname === '/'
+
+  // ✅ Hooks must run every render (no early returns above this point)
+  const [isMobile, setIsMobile] = useState(false)
+  const [isPinnedOnScrollUp, setIsPinnedOnScrollUp] = useState(false)
+
+  useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 768) // Bootstrap "md"
+    checkMobile()
+    window.addEventListener('resize', checkMobile)
+    return () => window.removeEventListener('resize', checkMobile)
+  }, [])
+
+  useEffect(() => {
+    let lastScrollY = window.scrollY
+
+    const onScroll = () => {
+      const currentScrollY = window.scrollY
+      const isNearTop = currentScrollY <= 8
+
+      if (isNearTop) {
+        setIsPinnedOnScrollUp(false)
+        lastScrollY = currentScrollY
+        return
+      }
+
+      if (currentScrollY < lastScrollY - 2) {
+        setIsPinnedOnScrollUp(true)
+      } else if (currentScrollY > lastScrollY + 2) {
+        setIsPinnedOnScrollUp(false)
+      }
+
+      lastScrollY = currentScrollY
+    }
+
+    window.addEventListener('scroll', onScroll, { passive: true })
+    return () => window.removeEventListener('scroll', onScroll)
+  }, [])
+
+  const isAdminRoute = useMemo(() => pathname.startsWith('/admin'), [pathname])
+
+  // ✅ Now it's safe to return early
+  if (isAdminRoute) return null
+
+  // Show logo if not logged in OR not mobile
+  const showLogo = !isAuthenticated || !isMobile
+
+  const hideUserButton =
+    pathname.startsWith('/story')
+
+  const handleLogoClick = () => {
+    router.push('/')
+  }
+
+  const isPathActive = (href: string) => pathname === href || pathname.startsWith(`${href}/`)
+
+  if (isAuthenticated) {
+    if (hideUserButton) return null
+
+    return (
+      <div className={`top-nav-user-float ${isHomeRoute ? 'top-nav-user-float--hero' : ''}`}>
+        <UserButton isbBgWhite={!isHomeRoute} />
+      </div>
+    )
+  }
+
+  return (
+    <div
+      id="topNav"
+      className={`top-nav-shell w-100 ${isPinnedOnScrollUp ? 'top-nav-shell--pinned' : ''} ${isHomeRoute ? 'top-nav-shell--hero' : ''}`}
+    >
+      <div className='container top-nav-inner'>
+        <div className="top-nav-left">
+          {showLogo ? (
+            <button
+              className="no-min-size"
+              aria-label="Osirus AI home"
+              onClick={handleLogoClick}
+              style={{ border: 'none', background: 'transparent', padding: 0, cursor: 'pointer' }}
+            >
+              <img
+                alt="Osirus Logo"
+                src={SiteLogoIcon}
+                className={`w-xs-40p h-xs-40p ${isHomeRoute ? 'invert-filter top-nav-logo-on-hero' : ''}`}
+              />
+            </button>
+          ) : (
+            <div style={{ width: '40px', height: '40px' }} />
+          )}
+        </div>
+
+        {!hideLinks && (
+          <nav className='top-nav-center d-none d-lg-flex' aria-label='Main'>
+            <div className='top-nav-links'>
+              {LOGGED_OUT_TOP_NAV_ITEMS.map((item) => (
+                <Link
+                  key={item.href}
+                  href={item.href}
+                  className={`top-nav-link ${isPathActive(item.href) ? 'active' : ''}`}
+                >
+                  {item.label}
+                </Link>
+              ))}
+            </div>
+          </nav>
+        )}
+
+        <div className="top-nav-right">
+          {!hideUserButton && <UserButton isbBgWhite={!isHomeRoute} />}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default TopNav

package/src/components/openapi/DeleteTokenModal.tsx

@@ -0,0 +1,72 @@
+import {
+  IconButton,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Portal,
+  useDisclosure,
+} from '@chakra-ui/react'
+import { DeleteDialog } from '@components/common/dialog/DeleteDialog'
+
+export const TokenItemOptionButton = ({
+  token,
+  isParentHovered = false,
+  onDelete,
+}: {
+  token: { id: string; name: string }
+  isParentHovered?: boolean
+  onDelete: (id: string) => void
+}) => {
+  const {
+    isOpen: isDeleteOpen,
+    onOpen: onOpenDelete,
+    onClose: onCloseDelete,
+  } = useDisclosure()
+
+  return (
+    <>
+      <Menu placement="right-start">
+        {({ isOpen }) => (
+          <>
+            <MenuButton
+              as={IconButton}
+              aria-label="Token options"
+              className={`${isOpen ? 'bg-light-gray' : ''} btn btn-outline-light-gray d-flex align-items-center justify-content-center no-min-size w-xs-30p h-xs-30p rounded-pill border-0 text-dark me-1`}
+              style={{
+                opacity: isParentHovered || isOpen ? 1 : 0,
+                transition: 'opacity 0.2s ease-in-out',
+                pointerEvents: isOpen || isParentHovered ? 'auto' : 'none',
+              }}
+            >
+              <span className={'bi bi-three-dots-vertical fs-5'}></span>
+            </MenuButton>
+
+            <Portal>
+              <MenuList className="bg-white p-1 shadow rounded-md menu-list-container">
+                <MenuItem
+                  className="border-0 bg-white bg-hover-background rounded-md px-3 w-xs-200p h-xs-40p"
+                  icon={<span className="bi bi-trash"></span>}
+                  onClick={onOpenDelete}
+                >
+                  Delete
+                </MenuItem>
+              </MenuList>
+            </Portal>
+          </>
+        )}
+      </Menu>
+
+      <DeleteDialog
+        isOpen={isDeleteOpen}
+        onClose={onCloseDelete}
+        titleOverride={`Delete "${token.name}" token?`}
+        entityDescription="token"
+        onDelete={() => {
+          onDelete(token.id)
+          onCloseDelete()
+        }}
+      />
+    </>
+  )
+}

package/src/components/openapi/actions/ApiTokenActionsMenu.tsx

@@ -0,0 +1,141 @@
+'use client'
+
+import { useState, useRef, useEffect } from 'react'
+import { useUpdateApiTokenMutation, useDeleteApiTokenMutation } from '@store/slice/api/apiTokenSlice'
+import ApiTokenEditModal from './ApiTokenEditModal'
+import { DeleteDialog } from '@components/common/dialog/DeleteDialog'
+import type { ApiToken } from '@store/model'
+
+interface ApiTokenActionsProps {
+  token: ApiToken
+  onEdit: () => void
+  onDelete: () => void
+}
+
+const ApiTokenActionsMenu = ({ token, onEdit, onDelete }: ApiTokenActionsProps) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const dropdownRef = useRef<HTMLDivElement>(null)
+
+  const handleEdit = () => {
+    setIsOpen(false)
+    onEdit()
+  }
+  const handleDelete = () => {
+    setIsOpen(false)
+    onDelete()
+  }
+  return (
+    <div className="dropdown" ref={dropdownRef}>
+      <button 
+        className="btn btn-sm" 
+        type="button" 
+        onClick={(e) => {
+          e.stopPropagation()
+          setIsOpen(!isOpen)
+        }}
+        aria-expanded={isOpen}
+      >
+        <i className="bi bi-three-dots-vertical"></i>
+      </button>
+      <ul 
+        className={`dropdown-menu dropdown-menu-end ${isOpen ? 'show' : ''}`}
+        style={{
+          position: 'absolute',
+          right: 0,
+          top: '100%',
+          zIndex: 1000
+        }}
+      >
+        {!token.revokedAt ? (
+          <>
+            <li>
+              <button 
+                className="dropdown-item" 
+                onClick={handleEdit}
+              >
+                <i className="bi bi-pencil me-2"></i>Edit
+              </button>
+            </li>
+            <li><hr className="dropdown-divider" /></li>
+            <li>
+              <button 
+                className="dropdown-item text-danger" 
+                onClick={handleDelete}
+              >
+                <i className="bi bi-trash me-2"></i>Delete
+              </button>
+            </li>
+          </>
+        ) : (
+          <li>
+            <span className="dropdown-item text-muted disabled">
+              <i className="bi bi-info-circle me-2"></i>Token Revoked
+            </span>
+          </li>
+        )}
+      </ul>
+    </div>
+  )
+}
+
+interface ApiTokenActionsContainerProps {
+  token: ApiToken
+  onUpdate?: () => void
+}
+
+const ApiTokenActions = ({ token, onUpdate }: ApiTokenActionsContainerProps) => {
+  const [updateToken] = useUpdateApiTokenMutation()
+  const [deleteToken] = useDeleteApiTokenMutation()
+
+  const [isEditOpen, setEditOpen] = useState(false)
+  const [isDeleteOpen, setDeleteOpen] = useState(false)
+
+  const handleUpdateToken = async (data: { name: string; status: 'active' | 'inactive'; expiresAt: string | null }) => {
+    if (!token) return
+    
+    await updateToken({
+      id: token.id,
+      name: data.name,
+      status: data.status,
+      expiresAt: data.expiresAt,
+    }).unwrap()
+    
+    setEditOpen(false)
+    onUpdate?.()
+  }
+
+  const confirmDelete = async () => {
+    if (!token?.id) return
+    await deleteToken({ id: token.id }).unwrap()
+    setDeleteOpen(false)
+    onUpdate?.()
+  }
+
+  return (
+    <>
+      <ApiTokenActionsMenu
+        token={token}
+        onEdit={() => setEditOpen(true)}
+        onDelete={() => setDeleteOpen(true)}
+      />
+
+      <ApiTokenEditModal
+        isOpen={isEditOpen}
+        onClose={() => setEditOpen(false)}
+        onUpdate={handleUpdateToken}
+        token={token}
+      />
+
+      <DeleteDialog
+        isOpen={isDeleteOpen}
+        onClose={() => setDeleteOpen(false)}
+        titleOverride={`Revoke "${token.name}" token?`}
+        entityDescription="token"
+        descriptionOverride="This action cannot be undone. The token will be immediately revoked and can no longer be used."
+        onDelete={confirmDelete}
+      />
+    </>
+  )
+}
+
+export default ApiTokenActions

package/src/components/openapi/actions/ApiTokenCreateModal.tsx

@@ -0,0 +1,107 @@
+'use client'
+
+import {
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+} from '@chakra-ui/react'
+import Button from '@components/common/button/Button'
+import Input from '@components/common/forms/Input'
+import { useRef } from 'react'
+import { FieldValues, SubmitHandler, useForm } from 'react-hook-form'
+
+interface FormValues extends FieldValues {
+  name: string
+}
+
+export default function ApiTokenCreateModal({
+  isOpen,
+  onClose,
+  onCreate,
+}: {
+  isOpen: boolean
+  onClose: () => void
+  onCreate: (name: string) => Promise<void> | void
+}) {
+  const cancelRef = useRef<HTMLButtonElement>(null!)
+
+  const {
+    register,
+    handleSubmit,
+    getValues,
+    clearErrors,
+    setError,
+    formState: { errors, isSubmitting },
+  } = useForm<FormValues>({ defaultValues: { name: '' } })
+
+  const onSubmit: SubmitHandler<FormValues> = async (data) => {
+    const name = data.name.trim()
+    if (!name) {
+      setError('name', { message: 'Token name is required' })
+      return
+    }
+
+    try {
+      await onCreate(name)
+      onClose()
+    } catch (err) {
+      setError('name', { message: 'Failed to create token' })
+    }
+  }
+
+  return (
+    <AlertDialog isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose} isCentered>
+      <AlertDialogOverlay>
+        <AlertDialogContent>
+          <div className="w-xs-300p w-md-450p">
+            <AlertDialogHeader>Create API Token</AlertDialogHeader>
+
+            <AlertDialogBody>
+              <form onSubmit={handleSubmit(onSubmit)}>
+                <Input
+                  register={register('name', {
+                    required: 'Token name is required',
+                    minLength: { value: 2, message: 'Token name must be at least 2 characters' },
+                    maxLength: { value: 100, message: 'Token name must be less than 100 characters' },
+                  })}
+                  errors={errors}
+                  placeholder="Enter token name"
+                  label="Name"
+                  getValues={getValues}
+                />
+              </form>
+            </AlertDialogBody>
+
+            <AlertDialogFooter className="d-flex justify-content-end gap-3">
+              <Button
+                className="me-2"
+                ariaLabel="Cancel new token"
+                buttonRef={cancelRef}
+                onClick={onClose}
+              >
+                Cancel
+              </Button>
+
+              <Button
+                className="text-white"
+                ariaLabel="Create token"
+                color="primary"
+                onClick={() => {
+                  clearErrors('name')
+                  handleSubmit(onSubmit)()
+                }}
+                isLoading={isSubmitting}
+                disabled={isSubmitting}
+              >
+                Save
+              </Button>
+            </AlertDialogFooter>
+          </div>
+        </AlertDialogContent>
+      </AlertDialogOverlay>
+    </AlertDialog>
+  )
+}

package/src/components/openapi/actions/ApiTokenEditModal.tsx

@@ -0,0 +1,168 @@
+'use client'
+
+import {
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+} from '@chakra-ui/react'
+import Button from '@components/common/button/Button'
+import Input from '@components/common/forms/Input'
+import Select from '@components/common/forms/Select'
+import { useRef, useEffect } from 'react'
+import { FieldValues, SubmitHandler, useForm } from 'react-hook-form'
+import type { ApiToken } from '@store/model'
+
+interface FormValues extends FieldValues {
+  name: string
+  status: 'active' | 'inactive'
+  expiresAt: string
+}
+
+const statusOptions = [
+  { value: 'active', label: 'Active' },
+  { value: 'inactive', label: 'Inactive' },
+]
+
+export default function ApiTokenEditModal({
+  isOpen,
+  onClose,
+  onUpdate,
+  token,
+}: {
+  isOpen: boolean
+  onClose: () => void
+  onUpdate: (data: { name: string; status: 'active' | 'inactive'; expiresAt: string | null }) => Promise<void> | void
+  token: ApiToken
+}) {
+  const cancelRef = useRef<HTMLButtonElement>(null!)
+
+  // Determine status from revokedAt field
+  const currentStatus = token.revokedAt ? 'inactive' : 'active'
+
+  const {
+    register,
+    handleSubmit,
+    getValues,
+    clearErrors,
+    setError,
+    control,
+    reset,
+    formState: { errors, isSubmitting },
+  } = useForm<FormValues>({
+    defaultValues: {
+      name: token.name || '',
+      status: currentStatus,
+      expiresAt: token.expiresAt ? new Date(token.expiresAt).toISOString().split('T')[0] : '',
+    },
+  })
+
+  // Reset form when token changes or modal opens
+  useEffect(() => {
+    if (isOpen) {
+      reset({
+        name: token.name || '',
+        status: token.revokedAt ? 'inactive' : 'active',
+        expiresAt: token.expiresAt ? new Date(token.expiresAt).toISOString().split('T')[0] : '',
+      })
+    }
+  }, [isOpen, token, reset])
+
+  const onSubmit: SubmitHandler<FormValues> = async (data) => {
+    const name = data.name.trim()
+    if (!name) {
+      setError('name', { message: 'Token name is required' })
+      return
+    }
+
+    try {
+      await onUpdate({
+        name,
+        status: data.status,
+        expiresAt: data.expiresAt || null,
+      })
+      onClose()
+    } catch (err) {
+      setError('name', { message: 'Failed to update token' })
+    }
+  }
+
+  return (
+    <AlertDialog isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose} isCentered>
+      <AlertDialogOverlay className="dialog">
+        <AlertDialogContent>
+          <div className="w-xs-300p w-md-450p">
+            <AlertDialogHeader>Edit API Token</AlertDialogHeader>
+
+            <AlertDialogBody>
+              <form onSubmit={handleSubmit(onSubmit)} id="edit-token-form">
+                <div className="mb-4">
+                  <Input
+                    register={register('name', {
+                      required: 'Token name is required',
+                      minLength: { value: 2, message: 'Token name must be at least 2 characters' },
+                      maxLength: { value: 100, message: 'Token name must be less than 100 characters' },
+                    })}
+                    errors={errors}
+                    placeholder="Enter token name"
+                    label="Name"
+                    getValues={getValues}
+                  />
+                </div>
+
+                <div className="mb-4">
+                  <Select
+                    register={register('status', { required: 'Status is required' })}
+                    control={control}
+                    errors={errors}
+                    options={statusOptions}
+                    label="Status"
+                    getValues={getValues}
+                  />
+                </div>
+
+                <div className="mb-4">
+                  <Input
+                    register={register('expiresAt')}
+                    errors={errors}
+                    type="date"
+                    placeholder="Select expiration date"
+                    label="Expiration Date"
+                    getValues={getValues}
+                  />
+                </div>
+              </form>
+            </AlertDialogBody>
+
+            <AlertDialogFooter className="d-flex justify-content-end gap-3">
+              <Button
+                className="me-2"
+                ariaLabel="Cancel edit token"
+                buttonRef={cancelRef}
+                onClick={onClose}
+              >
+                Cancel
+              </Button>
+
+              <Button
+                className="text-white"
+                ariaLabel="Update token"
+                color="primary"
+                onClick={() => {
+                  clearErrors()
+                  handleSubmit(onSubmit)()
+                }}
+                isLoading={isSubmitting}
+                disabled={isSubmitting}
+              >
+                Update
+              </Button>
+            </AlertDialogFooter>
+          </div>
+        </AlertDialogContent>
+      </AlertDialogOverlay>
+    </AlertDialog>
+  )
+}