Skip to content

Commit

Permalink
fix: sidebarkeyboard shortcut
Browse files Browse the repository at this point in the history
  • Loading branch information
potts99 committed Nov 3, 2024
1 parent 15ed4dc commit 5e2ab64
Show file tree
Hide file tree
Showing 3 changed files with 112 additions and 155 deletions.
15 changes: 11 additions & 4 deletions apps/client/@/shadcn/components/app-sidebar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
SidebarFooter,
SidebarHeader,
SidebarRail,
useSidebar,
} from "@/shadcn/ui/sidebar";
import ThemeSettings from "../../../components/ThemeSettings";
import { useRouter } from "next/router";
Expand All @@ -31,6 +32,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
const [keypressdown, setKeyPressDown] = useState(false);

const { t, lang } = useTranslation("peppermint");
const sidebar = useSidebar();

if (!user) {
location.push("/auth/login");
Expand Down Expand Up @@ -97,12 +99,12 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {

function handleKeyPress(event: any) {
const pathname = location.pathname;

// Don't override browser shortcuts
// Check for Ctrl or Meta key to bypass the shortcut handler
if (event.ctrlKey || event.metaKey) {
return;
return; // Don't override browser shortcuts
}

if (
document.activeElement!.tagName !== "INPUT" &&
document.activeElement!.tagName !== "TEXTAREA" &&
Expand Down Expand Up @@ -131,6 +133,10 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
case "f":
location.push("/issues/closed");
break;
case "[":
sidebar.toggleSidebar();
break;

default:
break;
}
Expand All @@ -147,6 +153,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
};
}, [handleKeyPress, location]);


return (
<Sidebar collapsible="icon" {...props}>
<SidebarHeader>
Expand Down
4 changes: 2 additions & 2 deletions apps/client/@/shadcn/ui/sidebar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
const SIDEBAR_WIDTH = "16rem"
const SIDEBAR_WIDTH_MOBILE = "18rem"
const SIDEBAR_WIDTH_ICON = "3rem"
const SIDEBAR_KEYBOARD_SHORTCUT = "["
const SIDEBAR_KEYBOARD_SHORTCUT = "[";

type SidebarContext = {
state: "expanded" | "collapsed"
Expand Down Expand Up @@ -113,7 +113,7 @@ const SidebarProvider = React.forwardRef<
React.useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (
event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
(event.key === SIDEBAR_KEYBOARD_SHORTCUT || event.key === "[") &&
(event.metaKey || event.ctrlKey)
) {
event.preventDefault()
Expand Down
248 changes: 99 additions & 149 deletions apps/client/layouts/shad.tsx
Original file line number Diff line number Diff line change
@@ -1,156 +1,106 @@
import Link from "next/link";
import { useRouter } from "next/router";
import { Fragment, useEffect, useState } from "react";
import { Button } from "@radix-ui/themes";
import useTranslation from "next-translate/useTranslation";

import Link from "next/link";
import { useRouter } from "next/router";
import { Fragment, useEffect, useState } from "react";
import { Button } from "@radix-ui/themes";
import useTranslation from "next-translate/useTranslation";

import { AccountDropdown } from "../components/AccountDropdown";

import { useUser } from "../store/session";
import {
Bell,
} from "lucide-react";
import { AppSidebar } from "@/shadcn/components/app-sidebar";
import { SidebarProvider, SidebarTrigger } from "@/shadcn/ui/sidebar";

export default function ShadLayout({ children }: any) {
const location = useRouter();

const { loading, user, fetchUserProfile } = useUser();

const [keypressdown, setKeyPressDown] = useState(false);

const { t, lang } = useTranslation("peppermint");

if (!user) {
location.push("/auth/login");
}

if (location.pathname.includes("/admin") && user.isAdmin === false) {
location.push("/");
alert("You do not have the correct perms for that action.");
}

if (user && user.external_user) {
location.push("/portal");
}

function handleKeyPress(event: any) {
const pathname = location.pathname;
if (
document.activeElement!.tagName !== "INPUT" &&
document.activeElement!.tagName !== "TEXTAREA" &&
!document.activeElement!.className.includes("ProseMirror") &&
!pathname.includes("/new")
) {
switch (event.key) {
case "c":
setKeyPressDown(true);
break;
case "h":
location.push("/");
break;
case "d":
location.push("/documents");
break;
case "t":
location.push("/issues");
break;
case "a":
location.push("/admin");
break;
case "o":
location.push("/issues/open");
break;
case "f":
location.push("/issues/closed");
break;
import { AccountDropdown } from "../components/AccountDropdown";

default:
break;
}
}
}

useEffect(() => {
// attach the event listener
document.addEventListener("keydown", handleKeyPress);

// remove the event listener
return () => {
document.removeEventListener("keydown", handleKeyPress);
};
}, [handleKeyPress, location]);

return (
!loading &&
user && (
<div className="min-h-screen overflow-hidden ">
<SidebarProvider>
<AppSidebar />
<div className="w-full">
<div className="sticky top-0 z-10 flex h-14 shrink-0 items-center gap-x-4 border-b bg-background px-4 sm:gap-x-6">
<div className="flex flex-1 gap-x-4 self-stretch lg:gap-x-6 items-center">
<SidebarTrigger />
<div className="sm:flex hidden w-full justify-start items-center space-x-6">
{user.isAdmin && (
<Link href="https://github.com/Peppermint-Lab/peppermint/releases">
<span className="inline-flex items-center rounded-md bg-green-700/10 px-3 py-2 text-xs font-medium text-green-600 ring-1 ring-inset ring-green-500/20">
Version {process.env.NEXT_PUBLIC_CLIENT_VERSION}
</span>
</Link>
)}

</div>

<div className="flex w-full justify-end items-center gap-x-2 lg:gap-x-2 ">
<Button
variant="outline"
className="relative rounded-md p-2 text-gray-400 hover:text-gray-500 hover:cursor-pointer focus:outline-none"
import { useUser } from "../store/session";
import { Bell } from "lucide-react";
import { AppSidebar } from "@/shadcn/components/app-sidebar";
import {
SidebarProvider,
SidebarTrigger,
} from "@/shadcn/ui/sidebar";

export default function ShadLayout({ children }: any) {
const location = useRouter();

const { loading, user, fetchUserProfile } = useUser();


const { t, lang } = useTranslation("peppermint");

if (!user) {
location.push("/auth/login");
}

if (location.pathname.includes("/admin") && user.isAdmin === false) {
location.push("/");
alert("You do not have the correct perms for that action.");
}

if (user && user.external_user) {
location.push("/portal");
}

return (
!loading &&
user && (
<div className="min-h-screen overflow-hidden ">
<SidebarProvider>
<AppSidebar />
<div className="w-full">
<div className="sticky top-0 z-10 flex h-14 shrink-0 items-center gap-x-4 border-b bg-background px-4 sm:gap-x-6">
<div className="flex flex-1 gap-x-4 self-stretch lg:gap-x-6 items-center">
<SidebarTrigger />
<div className="sm:flex hidden w-full justify-start items-center space-x-6">
{user.isAdmin && (
<Link href="https://github.com/Peppermint-Lab/peppermint/releases">
<span className="inline-flex items-center rounded-md bg-green-700/10 px-3 py-2 text-xs font-medium text-green-600 ring-1 ring-inset ring-green-500/20">
Version {process.env.NEXT_PUBLIC_CLIENT_VERSION}
</span>
</Link>
)}
</div>

<div className="flex w-full justify-end items-center gap-x-2 lg:gap-x-2 ">
<Button
variant="outline"
className="relative rounded-md p-2 text-gray-400 hover:text-gray-500 hover:cursor-pointer focus:outline-none"
>
<Link href="/notifications">
<Bell className="h-4 w-4 text-foreground" />
{user.notifcations.filter(
(notification) => !notification.read
).length > 0 && (
<svg
className="h-2.5 w-2.5 absolute bottom-6 left-6 animate-pulse fill-green-500"
viewBox="0 0 6 6"
aria-hidden="true"
>
<circle cx={3} cy={3} r={3} />
</svg>
)}
</Link>
</Button>

{user.isAdmin && (
<Link
href="https://github.com/Peppermint-Lab/peppermint/discussions"
target="_blank"
className="hover:cursor-pointer"
>
<Link href="/notifications">
<Bell className="h-4 w-4 text-foreground" />
{user.notifcations.filter(
(notification) => !notification.read
).length > 0 && (
<svg
className="h-2.5 w-2.5 absolute bottom-6 left-6 animate-pulse fill-green-500"
viewBox="0 0 6 6"
aria-hidden="true"
>
<circle cx={3} cy={3} r={3} />
</svg>
)}
</Link>
</Button>

{user.isAdmin && (
<Link
href="https://github.com/Peppermint-Lab/peppermint/discussions"
target="_blank"
className="hover:cursor-pointer"
<Button
variant="outline"
className="text-foreground hover:cursor-pointer whitespace-nowrap"
>
<Button
variant="outline"
className="text-foreground hover:cursor-pointer whitespace-nowrap"
>
Send Feedback
</Button>
</Link>
)}

<AccountDropdown />
</div>
Send Feedback
</Button>
</Link>
)}

<AccountDropdown />
</div>
</div>
{!loading && !user.external_user && (
<main className="bg-background min-h-screen">{children}</main>
)}
</div>
</SidebarProvider>
</div>
)
);
}

{!loading && !user.external_user && (
<main className="bg-background min-h-screen">{children}</main>
)}
</div>
</SidebarProvider>
</div>
)
);
}

0 comments on commit 5e2ab64

Please sign in to comment.