feat: control input style

Author: winverse

apps/book-server/src/services/BookBuildService/index.mts

@@ -116,6 +116,7 @@ export class BookBuildService implements Service {
         urlSlug: book.url_slug,
       }),
     )
+
     fs.writeFileSync(`${dest}/theme.config.tsx`, themeConfigTemplate({ title: book.title }))
 
     const buildStdout = await this.buildTsToJs(dest)

packages/nextra-editor/src/components/sidebar/file.tsx

@@ -6,7 +6,7 @@ import { PageItem, SortableItem } from '@/nextra/normalize-pages'
 
 import { useRouter } from 'next/router'
 import { useMenu } from '@/contexts'
-import AddInputs from './sidebar-controller/add-inputs'
+import AddInputs from './sidebar-controller/control-input'
 import { classes } from './style'
 import { MenuItemProps } from './menu'
 import { useDndTree } from './sortable-tree'
@@ -21,8 +21,7 @@ export function File({ item, ...props }: FileProps): ReactElement {
   const route = useFSRoute()
   const router = useRouter()
 
-  const { setDraggableNodeRef, setDroppableNodeRef, attributes, isDragTarget, listeners } =
-    props
+  const { setDraggableNodeRef, setDroppableNodeRef, attributes, isDragTarget, listeners } = props
 
   // It is possible that the item doesn't have any route - for example an external link.
   const active = !isDragTarget && item.route && [route, route + '/'].includes(item.route + '/')
@@ -40,11 +39,7 @@ export function File({ item, ...props }: FileProps): ReactElement {
   return (
     <>
       <li
-        className={cn(
-          classes.list,
-          { active },
-          isDragTarget && classes.ghost,
-        )}
+        className={cn(classes.list, { active }, isDragTarget && classes.ghost)}
         ref={setDroppableNodeRef}
       >
         <div

packages/nextra-editor/src/components/sidebar/sidebar-controller/add-icons.tsx

@@ -113,6 +113,7 @@ const AddIcons = ({ className, type }: Props) => {
         }
       }
     }
+
     addNewFolderToItem(coppeidPageMap)
   }
 

packages/nextra-editor/src/components/sidebar/sidebar-controller/add-inputs.tsx renamed to packages/nextra-editor/src/components/sidebar/sidebar-controller/control-input.tsx

@@ -12,7 +12,7 @@ type Props = {
   type: ActionType
 }
 
-function AddInputs({ type }: Props): ReactElement {
+function ControlInput({ type }: Props): ReactElement {
   const sidebar = useSidebar()
   const [title, setTitle] = useState('')
 
@@ -65,20 +65,23 @@ function AddInputs({ type }: Props): ReactElement {
   return (
     <div
       ref={ref}
-      className={cn('nx-flex nx-w-full nx-items-center nx-px-2 nx-py-1.5 [word-break:break-word]')}
+      className={cn(
+        'nx-flex nx-w-full nx-items-center nx-px-2 nx-py-1.5 [word-break:break-word]',
+        'nx-transition-colors',
+      )}
       onClick={onClick}
     >
-      <span
-        className={cn(
-          'nx-text-gray-600 nx-transition-colors hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-400 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50',
-        )}
-      >
+      <span>
         {type === 'folder' && <EmptyFolderIcon />}
         {type === 'page' && <EmptyFileIcon />}
         {type === 'separator' && <SeparatorIcon />}
       </span>
       <input
-        className={cn('focus-visible:box-shadow-none nx-ml-1 nx-w-full nx-bg-red-100 nx-px-1')}
+        className={cn(
+          'focus-visible:box-shadow-none nx-ml-1 nx-w-full nx-px-1 nx-py-0.5',
+          'nx-bg-gray-100 nx-text-gray-600 ',
+          'dark:nx-bg-primary-100/5 dark:nx-text-gray-400',
+        )}
         value={title}
         onChange={onChange}
         autoFocus={true}
@@ -91,4 +94,4 @@ function AddInputs({ type }: Props): ReactElement {
   )
 }
 
-export default AddInputs
+export default ControlInput

packages/nextra-editor/src/components/sidebar/sortable-tree/sortable-item.tsx

@@ -7,7 +7,7 @@ import { ArrowRightIcon } from '@/nextra/icons'
 import { useDndTree } from '.'
 import { classes, indentStyle } from '../style'
 import type { SortableItemProps } from './types'
-import AddInputs from '../sidebar-controller/add-inputs'
+import ControlInput from '../sidebar-controller/control-input'
 
 export const SortableItem = forwardRef<HTMLDivElement, SortableItemProps>((props, ref) => {
   const { isDragging, overItem, setOverItem } = useDndTree()
@@ -30,10 +30,10 @@ export const SortableItem = forwardRef<HTMLDivElement, SortableItemProps>((props
     transform,
   } = props
 
-  const isAddAction = ['newPage', 'newFolder', 'newSeparator'].includes(item.type)
+  const isControlAction = ['newPage', 'newFolder', 'newSeparator'].includes(item.type)
 
   const active =
-    !isDragging && !isAddAction && !isGhost && [route, `${route}/`].includes(item.route + '/')
+    !isDragging && !isControlAction && !isGhost && [route, `${route}/`].includes(item.route + '/')
   // const isLink = 'withIndexPage' in item && item.withIndexPage
 
   useEffect(() => {
@@ -68,12 +68,13 @@ export const SortableItem = forwardRef<HTMLDivElement, SortableItemProps>((props
         {...handleProps}
         className={cn(
           'nx-flex nx-w-full nx-items-center nx-justify-between nx-gap-2 nx-text-left',
-          isSeparator && 'cursor-default',
+          isSeparator && 'nx-cursor-default',
           isSeparator ? classes.separator : classes.link,
           active ? classes.active : classes.inactive,
           !isDragging && !active && classes.inactiveBgColor,
           isGhost && classes.ghost,
           clone && classes.clone,
+          isControlAction && '!nx-pr-0',
         )}
         onClick={() => {
           if (isGhost) return
@@ -86,12 +87,12 @@ export const SortableItem = forwardRef<HTMLDivElement, SortableItemProps>((props
           }
 
           setFocusedItem(item)
-          if (isAddAction) return
+          if (isControlAction) return
           router.push(item.route, item.route, { shallow: true })
         }}
       >
-        {isAddAction ? (
-          <AddInputs type={addActionMap[item.type]} />
+        {isControlAction ? (
+          <ControlInput type={addActionMap[item.type]} />
         ) : (
           <>
             <div className={cn('nx-w-full nx-px-2 nx-py-1.5 [word-break:keep-all]')}>

packages/nextra-editor/src/contexts/sidebar.tsx

@@ -81,7 +81,9 @@ export const SidebarProvider = ({ children }: { children: ReactNode }): ReactEle
   })
 
   const reset = (originSortableItem: SortableItem[]) => {
-    setSortableItems(originSortableItem)
+    if (originSortableItem.length > 0) {
+      setSortableItems(originSortableItem)
+    }
     setActionActive(false)
     setActionComplete(false)
     setActionType('')

packages/nextra-editor/src/hooks/use-url-slug.ts

@@ -8,7 +8,7 @@ export const useUrlSlug = () => {
   const pageUrlSlug = Array.isArray(query.pageUrlSlug) ? `/${query.pageUrlSlug.join('/')}` : '/'
   const bookUrlSlug = `/${query.username}/${query.bookTitle}`
   const username = `/${query.username}`
-  const fullUrlSlug = pageUrlSlug === '/' ? `${bookUrlSlug}` : `${bookUrlSlug}/${pageUrlSlug}`
+  const fullUrlSlug = pageUrlSlug === '/' ? `${bookUrlSlug}` : `${bookUrlSlug}${pageUrlSlug}`
 
   return { bookUrlSlug, pageUrlSlug, fullUrlSlug, username }
 }