puter/paseo
1
0
Fork 0
mirror of https://github.com/getpaseo/paseo.git synced 2026-07-29 12:01:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(app): add project picker modal and simplify open project screen

Browse Source
This commit is contained in:
Mohamed Boudra
2026-03-07 21:33:13 +07:00
parent 7d76da3249
commit 356faa0563
8 changed files with 462 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/app/src/app/_layout.tsx
View File

@@ -34,6 +34,7 @@ import {
} from "@/contexts/horizontal-scroll-context";
import { getIsTauri } from "@/constants/layout";
import { CommandCenter } from "@/components/command-center";
import { ProjectPickerModal } from "@/components/project-picker-modal";
import { KeyboardShortcutsDialog } from "@/components/keyboard-shortcuts-dialog";
import { useKeyboardShortcuts } from "@/hooks/use-keyboard-shortcuts";
import { queryClient } from "@/query/query-client";
@@ -286,6 +287,7 @@ function AppContainer({ children, selectedAgentId }: AppContainerProps) {
{isMobile && chromeEnabled && <LeftSidebar selectedAgentId={selectedAgentId} />}
<DownloadToast />
<CommandCenter />
<ProjectPickerModal />
<KeyboardShortcutsDialog />
</View>
);

17
packages/app/src/components/icons/paseo-logo.tsx Normal file
View File

@@ -0,0 +1,17 @@
import Svg, { Path } from "react-native-svg";
interface PaseoLogoProps {
size?: number;
color?: string;
}
export function PaseoLogo({ size = 64, color = "white" }: PaseoLogoProps) {
return (
<Svg width={size} height={size} viewBox="0 0 700 700" fill="none">
<Path
d="M291.495 91.399C333.897 104.892 379.155 135.075 416.229 173.191C453.389 211.394 484.429 259.725 495.708 311.251C497.555 319.693 498.865 328.216 499.586 336.776C509.755 326.554 519.867 317.815 529.89 311.547C540.647 304.821 553.808 299.297 568.641 299.785C584.29 300.299 597.395 307.326 607.747 317.632C632.173 341.947 629.612 372.898 619.872 397.936C610.185 422.833 591.557 447.826 572.732 469.124C553.591 490.78 532.713 510.308 516.779 524.318C508.775 531.355 501.936 537.073 497.07 541.052C494.635 543.043 492.689 544.603 491.334 545.679C490.657 546.217 490.126 546.635 489.756 546.926C489.571 547.071 489.425 547.184 489.321 547.265C489.269 547.305 489.227 547.338 489.196 547.362C489.181 547.374 489.168 547.385 489.157 547.393C489.153 547.397 489.147 547.401 489.144 547.403C489.134 547.4 488.837 547.06 473.001 528.499L489.135 547.411C478.157 555.911 462.033 554.334 453.122 543.89C444.213 533.448 445.887 518.094 456.861 509.592C456.863 509.591 456.865 509.588 456.869 509.586C456.88 509.577 456.902 509.561 456.933 509.536C456.997 509.487 457.101 509.404 457.245 509.292C457.533 509.066 457.979 508.715 458.569 508.247C459.749 507.31 461.506 505.901 463.742 504.073C468.216 500.414 474.589 495.088 482.073 488.508C497.114 475.284 516.315 457.282 533.578 437.75C551.157 417.862 565.26 398.01 571.859 381.048C578.403 364.227 575.681 356.302 570.724 351.367C568.928 349.579 567.744 348.902 567.267 348.676C566.888 348.496 566.811 348.52 566.804 348.52C566.605 348.513 563.971 348.537 557.953 352.3C545.161 360.299 528.815 377.492 506.807 403.867C494.927 418.106 481.871 434.435 467.547 451.957C463.709 457.28 459.503 462.538 454.91 467.717L454.702 467.549C420.808 508.347 380.37 553.856 332.335 593.848C301.853 619.226 262.656 622.597 228.642 614.743C194.834 606.936 162.658 587.448 142.217 561.686C108.054 518.631 100.57 469.801 108.223 427.836C115.56 387.606 137.391 351.005 166.502 331.557C161.248 315.813 156.813 299.49 153.519 283.013C142.593 228.368 143.239 167.031 174.28 119.619C186.922 100.31 205.846 89.1535 227.387 85.2773C248.1 81.5504 270.278 84.648 291.495 91.399ZM378.642 206.356C345.773 172.563 307.463 147.917 275.208 137.654C259.096 132.527 246.171 131.514 236.828 133.195C228.314 134.727 222.227 138.497 217.721 145.38C196.712 177.468 193.858 224.004 203.82 273.827C206.532 287.394 210.127 300.834 214.345 313.817C236.45 310.276 260.156 311.463 281.22 317.11C319.621 327.403 357.501 355.419 357.501 405.654C357.501 435.255 339.111 465.136 307.278 473.815C273.211 483.103 238.854 464.822 213.105 427.541C203.716 413.947 194.443 397.766 185.947 379.89C174.028 392.223 163.08 411.953 158.673 436.118C153.128 466.518 158.514 501.286 183.085 532.253C195.993 548.522 217.742 562.031 240.771 567.349C263.594 572.619 284.147 569.24 298.664 557.154C349.383 514.927 390.709 466.547 426.366 422.952C448.879 390.86 453.195 356.06 445.578 321.265C436.703 280.718 411.425 240.06 378.642 206.356ZM306.296 405.722C306.296 384.769 292.223 370.736 267.284 364.051C256.012 361.03 244.156 360.087 233.095 360.771C240.361 375.935 248.168 389.513 255.897 400.704C275.647 429.298 289.989 427.822 293.247 426.934C298.737 425.437 306.296 418.161 306.296 405.722Z"
fill={color}
/>
</Svg>
);
}

17
packages/app/src/components/left-sidebar.tsx
View File

@@ -25,11 +25,11 @@ import { formatConnectionStatus } from '@/utils/daemons'
import { HEADER_INNER_HEIGHT, HEADER_INNER_HEIGHT_MOBILE } from '@/constants/layout'
import {
buildHostAgentsRoute,
buildHostOpenProjectRoute,
buildHostSettingsRoute,
mapPathnameToServer,
parseServerIdFromPathname,
} from '@/utils/host-routes'
import { useKeyboardShortcutsStore } from '@/stores/keyboard-shortcuts-store'
const DESKTOP_SIDEBAR_WIDTH = 320
const IS_DEV = Boolean((globalThis as { __DEV__?: boolean }).__DEV__)
@@ -158,21 +158,16 @@ export function LeftSidebar({ selectedAgentId: _selectedAgentId }: LeftSidebarPr
closeToAgent()
}, [closeToAgent])
const handleOpenProject = useCallback(() => {
if (!activeServerId) {
return
}
router.push(buildHostOpenProjectRoute(activeServerId) as any)
}, [activeServerId])
const setProjectPickerOpen = useKeyboardShortcutsStore((s) => s.setProjectPickerOpen)
const handleOpenProjectMobile = useCallback(() => {
closeToAgent()
handleOpenProject()
}, [closeToAgent, handleOpenProject])
setProjectPickerOpen(true)
}, [closeToAgent, setProjectPickerOpen])
const handleOpenProjectDesktop = useCallback(() => {
handleOpenProject()
}, [handleOpenProject])
setProjectPickerOpen(true)
}, [setProjectPickerOpen])
// Mobile: close sidebar and navigate
const handleSettingsMobile = useCallback(() => {

379
packages/app/src/components/project-picker-modal.tsx Normal file
View File

@@ -0,0 +1,379 @@
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import {
Modal,
Pressable,
ScrollView,
Text,
TextInput,
View,
Platform,
} from "react-native";
import { Folder } from "lucide-react-native";
import { StyleSheet, useUnistyles } from "react-native-unistyles";
import { useQuery } from "@tanstack/react-query";
import { router, usePathname } from "expo-router";
import { useKeyboardShortcutsStore } from "@/stores/keyboard-shortcuts-store";
import {
normalizeWorkspaceDescriptor,
useSessionStore,
} from "@/stores/session-store";
import { useDaemonRegistry } from "@/contexts/daemon-registry-context";
import { useHostRuntimeSession } from "@/runtime/host-runtime";
import { useToast } from "@/contexts/toast-context";
import { parseServerIdFromPathname } from "@/utils/host-routes";
import { buildHostWorkspaceRouteWithOpenIntent } from "@/utils/host-routes";
import { buildWorkingDirectorySuggestions } from "@/utils/working-directory-suggestions";
export function ProjectPickerModal() {
const { theme } = useUnistyles();
const toast = useToast();
const pathname = usePathname();
const { daemons } = useDaemonRegistry();
const open = useKeyboardShortcutsStore((s) => s.projectPickerOpen);
const setOpen = useKeyboardShortcutsStore((s) => s.setProjectPickerOpen);
const serverId = useMemo(() => {
const fromPath = parseServerIdFromPathname(pathname);
if (fromPath) return fromPath;
return daemons[0]?.serverId ?? null;
}, [pathname, daemons]);
const { client, isConnected } = useHostRuntimeSession(serverId ?? "");
const workspaces = useSessionStore((state) =>
serverId ? state.sessions[serverId]?.workspaces : undefined
);
const mergeWorkspaces = useSessionStore((state) => state.mergeWorkspaces);
const setHasHydratedWorkspaces = useSessionStore(
(state) => state.setHasHydratedWorkspaces
);
const inputRef = useRef<TextInput>(null);
const [query, setQuery] = useState("");
const [activeIndex, setActiveIndex] = useState(0);
const [isSubmitting, setIsSubmitting] = useState(false);
const recommendedPaths = useMemo(() => {
if (!workspaces) return [];
return Array.from(workspaces.values()).map(
(workspace) => workspace.projectRootPath || workspace.id
);
}, [workspaces]);
const directorySuggestionsQuery = useQuery({
queryKey: ["project-picker-directory-suggestions", serverId, query],
queryFn: async () => {
if (!client) return [];
const result = await client.getDirectorySuggestions({
query,
includeDirectories: true,
includeFiles: false,
limit: 30,
});
return (
result.entries?.flatMap((entry) =>
entry.kind === "directory" ? [entry.path] : []
) ?? []
);
},
enabled: Boolean(client) && isConnected && open,
staleTime: 15_000,
retry: false,
});
const options = useMemo(
() =>
buildWorkingDirectorySuggestions({
recommendedPaths,
serverPaths: directorySuggestionsQuery.data ?? [],
query,
}),
[query, directorySuggestionsQuery.data, recommendedPaths]
);
const handleClose = useCallback(() => {
setOpen(false);
}, [setOpen]);
const handleSelectPath = useCallback(
async (path: string) => {
const trimmed = path.trim();
if (!trimmed || !client || !serverId) return;
setIsSubmitting(true);
try {
const payload = await client.openProject(trimmed);
if (payload.error || !payload.workspace) {
throw new Error(payload.error || "Failed to open project");
}
mergeWorkspaces(serverId, [
normalizeWorkspaceDescriptor(payload.workspace),
]);
setHasHydratedWorkspaces(serverId, true);
setOpen(false);
router.replace(
buildHostWorkspaceRouteWithOpenIntent(
serverId,
payload.workspace.id,
{ kind: "draft", draftId: "new" }
) as any
);
} catch (error) {
toast.error(
error instanceof Error ? error.message : "Failed to open project"
);
} finally {
setIsSubmitting(false);
}
},
[client, mergeWorkspaces, serverId, setHasHydratedWorkspaces, setOpen, toast]
);
const handleSubmitCustom = useCallback(() => {
const trimmed = query.trim();
if (!trimmed) return;
void handleSelectPath(trimmed);
}, [handleSelectPath, query]);
// Reset state when opening/closing
useEffect(() => {
if (open) {
setQuery("");
setActiveIndex(0);
const id = setTimeout(() => inputRef.current?.focus(), 0);
return () => clearTimeout(id);
}
}, [open]);
// Clamp active index
useEffect(() => {
if (!open) return;
if (activeIndex >= options.length) {
setActiveIndex(options.length > 0 ? options.length - 1 : 0);
}
}, [activeIndex, options.length, open]);
// Keyboard navigation
useEffect(() => {
if (!open) return;
function handler(event: KeyboardEvent) {
const key = event.key;
if (
key !== "ArrowDown" &&
key !== "ArrowUp" &&
key !== "Enter" &&
key !== "Escape"
)
return;
if (key === "Escape") {
event.preventDefault();
setOpen(false);
return;
}
if (key === "Enter") {
event.preventDefault();
if (options.length > 0 && activeIndex < options.length) {
void handleSelectPath(options[activeIndex]!);
} else if (query.trim()) {
handleSubmitCustom();
}
return;
}
if (key === "ArrowDown" || key === "ArrowUp") {
if (options.length === 0) return;
event.preventDefault();
setActiveIndex((current) => {
const delta = key === "ArrowDown" ? 1 : -1;
const next = current + delta;
if (next < 0) return options.length - 1;
if (next >= options.length) return 0;
return next;
});
}
}
window.addEventListener("keydown", handler, true);
return () => window.removeEventListener("keydown", handler, true);
}, [activeIndex, handleSelectPath, handleSubmitCustom, open, options, query, setOpen]);
if (Platform.OS !== "web") return null;
if (!serverId) return null;
return (
<Modal
visible={open}
transparent
animationType="fade"
onRequestClose={handleClose}
>
<View style={styles.overlay}>
<Pressable style={styles.backdrop} onPress={handleClose} />
<View
style={[
styles.panel,
{
borderColor: theme.colors.border,
backgroundColor: theme.colors.surface0,
},
]}
>
<View
style={[styles.header, { borderBottomColor: theme.colors.border }]}
>
<TextInput
ref={inputRef}
value={query}
onChangeText={(text) => {
setQuery(text);
setActiveIndex(0);
}}
placeholder="Type a directory path..."
placeholderTextColor={theme.colors.foregroundMuted}
style={[styles.input, { color: theme.colors.foreground }]}
autoCapitalize="none"
autoCorrect={false}
autoFocus
editable={!isSubmitting}
/>
</View>
<ScrollView
style={styles.results}
contentContainerStyle={styles.resultsContent}
keyboardShouldPersistTaps="always"
showsVerticalScrollIndicator={false}
>
{isSubmitting ? (
<Text
style={[
styles.emptyText,
{ color: theme.colors.foregroundMuted },
]}
>
Opening project...
</Text>
) : options.length === 0 && !query.trim() ? (
<Text
style={[
styles.emptyText,
{ color: theme.colors.foregroundMuted },
]}
>
Start typing a path
</Text>
) : (
<>
{options.map((path, index) => {
const active = index === activeIndex;
return (
<Pressable
key={path}
style={({ hovered, pressed }) => [
styles.row,
(hovered || pressed || active) && {
backgroundColor: theme.colors.surface1,
},
]}
onPress={() => void handleSelectPath(path)}
>
<View style={styles.rowContent}>
<View style={styles.iconSlot}>
<Folder
size={16}
strokeWidth={2.2}
color={theme.colors.foregroundMuted}
/>
</View>
<Text
style={[
styles.rowText,
{ color: theme.colors.foreground },
]}
numberOfLines={1}
>
{path}
</Text>
</View>
</Pressable>
);
})}
</>
)}
</ScrollView>
</View>
</View>
</Modal>
);
}
const styles = StyleSheet.create((theme) => ({
overlay: {
flex: 1,
justifyContent: "flex-start",
alignItems: "center",
paddingTop: theme.spacing[12],
},
backdrop: {
...StyleSheet.absoluteFillObject,
backgroundColor: "rgba(0, 0, 0, 0.5)",
},
panel: {
width: 640,
maxWidth: "92%",
maxHeight: "80%",
borderWidth: 1,
borderRadius: theme.borderRadius.lg,
overflow: "hidden",
shadowColor: "#000",
shadowOpacity: 0.4,
shadowRadius: 24,
shadowOffset: { width: 0, height: 12 },
},
header: {
paddingHorizontal: theme.spacing[4],
paddingVertical: theme.spacing[3],
borderBottomWidth: 1,
},
input: {
fontSize: theme.fontSize.lg,
paddingVertical: theme.spacing[1],
outlineStyle: "none",
} as any,
results: {
flexGrow: 0,
},
resultsContent: {
paddingVertical: theme.spacing[2],
},
row: {
paddingHorizontal: theme.spacing[4],
paddingVertical: theme.spacing[2],
},
rowContent: {
flexDirection: "row",
alignItems: "center",
gap: theme.spacing[3],
},
iconSlot: {
width: 16,
height: 20,
alignItems: "center",
justifyContent: "center",
},
rowText: {
fontSize: theme.fontSize.base,
fontWeight: "400",
lineHeight: 20,
flexShrink: 1,
},
emptyText: {
paddingHorizontal: theme.spacing[4],
paddingVertical: theme.spacing[4],
fontSize: theme.fontSize.base,
},
}));

10
packages/app/src/hooks/use-command-center.ts
View File

@@ -185,12 +185,18 @@ export function useCommandCenter() {
[pathname, setOpen]
);
const setProjectPickerOpen = useKeyboardShortcutsStore((s) => s.setProjectPickerOpen);
const handleSelectAction = useCallback((action: CommandCenterActionItem) => {
didNavigateRef.current = true;
clearCommandCenterFocusRestoreElement();
setOpen(false);
if (action.id === "new-agent") {
setProjectPickerOpen(true);
return;
}
didNavigateRef.current = true;
router.push(action.route);
}, [setOpen]);
}, [setOpen, setProjectPickerOpen]);
const handleSelectItem = useCallback(
(item: CommandCenterItem) => {

20
packages/app/src/hooks/use-keyboard-shortcuts.ts
View File

@@ -2,15 +2,12 @@ import { useEffect } from "react";
import { Platform } from "react-native";
import { usePathname, useRouter } from "expo-router";
import { getIsTauri } from "@/constants/layout";
import { useSessionStore } from "@/stores/session-store";
import { useKeyboardShortcutsStore } from "@/stores/keyboard-shortcuts-store";
import { setCommandCenterFocusRestoreElement } from "@/utils/command-center-focus-restore";
import {
buildHostOpenProjectRoute,
buildHostWorkspaceRoute,
parseHostAgentRouteFromPathname,
parseHostWorkspaceRouteFromPathname,
parseServerIdFromPathname,
} from "@/utils/host-routes";
import {
type MessageInputKeyboardActionKind,
@@ -99,19 +96,8 @@ export function useKeyboardShortcuts({
return true;
};
const navigateToOpenProject = (): boolean => {
let targetServerId = parseServerIdFromPathname(pathname);
if (!targetServerId) {
const sessionServerIds = Object.keys(useSessionStore.getState().sessions);
targetServerId = sessionServerIds[0] ?? null;
}
if (!targetServerId) {
return false;
}
router.push(buildHostOpenProjectRoute(targetServerId) as any);
const openProjectPicker = (): boolean => {
useKeyboardShortcutsStore.getState().setProjectPickerOpen(true);
return true;
};
@@ -171,7 +157,7 @@ export function useKeyboardShortcuts({
}): boolean => {
switch (input.action) {
case "agent.new":
return navigateToOpenProject();
return openProjectPicker();
case "workspace.tab.new":
return requestWorkspaceTabAction({ kind: "new" });
case "workspace.tab.close.current":

220
packages/app/src/screens/open-project-screen.tsx
View File

@@ -1,160 +1,32 @@
import { useCallback, useMemo, useRef, useState } from "react";
import { View, Text, ScrollView } from "react-native";
import { useQuery } from "@tanstack/react-query";
import { router } from "expo-router";
import { FolderOpen } from "lucide-react-native";
import { View, Text, Pressable } from "react-native";
import { StyleSheet, useUnistyles } from "react-native-unistyles";
import { FormSelectTrigger } from "@/components/agent-form/agent-form-dropdowns";
import { Button } from "@/components/ui/button";
import { Combobox } from "@/components/ui/combobox";
import { useToast } from "@/contexts/toast-context";
import { useHostRuntimeSession } from "@/runtime/host-runtime";
import {
normalizeWorkspaceDescriptor,
useSessionStore,
} from "@/stores/session-store";
import { buildHostWorkspaceRouteWithOpenIntent } from "@/utils/host-routes";
import { buildWorkingDirectorySuggestions } from "@/utils/working-directory-suggestions";
import { FolderOpen } from "lucide-react-native";
import { PaseoLogo } from "@/components/icons/paseo-logo";
import { useKeyboardShortcutsStore } from "@/stores/keyboard-shortcuts-store";
export function OpenProjectScreen({ serverId }: { serverId: string }) {
export function OpenProjectScreen({ serverId: _serverId }: { serverId: string }) {
const { theme } = useUnistyles();
const toast = useToast();
const { client, isConnected } = useHostRuntimeSession(serverId);
const workspaces = useSessionStore((state) => state.sessions[serverId]?.workspaces);
const mergeWorkspaces = useSessionStore((state) => state.mergeWorkspaces);
const setHasHydratedWorkspaces = useSessionStore((state) => state.setHasHydratedWorkspaces);
const [isDirectoryPickerOpen, setIsDirectoryPickerOpen] = useState(false);
const [directoryQuery, setDirectoryQuery] = useState("");
const [selectedPath, setSelectedPath] = useState("");
const [isSubmitting, setIsSubmitting] = useState(false);
const directoryAnchorRef = useRef<View>(null);
const recommendedPaths = useMemo(() => {
if (!workspaces) {
return [];
}
return Array.from(workspaces.values()).map((workspace) => workspace.projectRootPath || workspace.id);
}, [workspaces]);
const directorySuggestionsQuery = useQuery({
queryKey: ["open-project-directory-suggestions", serverId, directoryQuery],
queryFn: async () => {
if (!client) {
return [];
}
const result = await client.getDirectorySuggestions({
query: directoryQuery,
includeDirectories: true,
includeFiles: false,
limit: 30,
});
return result.entries?.flatMap((entry) =>
entry.kind === "directory" ? [entry.path] : []
) ?? [];
},
enabled: Boolean(client) && isConnected,
staleTime: 15_000,
retry: false,
});
const directoryOptions = useMemo(
() =>
buildWorkingDirectorySuggestions({
recommendedPaths,
serverPaths: directorySuggestionsQuery.data ?? [],
query: directoryQuery,
}).map((path) => ({
id: path,
label: path,
kind: "directory" as const,
})),
[directoryQuery, directorySuggestionsQuery.data, recommendedPaths]
const setProjectPickerOpen = useKeyboardShortcutsStore(
(s) => s.setProjectPickerOpen
);
const handleOpenProject = useCallback(async () => {
const trimmedPath = selectedPath.trim();
if (!trimmedPath) {
toast.error("Choose a project directory");
return;
}
if (!client) {
toast.error("Host is not connected");
return;
}
setIsSubmitting(true);
try {
const payload = await client.openProject(trimmedPath);
if (payload.error || !payload.workspace) {
throw new Error(payload.error || "Failed to open project");
}
mergeWorkspaces(serverId, [normalizeWorkspaceDescriptor(payload.workspace)]);
setHasHydratedWorkspaces(serverId, true);
router.replace(
buildHostWorkspaceRouteWithOpenIntent(serverId, payload.workspace.id, {
kind: "draft",
draftId: "new",
}) as any
);
} catch (error) {
toast.error(error instanceof Error ? error.message : "Failed to open project");
} finally {
setIsSubmitting(false);
}
}, [client, mergeWorkspaces, selectedPath, serverId, setHasHydratedWorkspaces, toast]);
return (
<View style={styles.container}>
<ScrollView contentContainerStyle={styles.content}>
<View style={styles.card}>
<Text style={styles.eyebrow}>Workspace Registry</Text>
<Text style={styles.title}>Open project</Text>
<Text style={styles.subtitle}>
Add a local folder to the sidebar, then land inside its workspace draft tab.
</Text>
<FormSelectTrigger
controlRef={directoryAnchorRef}
containerStyle={styles.selector}
label="Project directory"
value={selectedPath}
placeholder="Choose a project directory"
onPress={() => setIsDirectoryPickerOpen(true)}
icon={<FolderOpen size={theme.iconSize.md} color={theme.colors.foregroundMuted} />}
showLabel={false}
valueEllipsizeMode="middle"
testID="open-project-directory-trigger"
/>
<View style={styles.actions}>
<Button
variant="default"
onPress={() => void handleOpenProject()}
disabled={isSubmitting || !isConnected}
testID="open-project-submit"
>
{isSubmitting ? "Opening..." : "Open project"}
</Button>
</View>
</View>
</ScrollView>
<Combobox
options={directoryOptions}
value={selectedPath}
onSelect={setSelectedPath}
onSearchQueryChange={setDirectoryQuery}
searchPlaceholder="Search directories..."
emptyText="No directories found"
allowCustomValue
customValuePrefix=""
customValueKind="directory"
optionsPosition="above-search"
title="Project directory"
open={isDirectoryPickerOpen}
onOpenChange={setIsDirectoryPickerOpen}
anchorRef={directoryAnchorRef}
/>
<View style={styles.content}>
<PaseoLogo size={56} />
<Text style={styles.heading}>What shall we build today?</Text>
<Pressable
style={({ hovered }) => [
styles.openButton,
hovered && styles.openButtonHovered,
]}
onPress={() => setProjectPickerOpen(true)}
testID="open-project-submit"
>
<FolderOpen size={16} color={theme.colors.foregroundMuted} />
<Text style={styles.openButtonText}>Open a project</Text>
</Pressable>
</View>
</View>
);
}
@@ -167,40 +39,34 @@ const styles = StyleSheet.create((theme) => ({
content: {
flexGrow: 1,
justifyContent: "center",
alignItems: "center",
gap: theme.spacing[6],
padding: theme.spacing[6],
},
card: {
alignSelf: "center",
width: "100%",
maxWidth: 560,
gap: theme.spacing[4],
padding: theme.spacing[6],
borderRadius: theme.borderRadius.xl,
backgroundColor: theme.colors.surface1,
heading: {
color: theme.colors.foreground,
fontSize: theme.fontSize["2xl"],
fontWeight: theme.fontWeight.normal,
textAlign: "center",
},
openButton: {
flexDirection: "row",
alignItems: "center",
gap: theme.spacing[2],
paddingVertical: theme.spacing[3],
paddingHorizontal: theme.spacing[4],
borderRadius: theme.borderRadius.lg,
borderWidth: 1,
borderColor: theme.colors.border,
backgroundColor: "transparent",
},
eyebrow: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
textTransform: "uppercase",
letterSpacing: 1,
openButtonHovered: {
borderColor: theme.colors.borderAccent,
backgroundColor: theme.colors.surface1,
},
title: {
color: theme.colors.foreground,
fontSize: theme.fontSize["3xl"],
fontWeight: theme.fontWeight.semibold,
},
subtitle: {
openButtonText: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
lineHeight: 20,
},
selector: {
minHeight: 64,
},
actions: {
flexDirection: "row",
justifyContent: "flex-start",
fontWeight: theme.fontWeight.normal,
},
}));

4
packages/app/src/stores/keyboard-shortcuts-store.ts
View File

@@ -25,6 +25,7 @@ export type WorkspaceTabActionRequest =
interface KeyboardShortcutsState {
commandCenterOpen: boolean;
projectPickerOpen: boolean;
shortcutsDialogOpen: boolean;
altDown: boolean;
cmdOrCtrlDown: boolean;
@@ -36,6 +37,7 @@ interface KeyboardShortcutsState {
nextWorkspaceTabActionRequestId: number;
setCommandCenterOpen: (open: boolean) => void;
setProjectPickerOpen: (open: boolean) => void;
setShortcutsDialogOpen: (open: boolean) => void;
setAltDown: (down: boolean) => void;
setCmdOrCtrlDown: (down: boolean) => void;
@@ -67,6 +69,7 @@ interface KeyboardShortcutsState {
export const useKeyboardShortcutsStore = create<KeyboardShortcutsState>(
(set, get) => ({
commandCenterOpen: false,
projectPickerOpen: false,
shortcutsDialogOpen: false,
altDown: false,
cmdOrCtrlDown: false,
@@ -76,6 +79,7 @@ export const useKeyboardShortcutsStore = create<KeyboardShortcutsState>(
nextWorkspaceTabActionRequestId: 1,
setCommandCenterOpen: (open) => set({ commandCenterOpen: open }),
setProjectPickerOpen: (open) => set({ projectPickerOpen: open }),
setShortcutsDialogOpen: (open) => set({ shortcutsDialogOpen: open }),
setAltDown: (down) => set({ altDown: down }),
setCmdOrCtrlDown: (down) => set({ cmdOrCtrlDown: down }),