Skip to content

Blog: Tabs That Work Like Your Browser (Because They Should) - #1295

Open
2witstudios wants to merge 2 commits into
masterfrom
blog/browser-style-tabs
Open

Blog: Tabs That Work Like Your Browser (Because They Should)#1295
2witstudios wants to merge 2 commits into
masterfrom
blog/browser-style-tabs

Conversation

@2witstudios

@2witstudios 2witstudios commented May 8, 2026

Copy link
Copy Markdown
Owner

Summary

  • New product blog post explaining PageSpace's browser-style tab design decision
  • Covers Alt+T, Ctrl/Cmd+1–9, Ctrl+Tab, pinning, and the "navigation tax" framing

Details

  • Slug: browser-style-tabs
  • Category: Product
  • Date: 2026-05-08
  • Read time: 3 min
  • Image: /blog/browser-style-tabs.png — needs to be generated before merging

Image prompt

Abstract conceptual digital art of glowing horizontal tab strips floating in layered depth, electric blue and amber accent light trails connecting each tab to a dark near-black background, geometric minimal forms suggesting keyboard keys and navigation shortcuts, professional futuristic aesthetic, cinematic lighting, ultra-HD, 8K render quality. No text. No letters.

Generate at https://nanabanana.pro and commit as apps/marketing/public/blog/browser-style-tabs.png.

Test plan

  • Generate and commit hero image
  • Verify post renders at /blog/browser-style-tabs
  • Check post appears in blog index

🤖 Generated with Claude Code

Summary by CodeRabbit

New Features

  • Added a new blog post about browser-style tab behavior and keyboard shortcuts, now available in the blog section.

…ould)'

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@coderabbitai

coderabbitai Bot commented May 8, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Important

Review skipped

Review was skipped due to path filters

⛔ Files ignored due to path filters (1)
  • apps/marketing/public/blog/browser-style-tabs.png is excluded by !**/*.png

CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including **/dist/** will override the default block on the dist directory, by removing the pattern from both the lists.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 5a339b4a-e5b3-42b0-8e16-886722df6004

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
📝 Walkthrough

Walkthrough

A new blog post entry titled "Browser-Style Tabs" is added to the blogPosts export. The post includes content about tab behavior and keyboard shortcuts, authored by Jono with a publication date of May 8, 2026, and relevant metadata.

Changes

Blog Content Addition

Layer / File(s) Summary
New Blog Post Entry
apps/marketing/src/app/blog/[slug]/data.ts
The blogPosts object gains a new "browser-style-tabs" entry containing title, description, image path, markdown content describing browser tab functionality and shortcuts, and metadata (author: "Jono", date: "2026-05-08", readTime, category).

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐰✨ A new post hops into the blog post map,
Browser tabs explored, with shortcuts to unwrap,
Jono's words now live in the content web,
May 8th, 2026—the date is set,
PageSpace blooms with one more tale to read! 📖

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title directly summarizes the main change: adding a new blog post about browser-style tab design in PageSpace. It is clear, specific, and reflects the primary purpose of the changeset.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch blog/browser-style-tabs

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

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@apps/marketing/src/app/blog/`[slug]/data.ts:
- Line 430: The post references a non-existent hero image via the image field
value "image: \"/blog/browser-style-tabs.png\"", causing a broken preview; fix
by either adding and committing the missing file with that exact filename into
the public blog assets directory or updating the image field to point to an
existing committed image (and commit the change) so the hero image resolves
correctly.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: be0119f1-0294-4c48-9413-cbb31b739a66

📥 Commits

Reviewing files that changed from the base of the PR and between e94f42a and 165acee.

📒 Files selected for processing (1)
  • apps/marketing/src/app/blog/[slug]/data.ts

title: "Tabs That Work Like Your Browser (Because They Should)",
description:
"PageSpace uses browser-style tabs — Alt+T to open, Ctrl/Cmd+1–9 to jump, Ctrl+Tab to cycle. Here's why we chose browser semantics over VS Code's, and how tabs become the escape hatch from the navigation tax of nested folders.",
image: "/blog/browser-style-tabs.png",

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Verify the required hero image file exists at the expected path.
fd -a '^browser-style-tabs\.png$' apps/marketing/public/blog

# Optional: list all blog hero images for quick comparison with nearby posts.
fd -a '.*\.png$' apps/marketing/public/blog

Repository: 2witstudios/PageSpace

Length of output: 369


Add missing hero image file to prevent broken post preview.

The referenced hero image /blog/browser-style-tabs.png does not exist in apps/marketing/public/blog. Line 430 requires this file to be committed before merge, or the post will render with a broken image.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/marketing/src/app/blog/`[slug]/data.ts at line 430, The post references
a non-existent hero image via the image field value "image:
\"/blog/browser-style-tabs.png\"", causing a broken preview; fix by either
adding and committing the missing file with that exact filename into the public
blog assets directory or updating the image field to point to an existing
committed image (and commit the change) so the hero image resolves correctly.

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 165acee762

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

title: "Tabs That Work Like Your Browser (Because They Should)",
description:
"PageSpace uses browser-style tabs — Alt+T to open, Ctrl/Cmd+1–9 to jump, Ctrl+Tab to cycle. Here's why we chose browser semantics over VS Code's, and how tabs become the escape hatch from the navigation tax of nested folders.",
image: "/blog/browser-style-tabs.png",

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Add missing blog hero image asset

The new post sets image: "/blog/browser-style-tabs.png", but this commit only updates data.ts and does not add that file under apps/marketing/public/blog, so both the blog card and post header image will request a non-existent asset (404) and render a broken thumbnail; the same missing path is also used for generated metadata images on the post page.

Useful? React with 👍 / 👎.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant