a very good jj gui
feat: extract reusable hooks for keyboard navigation and repository management
+751
+85
apps/desktop/src/hooks/useAddRepository.ts
+85
apps/desktop/src/hooks/useAddRepository.ts
···
1
+
import { useNavigate } from "@tanstack/react-router";
2
+
import { homeDir } from "@tauri-apps/api/path";
3
+
import { open } from "@tauri-apps/plugin-dialog";
4
+
import { Effect } from "effect";
5
+
import { useState } from "react";
6
+
import { addRepository, repositoriesCollection } from "@/db";
7
+
import { findRepository, findRepositoryByPath, type Repository } from "@/tauri-commands";
8
+
9
+
const openDirectoryDialogEffect = Effect.gen(function* () {
10
+
const home = yield* Effect.tryPromise({
11
+
try: () => homeDir(),
12
+
catch: (error) => new Error(`Failed to get home directory: ${error}`),
13
+
});
14
+
15
+
return yield* Effect.tryPromise({
16
+
try: () =>
17
+
open({
18
+
directory: true,
19
+
multiple: false,
20
+
defaultPath: home,
21
+
title: "Select Repository",
22
+
}),
23
+
catch: (error) => new Error(`Failed to open directory dialog: ${error}`),
24
+
});
25
+
});
26
+
27
+
const findRepositoryEffect = (startPath: string) =>
28
+
Effect.tryPromise({
29
+
try: () => findRepository(startPath),
30
+
catch: (error) => new Error(`Failed to find repository: ${error}`),
31
+
});
32
+
33
+
/**
34
+
* Hook for adding a new repository via directory picker dialog.
35
+
* Returns a handler that opens the dialog and navigates to the project.
36
+
*/
37
+
export function useAddRepository() {
38
+
const navigate = useNavigate();
39
+
const [isAdding, setIsAdding] = useState(false);
40
+
41
+
function handleAddRepository() {
42
+
if (isAdding) return;
43
+
setIsAdding(true);
44
+
45
+
const program = Effect.gen(function* () {
46
+
const selected = yield* openDirectoryDialogEffect;
47
+
if (!selected) return;
48
+
49
+
const repoPath = yield* findRepositoryEffect(selected);
50
+
if (!repoPath) return;
51
+
52
+
const existingRepository = yield* Effect.tryPromise({
53
+
try: () => findRepositoryByPath(repoPath),
54
+
catch: () => null,
55
+
});
56
+
57
+
const repositoryId = existingRepository?.id ?? crypto.randomUUID();
58
+
const name = repoPath.split("/").pop() ?? repoPath;
59
+
60
+
const repository: Repository = {
61
+
id: repositoryId,
62
+
path: repoPath,
63
+
name,
64
+
last_opened_at: Date.now(),
65
+
revset_preset: null,
66
+
};
67
+
68
+
yield* Effect.tryPromise({
69
+
try: () => addRepository(repositoriesCollection, repository),
70
+
catch: (error) => new Error(`Failed to save repository: ${error}`),
71
+
});
72
+
73
+
yield* Effect.sync(() => {
74
+
navigate({ to: "/project/$projectId", params: { projectId: repositoryId } });
75
+
});
76
+
}).pipe(
77
+
Effect.tapError((error) => Effect.logError("handleAddRepository failed", error)),
78
+
Effect.catchAll(() => Effect.void),
79
+
);
80
+
81
+
Effect.runPromise(program).finally(() => setIsAdding(false));
82
+
}
83
+
84
+
return { handleAddRepository, isAdding };
85
+
}
+14
apps/desktop/src/hooks/useAppTitle.ts
+14
apps/desktop/src/hooks/useAppTitle.ts
···
1
+
import { getCurrentWindow } from "@tauri-apps/api/window";
2
+
import { useEffect } from "react";
3
+
4
+
/**
5
+
* Syncs the document title and Tauri window title.
6
+
* Updates both whenever the title changes.
7
+
*/
8
+
export function useAppTitle(title: string) {
9
+
useEffect(() => {
10
+
document.title = title;
11
+
const windowHandle = getCurrentWindow();
12
+
windowHandle.setTitle(title).catch(() => undefined);
13
+
}, [title]);
14
+
}
+73
apps/desktop/src/hooks/useDiffPanelKeyboard.ts
+73
apps/desktop/src/hooks/useDiffPanelKeyboard.ts
···
1
+
import { useAtom } from "@effect-atom/atom-react";
2
+
import type { RefObject } from "react";
3
+
import { focusPanelAtom } from "@/atoms";
4
+
import { useKeyboardShortcut } from "@/hooks/useKeyboard";
5
+
6
+
const SCROLL_AMOUNT = 100;
7
+
8
+
interface UseDiffPanelKeyboardOptions {
9
+
scrollContainerRef: RefObject<HTMLDivElement | null>;
10
+
enabled?: boolean;
11
+
}
12
+
13
+
/**
14
+
* Hook for diff panel keyboard navigation.
15
+
* - j/k/ArrowDown/ArrowUp: scroll the diff panel
16
+
* - h/ArrowLeft: move focus back to revisions panel
17
+
*/
18
+
export function useDiffPanelKeyboard({
19
+
scrollContainerRef,
20
+
enabled = true,
21
+
}: UseDiffPanelKeyboardOptions) {
22
+
const [focusPanel, setFocusPanel] = useAtom(focusPanelAtom);
23
+
const hasDiffFocus = focusPanel === "diff";
24
+
const isEnabled = enabled && hasDiffFocus;
25
+
26
+
// j/k/arrows scroll the diff panel
27
+
useKeyboardShortcut({
28
+
key: "j",
29
+
modifiers: {},
30
+
onPress: () =>
31
+
scrollContainerRef.current?.scrollBy({ top: SCROLL_AMOUNT, behavior: "instant" }),
32
+
enabled: isEnabled,
33
+
});
34
+
35
+
useKeyboardShortcut({
36
+
key: "ArrowDown",
37
+
modifiers: {},
38
+
onPress: () =>
39
+
scrollContainerRef.current?.scrollBy({ top: SCROLL_AMOUNT, behavior: "instant" }),
40
+
enabled: isEnabled,
41
+
});
42
+
43
+
useKeyboardShortcut({
44
+
key: "k",
45
+
modifiers: {},
46
+
onPress: () =>
47
+
scrollContainerRef.current?.scrollBy({ top: -SCROLL_AMOUNT, behavior: "instant" }),
48
+
enabled: isEnabled,
49
+
});
50
+
51
+
useKeyboardShortcut({
52
+
key: "ArrowUp",
53
+
modifiers: {},
54
+
onPress: () =>
55
+
scrollContainerRef.current?.scrollBy({ top: -SCROLL_AMOUNT, behavior: "instant" }),
56
+
enabled: isEnabled,
57
+
});
58
+
59
+
// h/ArrowLeft to move focus back to revisions panel
60
+
useKeyboardShortcut({
61
+
key: "h",
62
+
modifiers: {},
63
+
onPress: () => setFocusPanel("revisions"),
64
+
enabled: isEnabled,
65
+
});
66
+
67
+
useKeyboardShortcut({
68
+
key: "ArrowLeft",
69
+
modifiers: {},
70
+
onPress: () => setFocusPanel("revisions"),
71
+
enabled: isEnabled,
72
+
});
73
+
}