deepspace 0.3.10 → 0.4.0

package/features/tree/src/TreeSidebar.tsx

@@ -0,0 +1,607 @@
+/**
+ * Tree Sidebar - Hierarchical Navigation + Drag & Drop
+ *
+ * Features:
+ * - Main navigation views (All, Today, Upcoming, Logbook, Trash)
+ * - Hierarchical project tree with drag-and-drop reordering
+ * - User list with task assignment via drag-and-drop
+ * - Collapsible sections
+ */
+
+import React, { useState, useEffect, useCallback, type ReactNode } from 'react'
+import { VIEWS, VIEW_CONFIG, type CurrentView, type ViewType } from './tree-constants'
+import { useTreeDragDrop } from './tree-hooks'
+
+// ============================================================================
+// Types
+// ============================================================================
+
+interface ProjectNode {
+  id: string
+  title: string
+  color?: string
+  parentId?: string | null
+  children?: ProjectNode[]
+  totalTaskCount?: number
+  totalCompleted?: number
+}
+
+interface User {
+  id: string
+  name?: string
+  email?: string
+  color?: string
+  imageUrl?: string
+  isCustom?: boolean
+}
+
+interface TaskCounts {
+  [key: string]: { total: number; completed: number; uncompleted: number } | number
+}
+
+interface TreeSidebarProps {
+  currentView: CurrentView
+  onViewChange: (view: CurrentView) => void
+  taskCounts?: TaskCounts
+  projectTree?: ProjectNode[]
+  onAddProject?: (parentId: string | null) => void
+  onEditProject?: (project: ProjectNode) => void
+  onReorderProject?: (draggedId: string, targetId: string | null, position: 'before' | 'after' | 'inside') => void
+  onItemDrop?: (itemId: string, projectId: string) => void
+  onItemDropOnUser?: (itemId: string, userId: string | null) => void
+  onItemDragEnd?: () => void
+  allUsers?: User[]
+  currentUser?: User
+  onManageUsers?: () => void
+  width?: number
+  isReadOnly?: boolean
+  getDisplayName?: (user: User) => string
+  header?: ReactNode
+  footer?: ReactNode
+}
+
+// ============================================================================
+// Icon Component
+// ============================================================================
+
+interface IconProps {
+  name: string
+  size?: number
+  className?: string
+  style?: React.CSSProperties
+}
+
+function Icon({ name, size = 16, className = '', style }: IconProps) {
+  const iconMap: Record<string, ReactNode> = {
+    list: (
+      <svg className={className} style={style} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <line x1="8" y1="6" x2="21" y2="6" /><line x1="8" y1="12" x2="21" y2="12" /><line x1="8" y1="18" x2="21" y2="18" />
+        <line x1="3" y1="6" x2="3.01" y2="6" /><line x1="3" y1="12" x2="3.01" y2="12" /><line x1="3" y1="18" x2="3.01" y2="18" />
+      </svg>
+    ),
+    star: (
+      <svg className={className} style={style} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+      </svg>
+    ),
+    calendar: (
+      <svg className={className} style={style} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <rect x="3" y="4" width="18" height="18" rx="2" ry="2" /><line x1="16" y1="2" x2="16" y2="6" /><line x1="8" y1="2" x2="8" y2="6" /><line x1="3" y1="10" x2="21" y2="10" />
+      </svg>
+    ),
+    'book-open': (
+      <svg className={className} style={style} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" /><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
+      </svg>
+    ),
+    'trash-2': (
+      <svg className={className} style={style} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <polyline points="3 6 5 6 21 6" /><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+      </svg>
+    ),
+    'chevron-right': (
+      <svg className={className} style={style} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <polyline points="9 18 15 12 9 6" />
+      </svg>
+    ),
+    'chevron-down': (
+      <svg className={className} style={style} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <polyline points="6 9 12 15 18 9" />
+      </svg>
+    ),
+    plus: (
+      <svg className={className} style={style} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" />
+      </svg>
+    ),
+    pencil: (
+      <svg className={className} style={style} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" />
+      </svg>
+    ),
+    users: (
+      <svg className={className} style={style} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M23 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" />
+      </svg>
+    ),
+    'user-plus': (
+      <svg className={className} style={style} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" /><circle cx="8.5" cy="7" r="4" /><line x1="20" y1="8" x2="20" y2="14" /><line x1="23" y1="11" x2="17" y2="11" />
+      </svg>
+    ),
+  }
+
+  return <>{iconMap[name] || <span style={{ width: size, height: size }} />}</>
+}
+
+// ============================================================================
+// Project Tree Node
+// ============================================================================
+
+interface ProjectTreeNodeProps {
+  node: ProjectNode
+  depth: number
+  currentView: CurrentView
+  onViewChange: (view: CurrentView) => void
+  expandedProjects: Record<string, boolean>
+  toggleExpand: (id: string) => void
+  onAddProject?: (parentId: string | null) => void
+  onEditProject?: (project: ProjectNode) => void
+  dragState: ReturnType<typeof useTreeDragDrop>['dragState']
+  dragHandlers: ReturnType<typeof useTreeDragDrop>['handlers']
+  onItemDrop?: (itemId: string, projectId: string) => void
+  onItemDragEnd?: () => void
+  isReadOnly?: boolean
+}
+
+function ProjectTreeNode({
+  node, depth, currentView, onViewChange, expandedProjects, toggleExpand,
+  onAddProject, onEditProject, dragState, dragHandlers, onItemDrop, onItemDragEnd, isReadOnly,
+}: ProjectTreeNodeProps) {
+  const [isHovered, setIsHovered] = useState(false)
+  const [isItemDragOver, setIsItemDragOver] = useState(false)
+
+  const isActive = currentView.type === VIEWS.PROJECT && currentView.id === node.id
+  const isExpanded = expandedProjects[node.id]
+  const hasChildren = node.children && node.children.length > 0
+  const isDragging = dragState.draggingId === node.id
+  const isDropTarget = dragState.dropTargetId === node.id
+  const dropPosition = isDropTarget ? dragState.dropPosition : null
+
+  const handleDragOver = (e: React.DragEvent) => {
+    if (isReadOnly) return
+    const isItemDrag = e.dataTransfer.types.includes('application/x-item')
+    if (isItemDrag) {
+      e.preventDefault()
+      e.stopPropagation()
+      e.dataTransfer.dropEffect = 'move'
+      if (!isItemDragOver) setIsItemDragOver(true)
+    } else {
+      dragHandlers.onDragOver(e, node.id)
+    }
+  }
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    if (isReadOnly) return
+    if (!e.currentTarget.contains(e.relatedTarget as Node)) {
+      setIsItemDragOver(false)
+      dragHandlers.onDragLeave(e)
+    }
+  }
+
+  const handleDrop = (e: React.DragEvent) => {
+    if (isReadOnly) return
+    const itemId = e.dataTransfer.getData('application/x-item')
+    if (itemId && onItemDrop) {
+      e.preventDefault()
+      e.stopPropagation()
+      onItemDrop(itemId, node.id)
+      setIsItemDragOver(false)
+      if (onItemDragEnd) onItemDragEnd()
+    } else {
+      dragHandlers.onDrop(e, node.id)
+    }
+  }
+
+  return (
+    <div style={{ opacity: isDragging ? 0.5 : 1 }}>
+      <div
+        draggable={!isReadOnly}
+        onDragStart={(e) => !isReadOnly && dragHandlers.onDragStart(e, node)}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        onDragEnd={dragHandlers.onDragEnd}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        className={`
+          flex items-center gap-1 py-1.5 px-2 rounded-md transition-colors cursor-grab relative
+          ${isActive ? 'bg-primary/10' : ''}
+          ${isItemDragOver ? 'bg-primary/10' : ''}
+        `}
+        style={{ paddingLeft: 8 + depth * 16 }}
+      >
+        {dropPosition === 'before' && (
+          <div className="absolute left-2 right-2 top-0 h-0.5 bg-primary rounded" />
+        )}
+        {dropPosition === 'after' && (
+          <div className="absolute left-2 right-2 bottom-0 h-0.5 bg-primary rounded" />
+        )}
+        {dropPosition === 'inside' && (
+          <div className="absolute inset-1 border-2 border-dashed border-primary rounded pointer-events-none" />
+        )}
+
+        <button
+          onClick={(e) => { e.stopPropagation(); toggleExpand(node.id) }}
+          className="w-4 h-4 flex items-center justify-center flex-shrink-0"
+        >
+          {hasChildren ? (
+            <Icon name={isExpanded ? 'chevron-down' : 'chevron-right'} size={12} className="text-muted-foreground" />
+          ) : (
+            <span className="w-3" />
+          )}
+        </button>
+
+        <span
+          className="w-2.5 h-2.5 rounded-full flex-shrink-0"
+          style={{ backgroundColor: node.color || 'var(--color-primary)' }}
+        />
+
+        <button
+          onClick={() => onViewChange({ type: VIEWS.PROJECT, id: node.id })}
+          className="flex-1 text-left min-w-0"
+        >
+          <span className="text-sm text-foreground truncate block">{node.title}</span>
+        </button>
+
+        {(node.totalTaskCount ?? 0) > 0 && (
+          <span className="text-xs text-muted-foreground flex-shrink-0">
+            {(node.totalTaskCount ?? 0) - (node.totalCompleted ?? 0)}/{node.totalTaskCount}
+          </span>
+        )}
+
+        {!isReadOnly && (
+          <div className={`flex items-center gap-0.5 ml-auto transition-opacity ${isHovered ? 'opacity-100' : 'opacity-0'}`}>
+            {onAddProject && (
+              <button
+                onClick={(e) => { e.stopPropagation(); onAddProject(node.id) }}
+                className="w-5 h-5 flex items-center justify-center rounded hover:bg-muted"
+                title="Add sub-project"
+              >
+                <Icon name="plus" size={12} className="text-muted-foreground" />
+              </button>
+            )}
+            {onEditProject && (
+              <button
+                onClick={(e) => { e.stopPropagation(); onEditProject(node) }}
+                className="w-5 h-5 flex items-center justify-center rounded hover:bg-muted"
+                title="Edit project"
+              >
+                <Icon name="pencil" size={12} className="text-muted-foreground" />
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+
+      {isExpanded && hasChildren && (
+        <div>
+          {node.children!.map(child => (
+            <ProjectTreeNode
+              key={child.id}
+              node={child}
+              depth={depth + 1}
+              currentView={currentView}
+              onViewChange={onViewChange}
+              expandedProjects={expandedProjects}
+              toggleExpand={toggleExpand}
+              onAddProject={onAddProject}
+              onEditProject={onEditProject}
+              dragState={dragState}
+              dragHandlers={dragHandlers}
+              onItemDrop={onItemDrop}
+              onItemDragEnd={onItemDragEnd}
+              isReadOnly={isReadOnly}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ============================================================================
+// User List Item
+// ============================================================================
+
+interface UserListItemProps {
+  user: User
+  isActive: boolean
+  isYou: boolean
+  displayName: string
+  taskCount?: { total: number; completed: number }
+  onViewChange: (view: CurrentView) => void
+  onItemDropOnUser?: (itemId: string, userId: string | null) => void
+  onItemDragEnd?: () => void
+  isReadOnly?: boolean
+}
+
+function UserListItem({
+  user, isActive, isYou, displayName, taskCount, onViewChange,
+  onItemDropOnUser, onItemDragEnd, isReadOnly,
+}: UserListItemProps) {
+  const [isItemDragOver, setIsItemDragOver] = useState(false)
+
+  const handleDragOver = (e: React.DragEvent) => {
+    if (isReadOnly) return
+    const isItemDrag = e.dataTransfer.types.includes('application/x-item')
+    if (isItemDrag) {
+      e.preventDefault()
+      e.stopPropagation()
+      e.dataTransfer.dropEffect = 'move'
+      if (!isItemDragOver) setIsItemDragOver(true)
+    }
+  }
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    if (isReadOnly) return
+    if (!e.currentTarget.contains(e.relatedTarget as Node)) {
+      setIsItemDragOver(false)
+    }
+  }
+
+  const handleDrop = (e: React.DragEvent) => {
+    if (isReadOnly) return
+    const itemId = e.dataTransfer.getData('application/x-item')
+    if (itemId && onItemDropOnUser) {
+      e.preventDefault()
+      e.stopPropagation()
+      onItemDropOnUser(itemId, user.id)
+      setIsItemDragOver(false)
+      if (onItemDragEnd) onItemDragEnd()
+    }
+  }
+
+  const total = taskCount?.total ?? 0
+  const completed = taskCount?.completed ?? 0
+
+  return (
+    <button
+      onClick={() => onViewChange({ type: VIEWS.USER, id: user.id })}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+      className={`
+        w-full flex items-center gap-2.5 py-1.5 px-2.5 rounded-md transition-colors text-left
+        ${isActive ? 'bg-black/5' : 'hover:bg-black/[0.02]'}
+        ${isItemDragOver ? 'bg-primary/10 ring-2 ring-primary/30' : ''}
+      `}
+    >
+      <span
+        className="w-5 h-5 rounded-full flex items-center justify-center text-[11px] font-semibold text-white flex-shrink-0"
+        style={{ backgroundColor: user.color || 'var(--color-primary)' }}
+      >
+        {displayName?.charAt(0).toUpperCase() || '?'}
+      </span>
+      <span className="flex-1 text-sm text-foreground truncate">{displayName}</span>
+      {isYou && (
+        <span className="text-[10px] font-medium px-2 py-0.5 rounded-full bg-primary/10 text-primary">
+          You
+        </span>
+      )}
+      {total > 0 && (
+        <span className="text-xs text-muted-foreground">{total - completed}/{total}</span>
+      )}
+    </button>
+  )
+}
+
+// ============================================================================
+// Main Sidebar Component
+// ============================================================================
+
+export default function TreeSidebar({
+  currentView, onViewChange, taskCounts = {}, projectTree = [],
+  onAddProject, onEditProject, onReorderProject, onItemDrop, onItemDropOnUser,
+  onItemDragEnd, allUsers = [], currentUser, onManageUsers, width = 260,
+  isReadOnly = false, getDisplayName, header, footer,
+}: TreeSidebarProps) {
+  const [expandedSections, setExpandedSections] = useState({ projects: true, users: true })
+  const [expandedProjects, setExpandedProjects] = useState<Record<string, boolean>>({})
+
+  const { dragState, handlers: dragHandlers } = useTreeDragDrop(onReorderProject)
+
+  // Auto-expand parents of active project
+  useEffect(() => {
+    if (currentView.type === VIEWS.PROJECT && currentView.id) {
+      const findPath = (nodes: ProjectNode[], targetId: string, path: string[] = []): string[] | null => {
+        for (const node of nodes) {
+          if (node.id === targetId) return path
+          if (node.children) {
+            const found = findPath(node.children, targetId, [...path, node.id])
+            if (found) return found
+          }
+        }
+        return null
+      }
+      const path = findPath(projectTree, currentView.id)
+      if (path) {
+        setExpandedProjects(prev => {
+          const next = { ...prev }
+          path.forEach(id => { next[id] = true })
+          return next
+        })
+      }
+    }
+  }, [currentView, projectTree])
+
+  const toggleSection = (section: 'projects' | 'users') => {
+    setExpandedSections(prev => ({ ...prev, [section]: !prev[section] }))
+  }
+
+  const toggleExpand = useCallback((projectId: string) => {
+    setExpandedProjects(prev => ({ ...prev, [projectId]: !prev[projectId] }))
+  }, [])
+
+  const mainViews: Array<{ type: ViewType; icon: string; color: string }> = [
+    { type: VIEWS.ALL, icon: 'list', color: '#6366f1' },
+    { type: VIEWS.TODAY, icon: 'star', color: '#f59e0b' },
+    { type: VIEWS.UPCOMING, icon: 'calendar', color: '#ef4444' },
+    { type: VIEWS.LOGBOOK, icon: 'book-open', color: '#9ca3af' },
+    { type: VIEWS.TRASH, icon: 'trash-2', color: '#9ca3af' },
+  ]
+
+  return (
+    <div
+      className="h-full bg-card border-r border-border flex flex-col overflow-auto flex-shrink-0"
+      style={{ width }}
+    >
+      {header}
+
+      <nav className="p-3 flex flex-col gap-0.5">
+        {mainViews.map(({ type, icon, color }) => {
+          const config = VIEW_CONFIG[type]
+          const isActive = currentView.type === type
+          const countData = taskCounts[type]
+          const count = typeof countData === 'number' ? countData : (countData?.total ?? 0)
+          const completed = typeof countData === 'number' ? 0 : (countData?.completed ?? 0)
+          const uncompleted = count - completed
+          const countDisplay = count > 0 ? `${uncompleted}/${count}` : null
+
+          return (
+            <button
+              key={type}
+              onClick={() => onViewChange({ type })}
+              className={`
+                flex items-center gap-2.5 px-2.5 py-2 rounded-lg w-full text-left transition-colors
+                ${isActive ? 'bg-black/[0.06]' : 'hover:bg-black/[0.02]'}
+              `}
+            >
+              <span className="w-6 h-6 rounded-md flex items-center justify-center">
+                <Icon name={icon} size={16} className={isActive ? 'text-primary' : ''} style={{ color }} />
+              </span>
+              <span className={`flex-1 text-sm ${isActive ? 'font-semibold text-foreground' : 'text-muted-foreground'}`}>
+                {config?.title ?? type}
+              </span>
+              {countDisplay && (
+                <span className="text-xs text-muted-foreground">
+                  {countDisplay}
+                </span>
+              )}
+            </button>
+          )
+        })}
+      </nav>
+
+      <div className="h-px bg-border mx-4 my-2" />
+
+      {/* Projects Section */}
+      <div className="flex flex-col">
+        <button onClick={() => toggleSection('projects')} className="flex items-center justify-between px-3 py-2">
+          <div className="flex items-center gap-1.5">
+            <Icon name={expandedSections.projects ? 'chevron-down' : 'chevron-right'} size={14} className="text-muted-foreground" />
+            <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">Projects</span>
+          </div>
+          {!isReadOnly && onAddProject && (
+            <button
+              onClick={(e) => { e.stopPropagation(); onAddProject(null) }}
+              className="w-5 h-5 rounded flex items-center justify-center hover:bg-muted"
+              title="Add Project"
+            >
+              <Icon name="plus" size={14} className="text-muted-foreground" />
+            </button>
+          )}
+        </button>
+
+        {expandedSections.projects && (
+          <div
+            className="px-1 pb-2 min-h-[40px]"
+            onDragOver={(e) => e.preventDefault()}
+            onDrop={dragHandlers.onRootDrop}
+          >
+            {projectTree.length > 0 ? (
+              projectTree.map(node => (
+                <ProjectTreeNode
+                  key={node.id}
+                  node={node}
+                  depth={0}
+                  currentView={currentView}
+                  onViewChange={onViewChange}
+                  expandedProjects={expandedProjects}
+                  toggleExpand={toggleExpand}
+                  onAddProject={onAddProject}
+                  onEditProject={onEditProject}
+                  dragState={dragState}
+                  dragHandlers={dragHandlers}
+                  onItemDrop={onItemDrop}
+                  onItemDragEnd={onItemDragEnd}
+                  isReadOnly={isReadOnly}
+                />
+              ))
+            ) : (
+              <div className="text-xs text-muted-foreground px-2.5 py-2 italic">No projects yet</div>
+            )}
+          </div>
+        )}
+      </div>
+
+      <div className="h-px bg-border mx-4 my-2" />
+
+      {/* Users Section */}
+      <div className="flex flex-col">
+        <button onClick={() => toggleSection('users')} className="flex items-center justify-between px-3 py-2">
+          <div className="flex items-center gap-1.5">
+            <Icon name={expandedSections.users ? 'chevron-down' : 'chevron-right'} size={14} className="text-muted-foreground" />
+            <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">By User</span>
+          </div>
+          {!isReadOnly && onManageUsers && (
+            <button
+              onClick={(e) => { e.stopPropagation(); onManageUsers() }}
+              className="w-5 h-5 rounded flex items-center justify-center hover:bg-muted"
+              title="Manage Users"
+            >
+              <Icon name="users" size={14} className="text-muted-foreground" />
+            </button>
+          )}
+        </button>
+
+        {expandedSections.users && (
+          <div className="px-1 pb-2">
+            {allUsers.map(user => {
+              const isYou = currentUser?.id === user.id
+              const displayName = getDisplayName ? getDisplayName(user) : (user.name || user.email || 'Unknown')
+
+              return (
+                <UserListItem
+                  key={user.id}
+                  user={user}
+                  isActive={currentView.type === VIEWS.USER && currentView.id === user.id}
+                  isYou={isYou}
+                  displayName={displayName}
+                  onViewChange={onViewChange}
+                  onItemDropOnUser={onItemDropOnUser}
+                  onItemDragEnd={onItemDragEnd}
+                  isReadOnly={isReadOnly}
+                />
+              )
+            })}
+
+            {!isReadOnly && allUsers.length === 0 && onManageUsers && (
+              <button
+                onClick={onManageUsers}
+                className="w-full flex items-center justify-center gap-1.5 p-2.5 border border-dashed border-border rounded-lg text-primary text-sm hover:bg-primary/5"
+              >
+                <Icon name="user-plus" size={14} className="text-primary" />
+                <span>Add users</span>
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+
+      <div className="flex-1" />
+
+      {footer}
+    </div>
+  )
+}

package/features/tree/src/tree-constants.ts

@@ -0,0 +1,68 @@
+/**
+ * Tree Sidebar - Constants
+ *
+ * View types and configurations for tree sidebar navigation.
+ */
+
+export const VIEWS = {
+  ALL: 'all',
+  TODAY: 'today',
+  UPCOMING: 'upcoming',
+  LOGBOOK: 'logbook',
+  TRASH: 'trash',
+  PROJECT: 'project',
+  USER: 'user',
+} as const
+
+export type ViewType = typeof VIEWS[keyof typeof VIEWS]
+
+export interface ViewConfig {
+  title: string
+  icon: string
+  color: string
+  description: string
+}
+
+export const VIEW_CONFIG: Record<string, ViewConfig> = {
+  [VIEWS.ALL]: {
+    title: 'All Tasks',
+    icon: 'list',
+    color: '#6366f1',
+    description: 'All your tasks',
+  },
+  [VIEWS.TODAY]: {
+    title: 'Today',
+    icon: 'star',
+    color: '#f59e0b',
+    description: 'Focus on what matters today',
+  },
+  [VIEWS.UPCOMING]: {
+    title: 'calendar',
+    icon: 'calendar',
+    color: '#ef4444',
+    description: 'Plan ahead',
+  },
+  [VIEWS.LOGBOOK]: {
+    title: 'Logbook',
+    icon: 'book-open',
+    color: '#9ca3af',
+    description: 'Completed tasks',
+  },
+  [VIEWS.TRASH]: {
+    title: 'Trash',
+    icon: 'trash-2',
+    color: '#9ca3af',
+    description: 'Deleted tasks',
+  },
+}
+
+export interface CurrentView {
+  type: ViewType
+  id?: string
+}
+
+export interface DragState {
+  draggingId: string | null
+  dropTargetId: string | null
+  dropPosition: 'before' | 'after' | 'inside' | null
+}