Skip to content

Commit 69469f4

Browse files
mreshankmreshank
committed
feat: Implement keyboard shortcuts and add PWA manifest with updated app icons.
1 parent baf0012 commit 69469f4

10 files changed

Lines changed: 514 additions & 3 deletions

File tree

‎apps/web/public/web-app-manifest-192x192.png‎

46.1 KB
Loading

‎apps/web/public/web-app-manifest-512x512.png‎

243 KB
Loading

‎apps/web/src/app/apple-icon.png‎

-388 KB
Loading

‎apps/web/src/app/favicon.ico‎

12.7 KB
Binary file not shown.

‎apps/web/src/app/icon0.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎apps/web/src/app/icon1.png‎

24 KB
Loading

‎apps/web/src/app/manifest.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "Notater Music Studio",
3+
"short_name": "Notater",
4+
"icons": [
5+
{
6+
"src": "/web-app-manifest-192x192.png",
7+
"sizes": "192x192",
8+
"type": "image/png",
9+
"purpose": "maskable"
10+
},
11+
{
12+
"src": "/web-app-manifest-512x512.png",
13+
"sizes": "512x512",
14+
"type": "image/png",
15+
"purpose": "maskable"
16+
}
17+
],
18+
"theme_color": "#da43f1",
19+
"background_color": "#0a0a0c",
20+
"display": "standalone"
21+
}

‎apps/web/src/app/studio/page.tsx‎

Lines changed: 36 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
"use client";
2-
import { useCallback, useMemo } from "react";
2+
import { useCallback, useMemo, useState, useEffect } from "react";
33
import { useSearchParams, useRouter } from "next/navigation";
44
// import { useStore } from "@/lib/store"; // Removed unused import
55
import { StudioHeader } from "@/components/StudioHeader";
66
import { LooperPanel } from "@/components/LooperPanel";
77
import { StudioHome } from "@/components/StudioHome";
88
import { StudioNav, ViewMode } from "@/components/StudioNav";
99
import { StudioErrorBoundary } from "@/components/StudioErrorBoundary";
10+
import { KeyboardShortcutsModal } from "@/components/KeyboardShortcutsModal";
11+
import { useKeyboardShortcuts } from "@/hooks/useKeyboardShortcuts";
1012
import { motion, AnimatePresence } from "framer-motion";
1113
import { Loader2 } from "lucide-react";
1214
import dynamic from "next/dynamic";
@@ -38,6 +40,7 @@ const VALID_VIEWS: ViewMode[] = ["home", "keys", "drums", "seq", "piano", "mix"]
3840
export default function StudioPage() {
3941
const searchParams = useSearchParams();
4042
const router = useRouter();
43+
const [showShortcuts, setShowShortcuts] = useState(false);
4144

4245
// Get the active view from URL, default to "home"
4346
const activeView = useMemo(() => {
@@ -56,8 +59,38 @@ export default function StudioPage() {
5659
router.push(`/studio?tab=${view}`, { scroll: false });
5760
}
5861
}, [router]);
62+
63+
// Looper panel visibility state
64+
const [showLooper, setShowLooper] = useState(true);
65+
66+
// Initialize keyboard shortcuts
67+
const { shortcuts } = useKeyboardShortcuts({
68+
onNavigate: (view) => setActiveView(view as ViewMode),
69+
onShowShortcuts: () => setShowShortcuts(true),
70+
onToggleLooper: () => setShowLooper(prev => !prev),
71+
activeView,
72+
});
73+
74+
// Close modal on Escape
75+
useEffect(() => {
76+
const handleEscape = (e: KeyboardEvent) => {
77+
if (e.key === "Escape" && showShortcuts) {
78+
setShowShortcuts(false);
79+
}
80+
};
81+
window.addEventListener("keydown", handleEscape);
82+
return () => window.removeEventListener("keydown", handleEscape);
83+
}, [showShortcuts]);
84+
5985
return (
6086
<div className="h-full w-full flex flex-col bg-background transition-colors duration-500">
87+
{/* Keyboard Shortcuts Modal */}
88+
<KeyboardShortcutsModal
89+
isOpen={showShortcuts}
90+
onClose={() => setShowShortcuts(false)}
91+
shortcuts={shortcuts}
92+
/>
93+
6194
{/* Global Studio Header */}
6295
<StudioHeader />
6396

@@ -151,8 +184,8 @@ export default function StudioPage() {
151184
</div>
152185
</main>
153186

154-
{/* Global Looper Panel */}
155-
<LooperPanel />
187+
{/* Global Looper Panel - Toggle with 'L' key */}
188+
{showLooper && <LooperPanel />}
156189
</div>
157190

158191
{/* Bottom Control / Nav */}

‎apps/web/src/components/KeyboardShortcutsModal.tsx‎

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
"use client";
2+
3+
import { motion, AnimatePresence } from "framer-motion";
4+
import { X, Keyboard, Zap, FolderOpen, Edit3, Compass, Eye, Command, Info } from "lucide-react";
5+
import { Shortcut, formatShortcutKey } from "@/hooks/useKeyboardShortcuts";
6+
7+
interface KeyboardShortcutsModalProps {
8+
isOpen: boolean;
9+
onClose: () => void;
10+
shortcuts: Shortcut[];
11+
}
12+
13+
const categoryConfig = {
14+
transport: { label: "Transport", icon: Zap, color: "text-green-400", bg: "bg-green-500/10" },
15+
file: { label: "File", icon: FolderOpen, color: "text-blue-400", bg: "bg-blue-500/10" },
16+
edit: { label: "Edit", icon: Edit3, color: "text-yellow-400", bg: "bg-yellow-500/10" },
17+
view: { label: "View", icon: Eye, color: "text-pink-400", bg: "bg-pink-500/10" },
18+
navigation: { label: "Navigation", icon: Compass, color: "text-purple-400", bg: "bg-purple-500/10" },
19+
};
20+
21+
export function KeyboardShortcutsModal({ isOpen, onClose, shortcuts }: KeyboardShortcutsModalProps) {
22+
const isMac = typeof navigator !== "undefined" && navigator.platform.toUpperCase().indexOf("MAC") >= 0;
23+
24+
const groupedShortcuts = shortcuts.reduce((acc, shortcut) => {
25+
if (!acc[shortcut.category]) {
26+
acc[shortcut.category] = [];
27+
}
28+
// Skip duplicate shortcuts (like Delete and Backspace)
29+
if (!acc[shortcut.category].some(s => s.description === shortcut.description)) {
30+
acc[shortcut.category].push(shortcut);
31+
}
32+
return acc;
33+
}, {} as Record<string, Shortcut[]>);
34+
35+
const categoryOrder: (keyof typeof categoryConfig)[] = ["transport", "file", "edit", "view", "navigation"];
36+
37+
return (
38+
<AnimatePresence>
39+
{isOpen && (
40+
<>
41+
{/* Backdrop */}
42+
<motion.div
43+
initial={{ opacity: 0 }}
44+
animate={{ opacity: 1 }}
45+
exit={{ opacity: 0 }}
46+
onClick={onClose}
47+
className="fixed inset-0 bg-black/70 backdrop-blur-md z-50"
48+
/>
49+
50+
{/* Modal */}
51+
<motion.div
52+
initial={{ opacity: 0, scale: 0.9, y: 40 }}
53+
animate={{ opacity: 1, scale: 1, y: 0 }}
54+
exit={{ opacity: 0, scale: 0.9, y: 40 }}
55+
transition={{ type: "spring", damping: 25, stiffness: 300 }}
56+
className="fixed inset-4 md:inset-auto md:left-1/2 md:top-1/2 md:-translate-x-1/2 md:-translate-y-1/2 md:w-[964px] md:max-h-[84vh] bg-linear-to-br from-background via-background to-muted/20 border border-border/50 rounded-3xl shadow-2xl z-50 overflow-hidden flex flex-col"
57+
>
58+
{/* Header */}
59+
<div className="relative p-6 pb-4 border-b border-border/50">
60+
{/* Decorative gradient */}
61+
<div className="absolute inset-0 bg-linear-to-r from-primary/5 via-purple-500/5 to-pink-500/5 pointer-events-none" />
62+
63+
<div className="relative flex items-start justify-between">
64+
<div className="flex items-center gap-4">
65+
<motion.div
66+
initial={{ rotate: -10 }}
67+
animate={{ rotate: 0 }}
68+
className="p-3 bg-linear-to-br from-primary/20 to-purple-500/20 rounded-2xl border border-primary/20"
69+
>
70+
<Keyboard className="text-primary" size={28} />
71+
</motion.div>
72+
<div>
73+
<h2 className="text-2xl font-black tracking-tight">Keyboard Shortcuts</h2>
74+
<p className="text-sm text-muted-foreground mt-1 flex items-center gap-2">
75+
<span>Speed up your workflow with these shortcuts</span>
76+
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-muted text-xs font-medium">
77+
<Command size={10} />
78+
{isMac ? "Mac" : "Windows/Linux"}
79+
</span>
80+
</p>
81+
</div>
82+
</div>
83+
<button
84+
onClick={onClose}
85+
aria-label="Close shortcuts modal"
86+
className="p-2 hover:bg-muted rounded-xl transition-all hover:scale-105 active:scale-95"
87+
>
88+
<X size={20} />
89+
</button>
90+
</div>
91+
</div>
92+
93+
{/* Content - 2 col on desktop, 1 col on mobile */}
94+
<div className="flex-1 overflow-y-auto p-6">
95+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
96+
{categoryOrder.map((key) => {
97+
const config = categoryConfig[key];
98+
const categoryShortcuts = groupedShortcuts[key];
99+
if (!categoryShortcuts?.length) return null;
100+
101+
const Icon = config.icon;
102+
103+
return (
104+
<motion.div
105+
key={key}
106+
initial={{ opacity: 0, y: 20 }}
107+
animate={{ opacity: 1, y: 0 }}
108+
transition={{ delay: categoryOrder.indexOf(key) * 0.05 }}
109+
className="space-y-3"
110+
>
111+
{/* Category Header */}
112+
<div className={`flex items-center gap-2 ${config.color}`}>
113+
<div className={`p-1.5 rounded-lg ${config.bg}`}>
114+
<Icon size={14} />
115+
</div>
116+
<h3 className="text-sm font-bold uppercase tracking-wider">
117+
{config.label}
118+
</h3>
119+
<div className="flex-1 h-px bg-current opacity-20" />
120+
</div>
121+
122+
{/* Shortcuts List */}
123+
<div className="space-y-2">
124+
{categoryShortcuts.map((shortcut, idx) => (
125+
<motion.div
126+
key={idx}
127+
initial={{ opacity: 0, x: -10 }}
128+
animate={{ opacity: 1, x: 0 }}
129+
transition={{ delay: categoryOrder.indexOf(key) * 0.05 + idx * 0.02 }}
130+
className="group flex items-center justify-between px-3 py-1.5 bg-muted/20 hover:bg-muted/40 rounded-xl transition-all duration-200 border border-transparent hover:border-border/50"
131+
>
132+
<span className="text-sm text-foreground/90 group-hover:text-foreground transition-colors">
133+
{shortcut.description}
134+
</span>
135+
<kbd className="px-2.5 py-1 bg-background border border-border rounded-lg font-mono text-xs shadow-sm group-hover:shadow-md group-hover:border-primary/30 transition-all min-w-[60px] text-center">
136+
{formatShortcutKey(shortcut)}
137+
</kbd>
138+
</motion.div>
139+
))}
140+
</div>
141+
</motion.div>
142+
);
143+
})}
144+
</div>
145+
</div>
146+
147+
{/* Footer with tips */}
148+
<div className="p-4 border-t border-border/50 bg-muted/10">
149+
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-3">
150+
<div className="flex items-start gap-2 text-xs text-muted-foreground">
151+
<Info size={14} className="mt-0.5 shrink-0" />
152+
<div>
153+
<p className="font-medium text-foreground/70">Pro Tips:</p>
154+
<ul className="mt-1 space-y-0.5">
155+
<li>• Use number keys <kbd className="px-1 bg-background border border-border rounded text-[10px]">1-5</kbd> for quick navigation</li>
156+
<li>• Press <kbd className="px-1 bg-background border border-border rounded text-[10px]">Space</kbd> anywhere to toggle playback</li>
157+
</ul>
158+
</div>
159+
</div>
160+
<div className="text-xs text-muted-foreground text-right">
161+
Press <kbd className="px-1.5 py-0.5 bg-background border border-border rounded mx-1">Esc</kbd> to close
162+
</div>
163+
</div>
164+
</div>
165+
</motion.div>
166+
</>
167+
)}
168+
</AnimatePresence>
169+
);
170+
}

0 commit comments

Comments
 (0)