Page Attributes & Export

Page Attributes & Export

Validates page-level metadata operations (type assignment, icon with color, icon clearing, and detail panel display) and the workspace export pipeline (markdown file generation, YAML frontmatter, directory hierarchy, wiki-link preservation). These are power-user features for organizing and exporting a knowledge base. Regressions in export affect portability and data ownership guarantees.

Preconditions

• Vite dev server running on http://localhost:1420
• A workspace exists and is open

Scenarios

Seed: seed.spec.ts

1. Set page type to “page” (default)

Verify that assigning the “page” type to a page is reflected visually in the sidebar.

Steps:

1. Create a page titled “Type Test Page”.
2. Open the page attributes panel or context menu for the page (via right-click in the sidebar, or via a settings/properties panel in the editor).
3. Set the page type to “Page” (if it is not already the default).

Expected: The sidebar entry for “Type Test Page” displays the standard page icon associated with the “page” type. No error is shown.

2. Set page type to “folder”

Verify that a page can be reclassified as a folder type and the sidebar reflects the change.

Steps:

1. Create a page titled “Container Page”.
2. Open the page attributes panel or context menu for the page.
3. Change the page type to “Folder”.

Expected: The sidebar entry for “Container Page” switches to the folder icon/styling. The visual treatment (icon, indentation cue) reflects the folder type.

3. Set page icon with color

Verify that a page can be assigned an emoji icon and a color, and both appear in the sidebar.

Steps:

1. Create a page titled “Icon Test Page”.
2. Click the icon area on the page (in the sidebar or at the top of the editor near the title) to open the icon picker.
3. Select a star icon (Lucide icon name “star”) from the icon picker grid.
4. Select a gold/yellow color token from the color palette in the icon picker.
5. Confirm the selection.

Expected: The sidebar entry for “Icon Test Page” displays the star icon rendered in the selected color. The icon is visible both in the sidebar and at the top of the editor when the page is open.

4. Set page icon without specifying a color

Verify that an icon can be set without a color and renders using the default color.

Steps:

1. Create a page titled “No Color Icon Page”.
2. Open the icon picker for the page.
3. Select a pencil icon (Lucide icon name “pencil”) from the icon picker grid.
4. Leave the color input blank or clear it, then confirm the selection.

Expected: The sidebar entry for “No Color Icon Page” displays the pencil icon in the default/inherited text color (not styled with a custom color).

5. Clear a page icon to return to the default display

Verify that removing a page’s icon returns the sidebar entry to the default page icon.

Steps:

1. Assign an icon (e.g., “star”) to a page as in scenario 3.
2. Re-open the icon picker for the same page.
3. Click the “Remove icon” or “Clear” button to clear the icon.

Expected: The sidebar entry for the page no longer shows the custom icon. The default page icon is displayed instead.

6. Page detail panel shows word count and link counts

Verify that the page detail panel displays accurate word count, backlink count, and outgoing link count.

Steps:

1. Create a page titled “Detail Test Page”.
2. Type a sentence of at least 6 words in the editor body, then insert a wiki-link to another existing page.
3. Wait for the save indicator to show “Saved”.
4. Open the page detail panel (the side panel showing metadata).

Expected: The page detail panel shows:

• A word count of at least 6, reflecting the typed body text.
• An outgoing links count of 1 (the inserted wiki-link).
• A backlink count of 0 (no other page currently links to “Detail Test Page”).
• The page title “Detail Test Page” and creation/modification timestamps.

7. Backlink count in the detail panel increases after another page links in

Verify that the backlink count visible in the detail panel updates after a new inbound link is created.

Steps:

1. Using the page from scenario 6: “Detail Test Page” currently shows 0 backlinks in the detail panel.
2. Create a new page titled “Linker Page”. In its editor body, type [[ and insert a wiki-link to “Detail Test Page”. Wait for “Saved”.
3. Navigate to “Detail Test Page” and open (or refresh) its page detail panel.

Expected: The backlink count in the page detail panel is now 1 (or more). The backlinks section lists “Linker Page” as a source.

8. Export all pages to markdown files

Verify that the export action writes markdown files and confirms the count.

Steps:

1. Ensure at least 3 pages exist in the workspace with some body content.
2. Open the export dialog via the app menu, command palette, or workspace settings — find the “Export” action.
3. Choose an export destination (a writable folder on disk, e.g., a folder in the user’s Downloads).
4. Confirm the export.

Expected: The export completes without error. A success message or dialog reports that at least 3 pages were exported. The chosen destination folder contains .md files corresponding to the pages.

9. Exported markdown files contain YAML frontmatter

Verify that each exported file begins with a valid YAML frontmatter block.

Steps:

1. Perform the export from scenario 8.
2. Navigate to the export destination in the system file manager (or confirm via the export result if the app shows file paths).
3. Open one of the exported .md files in a text editor.

Expected: Each exported file begins with ---, followed by fields including at minimum id, title, page_type, created_at, and updated_at, then a closing ---, then the page body. The YAML is syntactically valid.

10. Exported frontmatter includes icon and icon_color when set

Verify that icon metadata assigned to a page appears in the exported frontmatter.

Steps:

1. Assign the flame icon (Lucide name “flame”) with a red/orange color token to a page titled “Iconic Page” using the icon picker.
2. Perform the workspace export as in scenario 8.
3. Open the exported .md file for “Iconic Page”.

Expected: The frontmatter block contains icon: "flame" and icon_color: with the selected color token value.

11. Exported frontmatter reflects page_type

Verify that the page_type field in exported frontmatter matches the type set on the page.

Steps:

1. Change the page type of a page titled “Folder Page” to “Folder” as in scenario 2.
2. Perform the workspace export.
3. Open the exported .md file for “Folder Page”.

Expected: The frontmatter contains page_type: "folder".

12. Child pages are exported to subdirectories matching the hierarchy

Verify that the export directory structure mirrors the parent-child page hierarchy.

Steps:

1. Create a parent page titled “Parent” in the sidebar.
2. Create a child page titled “Child” nested under “Parent” (drag it under “Parent” in the sidebar, or create it via the parent page’s add-child action).
3. Perform the workspace export.
4. Inspect the export folder structure.

Expected: The child page is exported to a path like parent/child.md (a subdirectory named after the parent). The parent page is exported as parent.md (or as an index.md within its own directory — verify the actual pattern). The directory structure reflects the hierarchy.

13. Root-level pages are exported as flat files

Verify that pages without a parent appear directly in the export root, not nested in subdirectories.

Steps:

1. Create a page titled “Root Page” at the top level of the sidebar with no parent page.
2. Perform the workspace export.
3. Inspect the export folder structure.

Expected: The export includes a file named root-page.md (or similar slug-based name) directly in the export root folder. It is not placed inside any subdirectory.

14. Exported markdown preserves wiki-links

Verify that wiki-links in page content are preserved verbatim in the exported markdown and not converted to plain text or broken URLs.

Steps:

1. On a page titled “Link Source Page”, insert a wiki-link to “Target Page”. Wait for “Saved”.
2. Perform the workspace export.
3. Open the exported .md file for “Link Source Page”.

Expected: The exported content contains the wiki-link in [[Display Text|slug]] format (e.g., [[Target Page|target-page]]). The link is not replaced with plain text or a URL.

15. Export includes the page title as an H1 heading in the body

Verify that each exported page includes its title as an H1 heading immediately after the frontmatter.

Steps:

1. Create a page titled “Heading Check” with some body content.
2. Perform the workspace export.
3. Open the exported .md file for “Heading Check”.

Expected: After the closing --- of the frontmatter, the next non-empty line is # Heading Check. The H1 title heading appears before any block content.

16. Custom frontmatter keys appear in export sorted alphabetically

Verify that additional frontmatter properties are exported in alphabetical order for deterministic output.

Steps:

1. If a page has custom property keys set (e.g., properties named “zebra” and “alpha” assigned via the property insertion feature), perform the workspace export.
2. Open the exported .md file for that page.

Expected: Custom frontmatter keys appear after the system keys (id, title, page_type, etc.) in alphabetical order — alpha appears before zebra.

Test Data

Key	Value	Notes
type_page_title	Type Test Page	Scenario 1 page for type assignment
folder_page_title	Container Page	Scenario 2 page for folder type
icon_page_title	Icon Test Page	Scenario 3 page for icon + color
icon_name	star	Lucide icon name for scenario 3
icon_color	yellow (token)	Color token for scenario 3 icon
fire_icon_name	flame	Lucide icon name for scenario 10
fire_icon_color	red (token)	Color token for scenario 10 icon
detail_page_title	Detail Test Page	Scenario 6 page for metadata inspection
parent_page_title	Parent	Hierarchy parent in scenario 12
child_page_title	Child	Hierarchy child in scenario 12
link_source_title	Link Source Page	Page containing outgoing link in scenario 14

Notes

• Page type accepts “page” or “folder”. The sidebar icon changes immediately upon type assignment.
• The icon picker uses Lucide vector icons (e.g., “star”, “pencil”, “flame”) with semantic color tokens (e.g., “blue”, “green”, “yellow”), not emoji or arbitrary hex colors. Setting icon to null (clearing) removes the custom icon and returns to the default page icon.
• Exported frontmatter fields in order: id, title, page_type, template (if set), icon (if set), icon_color (if set), created_at, updated_at, then custom keys alphabetically.
• The export directory mirrors the list_tree hierarchy. Child paths use the pattern {parent_slug}/{child_slug}.md. Deeply nested pages follow the same pattern one level at a time.
• get_page_detail (backing the detail panel) computes word count from stored text content and link counts from the reference repository.