feat(menubar): add a new button Display All Shortcuts

src/App.svelte

@@ -13,6 +13,7 @@
   import GoToDialog from '@/components/GoToDialog.svelte';
   import FindDialog from '@/components/FindDialog.svelte';
   import Loading from '@/components/Loading.svelte';
+  import ShortCutDialog from '@/components/ShortCutDialog.svelte';
 </script>
 
 {#await Notpad.init()}
@@ -29,6 +30,7 @@
   <FontDialog />
   <LicenseDialog />
   <AboutDialog />
+  <ShortCutDialog />
   <GoToDialog />
   <FindDialog />
   <Shortcuts />

src/lib/components/MenuBar.svelte

@@ -13,8 +13,10 @@
   import { openAboutDialog } from '@/components/AboutDialog.svelte';
   import { toggleGoToDialog } from '@/components/GoToDialog.svelte';
   import { toggleFindDialog } from '@/components/FindDialog.svelte';
+  import { openShortCutDialog } from '@/components/ShortCutDialog.svelte';
   import GitHubIcon from '@/components/icons/GitHub.svelte';
   import InfoIcon from './icons/Info.svelte';
+  import KeyboardIcon from '@/components/icons/Keyboard.svelte';
   import GithubOultineIcon from './icons/GithubOultine.svelte';
 
   let innerWidth = window.innerWidth;
@@ -146,6 +148,11 @@
   <Menubar.Menu>
     <Menubar.Trigger>Help</Menubar.Trigger>
     <Menubar.Content>
+      <Menubar.Item class="flex items-center gap-2" on:click={openShortCutDialog}>
+        <KeyboardIcon class="text-xl" />
+        Shortcuts
+      </Menubar.Item>
+      <Menubar.Separator />
       <a href="https://github.com/Muhammed-Rahif/Notpad" target="_blank">
         <Menubar.Item class="flex items-center gap-2">
           <GithubOultineIcon class="text-xl" />

src/lib/components/ShortCutDialog.svelte

@@ -0,0 +1,64 @@
+<script context="module">
+  import { writable } from 'svelte/store';
+
+  // Store to control the dialog's open state
+  const open = writable(false);
+
+  // Function to open the dialog
+  export function openShortCutDialog() {
+    open.set(true);
+  }
+</script>
+
+<script lang="ts">
+  import * as Table from '@/components/ui/table';
+  import * as Dialog from '@/components/ui/dialog';
+  import { Button } from '@/components/ui/button';
+
+  const shortcuts = {
+		"New": "Ctrl + Alt + N",
+  	"Open": "Ctrl + O",
+		"Save": "Ctrl + S",
+		"Print": "Ctrl + P",
+		"Undo": "Ctrl + Z",
+    "Redo": "Ctrl + Y",
+    "Cut": "Ctrl + X",
+    "Copy": "Ctrl + C",
+    "Paste": "Ctrl + V",
+    "Select All": "Ctrl + A",
+    "Find/Replace": "Ctrl + F",
+    "Go To": "Ctrl + G",
+    "Full Screen": "F11",
+	}
+ 
+
+  // Function to close the dialog
+
+  function closeShortCutDialog() {
+    open.set(false);
+  }
+</script>
+
+<Dialog.Root open={$open} onOpenChange={open.set}>
+  <Dialog.Trigger />
+
+  <Dialog.Content class="max-h-[96vh]  overflow-y-auto">
+    <Table.Root>
+      <Table.Header>
+        <Table.Row>
+          <Table.Head class="text-center">Function</Table.Head>
+          <Table.Head class="text-center">Shortcuts</Table.Head>
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        {#each Object.entries(shortcuts) as [action, shortcut]}
+          <Table.Row>
+            <Table.Cell class="text-center">{action}</Table.Cell>
+            <Table.Cell class="text-center">{shortcut}</Table.Cell>
+          </Table.Row>
+          {/each}
+      </Table.Body>
+    </Table.Root>
+    <Button on:click={closeShortCutDialog}>Cencel</Button>
+  </Dialog.Content>
+</Dialog.Root>

src/lib/components/icons/Keyboard.svelte

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...$$props}>
+  <path
+    fill="currentColor"
+    d="M4 19q-.825 0-1.412-.587T2 17V7q0-.825.588-1.412T4 5h16q.825 0 1.413.588T22 7v10q0 .825-.587 1.413T20 19zm4-3h8v-2H8zm-3-3h2v-2H5zm3 0h2v-2H8zm3 0h2v-2h-2zm3 0h2v-2h-2zm3 0h2v-2h-2zM5 10h2V8H5zm3 0h2V8H8zm3 0h2V8h-2zm3 0h2V8h-2zm3 0h2V8h-2z"
+  />
+</svg>

src/lib/components/ui/dialog/dialog-content.svelte

@@ -1,40 +1,36 @@
 <script lang="ts">
-  import { Dialog as DialogPrimitive } from 'bits-ui';
-  import Cross2 from 'svelte-radix/Cross2.svelte';
-  import * as Dialog from './';
-  import { cn, flyAndScale } from '@/utils';
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import Cross2 from "svelte-radix/Cross2.svelte";
+	import * as Dialog from "./index.js";
+	import { cn, flyAndScale } from "@/utils.js";
 
-  type $$Props = DialogPrimitive.ContentProps & {
-    overlayClass?: DialogPrimitive.OverlayProps['class'];
-  };
+	type $$Props = DialogPrimitive.ContentProps;
 
-  let className: $$Props['class'] = undefined;
-  export let transition: $$Props['transition'] = flyAndScale;
-  export let transitionConfig: $$Props['transitionConfig'] = {
-    duration: 200
-  };
-  export { className as class };
-
-  export let overlayClass: DialogPrimitive.OverlayProps['class'] = undefined;
+	let className: $$Props["class"] = undefined;
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		duration: 200,
+	};
+	export { className as class };
 </script>
 
 <Dialog.Portal>
-  <Dialog.Overlay class={overlayClass} />
-  <DialogPrimitive.Content
-    {transition}
-    {transitionConfig}
-    class={cn(
-      'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg md:w-full',
-      className
-    )}
-    {...$$restProps}
-  >
-    <slot />
-    <DialogPrimitive.Close
-      class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity data-[state=open]:bg-accent data-[state=open]:text-muted-foreground hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
-    >
-      <Cross2 class="h-4 w-4" />
-      <span class="sr-only">Close</span>
-    </DialogPrimitive.Close>
-  </DialogPrimitive.Content>
+	<Dialog.Overlay />
+	<DialogPrimitive.Content
+		{transition}
+		{transitionConfig}
+		class={cn(
+			"bg-background fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg sm:rounded-lg md:w-full",
+			className
+		)}
+		{...$$restProps}
+	>
+		<slot />
+		<DialogPrimitive.Close
+			class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
+		>
+			<Cross2 class="h-4 w-4" />
+			<span class="sr-only">Close</span>
+		</DialogPrimitive.Close>
+	</DialogPrimitive.Content>
 </Dialog.Portal>

src/lib/components/ui/dialog/dialog-description.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-  import { Dialog as DialogPrimitive } from 'bits-ui';
-  import { cn } from '@/utils';
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "@/utils.js";
 
-  type $$Props = DialogPrimitive.DescriptionProps;
+	type $$Props = DialogPrimitive.DescriptionProps;
 
-  let className: $$Props['class'] = undefined;
-  export { className as class };
+	let className: $$Props["class"] = undefined;
+	export { className as class };
 </script>
 
 <DialogPrimitive.Description
-  class={cn('text-sm text-muted-foreground', className)}
-  {...$$restProps}
+	class={cn("text-muted-foreground text-sm", className)}
+	{...$$restProps}
 >
-  <slot />
+	<slot />
 </DialogPrimitive.Description>

src/lib/components/ui/dialog/dialog-footer.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-  import type { HTMLAttributes } from 'svelte/elements';
-  import { cn } from '@/utils';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "@/utils.js";
 
-  type $$Props = HTMLAttributes<HTMLDivElement>;
+	type $$Props = HTMLAttributes<HTMLDivElement>;
 
-  let className: $$Props['class'] = undefined;
-  export { className as class };
+	let className: $$Props["class"] = undefined;
+	export { className as class };
 </script>
 
 <div
-  class={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
-  {...$$restProps}
+	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+	{...$$restProps}
 >
-  <slot />
+	<slot />
 </div>

src/lib/components/ui/dialog/dialog-header.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-  import type { HTMLAttributes } from 'svelte/elements';
-  import { cn } from '@/utils';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "@/utils.js";
 
-  type $$Props = HTMLAttributes<HTMLDivElement>;
+	type $$Props = HTMLAttributes<HTMLDivElement>;
 
-  let className: $$Props['class'] = undefined;
-  export { className as class };
+	let className: $$Props["class"] = undefined;
+	export { className as class };
 </script>
 
-<div class={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...$$restProps}>
-  <slot />
+<div class={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...$$restProps}>
+	<slot />
 </div>

src/lib/components/ui/dialog/dialog-overlay.svelte

@@ -1,21 +1,21 @@
 <script lang="ts">
-  import { Dialog as DialogPrimitive } from 'bits-ui';
-  import { fade } from 'svelte/transition';
-  import { cn } from '@/utils';
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { fade } from "svelte/transition";
+	import { cn } from "@/utils.js";
 
-  type $$Props = DialogPrimitive.OverlayProps;
+	type $$Props = DialogPrimitive.OverlayProps;
 
-  let className: $$Props['class'] = undefined;
-  export let transition: $$Props['transition'] = fade;
-  export let transitionConfig: $$Props['transitionConfig'] = {
-    duration: 150
-  };
-  export { className as class };
+	let className: $$Props["class"] = undefined;
+	export let transition: $$Props["transition"] = fade;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		duration: 150,
+	};
+	export { className as class };
 </script>
 
 <DialogPrimitive.Overlay
-  {transition}
-  {transitionConfig}
-  class={cn('fixed inset-0 z-50 bg-background/80 backdrop-blur-sm ', className)}
-  {...$$restProps}
+	{transition}
+	{transitionConfig}
+	class={cn("bg-background/80 fixed inset-0 z-50 backdrop-blur-sm ", className)}
+	{...$$restProps}
 />

src/lib/components/ui/dialog/dialog-portal.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-  import { Dialog as DialogPrimitive } from 'bits-ui';
+	import { Dialog as DialogPrimitive } from "bits-ui";
 
-  type $$Props = DialogPrimitive.PortalProps;
+	type $$Props = DialogPrimitive.PortalProps;
 </script>
 
 <DialogPrimitive.Portal {...$$restProps}>
-  <slot />
+	<slot />
 </DialogPrimitive.Portal>

src/lib/components/ui/dialog/dialog-title.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-  import { Dialog as DialogPrimitive } from 'bits-ui';
-  import { cn } from '@/utils';
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "@/utils.js";
 
-  type $$Props = DialogPrimitive.TitleProps;
+	type $$Props = DialogPrimitive.TitleProps;
 
-  let className: $$Props['class'] = undefined;
-  export { className as class };
+	let className: $$Props["class"] = undefined;
+	export { className as class };
 </script>
 
 <DialogPrimitive.Title
-  class={cn('text-lg font-semibold leading-none tracking-tight', className)}
-  {...$$restProps}
+	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
+	{...$$restProps}
 >
-  <slot />
+	<slot />
 </DialogPrimitive.Title>

src/lib/components/ui/dialog/index.ts

@@ -1,37 +1,37 @@
-import { Dialog as DialogPrimitive } from 'bits-ui';
+import { Dialog as DialogPrimitive } from "bits-ui";
 
-import Title from './dialog-title.svelte';
-import Portal from './dialog-portal.svelte';
-import Footer from './dialog-footer.svelte';
-import Header from './dialog-header.svelte';
-import Overlay from './dialog-overlay.svelte';
-import Content from './dialog-content.svelte';
-import Description from './dialog-description.svelte';
+import Title from "./dialog-title.svelte";
+import Portal from "./dialog-portal.svelte";
+import Footer from "./dialog-footer.svelte";
+import Header from "./dialog-header.svelte";
+import Overlay from "./dialog-overlay.svelte";
+import Content from "./dialog-content.svelte";
+import Description from "./dialog-description.svelte";
 
 const Root = DialogPrimitive.Root;
 const Trigger = DialogPrimitive.Trigger;
 const Close = DialogPrimitive.Close;
 
 export {
-  Root,
-  Title,
-  Portal,
-  Footer,
-  Header,
-  Trigger,
-  Overlay,
-  Content,
-  Description,
-  Close,
-  //
-  Root as Dialog,
-  Title as DialogTitle,
-  Portal as DialogPortal,
-  Footer as DialogFooter,
-  Header as DialogHeader,
-  Trigger as DialogTrigger,
-  Overlay as DialogOverlay,
-  Content as DialogContent,
-  Description as DialogDescription,
-  Close as DialogClose
+	Root,
+	Title,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	Close,
+	//
+	Root as Dialog,
+	Title as DialogTitle,
+	Portal as DialogPortal,
+	Footer as DialogFooter,
+	Header as DialogHeader,
+	Trigger as DialogTrigger,
+	Overlay as DialogOverlay,
+	Content as DialogContent,
+	Description as DialogDescription,
+	Close as DialogClose,
 };