feat(app): add project pinning to sidebar menu

packages/app/src/context/server.tsx

@@ -4,7 +4,7 @@ import { createStore } from "solid-js/store"
 import { Persist, persisted } from "@/utils/persist"
 import { useCheckServerHealth } from "@/utils/server-health"
 
-type StoredProject = { worktree: string; expanded: boolean }
+type StoredProject = { worktree: string; expanded: boolean; pinned?: boolean }
 type StoredServer = string | ServerConnection.HttpBase | ServerConnection.Http
 const HEALTH_POLL_INTERVAL_MS = 10_000
 
@@ -276,9 +276,46 @@ export const { use: useServer, provider: ServerProvider } = createSimpleContext(
           if (fromIndex === -1 || fromIndex === toIndex) return
           const result = [...current]
           const [item] = result.splice(fromIndex, 1)
-          result.splice(toIndex, 0, item)
+          if (!item) return
+          const pinned = result.filter((x) => !!x.pinned).length
+          const index = item.pinned
+            ? Math.max(0, Math.min(toIndex, pinned))
+            : Math.max(pinned, Math.min(toIndex, result.length))
+          result.splice(index, 0, item)
           setStore("projects", key, result)
         },
+        pin(directory: string) {
+          const key = origin()
+          if (!key) return
+          const current = store.projects[key] ?? []
+          const index = current.findIndex((x) => x.worktree === directory)
+          if (index === -1) return
+          if (current[index]?.pinned) return
+          const item = { ...current[index], pinned: true }
+          const rest = current.filter((_, i) => i !== index)
+          const pinned = rest.findLastIndex((x) => !!x.pinned)
+          const result = [...rest]
+          result.splice(pinned + 1, 0, item)
+          setStore("projects", key, result)
+        },
+        unpin(directory: string) {
+          const key = origin()
+          if (!key) return
+          const current = store.projects[key] ?? []
+          const index = current.findIndex((x) => x.worktree === directory)
+          if (index === -1) return
+          if (!current[index]?.pinned) return
+          const item = { ...current[index], pinned: false }
+          const rest = current.filter((_, i) => i !== index)
+          const pinned = rest.filter((x) => !!x.pinned).length
+          const result = [...rest]
+          result.splice(pinned, 0, item)
+          setStore("projects", key, result)
+        },
+        isPinned(directory: string) {
+          const current = store.projects[origin()] ?? []
+          return current.find((x) => x.worktree === directory)?.pinned ?? false
+        },
         last() {
           const key = origin()
           if (!key) return

packages/app/src/i18n/en.ts

@@ -666,6 +666,8 @@ export const dict = {
   "sidebar.nav.projectsAndSessions": "Projects and sessions",
   "sidebar.settings": "Settings",
   "sidebar.help": "Help",
+  "sidebar.project.pin": "Pin to top",
+  "sidebar.project.unpin": "Unpin",
   "sidebar.workspaces.enable": "Enable workspaces",
   "sidebar.workspaces.disable": "Disable workspaces",
   "sidebar.gettingStarted.title": "Getting started",

packages/app/src/pages/layout/sidebar-items.tsx

@@ -1,5 +1,6 @@
 import type { Message, Session, TextPart, UserMessage } from "@opencode-ai/sdk/v2/client"
 import { Avatar } from "@opencode-ai/ui/avatar"
+import { ContextMenu } from "@opencode-ai/ui/context-menu"
 import { HoverCard } from "@opencode-ai/ui/hover-card"
 import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
@@ -15,6 +16,7 @@ import { useLanguage } from "@/context/language"
 import { getAvatarColors, type LocalProject, useLayout } from "@/context/layout"
 import { useNotification } from "@/context/notification"
 import { usePermission } from "@/context/permission"
+import { useServer } from "@/context/server"
 import { messageAgentColor } from "@/utils/agent"
 import { sessionPermissionRequest } from "../session/composer/session-request-tree"
 import { hasProjectPermissions } from "./helpers"
@@ -65,6 +67,30 @@ export const ProjectIcon = (props: { project: LocalProject; class?: string; noti
   )
 }
 
+export const ProjectPinItem = (props: { project: LocalProject }): JSX.Element => {
+  const language = useLanguage()
+  const server = useServer()
+  return (
+    <ContextMenu.Item
+      data-action="project-pin-toggle"
+      data-project={base64Encode(props.project.worktree)}
+      onSelect={() => {
+        if (server.projects.isPinned(props.project.worktree)) {
+          server.projects.unpin(props.project.worktree)
+          return
+        }
+        server.projects.pin(props.project.worktree)
+      }}
+    >
+      <ContextMenu.ItemLabel>
+        {server.projects.isPinned(props.project.worktree)
+          ? language.t("sidebar.project.unpin")
+          : language.t("sidebar.project.pin")}
+      </ContextMenu.ItemLabel>
+    </ContextMenu.Item>
+  )
+}
+
 export type SessionItemProps = {
   session: Session
   list: Session[]

packages/app/src/pages/layout/sidebar-project.tsx

@@ -10,7 +10,7 @@ import { useLayout, type LocalProject } from "@/context/layout"
 import { useGlobalSync } from "@/context/global-sync"
 import { useLanguage } from "@/context/language"
 import { useNotification } from "@/context/notification"
-import { ProjectIcon, SessionItem, type SessionItemProps } from "./sidebar-items"
+import { ProjectIcon, ProjectPinItem, SessionItem, type SessionItemProps } from "./sidebar-items"
 import { childMapByParent, displayName, sortedRootSessions } from "./helpers"
 
 export type ProjectSidebarContext = {
@@ -146,6 +146,7 @@ const ProjectTile = (props: {
           <ContextMenu.Item onSelect={() => props.showEditProjectDialog(props.project)}>
             <ContextMenu.ItemLabel>{props.language.t("common.edit")}</ContextMenu.ItemLabel>
           </ContextMenu.Item>
+          <ProjectPinItem project={props.project} />
           <ContextMenu.Item
             data-action="project-workspaces-toggle"
             data-project={base64Encode(props.project.worktree)}