fix(app): move workspace New session into header (#12624)

Author: kitlangton

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

@@ -1,3 +1,4 @@
+import { useNavigate, useParams } from "@solidjs/router"
 import { createEffect, createMemo, For, Show, type Accessor, type JSX } from "solid-js"
 import { createStore } from "solid-js/store"
 import { createSortable } from "@thisbeyond/solid-dnd"
@@ -86,6 +87,8 @@ export const SortableWorkspace = (props: {
   project: LocalProject
   mobile?: boolean
 }): JSX.Element => {
+  const navigate = useNavigate()
+  const params = useParams()
   const globalSync = useGlobalSync()
   const language = useLanguage()
   const sortable = createSortable(props.directory)
@@ -111,6 +114,7 @@ export const SortableWorkspace = (props: {
   const busy = createMemo(() => props.ctx.isBusy(props.directory))
   const wasBusy = createMemo((prev) => prev || busy(), false)
   const loading = createMemo(() => open() && !booted() && sessions().length === 0 && !wasBusy())
+  const showNew = createMemo(() => !loading() && (sessions().length === 0 || (active() && !params.id)))
   const loadMore = async () => {
     setWorkspaceStore("limit", (limit) => limit + 5)
     await globalSync.project.loadSessions(props.directory)
@@ -260,20 +264,39 @@ export const SortableWorkspace = (props: {
                     </DropdownMenu.Content>
                   </DropdownMenu.Portal>
                 </DropdownMenu>
+                <Tooltip value={language.t("command.session.new")} placement="top">
+                  <IconButton
+                    icon="plus-small"
+                    variant="ghost"
+                    class="size-6 rounded-md opacity-0 pointer-events-none group-hover/workspace:opacity-100 group-hover/workspace:pointer-events-auto group-focus-within/workspace:opacity-100 group-focus-within/workspace:pointer-events-auto"
+                    data-action="workspace-new-session"
+                    data-workspace={base64Encode(props.directory)}
+                    aria-label={language.t("command.session.new")}
+                    onClick={(event) => {
+                      event.preventDefault()
+                      event.stopPropagation()
+                      props.ctx.setHoverSession(undefined)
+                      props.ctx.clearHoverProjectSoon()
+                      navigate(`/${slug()}/session`)
+                    }}
+                  />
+                </Tooltip>
               </div>
             </div>
           </div>
         </div>
 
         <Collapsible.Content>
           <nav class="flex flex-col gap-1 px-2">
-            <NewSessionItem
-              slug={slug()}
-              mobile={props.mobile}
-              sidebarExpanded={props.ctx.sidebarExpanded}
-              clearHoverProjectSoon={props.ctx.clearHoverProjectSoon}
-              setHoverSession={props.ctx.setHoverSession}
-            />
+            <Show when={showNew()}>
+              <NewSessionItem
+                slug={slug()}
+                mobile={props.mobile}
+                sidebarExpanded={props.ctx.sidebarExpanded}
+                clearHoverProjectSoon={props.ctx.clearHoverProjectSoon}
+                setHoverSession={props.ctx.setHoverSession}
+              />
+            </Show>
             <Show when={loading()}>
               <SessionSkeleton />
             </Show>