Feat/metagram header

[Sahil2004]

Description of change

Header component added.

Issue Number

Closes #125

Type of change

• New (a change which implements a new feature)

How the change has been tested

Storybook.

Change checklist

• I have ensured that the CI Checks pass locally
• I have removed any unnecessary logic
• My code is well documented
• I have signed my commits
• My code follows the pattern of the application
• I have self reviewed my code

Summary by CodeRabbit

• New Features

  • Introduced a flexible Header component with three visual variants (primary, secondary, tertiary), customizable heading, and optional menu or back button support.
  • Added Storybook stories to showcase and interactively test the Header component in various states.

• Enhancements

  • Updated the Button component to replace the "secondary" variant with a "danger" variant, featuring new red styling and simplified appearance.

• Documentation

  • Included detailed inline documentation and usage examples for the new Header component.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

A new Header Svelte component with three visual variants was added, along with Storybook stories for interactive documentation and testing. The fragments index file now exports the Header component. The Button component's variant system was updated, replacing 'secondary' with 'danger' and adjusting associated styles.

Changes

File(s)	Change Summary
platforms/metagram/src/lib/fragments/Header/Header.svelte	New Header Svelte component with primary, secondary, and tertiary variants, props for heading and callback, and detailed docs.
platforms/metagram/src/lib/fragments/Header/Header.stories.ts	New Storybook stories file for Header, providing variants for interactive testing and documentation.
platforms/metagram/src/lib/fragments/index.ts	Added export of Header from Header.svelte.
platforms/metagram/src/lib/ui/Button/Button.svelte	Changed variant prop from 'secondary' to 'danger', updated styles, and removed border styling.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant HeaderComponent
    participant BrowserHistory
    participant Callback

    User->>HeaderComponent: Interacts (click back/menu)
    alt Back button clicked (secondary/tertiary)
        HeaderComponent->>BrowserHistory: history.back()
    else Menu button clicked (callback provided)
        HeaderComponent->>Callback: callback()
    end

Loading

Assessment against linked issues

Objective	Addressed	Explanation
Implement a header fragment for Metagram with expected look and behavior (#125)	✅

Poem

A header now stands at the top,
With variants three—oh, what a hop!
Buttons now warn with a crimson hue,
And stories to show what each one can do.
From fragments to style, we rabbits delight—
Hooray for the changes, all fluffy and bright!
🐇✨

Note

⚡️ AI Code Reviews for VS Code, Cursor, Windsurf

CodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback.
Learn more here.

---

Note

⚡️ Faster reviews with caching

CodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure Review - Disable Cache at either the organization or repository level. If you prefer to disable all data retention across your organization, simply turn off the Data Retention setting under your Organization Settings.
Enjoy the performance boost—your workflow just got faster.

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Cache: Disabled due to data retention organization setting
Knowledge Base: Disabled due to data retention organization setting

📥 Commits

Reviewing files that changed from the base of the PR and between 0eb9b05 and eacbb2f.

📒 Files selected for processing (1)

• platforms/metagram/src/lib/fragments/index.ts (1 hunks)

✨ Finishing Touches

• 📝 Generate Docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • 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 explain this code block.
  • @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 explain its main purpose.
  • @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.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

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 for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @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 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 for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (4)

platforms/metagram/src/lib/fragments/Header/Header.svelte (4)

20-33: Consider defining styles for secondary variant.

The secondary variant has empty string values for text and background. If this is intentional (using default styles), consider adding a comment to clarify this design decision.

---

35-44: Type safety improvement for button icons mapping.

The current implementation could cause TypeScript errors since backButton[variant] would be undefined when variant is 'primary'.

 const backButton = {
+	primary: undefined, // Add this for type safety
 	secondary: ArrowLeft01Icon,
 	tertiary: ArrowLeft02Icon
 };

---

52-54: Add error handling for the back navigation.

The back button navigation might not always work if there's no history to go back to. Consider adding a fallback.

 const backButtonCallback = () => {
-	window.history.back();
+	if (window.history.length > 1) {
+		window.history.back();
+	} else {
+		// Fallback, e.g., navigate to home or do nothing
+		console.log('No history to go back to');
+	}
 };

---

74-78: Add a default value for heading.

Consider handling the case when heading is undefined to avoid displaying an empty heading.

 {#if variant !== 'tertiary'}
-  <h1 class={cn([classes.text])}>
-    {heading}
+  <h1 class={cn([classes.text])}>
+    {heading || ''}
   </h1>
 {/if}

📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between 75a6aa9 and 0eb9b05.

📒 Files selected for processing (5)

• .vscode/settings.json (1 hunks)
• platforms/metagram/src/lib/fragments/Header/Header.stories.ts (1 hunks)
• platforms/metagram/src/lib/fragments/Header/Header.svelte (1 hunks)
• platforms/metagram/src/lib/fragments/index.ts (1 hunks)
• platforms/metagram/src/lib/ui/Button/Button.svelte (4 hunks)

🔇 Additional comments (12)

.vscode/settings.json (1)

25-25: Good formatter choice for Svelte files.

Switching from Biome to the official Svelte extension for formatting Svelte files while maintaining Biome for code actions is a sensible approach. This will provide better syntax support and formatting for Svelte components while still leveraging Biome's capabilities for imports and fixes.

platforms/metagram/src/lib/fragments/index.ts (1)

1-1: Clean component export.

This export follows best practices for making the Header component easily accessible throughout the application. The barrel file approach simplifies imports and provides a consistent entry point for fragment components.

platforms/metagram/src/lib/ui/Button/Button.svelte (3)

42-44: Variant styling updated to match design changes.

The styling for the variants has been updated to reflect the switch from 'secondary' to 'danger', with appropriate color choices (red background with white text for danger). This creates a clear visual difference between primary and danger actions.

---

47-49: Disabled state styling correctly updated.

The disabled variant classes correctly maintain the same visual language as the enabled buttons but with reduced opacity, creating a consistent user experience.

---

6-6:

❓ Verification inconclusive

Potential breaking change: 'secondary' variant replaced with 'danger'.

Changing the button variant from 'secondary' to 'danger' could break existing usages of the component that rely on the 'secondary' variant.

---

🏁 Script executed:

#!/bin/bash
# Search for usages of the secondary button variant in the codebase
echo "Searching for usages of the secondary button variant..."
rg -A 2 -B 2 "variant=\"secondary\"" --type svelte
rg -A 2 -B 2 "variant='secondary'" --type svelte
rg -A 2 -B 2 'variant: "secondary"' --type typescript,javascript,svelte
rg -A 2 -B 2 "variant: 'secondary'" --type typescript,javascript,svelte

Length of output: 550

---

Confirm removal of ‘secondary’ variant – no internal usages found

I ran a repo-wide search for both <Button variant="secondary"…> in .svelte files and variant: 'secondary' in JS/TS, and found no occurrences.

However, since swapping out a public API variant is a breaking change for downstream consumers:

• Please verify in any dependent projects that they’re not using variant="secondary".
• Update documentation and CHANGELOG to note the removal of the secondary variant.

platforms/metagram/src/lib/fragments/Header/Header.stories.ts (2)

1-15: Well-structured Storybook configuration.

The Storybook setup follows best practices with proper metadata, component reference, and render function. The autodocs tag will ensure automatic documentation generation.

---

17-52: Comprehensive story variants demonstrate component flexibility.

The stories provide excellent coverage of the Header component's functionality, showcasing:

• Different variants (primary, secondary, tertiary)
• With and without interactive callbacks
• Different headings for various contexts

This makes it easy to verify the component's appearance and behavior in different scenarios.

platforms/metagram/src/lib/fragments/Header/Header.svelte (5)

1-16: Good component interface design.

The component has a clean interface with well-typed props, extending HTMLAttributes for proper HTML attribute passthrough. The imports are organized clearly, and the interface definition is comprehensive.

---

18-18: Appropriate use of Svelte 5 features.

Good use of $props() for extracting component properties with proper TypeScript typing, along with spreading the rest of the props for HTML attribute forwarding.

---

90-108: Well-documented component.

Excellent documentation with clear description, props explanation, and usage examples. This will make it much easier for other developers to use this component correctly.

---

1-109: Overall well-implemented and flexible component.

The Header component is well-structured with appropriate variants and flexible styling. The conditional rendering based on variants makes the component highly reusable across different contexts. The implementation follows the design requirements outlined in the PR objectives.

---

60-72: 🛠️ Refactor suggestion

Use Svelte event handlers instead of HTML attributes.

Replace onclick with Svelte's on:click directive for better event handling, including support for modifiers and proper TypeScript integration.

 <button
   class={cn([
     'cursor-pointer rounded-full p-2 hover:bg-gray-100',
     classes.background
   ])}
-  onclick={backButtonCallback}
+  on:click={backButtonCallback}
   aria-label="Go back"
 >

⛔ Skipped due to learnings

Learnt from: pixel-punk-20
PR: MetaState-Prototype-Project/prototype#121
File: platforms/metagram/src/lib/ui/Button/Button.svelte:83-83
Timestamp: 2025-05-08T08:40:51.710Z
Learning: In Svelte 5, event handlers should use lowercase DOM-style attributes (e.g., `onclick={handler}`) rather than the Svelte 3/4 syntax with the `on:` prefix (e.g., `on:click={handler}`). The `on:` syntax is deprecated in Svelte 5 though still supported for backward compatibility.

Learnt from: pixel-punk-20
PR: MetaState-Prototype-Project/prototype#121
File: platforms/metagram/src/lib/ui/Button/Button.svelte:83-83
Timestamp: 2025-05-08T08:40:51.710Z
Learning: In Svelte 5, event handlers can be written using the lowercase DOM-style attributes (e.g., `onclick`) rather than the Svelte 3/4 syntax with the `on:` prefix (e.g., `on:click`). Both syntaxes are supported, but `onclick` is the newer approach introduced in Svelte 5.

[coderabbitai]

🛠️ Refactor suggestion

Use Svelte event handlers and add accessibility attributes.

Replace onclick with Svelte's on:click directive and add appropriate aria attributes for better accessibility.

 <button
   class={cn(['cursor-pointer rounded-full p-2 hover:bg-gray-100', classes.background])}
-  onclick={callback}
+  on:click={callback}
+  aria-label="Menu"
 >

📝 Committable suggestion

‼️ 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.

Suggested change

	{#if callback}
	<button
	class={cn(['cursor-pointer rounded-full p-2 hover:bg-gray-100', classes.background])}
	onclick={callback}
	>
	<HugeiconsIcon icon={menuButton[variant]} size={24} color="var(--color-black-500)" />
	</button>
	{/if}
	{#if callback}
	<button
	class={cn(['cursor-pointer rounded-full p-2 hover:bg-gray-100', classes.background])}
	on:click={callback}
	aria-label="Menu"
	>
	<HugeiconsIcon icon={menuButton[variant]} size={24} color="var(--color-black-500)" />
	</button>
	{/if}