Skip to content

Commit

Permalink
feat: initial flags work & sidebar improvemnts
Browse files Browse the repository at this point in the history
  • Loading branch information
@potts99
potts99 committed Nov 3, 2024
1 parent f20e8ee commit b4a9765
Show file tree
Hide file tree
Showing 9 changed files with 200 additions and 191 deletions.
4 changes: 3 additions & 1 deletion apps/client/@/shadcn/components/app-sidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,6 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
teams: [
{
name: "Peppermint",
logo: GalleryVerticalEnd,
plan: `version: ${process.env.NEXT_PUBLIC_CLIENT_VERSION}`,
},
],
Expand Down Expand Up @@ -81,10 +80,12 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
{
title: "Open",
url: "/issues/open",
initial: "o",
},
{
title: "Closed",
url: "/issues/closed",
initial: "f",
},
],
},
Expand All @@ -93,6 +94,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
url: "/admin",
icon: Settings,
isActive: true,
initial: "a",
},
],
};
Expand Down
65 changes: 58 additions & 7 deletions apps/client/@/shadcn/components/nav-main.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { ChevronRight, type LucideIcon } from "lucide-react";
import { useState, useEffect } from "react";

import {
Collapsible,
Expand All @@ -14,6 +15,7 @@ import {
SidebarMenuSub,
SidebarMenuSubButton,
SidebarMenuSubItem,
useSidebar,
} from "@/shadcn/ui/sidebar";
import { useRouter } from "next/router";

Expand All @@ -25,36 +27,74 @@ export function NavMain({
url: string;
icon?: LucideIcon;
isActive?: boolean;
initial?: string;
items?: {
title: string;
url: string;
initial?: string;
}[];
}[];
}) {
const router = useRouter();
const sidebar = useSidebar();
const [hideKeyboardShortcuts, setHideKeyboardShortcuts] = useState(false);

useEffect(() => {
const loadFlags = () => {
const savedFlags = localStorage.getItem("featureFlags");
if (savedFlags) {
const flags = JSON.parse(savedFlags);
const hideShortcuts = flags.find(
(f: any) => f.name === "Hide Keyboard Shortcuts"
)?.enabled;
setHideKeyboardShortcuts(hideShortcuts || false);
}
};

loadFlags();
window.addEventListener("storage", loadFlags);
return () => window.removeEventListener("storage", loadFlags);
}, []);

return (
<SidebarGroup>
<SidebarMenu>
{items.map((item) =>
item.items ? (
<SidebarMenuItem>
<SidebarMenuButton
tooltip={item.title}
tooltip={!hideKeyboardShortcuts ? item.initial : item.title}
size="sm"
onClick={() => router.push(item.url)}
>
{item.icon && <item.icon />}
<span>{item.title}</span>
<div className="flex flex-row items-center justify-between w-full">
<div className="flex flex-row items-center gap-x-2 w-full">
{item.icon && <item.icon className="size-4" />}
<span
className={sidebar.state === "collapsed" ? "hidden" : ""}
>
{item.title}
</span>
</div>
{!hideKeyboardShortcuts && (
<span className="">{item.initial}</span>
)}
</div>
</SidebarMenuButton>
<SidebarMenuSub>
{item.items?.map((subItem) => (
<SidebarMenuSubItem key={subItem.title}>
<SidebarMenuSubButton
size="sm"
onClick={() => router.push(subItem.url)}
className="cursor-pointer"
className="cursor-pointer flex flex-row items-center justify-between w-full px-0 pl-2.5"
>
<span>{subItem.title}</span>
<span className="flex h-6 w-6 shrink-0 items-center bg-transparent border-none justify-center text-md font-medium">
{!hideKeyboardShortcuts && (
<span className="">{subItem.initial}</span>
)}
</span>
</SidebarMenuSubButton>
</SidebarMenuSubItem>
))}
Expand All @@ -64,11 +104,22 @@ export function NavMain({
<SidebarMenuItem key={item.title}>
<SidebarMenuButton
size="sm"
tooltip={item.title}
tooltip={!hideKeyboardShortcuts ? item.initial : item.title}
onClick={() => router.push(item.url)}
>
{item.icon && <item.icon />}
<span>{item.title}</span>
<div className="flex flex-row items-center justify-between w-full">
<div className="flex flex-row items-center gap-x-2 w-full">
{item.icon && <item.icon className="size-4" />}
<span
className={sidebar.state === "collapsed" ? "hidden" : ""}
>
{item.title}
</span>
</div>
{!hideKeyboardShortcuts && (
<span className="">{item.initial}</span>
)}
</div>
</SidebarMenuButton>
</SidebarMenuItem>
)
Expand Down
2 changes: 1 addition & 1 deletion apps/client/@/shadcn/ui/sidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -703,7 +703,7 @@ const SidebarMenuSub = React.forwardRef<
ref={ref}
data-sidebar="menu-sub"
className={cn(
"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
"flex min-w-0 ml-3.5 translate-x-px flex-col gap-1 border-l border-sidebar-border pl-2.5 pr-0 py-0.5",
"group-data-[collapsible=icon]:hidden",
className
)}
Expand Down
15 changes: 10 additions & 5 deletions apps/client/components/CreateTicketModal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,9 @@ export default function CreateTicketModal({ keypress, setKeyPressDown }) {

useEffect(() => checkPress(), [keypress]);

const showKeyboardShortcuts =
localStorage.getItem("hide-keyboard-shortcuts") === "true";

return (
<>
<button
Expand All @@ -159,11 +162,13 @@ export default function CreateTicketModal({ keypress, setKeyPressDown }) {
{state === "expanded" && (
<>
<span className="whitespace-nowrap">New Issue</span>
<div className="flex w-full justify-end float-right">
<span className="flex h-6 w-6 shrink-0 items-center bg-transparent border-none justify-center text-md font-medium">
c
</span>
</div>
{showKeyboardShortcuts && (
<div className="flex w-full justify-end float-right">
<span className="flex h-6 w-6 shrink-0 items-center bg-transparent border-none justify-center text-md font-medium">
c
</span>
</div>
)}
</>
)}
</button>
Expand Down
29 changes: 16 additions & 13 deletions apps/client/layouts/newLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,18 +87,18 @@ export default function NewLayout({ children }: any) {
icon: FileText,
current: location.pathname === "/documents" ? true : false,
initial: "d",
internal: true
internal: true,
},
];

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

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

if (
document.activeElement!.tagName !== "INPUT" &&
document.activeElement!.tagName !== "TEXTAREA" &&
Expand Down Expand Up @@ -132,7 +132,6 @@ export default function NewLayout({ children }: any) {
}
}
}


useEffect(() => {
// attach the event listener
Expand Down Expand Up @@ -345,7 +344,12 @@ export default function NewLayout({ children }: any) {
setKeyPressDown={setKeyPressDown}
/>
{navigation.map((item: any) => (
<li key={item.name} className={item.internal && !user.external_user ? '' : 'hidden'}>
<li
key={item.name}
className={
item.internal && !user.external_user ? "" : "hidden"
}
>
<Link
href={item.href}
className={classNames(
Expand Down Expand Up @@ -416,16 +420,16 @@ export default function NewLayout({ children }: any) {
location.pathname === "/issues/closed"
? "bg-secondary dark:bg-primary"
: " hover:bg-[#F0F3F9] dark:hover:bg-white dark:hover:text-gray-900 ",
"group -mx-2 flex gap-x-3 p-1 pl-3 rounded-md text-xs font-semibold leading-6"
"group -mx-2 flex gap-x-3 p-1 pl-3 justify-between w-full rounded-md text-xs font-semibold leading-6"
)}
>
<span className="whitespace-nowrap">
{user.name}'s closed
</span>
<div className="flex w-full justify-end float-right">
<span className="flex h-6 w-6 shrink-0 items-center bg-transparent border-none justify-center text-md font-medium">
f
<span className="whitespace-nowrap">
{user.name}'s closed
</span>
<div className="flex w-full justify-end float-right">
<span className="flex h-6 w-6 shrink-0 items-center bg-transparent border-none justify-center text-md font-medium">
f
</span>
</div>
</Link>
</li>
Expand Down Expand Up @@ -494,7 +498,6 @@ export default function NewLayout({ children }: any) {
</span>
</Link>
)}

</div>

<div className="flex w-full justify-end items-center gap-x-2 lg:gap-x-2 ">
Expand Down
Loading

0 comments on commit b4a9765

Please sign in to comment.