a very good jj gui
feat: add settings command to command palette
+34
-7
+12
-2
apps/desktop/src/components/CommandPalette.tsx
+12
-2
apps/desktop/src/components/CommandPalette.tsx
···
1
-
import { Folder, Settings } from "lucide-react";
1
+
import { Folder, Settings, SlidersHorizontal } from "lucide-react";
2
2
import { useState } from "react";
3
3
import {
4
4
CommandDialog,
···
13
13
interface CommandPaletteProps {
14
14
onOpenRepo: () => void;
15
15
onOpenProjects: () => void;
16
+
onOpenSettings: () => void;
16
17
}
17
18
18
-
export function CommandPalette({ onOpenRepo, onOpenProjects }: CommandPaletteProps) {
19
+
export function CommandPalette({ onOpenRepo, onOpenProjects, onOpenSettings }: CommandPaletteProps) {
19
20
const [open, setOpen] = useState(false);
20
21
21
22
useKeyboardShortcut({
···
34
35
setOpen(false);
35
36
};
36
37
38
+
const handleOpenSettings = () => {
39
+
onOpenSettings();
40
+
setOpen(false);
41
+
};
42
+
37
43
return (
38
44
<CommandDialog open={open} onOpenChange={setOpen}>
39
45
<CommandInput placeholder="Search actions..." />
···
47
53
<CommandItem onSelect={handleOpenProjects}>
48
54
<Settings className="mr-2 h-4 w-4" />
49
55
<span>Manage repositories...</span>
56
+
</CommandItem>
57
+
<CommandItem onSelect={handleOpenSettings}>
58
+
<SlidersHorizontal className="mr-2 h-4 w-4" />
59
+
<span>Settings</span>
50
60
</CommandItem>
51
61
</CommandGroup>
52
62
</CommandList>
+22
-5
apps/desktop/src/routes/settings.tsx
+22
-5
apps/desktop/src/routes/settings.tsx
···
1
1
import { createRoute, useNavigate } from "@tanstack/react-router";
2
+
import { ArrowLeft } from "lucide-react";
2
3
import { useKeyboardShortcut } from "@/hooks/useKeyboard";
3
4
import { Route as rootRoute } from "./__root";
4
5
···
17
18
});
18
19
19
20
return (
20
-
<div className="flex flex-col h-screen p-6">
21
-
<h1 className="text-lg font-medium mb-4">Settings</h1>
22
-
<p className="text-muted-foreground text-sm">
23
-
Settings will be available in a future update.
24
-
</p>
21
+
<div className="flex flex-col h-screen bg-background">
22
+
{/* Header */}
23
+
<div className="flex items-center gap-3 px-6 py-4 border-b border-border">
24
+
<button
25
+
type="button"
26
+
onClick={() => navigate({ to: "/" })}
27
+
className="p-2 -ml-2 rounded-lg hover:bg-accent/50 transition-colors"
28
+
>
29
+
<ArrowLeft className="w-5 h-5" />
30
+
</button>
31
+
<h1 className="text-lg font-medium">Settings</h1>
32
+
</div>
33
+
34
+
{/* Content */}
35
+
<div className="flex-1 overflow-auto p-6">
36
+
<div className="max-w-2xl space-y-8">
37
+
<div className="text-muted-foreground text-sm">
38
+
Settings coming soon...
39
+
</div>
40
+
</div>
41
+
</div>
25
42
</div>
26
43
);
27
44
}