Repository: briansegs/manza-search
Pull request #32: Add More options button
Author: login: briansegs
Created: 2025-04-11T19:57:01Z | Merged: 2025-04-11T20:25:13Z



<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **Style**
  - Adjusted the layout of the article’s bottom menu, modifying the container’s width display.

- **New Features**
  - Replaced an existing button in the right menu with an enhanced "More Options" button. When activated, it reveals a popover offering various selectable choices for a streamlined interface.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->


Diff:
diff --git a/src/components/Article/BottomMenu/index.tsx b/src/components/Article/BottomMenu/index.tsx
index 97a90ad..69c396d 100644
--- a/src/components/Article/BottomMenu/index.tsx
+++ b/src/components/Article/BottomMenu/index.tsx
@@ -12,7 +12,7 @@ const BottomMenu = () => {
       </div>
 
       <div className="flex-1 overflow-hidden rounded-t-xl border-[5px] border-green-600">
-        <div className="flex size-full w-full items-center justify-center bg-menu hover:bg-black">
+        <div className="flex size-full items-center justify-center bg-menu hover:bg-black">
           <DocPad />
         </div>
       </div>
diff --git a/src/components/Article/RightMenuContainer/MoreOptionsButton/index.tsx b/src/components/Article/RightMenuContainer/MoreOptionsButton/index.tsx
new file mode 100644
index 0000000..b720bf0
--- /dev/null
+++ b/src/components/Article/RightMenuContainer/MoreOptionsButton/index.tsx
@@ -0,0 +1,50 @@
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { cn } from '@/utilities/ui'
+import React from 'react'
+
+const buttonStyles =
+  'size-14 rounded-full border-4 border-black font-serif text-white shadow-[10px_10px_10px_black] hover:text-white/50'
+
+interface MOMenuButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string
+}
+
+const MOMenuButton: React.FC<MOMenuButtonProps> = ({ className, ...props }) => (
+  <button className={cn(buttonStyles, className)} {...props} />
+)
+
+const MoreOptions: React.FC = () => {
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <Button className="bottom-2 right-2 block h-fit rounded-[8px] border-2 border-white bg-menu px-2 py-0 hover:bg-black sm:absolute">
+          MO
+        </Button>
+      </PopoverTrigger>
+
+      <PopoverContent
+        side={'left'}
+        sideOffset={80}
+        className="mt-12 flex h-64 w-fit gap-2 border-0 bg-transparent p-0 shadow-none sm:mt-0"
+      >
+        <div className="flex w-[90px] flex-col justify-between gap-2 py-9">
+          <MOMenuButton className="self-end bg-[#0011ff]">P</MOMenuButton>
+          <MOMenuButton className="bg-[#ff1c00]">M</MOMenuButton>
+          <MOMenuButton className="self-end bg-[#8a1384]">E</MOMenuButton>
+        </div>
+
+        <div className="flex flex-col justify-between py-1.5">
+          <MOMenuButton className="bg-[#ffc8ce]">S</MOMenuButton>
+          <MOMenuButton className="bg-[#006c00]">K</MOMenuButton>
+        </div>
+
+        <div className="h-60">
+          <MOMenuButton className="ml-1 bg-[#0011ff]">B</MOMenuButton>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export default MoreOptions
diff --git a/src/components/Article/RightMenuContainer/index.tsx b/src/components/Article/RightMenuContainer/index.tsx
index 678236b..810f85b 100644
--- a/src/components/Article/RightMenuContainer/index.tsx
+++ b/src/components/Article/RightMenuContainer/index.tsx
@@ -1,14 +1,12 @@
 import React from 'react'
-import { Button } from '../../ui/button'
 import DictionaryButton from './DictionaryButton'
+import MoreOptionsButton from './MoreOptionsButton'
 
 export const RightMenu = () => (
   <div className="relative flex size-fit flex-col items-center justify-center rounded-xl bg-menu-red p-1 shadow-[10px_10px_10px_black] hover:bg-black sm:size-28 sm:flex-row sm:p-0">
     <DictionaryButton />
 
-    <Button className="bg-menu bottom-2 right-2 block h-fit rounded-[8px] border-2 border-white px-2 py-0 hover:bg-black sm:absolute">
-      MO
-    </Button>
+    <MoreOptionsButton />
   </div>
 )
 
diff --git a/tsconfig.json b/tsconfig.json
index 0c79967..4008e9f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -49,7 +49,7 @@
     "redirects.js",
     "next.config.js",
     "next-sitemap.config.cjs"
-  ],
+, "src/components/Article/RightMenuContainer/MoreOptionsButton"  ],
   "exclude": [
     "node_modules"
   ]


Reviews:
user: login: coderabbitai[bot]
body: **Actionable comments posted: 2**

<details>
<summary>🧹 Nitpick comments (2)</summary><blockquote>

<details>
<summary>src/components/Article/RightMenuContainer/index.tsx (1)</summary><blockquote>

`3-3`: **Remove the file extension from the import statement**

The import statement includes the `.tsx` extension, which is unusual and can cause issues with some bundlers. TypeScript/JavaScript imports typically don't include file extensions.

```diff
-import MoreOptions from './MoreOptions.tsx'
+import MoreOptions from './MoreOptions'
```

</blockquote></details>
<details>
<summary>src/components/Article/RightMenuContainer/MoreOptions.tsx/index.tsx (1)</summary><blockquote>

`41-43`: **Fixed height container might cause layout issues**

The fixed height container (h-60) might cause layout issues on different screen sizes. Consider using a more flexible approach.

```diff
-        <div className="h-60">
+        <div className="h-auto min-h-[15rem]">
```

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 706698cb98c2a8d1d18f2c5e3610fbdb696ae14f and 55e667f8607ba51a8c971d5ac2410ab62e1a6817.

</details>

<details>
<summary>📒 Files selected for processing (3)</summary>

* `src/components/Article/BottomMenu/index.tsx` (1 hunks)
* `src/components/Article/RightMenuContainer/MoreOptions.tsx/index.tsx` (1 hunks)
* `src/components/Article/RightMenuContainer/index.tsx` (1 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🧬 Code Graph Analysis (1)</summary>

<details>
<summary>src/components/Article/RightMenuContainer/MoreOptions.tsx/index.tsx (3)</summary><blockquote>

<details>
<summary>src/utilities/ui.ts (1)</summary>

* `cn` (10-12)

</details>
<details>
<summary>src/components/ui/popover.tsx (3)</summary>

* `Popover` (31-31)
* `PopoverTrigger` (31-31)
* `PopoverContent` (31-31)

</details>
<details>
<summary>src/components/ui/button.tsx (1)</summary>

* `Button` (52-52)

</details>

</blockquote></details>

</details>

</details>

<details>
<summary>🔇 Additional comments (6)</summary><blockquote>

<details>
<summary>src/components/Article/BottomMenu/index.tsx (1)</summary>

`15-15`: **Good cleanup of redundant styling**

Removing the `w-full` class is appropriate since `size-full` already sets both width and height to 100%, making the width class redundant.

</details>
<details>
<summary>src/components/Article/RightMenuContainer/index.tsx (1)</summary>

`9-9`: **LGTM! Good replacement of the button with the new MoreOptions component**

The new MoreOptions component provides more functionality than the previous button.

</details>
<details>
<summary>src/components/Article/RightMenuContainer/MoreOptions.tsx/index.tsx (4)</summary>

`1-4`: **LGTM! Clean import structure**

The imports are well-organized and follow best practices with appropriate separation between external and internal imports.

---

`6-7`: **Good practice extracting common button styles**

Extracting the common button styles into a constant makes the code more maintainable and reduces duplication.

---

`9-15`: **Well-structured reusable component with proper TypeScript typing**

The `MOMuneButton` component is well-structured with appropriate TypeScript interfaces and properly extends the HTML button attributes. The use of the `cn` utility for merging class names is also a good practice.

---

`25-29`: **Consider making the PopoverContent position more responsive**

The `sideOffset` is fixed at 80px which might not work well across different screen sizes and devices.

Consider using responsive design principles to adjust the offset based on screen size:

```diff
-        sideOffset={80}
+        sideOffset={{ base: 40, sm: 60, md: 80 }}
```

Please verify if this syntax is supported by the Popover component in your implementation.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-11T20:01:31Z
user: login: briansegs
state: COMMENTED
author_association: OWNER
submitted_at: 2025-04-11T20:02:57Z
user: login: coderabbitai[bot]
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-11T20:03:20Z
user: login: briansegs
state: COMMENTED
author_association: OWNER
submitted_at: 2025-04-11T20:03:25Z
user: login: coderabbitai[bot]
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-11T20:03:50Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 5**

<details>
<summary>🧹 Nitpick comments (4)</summary><blockquote>

<details>
<summary>tsconfig.json (1)</summary><blockquote>

`52-52`: **Adjust formatting for consistency in the include array.**

The new path has been added on the same line as the closing bracket, which differs from the formatting of other entries in the array. Consider moving it to its own line for better readability and consistency with the rest of the array.

```diff
  "include": [
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    "redirects.js",
    "next.config.js",
    "next-sitemap.config.cjs"
-    , "src/components/Article/RightMenuContainer/MoreOptions"  ],
+    , "src/components/Article/RightMenuContainer/MoreOptions"
+  ],
```

</blockquote></details>
<details>
<summary>src/components/Article/RightMenuContainer/MoreOptions/index.tsx (3)</summary><blockquote>

`6-7`: **Consider extracting button styles to a theme or constants file.**

The `buttonStyles` string contains styling that could potentially be reused across components. For better maintenance and consistency, consider moving these styles to a theme file or a constants file where they can be shared and maintained centrally.

---

`19-45`: **Consider adding keyboard navigation to the popover menu.**

The current implementation doesn't explicitly handle keyboard navigation within the popover menu. For better accessibility, consider adding keyboard navigation support to allow users to navigate between buttons using arrow keys.

---

`17-47`: **Consider accepting props for more flexibility.**

The `MoreOptions` component doesn't accept any props, which limits its reusability. Consider adding props to allow customization of button labels, actions, or styling.

```diff
-const MoreOptions: React.FC = () => {
+interface MoreOptionsProps {
+  className?: string;
+  // Add more props as needed
+}
+
+const MoreOptions: React.FC<MoreOptionsProps> = ({ className }) => {
   return (
-    <Popover>
+    <Popover className={className}>
```

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 55e667f8607ba51a8c971d5ac2410ab62e1a6817 and a00a671b2fa508dc009dd98fc09024a11af3e8d8.

</details>

<details>
<summary>📒 Files selected for processing (3)</summary>

* `src/components/Article/RightMenuContainer/MoreOptions/index.tsx` (1 hunks)
* `src/components/Article/RightMenuContainer/index.tsx` (1 hunks)
* `tsconfig.json` (1 hunks)

</details>

<details>
<summary>🚧 Files skipped from review as they are similar to previous changes (1)</summary>

* src/components/Article/RightMenuContainer/index.tsx

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🧬 Code Graph Analysis (1)</summary>

<details>
<summary>src/components/Article/RightMenuContainer/MoreOptions/index.tsx (3)</summary><blockquote>

<details>
<summary>src/utilities/ui.ts (1)</summary>

* `cn` (10-12)

</details>
<details>
<summary>src/components/ui/popover.tsx (3)</summary>

* `Popover` (31-31)
* `PopoverTrigger` (31-31)
* `PopoverContent` (31-31)

</details>
<details>
<summary>src/components/ui/button.tsx (1)</summary>

* `Button` (52-52)

</details>

</blockquote></details>

</details>

</details>

<details>
<summary>🔇 Additional comments (1)</summary><blockquote>

<details>
<summary>src/components/Article/RightMenuContainer/MoreOptions/index.tsx (1)</summary>

`1-49`: **Add onClick handlers and proper functionality to buttons.**

Currently, the buttons don't have any onClick handlers or actual functionality. Consider adding proper event handlers to make the buttons functional.

Can you confirm if the button functionality will be added in a future PR, or if this is intentional for styling purposes only?

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-11T20:11:30Z
user: login: briansegs
state: COMMENTED
author_association: OWNER
submitted_at: 2025-04-11T20:19:49Z
user: login: briansegs
state: COMMENTED
author_association: OWNER
submitted_at: 2025-04-11T20:20:05Z
user: login: coderabbitai[bot]
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-11T20:20:13Z
user: login: briansegs
state: COMMENTED
author_association: OWNER
submitted_at: 2025-04-11T20:20:13Z
user: login: coderabbitai[bot]
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-11T20:20:29Z
user: login: coderabbitai[bot]
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-11T20:20:36Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 6**

<details>
<summary>🧹 Nitpick comments (2)</summary><blockquote>

<details>
<summary>src/components/Article/RightMenuContainer/MoreOptionsButton/index.tsx (2)</summary><blockquote>

`6-7`: **Consider using a constant for repeated color values.**

The `buttonStyles` constant is a good approach for shared styling. However, there might be value in extracting the border color and shadow values to their own constants since they're used consistently across buttons.

---

`17-48`: **Consider adding a tooltip or title to explain the single-letter buttons.**

While the single-letter buttons maintain a clean UI, they might not be immediately intuitive to all users. Consider adding tooltips to explain what each button does on hover.


```diff
import { Button } from '@/components/ui/button'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import { cn } from '@/utilities/ui'
import React from 'react'

// Then wrap each MOMenuButton with a tooltip, for example:
+<TooltipProvider>
+  <Tooltip>
+    <TooltipTrigger asChild>
       <MOMenuButton className="self-end bg-[#0011ff]">P</MOMenuButton>
+    </TooltipTrigger>
+    <TooltipContent>
+      <p>Print</p>
+    </TooltipContent>
+  </Tooltip>
+</TooltipProvider>
```

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between a00a671b2fa508dc009dd98fc09024a11af3e8d8 and 37f206bc535242302d99c7e354aa7927479738ed.

</details>

<details>
<summary>📒 Files selected for processing (3)</summary>

* `src/components/Article/RightMenuContainer/MoreOptionsButton/index.tsx` (1 hunks)
* `src/components/Article/RightMenuContainer/index.tsx` (1 hunks)
* `tsconfig.json` (1 hunks)

</details>

<details>
<summary>🚧 Files skipped from review as they are similar to previous changes (2)</summary>

* tsconfig.json
* src/components/Article/RightMenuContainer/index.tsx

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🧬 Code Graph Analysis (1)</summary>

<details>
<summary>src/components/Article/RightMenuContainer/MoreOptionsButton/index.tsx (3)</summary><blockquote>

<details>
<summary>src/utilities/ui.ts (1)</summary>

* `cn` (10-12)

</details>
<details>
<summary>src/components/ui/popover.tsx (3)</summary>

* `Popover` (31-31)
* `PopoverTrigger` (31-31)
* `PopoverContent` (31-31)

</details>
<details>
<summary>src/components/ui/button.tsx (1)</summary>

* `Button` (52-52)

</details>

</blockquote></details>

</details>

</details>

<details>
<summary>🔇 Additional comments (2)</summary><blockquote>

<details>
<summary>src/components/Article/RightMenuContainer/MoreOptionsButton/index.tsx (2)</summary>

`9-15`: **Good implementation of a reusable MOMenuButton component.**

The component properly extends the standard HTML button attributes and uses the `cn` utility to combine class names. This allows for flexible styling while maintaining a consistent base appearance.

---

`26-30`: <details>
<summary>❓ Verification inconclusive</summary>

**Ensure popover positioning works on all screen sizes.**

The current implementation uses fixed offsets like `sideOffset={80}` and positioning classes. Verify that this works correctly on all target screen sizes and device orientations.

---

🏁 Script executed:

```shell
#!/bin/bash
# Check for responsive design considerations in the codebase
echo "Checking for responsive utility classes in the MoreOptionsButton component..."
rg "sm:|md:|lg:|xl:|2xl:" src/components/Article/RightMenuContainer/MoreOptionsButton/index.tsx
```

Length of output: 497

---



</details>

**Action: Review Popover Positioning Across Breakpoints**

The popover still uses a fixed offset (`sideOffset={80}`), although responsive classes like `sm:mt-0` on the `<PopoverContent>` and `sm:absolute` on the Button are in place. Please verify through manual testing on various screen sizes and device orientations that this fixed offset doesn't cause layout issues on smaller screens. If discrepancies are found, consider adjusting the offset value or employing relative units to ensure consistent positioning.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-11T20:22:21Z
user: login: briansegs
state: COMMENTED
author_association: OWNER
submitted_at: 2025-04-11T20:23:25Z
user: login: briansegs
state: COMMENTED
author_association: OWNER
submitted_at: 2025-04-11T20:23:31Z
user: login: coderabbitai[bot]
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-11T20:23:44Z
user: login: coderabbitai[bot]
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-11T20:24:26Z

Review comments:
diff_hunk: @@ -0,0 +1,49 @@
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { cn } from '@/utilities/ui'
+import React from 'react'
+
+const buttonStyles =
+  'size-14 rounded-full border-4 border-black font-serif text-white shadow-[10px_10px_10px_black] hover:text-white/50'
+
+interface MOMuneButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string
+}
+
+const MOMuneButton: React.FC<MOMuneButtonProps> = ({ className, ...props }) => (
+  <button className={cn(buttonStyles, className)} {...props} />
+)
+
+const MoreOptions: React.FC = () => {
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <Button className="bottom-2 right-2 block h-fit rounded-[8px] border-2 border-white bg-menu px-2 py-0 hover:bg-black sm:absolute">
+          MO
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        side={'left'}
+        sideOffset={80}
+        className="mt-12 flex h-64 w-fit gap-2 border-0 bg-transparent p-0 shadow-none sm:mt-0"
+      >
+        <div className="flex w-[90px] flex-col justify-between gap-2 py-9">
+          <MOMuneButton className="self-end bg-[#0011ff]">P</MOMuneButton>
+          <MOMuneButton className="bg-[#ff1c00]">M</MOMuneButton>
+          <MOMuneButton className="self-end bg-[#8a1384]">E</MOMuneButton>
+        </div>
path: src/components/Article/RightMenuContainer/MoreOptions.tsx/index.tsx
user: login: coderabbitai[bot]
body: _💡 Verification agent_

<details>
<summary>🧩 Analysis chain</summary>

**Add event handlers for buttons**

The buttons are currently defined without any onClick handlers. Make sure to implement the functionality for these buttons.

---

🌐 Web query:

```web
What's the best practice for adding onClick handlers to button components in React?
```

💡 Result:

To implement `onClick` handlers effectively in React button components, follow these best practices:

## Use Explicit Function Definitions
Define event handlers outside the render method or component return statement to avoid recreating functions on each render. This optimizes performance and ensures consistent behavior[4][8].  
```javascript
// Functional component example
const Button = () => {
  const handleClick = () => console.log('Clicked!');
  return <button onClick={handleClick}>Click</button>;
};
```

## Proper Parameter Passing
Use arrow functions to pass parameters without immediate invocation[1][5]:
```javascript
<ul>
  {items.map((item) => (
    <li key={item.id} onClick={() => handleItemClick(item.id)}>
      {item.text}
    </li>
  ))}
</ul>
```

## Synthetic Event Handling
React's synthetic event system provides cross-browser consistency. Access event properties through `event.target` and prevent default behavior when necessary[3][8]:
```javascript
const handleSubmit = (e) => {
  e.preventDefault();
  // Form handling logic
};
```

## Performance Optimization
Memoize handlers in functional components using `useCallback` when passing to child components[8]:
```javascript
const Button = React.memo(({ onClick }) => (
  <button onClick={onClick}>Click</button>
));

const Parent = () => {
  const handleClick = useCallback(() => {
    console.log('Optimized click!');
  }, []);
  return <Button onClick={handleClick} />;
};
```

## Event Delegation Pattern
For dynamic lists, attach a single handler to a parent element instead of individual elements[1][7]:
```javascript
const List = () => {
  const handleListClick = (e) => {
    if (e.target.tagName === 'LI') {
      console.log('Item ID:', e.target.dataset.id);
    }
  };
  return <ul onClick={handleListClick}>{/* List items */}</ul>;
};
```

## Class Component Considerations
In class components, bind handlers in the constructor or use arrow function class properties[3][4]:
```javascript
class Button extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    // Class component handler
  }

  render() {
    return <button onClick={this.handleClick}>Click</button>;
  }
}
```

## Accessibility & Semantics
Use proper HTML button elements for built-in accessibility features. Avoid using `<div>` or other non-interactive elements for click actions[9][10]:
```javascript
// Good practice
<button onClick={handleClick}>Submit</button>

// Anti-pattern
<div onClick={handleClick}>Submit</div>
```

Key considerations include:
- **Avoid inline arrow functions** in render for performance-critical components[4][8]
- **Handle event propagation** with `e.stopPropagation()` when needed[3]
- **Separate concerns** by keeping handlers focused on UI interactions while delegating business logic to other functions[7]
- **Use descriptive names** like `handleFormSubmit` instead of generic `handleClick`[7]

These practices ensure maintainable, performant, and accessible button components while leveraging React's event system effectively.

Citations:

- 1: https://blog.logrocket.com/react-onclick-event-handlers-guide/
- 2: https://withcodeexample.com/react-event-handling-guide/
- 3: https://dev.to/sidramaqbool/handling-events-in-react-with-best-practices-and-examples-1d75
- 4: https://www.angularminds.com/blog/react-onclick-event-handlers-a-complete-guide
- 5: https://www.w3schools.com/react/react_events.asp
- 6: https://www.newline.co/@andreeamaco/how-to-use-react-onclick-events-in-class-and-functional-components--fb63a01e
- 7: https://www.dhiwise.com/post/handling-multiple-and-conditional-onclick-events-in-react
- 8: https://www.freecodecamp.org/news/how-to-handle-events-in-react-19/
- 9: https://react.dev/learn/responding-to-events
- 10: https://nextjs.org/learn/react-foundations/updating-state

---



</details>

**Action Required: Implement onClick Handlers for MOMuneButton Components**

The current implementation of the MOMuneButton components in `src/components/Article/RightMenuContainer/MoreOptions.tsx` (lines 30–34) does not include any event handling. Based on React best practices, please update the code as follows:

- **Define Event Handlers:** Create dedicated functions (preferably using `useCallback` in functional components) outside of the JSX return block to avoid recreating them on every render.
- **Attach Handlers via Props:** Pass the handlers to each button using the `onClick` prop. For example, if the "P", "M", and "E" buttons have distinct behaviors, define and attach handlers like:
  ```tsx
  const handlePClick = useCallback(() => {
    // Handle P click event
  }, []);

  const handleMClick = useCallback(() => {
    // Handle M click event
  }, []);

  const handleEClick = useCallback(() => {
    // Handle E click event
  }, []);
  ```
  Then update the button components accordingly:
  ```tsx
  <div className="flex w-[90px] flex-col justify-between gap-2 py-9">
    <MOMuneButton onClick={handlePClick} className="self-end bg-[#0011ff]">P</MOMuneButton>
    <MOMuneButton onClick={handleMClick} className="bg-[#ff1c00]">M</MOMuneButton>
    <MOMuneButton onClick={handleEClick} className="self-end bg-[#8a1384]">E</MOMuneButton>
  </div>
  ```
- **Ensure Descriptive Naming:** Use clear and descriptive names for the handlers so that their purposes are immediately understandable.

This approach aligns with the best practices for React event handling, ensuring the component remains performant, maintainable, and accessible.

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-04-11T20:01:30Z
author_association: NONE
diff_hunk: @@ -0,0 +1,49 @@
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { cn } from '@/utilities/ui'
+import React from 'react'
+
+const buttonStyles =
+  'size-14 rounded-full border-4 border-black font-serif text-white shadow-[10px_10px_10px_black] hover:text-white/50'
+
+interface MOMuneButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string
+}
+
+const MOMuneButton: React.FC<MOMuneButtonProps> = ({ className, ...props }) => (
+  <button className={cn(buttonStyles, className)} {...props} />
+)
+
+const MoreOptions: React.FC = () => {
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <Button className="bottom-2 right-2 block h-fit rounded-[8px] border-2 border-white bg-menu px-2 py-0 hover:bg-black sm:absolute">
+          MO
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        side={'left'}
+        sideOffset={80}
+        className="mt-12 flex h-64 w-fit gap-2 border-0 bg-transparent p-0 shadow-none sm:mt-0"
+      >
+        <div className="flex w-[90px] flex-col justify-between gap-2 py-9">
+          <MOMuneButton className="self-end bg-[#0011ff]">P</MOMuneButton>
+          <MOMuneButton className="bg-[#ff1c00]">M</MOMuneButton>
+          <MOMuneButton className="self-end bg-[#8a1384]">E</MOMuneButton>
+        </div>
+
+        <div className="flex flex-col justify-between py-1.5">
+          <MOMuneButton className="bg-[#ffc8ce]">S</MOMuneButton>
+          <MOMuneButton className="bg-[#006c00]">K</MOMuneButton>
+        </div>
+
+        <div className="h-60">
+          <MOMuneButton className="ml-1 bg-[#0011ff]">B</MOMuneButton>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
path: src/components/Article/RightMenuContainer/MoreOptions.tsx/index.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Add accessibility improvements and more descriptive button labels**

The MoreOptions component structure is good, but there are several accessibility issues:

1. Single-letter button labels (P, M, E, S, K, B) aren't descriptive or intuitive for users
2. Missing accessibility attributes like `aria-label` or tooltips


Consider adding proper accessibility attributes and more descriptive labels:

```diff
-          <MOMuneButton className="self-end bg-[#0011ff]">P</MOMuneButton>
+          <MOMuneButton 
+            className="self-end bg-[#0011ff]" 
+            aria-label="Print" 
+            title="Print"
+          >
+            P
+          </MOMuneButton>
```

Also consider using theme variables instead of hardcoded color values for better maintainability:

```diff
-          <MOMuneButton className="self-end bg-[#0011ff]">P</MOMuneButton>
+          <MOMuneButton className="self-end bg-primary">P</MOMuneButton>
```


> Committable suggestion skipped: line range outside the PR's diff.

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-04-11T20:01:30Z
author_association: NONE
diff_hunk: @@ -0,0 +1,49 @@
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { cn } from '@/utilities/ui'
+import React from 'react'
+
+const buttonStyles =
+  'size-14 rounded-full border-4 border-black font-serif text-white shadow-[10px_10px_10px_black] hover:text-white/50'
+
+interface MOMuneButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string
+}
+
+const MOMuneButton: React.FC<MOMuneButtonProps> = ({ className, ...props }) => (
+  <button className={cn(buttonStyles, className)} {...props} />
+)
+
+const MoreOptions: React.FC = () => {
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <Button className="bottom-2 right-2 block h-fit rounded-[8px] border-2 border-white bg-menu px-2 py-0 hover:bg-black sm:absolute">
+          MO
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        side={'left'}
+        sideOffset={80}
+        className="mt-12 flex h-64 w-fit gap-2 border-0 bg-transparent p-0 shadow-none sm:mt-0"
+      >
+        <div className="flex w-[90px] flex-col justify-between gap-2 py-9">
+          <MOMuneButton className="self-end bg-[#0011ff]">P</MOMuneButton>
+          <MOMuneButton className="bg-[#ff1c00]">M</MOMuneButton>
+          <MOMuneButton className="self-end bg-[#8a1384]">E</MOMuneButton>
+        </div>
path: src/components/Article/RightMenuContainer/MoreOptions.tsx/index.tsx
user: login: briansegs
body: Those will be added later. This pr is for getting the layout down.
created_at: 2025-04-11T20:02:57Z
author_association: OWNER
diff_hunk: @@ -0,0 +1,49 @@
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { cn } from '@/utilities/ui'
+import React from 'react'
+
+const buttonStyles =
+  'size-14 rounded-full border-4 border-black font-serif text-white shadow-[10px_10px_10px_black] hover:text-white/50'
+
+interface MOMuneButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string
+}
+
+const MOMuneButton: React.FC<MOMuneButtonProps> = ({ className, ...props }) => (
+  <button className={cn(buttonStyles, className)} {...props} />
+)
+
+const MoreOptions: React.FC = () => {
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <Button className="bottom-2 right-2 block h-fit rounded-[8px] border-2 border-white bg-menu px-2 py-0 hover:bg-black sm:absolute">
+          MO
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        side={'left'}
+        sideOffset={80}
+        className="mt-12 flex h-64 w-fit gap-2 border-0 bg-transparent p-0 shadow-none sm:mt-0"
+      >
+        <div className="flex w-[90px] flex-col justify-between gap-2 py-9">
+          <MOMuneButton className="self-end bg-[#0011ff]">P</MOMuneButton>
+          <MOMuneButton className="bg-[#ff1c00]">M</MOMuneButton>
+          <MOMuneButton className="self-end bg-[#8a1384]">E</MOMuneButton>
+        </div>
path: src/components/Article/RightMenuContainer/MoreOptions.tsx/index.tsx
user: login: coderabbitai[bot]
body: @briansegs I understand! The focus of this PR is on getting the layout implemented first, and the event handlers will be added in a future update. That's a good approach to separate layout from functionality implementation. The layout looks good as is.



(\_/) 
(•ᴗ•) Noted! Taking it step by step.
---
<details>
<summary>✏️ Learnings added</summary>

```
Learnt from: briansegs
PR: briansegs/manza-search#32
File: src/components/Article/RightMenuContainer/MoreOptions.tsx/index.tsx:30-34
Timestamp: 2025-04-11T20:03:19.285Z
Learning: PR #32 "Add More options button" focuses on implementing the UI layout for the MoreOptions component first, with functionality (event handlers) to be added in a future PR.
```

> Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure [review instructions](https://docs.coderabbit.ai/guides/review-instructions). You can manage existing learnings in the [app](https://app.coderabbit.ai/learnings).

</details>



<!-- <agentComponentType>chat-answer</agentComponentType> -->

<!-- <rawResChunk><answer>@briansegs I understand! The focus of this PR is on getting the layout implemented first, and the event handlers will be added in a future update. That's a good approach to separate layout from functionality implementation. The layout looks good as is.



(\_/) 
(•ᴗ•) Noted! Taking it step by step.
---

<details>
<summary>✏️ Learnings added</summary>

```
Learnt from: briansegs
PR: briansegs/manza-search#32
File: src/components/Article/RightMenuContainer/MoreOptions.tsx/index.tsx:30-34
Timestamp: 2025-04-11T20:03:19.285Z
Learning: PR #32 "Add More options button" focuses on implementing the UI layout for the MoreOptions component first, with functionality (event handlers) to be added in a future PR.
```

> Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure [review instructions](https://docs.coderabbit.ai/guides/review-instructions). You can manage existing learnings in the [app](https://app.coderabbit.ai/learnings).

</details></answer></rawResChunk> -->

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-04-11T20:03:20Z
author_association: NONE
diff_hunk: @@ -0,0 +1,49 @@
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { cn } from '@/utilities/ui'
+import React from 'react'
+
+const buttonStyles =
+  'size-14 rounded-full border-4 border-black font-serif text-white shadow-[10px_10px_10px_black] hover:text-white/50'
+
+interface MOMuneButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string
+}
+
+const MOMuneButton: React.FC<MOMuneButtonProps> = ({ className, ...props }) => (
+  <button className={cn(buttonStyles, className)} {...props} />
+)
+
+const MoreOptions: React.FC = () => {
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <Button className="bottom-2 right-2 block h-fit rounded-[8px] border-2 border-white bg-menu px-2 py-0 hover:bg-black sm:absolute">
+          MO
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        side={'left'}
+        sideOffset={80}
+        className="mt-12 flex h-64 w-fit gap-2 border-0 bg-transparent p-0 shadow-none sm:mt-0"
+      >
+        <div className="flex w-[90px] flex-col justify-between gap-2 py-9">
+          <MOMuneButton className="self-end bg-[#0011ff]">P</MOMuneButton>
+          <MOMuneButton className="bg-[#ff1c00]">M</MOMuneButton>
+          <MOMuneButton className="self-end bg-[#8a1384]">E</MOMuneButton>
+        </div>
+
+        <div className="flex flex-col justify-between py-1.5">
+          <MOMuneButton className="bg-[#ffc8ce]">S</MOMuneButton>
+          <MOMuneButton className="bg-[#006c00]">K</MOMuneButton>
+        </div>
+
+        <div className="h-60">
+          <MOMuneButton className="ml-1 bg-[#0011ff]">B</MOMuneButton>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
path: src/components/Article/RightMenuContainer/MoreOptions.tsx/index.tsx
user: login: briansegs
body: Those will be added later. This pr is for getting the layout down.


created_at: 2025-04-11T20:03:25Z
author_association: OWNER
diff_hunk: @@ -0,0 +1,49 @@
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { cn } from '@/utilities/ui'
+import React from 'react'
+
+const buttonStyles =
+  'size-14 rounded-full border-4 border-black font-serif text-white shadow-[10px_10px_10px_black] hover:text-white/50'
+
+interface MOMuneButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string
+}
+
+const MOMuneButton: React.FC<MOMuneButtonProps> = ({ className, ...props }) => (
+  <button className={cn(buttonStyles, className)} {...props} />
+)
+
+const MoreOptions: React.FC = () => {
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <Button className="bottom-2 right-2 block h-fit rounded-[8px] border-2 border-white bg-menu px-2 py-0 hover:bg-black sm:absolute">
+          MO
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        side={'left'}
+        sideOffset={80}
+        className="mt-12 flex h-64 w-fit gap-2 border-0 bg-transparent p-0 shadow-none sm:mt-0"
+      >
+        <div className="flex w-[90px] flex-col justify-between gap-2 py-9">
+          <MOMuneButton className="self-end bg-[#0011ff]">P</MOMuneButton>
+          <MOMuneButton className="bg-[#ff1c00]">M</MOMuneButton>
+          <MOMuneButton className="self-end bg-[#8a1384]">E</MOMuneButton>
+        </div>
+
+        <div className="flex flex-col justify-between py-1.5">
+          <MOMuneButton className="bg-[#ffc8ce]">S</MOMuneButton>
+          <MOMuneButton className="bg-[#006c00]">K</MOMuneButton>
+        </div>
+
+        <div className="h-60">
+          <MOMuneButton className="ml-1 bg-[#0011ff]">B</MOMuneButton>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
path: src/components/Article/RightMenuContainer/MoreOptions.tsx/index.tsx
user: login: coderabbitai[bot]
body: @briansegs Understood! Focusing on layout implementation first is a good approach. Your plan to add accessibility improvements in a follow-up PR makes sense. I'll keep this in mind for future reviews.
---
<details>
<summary>✏️ Learnings added</summary>

```
Learnt from: briansegs
PR: briansegs/manza-search#32
File: src/components/Article/RightMenuContainer/MoreOptions.tsx/index.tsx:17-47
Timestamp: 2025-04-11T20:03:49.237Z
Learning: For the manza-search repository, the development approach is to focus on layout implementation first, with accessibility improvements (like aria-labels, titles) and theming (theme variables instead of hardcoded colors) to be added in follow-up PRs.
```

> Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure [review instructions](https://docs.coderabbit.ai/guides/review-instructions). You can manage existing learnings in the [app](https://app.coderabbit.ai/learnings).

</details>



<!-- <agentComponentType>chat-answer</agentComponentType> -->

<!-- <rawResChunk><answer>@briansegs Understood! Focusing on layout implementation first is a good approach. Your plan to add accessibility improvements in a follow-up PR makes sense. I'll keep this in mind for future reviews.
---

<details>
<summary>✏️ Learnings added</summary>

```
Learnt from: briansegs
PR: briansegs/manza-search#32
File: src/components/Article/RightMenuContainer/MoreOptions.tsx/index.tsx:17-47
Timestamp: 2025-04-11T20:03:49.237Z
Learning: For the manza-search repository, the development approach is to focus on layout implementation first, with accessibility improvements (like aria-labels, titles) and theming (theme variables instead of hardcoded colors) to be added in follow-up PRs.
```

> Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure [review instructions](https://docs.coderabbit.ai/guides/review-instructions). You can manage existing learnings in the [app](https://app.coderabbit.ai/learnings).

</details></answer></rawResChunk> -->

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-04-11T20:03:50Z
author_association: NONE
diff_hunk: @@ -0,0 +1,49 @@
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { cn } from '@/utilities/ui'
+import React from 'react'
+
+const buttonStyles =
+  'size-14 rounded-full border-4 border-black font-serif text-white shadow-[10px_10px_10px_black] hover:text-white/50'
+
+interface MOMuneButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string
+}
+
+const MOMuneButton: React.FC<MOMuneButtonProps> = ({ className, ...props }) => (
+  <button className={cn(buttonStyles, className)} {...props} />
+)
+
+const MoreOptions: React.FC = () => {
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <Button className="bottom-2 right-2 block h-fit rounded-[8px] border-2 border-white bg-menu px-2 py-0 hover:bg-black sm:absolute">
+          MO
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        side={'left'}
+        sideOffset={80}
+        className="mt-12 flex h-64 w-fit gap-2 border-0 bg-transparent p-0 shadow-none sm:mt-0"
+      >
path: src/components/Article/RightMenuContainer/MoreOptions/index.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Add an accessible name to the PopoverContent.**

For better accessibility, consider adding an aria-label to the PopoverContent component to describe its purpose.

```diff
      <PopoverContent
        side={'left'}
        sideOffset={80}
+       aria-label="More options menu"
        className="mt-12 flex h-64 w-fit gap-2 border-0 bg-transparent p-0 shadow-none sm:mt-0"
      >
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
      <PopoverContent
        side={'left'}
        sideOffset={80}
        aria-label="More options menu"
        className="mt-12 flex h-64 w-fit gap-2 border-0 bg-transparent p-0 shadow-none sm:mt-0"
      >
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-04-11T20:11:28Z
author_association: NONE
diff_hunk: @@ -0,0 +1,49 @@
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { cn } from '@/utilities/ui'
+import React from 'react'
+
+const buttonStyles =
+  'size-14 rounded-full border-4 border-black font-serif text-white shadow-[10px_10px_10px_black] hover:text-white/50'
+
+interface MOMuneButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string
+}
path: src/components/Article/RightMenuContainer/MoreOptions/index.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**The interface naming contains a typo.**

The interface name `MOMuneButtonProps` appears to contain a typo - "Mune" instead of "Menu". This typo is carried through to the component implementation as well.

```diff
-interface MOMuneButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+interface MOMenuButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   className?: string
 }
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
interface MOMenuButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  className?: string
}
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-04-11T20:11:29Z
author_association: NONE
diff_hunk: @@ -0,0 +1,49 @@
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { cn } from '@/utilities/ui'
+import React from 'react'
+
+const buttonStyles =
+  'size-14 rounded-full border-4 border-black font-serif text-white shadow-[10px_10px_10px_black] hover:text-white/50'
+
+interface MOMuneButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string
+}
+
+const MOMuneButton: React.FC<MOMuneButtonProps> = ({ className, ...props }) => (
+  <button className={cn(buttonStyles, className)} {...props} />
+)
path: src/components/Article/RightMenuContainer/MoreOptions/index.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Fix component naming typo and filter out non-HTML attributes.**

1. The component name contains the same typo as the interface.
2. When spreading props directly onto a DOM element, you should filter out any custom props that are not valid HTML attributes to avoid console warnings.


```diff
-const MOMuneButton: React.FC<MOMuneButtonProps> = ({ className, ...props }) => (
-  <button className={cn(buttonStyles, className)} {...props} />
+const MOMenuButton: React.FC<MOMenuButtonProps> = ({ className, ...props }) => (
+  <button className={cn(buttonStyles, className)} {...props} />
 )
```


> Committable suggestion skipped: line range outside the PR's diff.

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-04-11T20:11:29Z
author_association: NONE
diff_hunk: @@ -0,0 +1,49 @@
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { cn } from '@/utilities/ui'
+import React from 'react'
+
+const buttonStyles =
+  'size-14 rounded-full border-4 border-black font-serif text-white shadow-[10px_10px_10px_black] hover:text-white/50'
+
+interface MOMuneButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string
+}
+
+const MOMuneButton: React.FC<MOMuneButtonProps> = ({ className, ...props }) => (
+  <button className={cn(buttonStyles, className)} {...props} />
+)
+
+const MoreOptions: React.FC = () => {
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <Button className="bottom-2 right-2 block h-fit rounded-[8px] border-2 border-white bg-menu px-2 py-0 hover:bg-black sm:absolute">
+          MO
+        </Button>
path: src/components/Article/RightMenuContainer/MoreOptions/index.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Add aria-label to improve accessibility.**

The "MO" button label isn't descriptive enough for screen readers. Add an aria-label to clarify its purpose.

```diff
-        <Button className="bottom-2 right-2 block h-fit rounded-[8px] border-2 border-white bg-menu px-2 py-0 hover:bg-black sm:absolute">
+        <Button 
+          className="bottom-2 right-2 block h-fit rounded-[8px] border-2 border-white bg-menu px-2 py-0 hover:bg-black sm:absolute"
+          aria-label="More Options"
+        >
           MO
         </Button>
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
        <Button 
          className="bottom-2 right-2 block h-fit rounded-[8px] border-2 border-white bg-menu px-2 py-0 hover:bg-black sm:absolute"
          aria-label="More Options"
        >
          MO
        </Button>
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-04-11T20:11:29Z
author_association: NONE
diff_hunk: @@ -0,0 +1,49 @@
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { cn } from '@/utilities/ui'
+import React from 'react'
+
+const buttonStyles =
+  'size-14 rounded-full border-4 border-black font-serif text-white shadow-[10px_10px_10px_black] hover:text-white/50'
+
+interface MOMuneButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string
+}
+
+const MOMuneButton: React.FC<MOMuneButtonProps> = ({ className, ...props }) => (
+  <button className={cn(buttonStyles, className)} {...props} />
+)
+
+const MoreOptions: React.FC = () => {
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <Button className="bottom-2 right-2 block h-fit rounded-[8px] border-2 border-white bg-menu px-2 py-0 hover:bg-black sm:absolute">
+          MO
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        side={'left'}
+        sideOffset={80}
+        className="mt-12 flex h-64 w-fit gap-2 border-0 bg-transparent p-0 shadow-none sm:mt-0"
+      >
+        <div className="flex w-[90px] flex-col justify-between gap-2 py-9">
+          <MOMuneButton className="self-end bg-[#0011ff]">P</MOMuneButton>
+          <MOMuneButton className="bg-[#ff1c00]">M</MOMuneButton>
+          <MOMuneButton className="self-end bg-[#8a1384]">E</MOMuneButton>
+        </div>
+
+        <div className="flex flex-col justify-between py-1.5">
+          <MOMuneButton className="bg-[#ffc8ce]">S</MOMuneButton>
+          <MOMuneButton className="bg-[#006c00]">K</MOMuneButton>
+        </div>
+
+        <div className="h-60">
+          <MOMuneButton className="ml-1 bg-[#0011ff]">B</MOMuneButton>
+        </div>
path: src/components/Article/RightMenuContainer/MoreOptions/index.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Add descriptive aria-labels to all buttons for accessibility.**

All buttons use single-letter labels which aren't descriptive enough for screen readers. Add aria-labels to each button to describe its function.

```diff
-          <MOMuneButton className="self-end bg-[#0011ff]">P</MOMuneButton>
-          <MOMuneButton className="bg-[#ff1c00]">M</MOMuneButton>
-          <MOMuneButton className="self-end bg-[#8a1384]">E</MOMuneButton>
+          <MOMenuButton className="self-end bg-[#0011ff]" aria-label="Print">P</MOMenuButton>
+          <MOMenuButton className="bg-[#ff1c00]" aria-label="Mail">M</MOMenuButton>
+          <MOMenuButton className="self-end bg-[#8a1384]" aria-label="Export">E</MOMenuButton>

         <div className="flex flex-col justify-between py-1.5">
-          <MOMuneButton className="bg-[#ffc8ce]">S</MOMuneButton>
-          <MOMuneButton className="bg-[#006c00]">K</MOMuneButton>
+          <MOMenuButton className="bg-[#ffc8ce]" aria-label="Save">S</MOMenuButton>
+          <MOMenuButton className="bg-[#006c00]" aria-label="Bookmark">K</MOMenuButton>
         </div>

         <div className="h-60">
-          <MOMuneButton className="ml-1 bg-[#0011ff]">B</MOMuneButton>
+          <MOMenuButton className="ml-1 bg-[#0011ff]" aria-label="Back">B</MOMenuButton>
         </div>
```

Note: The aria-labels I've added are based on common button functions that match the letters. Please adjust them to accurately reflect the actual functionality of each button.


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
          <MOMenuButton className="self-end bg-[#0011ff]" aria-label="Print">P</MOMenuButton>
          <MOMenuButton className="bg-[#ff1c00]" aria-label="Mail">M</MOMenuButton>
          <MOMenuButton className="self-end bg-[#8a1384]" aria-label="Export">E</MOMenuButton>
        </div>

        <div className="flex flex-col justify-between py-1.5">
          <MOMenuButton className="bg-[#ffc8ce]" aria-label="Save">S</MOMenuButton>
          <MOMenuButton className="bg-[#006c00]" aria-label="Bookmark">K</MOMenuButton>
        </div>

        <div className="h-60">
          <MOMenuButton className="ml-1 bg-[#0011ff]" aria-label="Back">B</MOMenuButton>
        </div>
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-04-11T20:11:29Z
author_association: NONE
diff_hunk: @@ -0,0 +1,49 @@
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { cn } from '@/utilities/ui'
+import React from 'react'
+
+const buttonStyles =
+  'size-14 rounded-full border-4 border-black font-serif text-white shadow-[10px_10px_10px_black] hover:text-white/50'
+
+interface MOMuneButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string
+}
+
+const MOMuneButton: React.FC<MOMuneButtonProps> = ({ className, ...props }) => (
+  <button className={cn(buttonStyles, className)} {...props} />
+)
+
+const MoreOptions: React.FC = () => {
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <Button className="bottom-2 right-2 block h-fit rounded-[8px] border-2 border-white bg-menu px-2 py-0 hover:bg-black sm:absolute">
+          MO
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        side={'left'}
+        sideOffset={80}
+        className="mt-12 flex h-64 w-fit gap-2 border-0 bg-transparent p-0 shadow-none sm:mt-0"
+      >
path: src/components/Article/RightMenuContainer/MoreOptions/index.tsx
user: login: briansegs
body: Those will be added later. This pr is for getting the layout down.


created_at: 2025-04-11T20:19:49Z
author_association: OWNER
diff_hunk: @@ -0,0 +1,49 @@
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { cn } from '@/utilities/ui'
+import React from 'react'
+
+const buttonStyles =
+  'size-14 rounded-full border-4 border-black font-serif text-white shadow-[10px_10px_10px_black] hover:text-white/50'
+
+interface MOMuneButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string
+}
+
+const MOMuneButton: React.FC<MOMuneButtonProps> = ({ className, ...props }) => (
+  <button className={cn(buttonStyles, className)} {...props} />
+)
+
+const MoreOptions: React.FC = () => {
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <Button className="bottom-2 right-2 block h-fit rounded-[8px] border-2 border-white bg-menu px-2 py-0 hover:bg-black sm:absolute">
+          MO
+        </Button>
path: src/components/Article/RightMenuContainer/MoreOptions/index.tsx
user: login: briansegs
body: Those will be added later. This pr is for getting the layout down.


created_at: 2025-04-11T20:20:05Z
author_association: OWNER
diff_hunk: @@ -0,0 +1,49 @@
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { cn } from '@/utilities/ui'
+import React from 'react'
+
+const buttonStyles =
+  'size-14 rounded-full border-4 border-black font-serif text-white shadow-[10px_10px_10px_black] hover:text-white/50'
+
+interface MOMuneButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string
+}
+
+const MOMuneButton: React.FC<MOMuneButtonProps> = ({ className, ...props }) => (
+  <button className={cn(buttonStyles, className)} {...props} />
+)
+
+const MoreOptions: React.FC = () => {
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <Button className="bottom-2 right-2 block h-fit rounded-[8px] border-2 border-white bg-menu px-2 py-0 hover:bg-black sm:absolute">
+          MO
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        side={'left'}
+        sideOffset={80}
+        className="mt-12 flex h-64 w-fit gap-2 border-0 bg-transparent p-0 shadow-none sm:mt-0"
+      >
path: src/components/Article/RightMenuContainer/MoreOptions/index.tsx
user: login: coderabbitai[bot]
body: @briansegs Understood! Focusing on the layout first makes sense. I'll look forward to seeing the accessibility improvements in a future PR.



🐰 (thoughtful rabbit nodding in understanding)
---
<details>
<summary>✏️ Learnings added</summary>

```
Learnt from: briansegs
PR: briansegs/manza-search#32
File: src/components/Article/RightMenuContainer/MoreOptions/index.tsx:0-0
Timestamp: 2025-04-11T20:20:12.017Z
Learning: In the manza-search project, the development approach is to focus on layout implementation first, with accessibility features like aria-labels being added in subsequent PRs rather than in the initial implementation.
```

> Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure [review instructions](https://docs.coderabbit.ai/guides/review-instructions). You can manage existing learnings in the [app](https://app.coderabbit.ai/learnings).

</details>



<!-- <agentComponentType>chat-answer</agentComponentType> -->

<!-- <rawResChunk><answer>@briansegs Understood! Focusing on the layout first makes sense. I'll look forward to seeing the accessibility improvements in a future PR.



🐰 (thoughtful rabbit nodding in understanding)
---

<details>
<summary>✏️ Learnings added</summary>

```
Learnt from: briansegs
PR: briansegs/manza-search#32
File: src/components/Article/RightMenuContainer/MoreOptions/index.tsx:0-0
Timestamp: 2025-04-11T20:20:12.017Z
Learning: In the manza-search project, the development approach is to focus on layout implementation first, with accessibility features like aria-labels being added in subsequent PRs rather than in the initial implementation.
```

> Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure [review instructions](https://docs.coderabbit.ai/guides/review-instructions). You can manage existing learnings in the [app](https://app.coderabbit.ai/learnings).

</details></answer></rawResChunk> -->

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-04-11T20:20:13Z
author_association: NONE
diff_hunk: @@ -0,0 +1,49 @@
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { cn } from '@/utilities/ui'
+import React from 'react'
+
+const buttonStyles =
+  'size-14 rounded-full border-4 border-black font-serif text-white shadow-[10px_10px_10px_black] hover:text-white/50'
+
+interface MOMuneButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string
+}
+
+const MOMuneButton: React.FC<MOMuneButtonProps> = ({ className, ...props }) => (
+  <button className={cn(buttonStyles, className)} {...props} />
+)
+
+const MoreOptions: React.FC = () => {
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <Button className="bottom-2 right-2 block h-fit rounded-[8px] border-2 border-white bg-menu px-2 py-0 hover:bg-black sm:absolute">
+          MO
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        side={'left'}
+        sideOffset={80}
+        className="mt-12 flex h-64 w-fit gap-2 border-0 bg-transparent p-0 shadow-none sm:mt-0"
+      >
+        <div className="flex w-[90px] flex-col justify-between gap-2 py-9">
+          <MOMuneButton className="self-end bg-[#0011ff]">P</MOMuneButton>
+          <MOMuneButton className="bg-[#ff1c00]">M</MOMuneButton>
+          <MOMuneButton className="self-end bg-[#8a1384]">E</MOMuneButton>
+        </div>
+
+        <div className="flex flex-col justify-between py-1.5">
+          <MOMuneButton className="bg-[#ffc8ce]">S</MOMuneButton>
+          <MOMuneButton className="bg-[#006c00]">K</MOMuneButton>
+        </div>
+
+        <div className="h-60">
+          <MOMuneButton className="ml-1 bg-[#0011ff]">B</MOMuneButton>
+        </div>
path: src/components/Article/RightMenuContainer/MoreOptions/index.tsx
user: login: briansegs
body: Those will be added later. This pr is for getting the layout down.


created_at: 2025-04-11T20:20:13Z
author_association: OWNER
diff_hunk: @@ -0,0 +1,49 @@
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { cn } from '@/utilities/ui'
+import React from 'react'
+
+const buttonStyles =
+  'size-14 rounded-full border-4 border-black font-serif text-white shadow-[10px_10px_10px_black] hover:text-white/50'
+
+interface MOMuneButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string
+}
+
+const MOMuneButton: React.FC<MOMuneButtonProps> = ({ className, ...props }) => (
+  <button className={cn(buttonStyles, className)} {...props} />
+)
+
+const MoreOptions: React.FC = () => {
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <Button className="bottom-2 right-2 block h-fit rounded-[8px] border-2 border-white bg-menu px-2 py-0 hover:bg-black sm:absolute">
+          MO
+        </Button>
path: src/components/Article/RightMenuContainer/MoreOptions/index.tsx
user: login: coderabbitai[bot]
body: @briansegs Understood! Taking care of the layout first makes sense. I'll keep this workflow in mind for future reviews.



    (\ /)
    ( • ᴥ •)
    /|  \  Understanding your workflow!
---
<details>
<summary>✏️ Learnings added</summary>

```
Learnt from: briansegs
PR: briansegs/manza-search#32
File: src/components/Article/RightMenuContainer/MoreOptions/index.tsx:0-0
Timestamp: 2025-04-11T20:20:28.199Z
Learning: For this repository, briansegs prefers to focus on layout implementation first, and then address accessibility concerns (like aria-labels) in subsequent PRs.
```

> Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure [review instructions](https://docs.coderabbit.ai/guides/review-instructions). You can manage existing learnings in the [app](https://app.coderabbit.ai/learnings).

</details>



<!-- <agentComponentType>chat-answer</agentComponentType> -->

<!-- <rawResChunk><answer>@briansegs Understood! Taking care of the layout first makes sense. I'll keep this workflow in mind for future reviews.



    (\ /)
    ( • ᴥ •)
    /|  \  Understanding your workflow!
---

<details>
<summary>✏️ Learnings added</summary>

```
Learnt from: briansegs
PR: briansegs/manza-search#32
File: src/components/Article/RightMenuContainer/MoreOptions/index.tsx:0-0
Timestamp: 2025-04-11T20:20:28.199Z
Learning: For this repository, briansegs prefers to focus on layout implementation first, and then address accessibility concerns (like aria-labels) in subsequent PRs.
```

> Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure [review instructions](https://docs.coderabbit.ai/guides/review-instructions). You can manage existing learnings in the [app](https://app.coderabbit.ai/learnings).

</details></answer></rawResChunk> -->

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-04-11T20:20:29Z
author_association: NONE
diff_hunk: @@ -0,0 +1,49 @@
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { cn } from '@/utilities/ui'
+import React from 'react'
+
+const buttonStyles =
+  'size-14 rounded-full border-4 border-black font-serif text-white shadow-[10px_10px_10px_black] hover:text-white/50'
+
+interface MOMuneButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string
+}
+
+const MOMuneButton: React.FC<MOMuneButtonProps> = ({ className, ...props }) => (
+  <button className={cn(buttonStyles, className)} {...props} />
+)
+
+const MoreOptions: React.FC = () => {
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <Button className="bottom-2 right-2 block h-fit rounded-[8px] border-2 border-white bg-menu px-2 py-0 hover:bg-black sm:absolute">
+          MO
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        side={'left'}
+        sideOffset={80}
+        className="mt-12 flex h-64 w-fit gap-2 border-0 bg-transparent p-0 shadow-none sm:mt-0"
+      >
+        <div className="flex w-[90px] flex-col justify-between gap-2 py-9">
+          <MOMuneButton className="self-end bg-[#0011ff]">P</MOMuneButton>
+          <MOMuneButton className="bg-[#ff1c00]">M</MOMuneButton>
+          <MOMuneButton className="self-end bg-[#8a1384]">E</MOMuneButton>
+        </div>
+
+        <div className="flex flex-col justify-between py-1.5">
+          <MOMuneButton className="bg-[#ffc8ce]">S</MOMuneButton>
+          <MOMuneButton className="bg-[#006c00]">K</MOMuneButton>
+        </div>
+
+        <div className="h-60">
+          <MOMuneButton className="ml-1 bg-[#0011ff]">B</MOMuneButton>
+        </div>
path: src/components/Article/RightMenuContainer/MoreOptions/index.tsx
user: login: coderabbitai[bot]
body: @briansegs Understood! Focusing on getting the layout right first makes sense. We'll revisit the accessibility improvements in a future PR.



<!-- <agentComponentType>chat-answer</agentComponentType> -->

<!-- <rawResChunk><answer>@briansegs Understood! Focusing on getting the layout right first makes sense. We'll revisit the accessibility improvements in a future PR.</answer></rawResChunk> -->

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-04-11T20:20:36Z
author_association: NONE
diff_hunk: @@ -0,0 +1,50 @@
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { cn } from '@/utilities/ui'
+import React from 'react'
+
+const buttonStyles =
+  'size-14 rounded-full border-4 border-black font-serif text-white shadow-[10px_10px_10px_black] hover:text-white/50'
+
+interface MOMenuButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string
+}
+
+const MOMenuButton: React.FC<MOMenuButtonProps> = ({ className, ...props }) => (
+  <button className={cn(buttonStyles, className)} {...props} />
+)
+
+const MoreOptions: React.FC = () => {
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <Button className="bottom-2 right-2 block h-fit rounded-[8px] border-2 border-white bg-menu px-2 py-0 hover:bg-black sm:absolute">
+          MO
+        </Button>
+      </PopoverTrigger>
+
+      <PopoverContent
+        side={'left'}
+        sideOffset={80}
+        className="mt-12 flex h-64 w-fit gap-2 border-0 bg-transparent p-0 shadow-none sm:mt-0"
+      >
+        <div className="flex w-[90px] flex-col justify-between gap-2 py-9">
+          <MOMenuButton className="self-end bg-[#0011ff]">P</MOMenuButton>
+          <MOMenuButton className="bg-[#ff1c00]">M</MOMenuButton>
+          <MOMenuButton className="self-end bg-[#8a1384]">E</MOMenuButton>
+        </div>
+
+        <div className="flex flex-col justify-between py-1.5">
+          <MOMenuButton className="bg-[#ffc8ce]">S</MOMenuButton>
+          <MOMenuButton className="bg-[#006c00]">K</MOMenuButton>
+        </div>
+
+        <div className="h-60">
+          <MOMenuButton className="ml-1 bg-[#0011ff]">B</MOMenuButton>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
path: src/components/Article/RightMenuContainer/MoreOptionsButton/index.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Consider implementing keyboard navigation between menu buttons.**

For better accessibility, implement keyboard navigation between the buttons in the popover. This would allow users to navigate using Tab and arrow keys.


Consider implementing focus management within the popover, using focus trapping and ensuring the Tab key navigates between the buttons in a logical order.

---

_🛠️ Refactor suggestion_

**Implement proper event handling to close the popover after button clicks.**

Currently, there's no logic to close the popover after a user selects an option. This should be implemented to provide a better user experience.


```diff
const MoreOptions: React.FC = () => {
+  const [open, setOpen] = React.useState(false);
+  
+  const handleAction = (action: string) => {
+    // Handle the action (e.g., print, mark, export)
+    console.log(`Action: ${action}`);
+    // Close the popover after action
+    setOpen(false);
+  };
+  
  return (
-    <Popover>
+    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger>
        // ...
```


> Committable suggestion skipped: line range outside the PR's diff.

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-11T20:22:20Z
author_association: NONE
diff_hunk: @@ -0,0 +1,50 @@
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { cn } from '@/utilities/ui'
+import React from 'react'
+
+const buttonStyles =
+  'size-14 rounded-full border-4 border-black font-serif text-white shadow-[10px_10px_10px_black] hover:text-white/50'
+
+interface MOMenuButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string
+}
+
+const MOMenuButton: React.FC<MOMenuButtonProps> = ({ className, ...props }) => (
+  <button className={cn(buttonStyles, className)} {...props} />
+)
+
+const MoreOptions: React.FC = () => {
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <Button className="bottom-2 right-2 block h-fit rounded-[8px] border-2 border-white bg-menu px-2 py-0 hover:bg-black sm:absolute">
+          MO
+        </Button>
+      </PopoverTrigger>
path: src/components/Article/RightMenuContainer/MoreOptionsButton/index.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Add accessibility attributes to the trigger button.**

The "MO" button lacks accessibility attributes that would help users understand its purpose. Consider adding `aria-label` and potentially `aria-haspopup` attributes.


```diff
<Button className="bottom-2 right-2 block h-fit rounded-[8px] border-2 border-white bg-menu px-2 py-0 hover:bg-black sm:absolute"
+       aria-label="More Options" 
+       aria-haspopup="true"
>
  MO
</Button>
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
const MoreOptions: React.FC = () => {
  return (
    <Popover>
      <PopoverTrigger>
        <Button
          className="bottom-2 right-2 block h-fit rounded-[8px] border-2 border-white bg-menu px-2 py-0 hover:bg-black sm:absolute"
          aria-label="More Options"
          aria-haspopup="true"
        >
          MO
        </Button>
      </PopoverTrigger>
    </Popover>
  );
};
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-11T20:22:20Z
author_association: NONE
diff_hunk: @@ -0,0 +1,50 @@
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { cn } from '@/utilities/ui'
+import React from 'react'
+
+const buttonStyles =
+  'size-14 rounded-full border-4 border-black font-serif text-white shadow-[10px_10px_10px_black] hover:text-white/50'
+
+interface MOMenuButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string
+}
+
+const MOMenuButton: React.FC<MOMenuButtonProps> = ({ className, ...props }) => (
+  <button className={cn(buttonStyles, className)} {...props} />
+)
+
+const MoreOptions: React.FC = () => {
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <Button className="bottom-2 right-2 block h-fit rounded-[8px] border-2 border-white bg-menu px-2 py-0 hover:bg-black sm:absolute">
+          MO
+        </Button>
+      </PopoverTrigger>
+
+      <PopoverContent
+        side={'left'}
+        sideOffset={80}
+        className="mt-12 flex h-64 w-fit gap-2 border-0 bg-transparent p-0 shadow-none sm:mt-0"
+      >
+        <div className="flex w-[90px] flex-col justify-between gap-2 py-9">
+          <MOMenuButton className="self-end bg-[#0011ff]">P</MOMenuButton>
+          <MOMenuButton className="bg-[#ff1c00]">M</MOMenuButton>
+          <MOMenuButton className="self-end bg-[#8a1384]">E</MOMenuButton>
+        </div>
+
+        <div className="flex flex-col justify-between py-1.5">
+          <MOMenuButton className="bg-[#ffc8ce]">S</MOMenuButton>
+          <MOMenuButton className="bg-[#006c00]">K</MOMenuButton>
+        </div>
+
+        <div className="h-60">
+          <MOMenuButton className="ml-1 bg-[#0011ff]">B</MOMenuButton>
+        </div>
path: src/components/Article/RightMenuContainer/MoreOptionsButton/index.tsx
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Add onClick handler and aria-label to "B" MOMenuButton.**

The "B" button also needs proper handler and accessibility attribute.


```diff
<div className="h-60">
-  <MOMenuButton className="ml-1 bg-[#0011ff]">B</MOMenuButton>
+  <MOMenuButton 
+    className="ml-1 bg-[#0011ff]" 
+    aria-label="Bookmark" 
+    onClick={() => handleAction('bookmark')}
+  >B</MOMenuButton>
</div>
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
        <div className="h-60">
          <MOMenuButton 
            className="ml-1 bg-[#0011ff]" 
            aria-label="Bookmark" 
            onClick={() => handleAction('bookmark')}
          >B</MOMenuButton>
        </div>
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-11T20:22:21Z
author_association: NONE
diff_hunk: @@ -0,0 +1,50 @@
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { cn } from '@/utilities/ui'
+import React from 'react'
+
+const buttonStyles =
+  'size-14 rounded-full border-4 border-black font-serif text-white shadow-[10px_10px_10px_black] hover:text-white/50'
+
+interface MOMenuButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string
+}
+
+const MOMenuButton: React.FC<MOMenuButtonProps> = ({ className, ...props }) => (
+  <button className={cn(buttonStyles, className)} {...props} />
+)
+
+const MoreOptions: React.FC = () => {
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <Button className="bottom-2 right-2 block h-fit rounded-[8px] border-2 border-white bg-menu px-2 py-0 hover:bg-black sm:absolute">
+          MO
+        </Button>
+      </PopoverTrigger>
+
+      <PopoverContent
+        side={'left'}
+        sideOffset={80}
+        className="mt-12 flex h-64 w-fit gap-2 border-0 bg-transparent p-0 shadow-none sm:mt-0"
+      >
+        <div className="flex w-[90px] flex-col justify-between gap-2 py-9">
+          <MOMenuButton className="self-end bg-[#0011ff]">P</MOMenuButton>
+          <MOMenuButton className="bg-[#ff1c00]">M</MOMenuButton>
+          <MOMenuButton className="self-end bg-[#8a1384]">E</MOMenuButton>
+        </div>
+
+        <div className="flex flex-col justify-between py-1.5">
+          <MOMenuButton className="bg-[#ffc8ce]">S</MOMenuButton>
+          <MOMenuButton className="bg-[#006c00]">K</MOMenuButton>
+        </div>
path: src/components/Article/RightMenuContainer/MoreOptionsButton/index.tsx
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Add onClick handlers and aria-labels to second group of MOMenuButtons.**

Similarly to the previous group, these buttons need proper handlers and accessibility attributes.


```diff
<div className="flex flex-col justify-between py-1.5">
-  <MOMenuButton className="bg-[#ffc8ce]">S</MOMenuButton>
-  <MOMenuButton className="bg-[#006c00]">K</MOMenuButton>
+  <MOMenuButton 
+    className="bg-[#ffc8ce]" 
+    aria-label="Share" 
+    onClick={() => handleAction('share')}
+  >S</MOMenuButton>
+  <MOMenuButton 
+    className="bg-[#006c00]" 
+    aria-label="Keep" 
+    onClick={() => handleAction('keep')}
+  >K</MOMenuButton>
</div>
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
        <div className="flex flex-col justify-between py-1.5">
          <MOMenuButton 
            className="bg-[#ffc8ce]" 
            aria-label="Share" 
            onClick={() => handleAction('share')}
          >S</MOMenuButton>
          <MOMenuButton 
            className="bg-[#006c00]" 
            aria-label="Keep" 
            onClick={() => handleAction('keep')}
          >K</MOMenuButton>
        </div>
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-11T20:22:21Z
author_association: NONE
diff_hunk: @@ -0,0 +1,50 @@
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { cn } from '@/utilities/ui'
+import React from 'react'
+
+const buttonStyles =
+  'size-14 rounded-full border-4 border-black font-serif text-white shadow-[10px_10px_10px_black] hover:text-white/50'
+
+interface MOMenuButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string
+}
+
+const MOMenuButton: React.FC<MOMenuButtonProps> = ({ className, ...props }) => (
+  <button className={cn(buttonStyles, className)} {...props} />
+)
+
+const MoreOptions: React.FC = () => {
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <Button className="bottom-2 right-2 block h-fit rounded-[8px] border-2 border-white bg-menu px-2 py-0 hover:bg-black sm:absolute">
+          MO
+        </Button>
+      </PopoverTrigger>
+
+      <PopoverContent
+        side={'left'}
+        sideOffset={80}
+        className="mt-12 flex h-64 w-fit gap-2 border-0 bg-transparent p-0 shadow-none sm:mt-0"
+      >
+        <div className="flex w-[90px] flex-col justify-between gap-2 py-9">
+          <MOMenuButton className="self-end bg-[#0011ff]">P</MOMenuButton>
+          <MOMenuButton className="bg-[#ff1c00]">M</MOMenuButton>
+          <MOMenuButton className="self-end bg-[#8a1384]">E</MOMenuButton>
+        </div>
path: src/components/Article/RightMenuContainer/MoreOptionsButton/index.tsx
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Add onClick handlers and aria-labels to MOMenuButtons.**

These buttons currently don't have any functionality defined, and the single-letter labels aren't descriptive for screen readers. Consider adding proper onClick handlers and aria-labels to each button.


```diff
<div className="flex w-[90px] flex-col justify-between gap-2 py-9">
-  <MOMenuButton className="self-end bg-[#0011ff]">P</MOMenuButton>
-  <MOMenuButton className="bg-[#ff1c00]">M</MOMenuButton>
-  <MOMenuButton className="self-end bg-[#8a1384]">E</MOMenuButton>
+  <MOMenuButton 
+    className="self-end bg-[#0011ff]" 
+    aria-label="Print" 
+    onClick={() => handleAction('print')}
+  >P</MOMenuButton>
+  <MOMenuButton 
+    className="bg-[#ff1c00]" 
+    aria-label="Mark" 
+    onClick={() => handleAction('mark')}
+  >M</MOMenuButton>
+  <MOMenuButton 
+    className="self-end bg-[#8a1384]" 
+    aria-label="Export" 
+    onClick={() => handleAction('export')}
+  >E</MOMenuButton>
</div>
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
        <div className="flex w-[90px] flex-col justify-between gap-2 py-9">
          <MOMenuButton 
            className="self-end bg-[#0011ff]" 
            aria-label="Print" 
            onClick={() => handleAction('print')}
          >P</MOMenuButton>
          <MOMenuButton 
            className="bg-[#ff1c00]" 
            aria-label="Mark" 
            onClick={() => handleAction('mark')}
          >M</MOMenuButton>
          <MOMenuButton 
            className="self-end bg-[#8a1384]" 
            aria-label="Export" 
            onClick={() => handleAction('export')}
          >E</MOMenuButton>
        </div>
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-11T20:22:21Z
author_association: NONE
diff_hunk: @@ -0,0 +1,49 @@
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { cn } from '@/utilities/ui'
+import React from 'react'
+
+const buttonStyles =
+  'size-14 rounded-full border-4 border-black font-serif text-white shadow-[10px_10px_10px_black] hover:text-white/50'
+
+interface MOMuneButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string
+}
path: src/components/Article/RightMenuContainer/MoreOptions/index.tsx
user: login: briansegs
body: addressed in [37f206b](https://github.com/briansegs/manza-search/pull/32/commits/37f206bc535242302d99c7e354aa7927479738ed)
created_at: 2025-04-11T20:23:25Z
author_association: OWNER
diff_hunk: @@ -0,0 +1,49 @@
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { cn } from '@/utilities/ui'
+import React from 'react'
+
+const buttonStyles =
+  'size-14 rounded-full border-4 border-black font-serif text-white shadow-[10px_10px_10px_black] hover:text-white/50'
+
+interface MOMuneButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string
+}
+
+const MOMuneButton: React.FC<MOMuneButtonProps> = ({ className, ...props }) => (
+  <button className={cn(buttonStyles, className)} {...props} />
+)
path: src/components/Article/RightMenuContainer/MoreOptions/index.tsx
user: login: briansegs
body: addressed in [37f206b](https://github.com/briansegs/manza-search/pull/32/commits/37f206bc535242302d99c7e354aa7927479738ed)
created_at: 2025-04-11T20:23:31Z
author_association: OWNER
diff_hunk: @@ -0,0 +1,49 @@
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { cn } from '@/utilities/ui'
+import React from 'react'
+
+const buttonStyles =
+  'size-14 rounded-full border-4 border-black font-serif text-white shadow-[10px_10px_10px_black] hover:text-white/50'
+
+interface MOMuneButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string
+}
path: src/components/Article/RightMenuContainer/MoreOptions/index.tsx
user: login: coderabbitai[bot]
body: @briansegs Thanks for addressing the typo! I appreciate your prompt action on the feedback.



<!-- <agentComponentType>chat-answer</agentComponentType> -->

<!-- <rawResChunk><answer>@briansegs Thanks for addressing the typo! I appreciate your prompt action on the feedback.</answer></rawResChunk> -->

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-04-11T20:23:44Z
author_association: NONE
diff_hunk: @@ -0,0 +1,49 @@
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { cn } from '@/utilities/ui'
+import React from 'react'
+
+const buttonStyles =
+  'size-14 rounded-full border-4 border-black font-serif text-white shadow-[10px_10px_10px_black] hover:text-white/50'
+
+interface MOMuneButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string
+}
+
+const MOMuneButton: React.FC<MOMuneButtonProps> = ({ className, ...props }) => (
+  <button className={cn(buttonStyles, className)} {...props} />
+)
path: src/components/Article/RightMenuContainer/MoreOptions/index.tsx
user: login: coderabbitai[bot]
body: <details>
<summary>🧩 Analysis chain</summary>

🏁 Script executed:
```
#!/bin/bash
# Fetch the commit details for 37f206b
git show 37f206bc535242302d99c7e354aa7927479738ed
```

Length of output: 122932

---

🏁 Script executed:
```
#!/bin/bash
# Fetch the specific change to the MOMenuButton component
git show 37f206bc535242302d99c7e354aa7927479738ed -- 'src/components/Article/RightMenuContainer/MoreOptions*'
```

Length of output: 2374

---
</details>

@briansegs Thank you for making those corrections! I can see that you've fixed the component and interface names in the commit, changing from "MOMune" to "MOMenu" as suggested.



<!-- <agentComponentType>chat-answer</agentComponentType> -->

<!-- <rawResChunk><answer><details>
<summary>🧩 Analysis chain</summary>

🏁 Script executed:
```
#!/bin/bash
# Fetch the commit details for 37f206b
git show 37f206bc535242302d99c7e354aa7927479738ed
```

Length of output: 122932

---

🏁 Script executed:
```
#!/bin/bash
# Fetch the specific change to the MOMenuButton component
git show 37f206bc535242302d99c7e354aa7927479738ed -- 'src/components/Article/RightMenuContainer/MoreOptions*'
```

Length of output: 2374

---



</details>

@briansegs Thank you for making those corrections! I can see that you've fixed the component and interface names in the commit, changing from "MOMune" to "MOMenu" as suggested.</answer></rawResChunk> -->

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-04-11T20:24:25Z
author_association: NONE

PR comments:
user: login: vercel[bot]
created_at: 2025-04-11T19:57:07Z
body: [vc]: #4lnstQbrFvo/Y3KVVwEnnq2zsvOIuci7CN+wh8XkqKQ=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJtYW56YS1zZWFyY2giLCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vYnJpYW5zLXByb2plY3RzLWEzNWEwMTYwL21hbnphLXNlYXJjaC9BbXJ0UGRBakd2VGljQVVkWUtmaUh5UUJCSk5xIiwicHJldmlld1VybCI6Im1hbnphLXNlYXJjaC1naXQtYnJpYW4tbW9yZS1vcHQtYzc4MGM5LWJyaWFucy1wcm9qZWN0cy1hMzVhMDE2MC52ZXJjZWwuYXBwIiwibmV4dENvbW1pdFN0YXR1cyI6IkRFUExPWUVEIiwibGl2ZUZlZWRiYWNrIjp7InJlc29sdmVkIjowLCJ1bnJlc29sdmVkIjowLCJ0b3RhbCI6MCwibGluayI6Im1hbnphLXNlYXJjaC1naXQtYnJpYW4tbW9yZS1vcHQtYzc4MGM5LWJyaWFucy1wcm9qZWN0cy1hMzVhMDE2MC52ZXJjZWwuYXBwIn0sInJvb3REaXJlY3RvcnkiOm51bGx9XX0=
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **manza-search** | ✅ Ready ([Inspect](https://vercel.com/brians-projects-a35a0160/manza-search/AmrtPdAjGvTicAUdYKfiHyQBBJNq)) | [Visit Preview](https://manza-search-git-brian-more-opt-c780c9-brians-projects-a35a0160.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/manza-search-git-brian-more-opt-c780c9-brians-projects-a35a0160.vercel.app?via=pr-comment-feedback-link) | Apr 11, 2025 8:20pm |


author_association: NONE
user: login: coderabbitai[bot]
created_at: 2025-04-11T19:57:09Z
body: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- walkthrough_start -->

## Walkthrough
This update removes the `w-full` class from a div in the BottomMenu component, adjusts the RightMenuContainer by replacing a Button labeled "MO" with a new MoreOptionsButton, and introduces a new MoreOptions component that leverages a Popover with multiple MOMenuButton options. The TypeScript configuration was updated to include the new MoreOptionsButton path without altering any exported public entities.

## Changes

| File(s) | Change Summary |
|---------|----------------|
| `src/components/Article/BottomMenu/index.tsx` | Removed the `w-full` class from a div element, modifying its width styling. |
| `src/components/Article/RightMenuContainer/index.tsx` and `src/.../MoreOptionsButton/index.tsx` | In RightMenuContainer: Removed an old Button (labeled "MO") and added a MoreOptionsButton. Introduced a new MoreOptions component that displays a Popover with multiple MOMenuButton options. |
| `tsconfig.json` | Added `"src/components/Article/RightMenuContainer/MoreOptionsButton"` to the "include" array for TypeScript compilation. |

## Sequence Diagram(s)
```mermaid
sequenceDiagram
  participant U as User
  participant RM as RightMenuContainer
  participant MOB as MoreOptionsButton
  participant MO as MoreOptions (Popover)
  participant MB as MOMenuButton

  U->>RM: Clicks MoreOptions button
  RM->>MOB: Delegates click event
  MOB->>MO: Opens Popover
  MO->>MB: Renders menu options (P, M, E, S, K, B)
  U->>MO: Selects an option
  MO->>RM: Notifies selection event
```

## Poem
> Hop, hop, I scurry along the code lane,  
> Whiskers twitch as changes now reign.  
> Removed the extra width with a nimble leap,  
> New buttons pop up, their secrets to keep.  
> A joyful bunny's tale in code so bright,  
> Celebrating each tweak from morn till night!  
> 🐇✨

<!-- walkthrough_end -->

<!-- announcements_start -->

> [!TIP]
> <details>
> <summary>⚡💬 Agentic Chat (Pro Plan, General Availability)</summary>
> 
> - We're introducing multi-step agentic chat in review comments and issue comments, within and outside of PR's. This feature enhances review and issue discussions with the CodeRabbit agentic chat by enabling advanced interactions, including the ability to create pull requests directly from comments and add commits to existing pull requests.
> 
> </details>

<!-- announcements_end -->
<!-- internal state start -->


<!-- DwQgtGAEAqAWCWBnSTIEMB26CuAXA9mAOYCmGJATmriQCaQDG+Ats2bgFyQAOFk+AIwBWJBrngA3EsgEBPRvlqU0AgfFwA6NPEgQAfACgjoCEejqANiS4BBWvQCy+CiX7dx+DDLwEMBgHLYzAKUXADMAEwGAKqIoZACFPCYcUSIRvrG4FBk9PgAZjgExGTKNPRMrOxcvPzCouJSMvJMSlSq6lo6mSZQcKiomEWEpORU5QpVGJyQVADukIhBzGgU8nIKbSpqmtq6YIZZpgaIFAwA9JXcnuyI5zYU4gxW5wBC+LgEzA5k2OfwGCUAA8NLhEECOAYAEQwgwAYjhkBsAEkSmNqHRFstVvICoxYJhSOkDHBXAwCRhSCgMBJ8BYmpBcLBXC5mPgJGgLPxCkzXAADOZgfLYCwWPmMCxoRDIfIUFjoSB82iScUkKxsaaQObqBBYXmK96fFg/DDYcVXG7TDQwZn8JJEAGcyAWAGuAHPbBKej655S5ACoUisUAGi1CHJzvgAGs1fI4rhGbbtbQmdzE/zlRJxQRIABGAAM+YApGn1MhuKt2ApptoxtbSZA2cr8vBMS7yPxmGXE6hfdLQ9caNNkqL5JyaElKemtfAU7AEiQCRJ4M40/qlSr67aXIgE3j9buKNgxNgXOhAZBhRgxCuMJz1LiebaLeRNaza8hsNeKaRaKH3RYnoAkQ068NIZAMK4+62nyAAi+AMAACmgtDmiw1yvgmmDeraSwUHKX7KlOkqyPgeAaEYRgIkiFgTtQt7IDm+pKL64wMWmJBAtcjyYqu3DYAILoMJA7DqK2xJQP4+DoLRZTsUxtosZKbGeMgeKcdxEx8QJQkicO4jSFqlCuCsSjUj2yDNvkFEwlCGTHKcFwvrc9yPPAzwkOcABK8BELAuAmtgADCni4LWlD/ICnGguCkK2fCiIomiZSYksrA4mm5KEtIZjPj+hkAtOfI+X5AW/GhzAYVWAK0vSrj6qy7JOniaAGj4ngVVVmrYdOKHKh4WAtYqTguAA8u4DGvO1GCdZamiQAAytwojwC2DCchYsihuuU1GjNibUFqUo8C4y5kYgm3Uh6Xozqm+qSiEXJQg4o1QpABIyCQZCQEoVjlKGczhvO46UIxtrYHEfAAhO+RoJBCTyI1y5Tkyh0CNNl5ysw04uFFLh5Hg/HzciWDdtwkqQdtMEjSQ40DYgu2+LNmHvcdITfdDcq0MedAA0DjZoPIvDsrOrh9WJnhOleN6Sy6uC4nw+ATapjLSfqEOUKG46wGRfnTogy0MKt7kLkuK6K4UfI03Tk3TeKqAYB8P0kGF8BWPQhX6sLy43VZW5QVIVCiosuBHieZ7QfyJX+YF4rvgCyDQ3DuAAzq04kWRWEXrusjtiBkdYvhZGAsBiqZuKX5ZZSdAUQlNF0fTqvTkpqz0Sr6lcc4Wl8Pxgkm6JBkSZAIWVXN6D2HQXBW84tPK14jMdeZfKOZc6FzXcDxPC80dlaaIU1q6FDnNbc8M9NMVAnyBhQCPXUJkjk9tXt4qyvKfIaBo5wf+c2DwOc6PP0gAACngKPR4IcMQanviQNkUg/yQEdlhRYvk7y4FPGSfKABKaEsJr7HDBEwDALYiAaCEIgTwcVYTUSSqMFK9A0orDWJlfKxIGxVypDVOkDJ9TiwGmmVq5AFjsCYZ7W0UIAKehIG9VYVBHxFQIZ4YhpDyH7RbFYa0S0VprQ2ltUC1B5x8ihCvZy0wN5uQ8t5XyMdfj71dmMY+M8baqQXhgKE4oPoLm+n1TEClXAul3GmNRhkerKhcGIZw4kDoJmgLIZaC0GBJHcIsHWIoPbXkAmZbmk4QJXDdm3DAW5UBNmNutPhGlsJg1cIgJgy1Alu0MqjaJsSSDxMSQmbUwdhaQX7DJCw+BtRTnyKufUEjEC3jXLhQ2xtMQmITKEhozh5CiPqs0sA5JRBRlLj1XJko+FdOkIgWuDYwJnQhnpUO8h/EJlyJibUqZDHkCBLgMAYyaArG4BoQhSiGBkLceeegjsFgSKUJUhBJAFgVlTMde6UoEzqBgf+EupStn4myuZfUQTkCELGW0TEQy+AxLiQk+A7gADkWL0J5IGrXahskVJeCbsxUQyl8lqUKBpLuvEe46X7vpcSGRIDIShRPb00lxHpMkVCKeRizir1HphMxW9PI70CrY8KR8T70xcX8wqfIFFEN8sojqOC7J4LAEYYxa8FWuSVZY0qqrQrqocWNU+LjIrAgvpQuy1DUS0PGKlbETC8TsJygYGwYKFizIQWgNg9Bp4uvpu4tmX1SbTC5jzNJ04gmKktfKlym93LbysbvYKjrD7Otnlq6a7ropgkvoUilebNR4DdvAAAXsExUiElbskoNmaSyoDYkQVAA3wzoVBqkxM9V6US+bfWeO5GM8DTokE5MgXht5mqn39m4RulZZgkDAnEaYmINjMBFOIcm/IXqBRcczW4oZV0Rhzu7W684rLGU1AIOGUYiAEQvEwPpFB10XgemqZAQDEKhgcKGAAoqGBaoYADSoZXiYJ3VbUat67YoHXYwCGXwEgYyjY0kSTzcigt3NhVY9BR2eBEuqdgWtRT9NLvi8e/VN1chfaXJkBE9bC24Icm0/I6MYAWvLKwiA0JeDCpqJQLZyCgu/XEEOudDLsf1GJxAiLrqlzGR20MAhnBtFDEM6YWts4EloP0kS+R8gNGEw2Pk3briB1sewe2FKDVEHQaK9A3BlqrH4HqW0Vh8gJhxa4O584DZaJNgUfI8YQP0GVBqMZqkd29qDtx0Ox40FnlQCClBPjpLe1FgqDWFAhRJFyJdaGlBYbw3Y3EKwN4pxK3prXKiiU6WssZYpZlrdG4d00lyngPLhID35dfSA/hwWTDvhxx+8bK0MXtlgZesrZmKsLcq4tDqD72M1bbPaNaQR1qvvFPBhxeh6TyIUNAeARilH9RUFgUCuDzCxOlJhGxWjKA6LsboBwDB3cqF2XAAB9WciAoenVbHMOgUOqPgMyGD7IkAACsWOSAADY8cAHZ8gAA48f5kJ9+rHuY0Ak4YAATkJ7mWgWO4YRAACwFhUHjiIJAad45J7mQn+xDB3bQIWNARPcwCAiLDLH+YSe0AYIWen9h6ck/yMr+n+YOdoFzDT/IYQSCK5JyLjHEBIBhGJxEfMeOBAMCx2ELHHOIhhB17Qen9OGCE5IE79naA0CE/pxEQn7Og+E7CCTzE6PwcffUDD2gcOEfguR7kEXQA=== -->

<!-- internal state end -->
<!-- finishing_touch_checkbox_start -->

<details>
<summary>✨ Finishing Touches</summary>

- [ ] <!-- {"checkboxId": "7962f53c-55bc-4827-bfbf-6a18da830691"} --> 📝 Generate Docstrings

</details>

<!-- finishing_touch_checkbox_end -->
<!-- tips_start -->

---



<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=briansegs/manza-search&utm_content=32):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Generate unit testing code for this file.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai generate unit testing code for this file.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and generate unit testing code.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

### CodeRabbit Commands (Invoked using PR comments)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai plan` to trigger planning for file edits and PR creation.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### CodeRabbit Configuration File (`.coderabbit.yaml`)

- You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository.
- Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json`

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->
author_association: NONE