Interface Overview
Interface Overview
This page explains the overall layout of Skillnote and the role of each area. We’ll walk through the sidebar, the home dashboard, and the post reading layout.
Overall Layout
The Skillnote interface is divided into a left sidebar and a main content area on the right.
┌──────────────┬──────────────────────────────────────┐
│ │ │
│ Left │ Main Content Area │
│ Sidebar │ (changes based on current page) │
│ │ │
└──────────────┴──────────────────────────────────────┘The sidebar can be collapsed and expanded. When collapsed (rail mode), only icons are shown. When expanded, both icons and menu labels are displayed.
Left Sidebar
New Learning Post
At the very top of the sidebar is a “New Learning Post” button with a pen icon. Clicking it takes you to the /posts/newpost editor page. This requires you to be logged in — if you’re not, the log-in modal will appear.
Browse Group
| Menu | Icon | Path | Description |
|---|---|---|---|
| Home | Home icon | / | Dashboard with Today’s Review and Quick Start |
| Explore | Explore icon | /explore | Browse public posts from other users |
Record Group
| Menu | Icon | Path | Description |
|---|---|---|---|
| Posts | Document icon | /posts | List of your learning posts |
Study Group
| Menu | Icon | Path | Description |
|---|---|---|---|
| Today’s Review | Comment icon | /questions | AI-generated review questions for today |
My Blog
Near the bottom of the sidebar is a “My Blog” link. Clicking it takes you to your public blog (/{your-user-tag}).
Profile Dropdown
At the very bottom of the sidebar your profile information is displayed. Click it to open a dropdown menu showing the following:
- Nickname, user tag, email address, and profile avatar
- Settings button: Takes you to the account and blog settings page
- Log out button: Ends your current session and logs you out
Collapsing and Expanding the Sidebar
Click the toggle button on the right edge of the sidebar to collapse or expand it.
- Expanded: Shows icons and menu labels
- Collapsed (rail mode): Shows icons only, giving the main content area more space
Home Dashboard
After logging in, click “Home” in the sidebar or navigate to / to view the home dashboard.
Date and Greeting
Today’s date is shown at the top of the screen (e.g., “Thursday, February 27”).
Below that, a greeting is displayed randomly based on your current time of day. One of four messages is chosen at random for each time slot.
- Morning: e.g., “Good morning. Shall we take one step forward together today?”
- Afternoon: An encouraging message for the afternoon
- Evening and later: A greeting suited to the evening hours
Today’s Review Section
One of two states is shown depending on whether you have questions to review today.
When there are review questions
- Displayed alongside an open book icon: the number of questions to review (“N questions”) and the number of related study materials (“N materials”).
- Click the “Start” button to go directly to the
/questionsreview page.
When there are no review questions (all done for today)
- A heart icon is shown with the message “Today’s review complete!”
- The message “New questions will be ready tomorrow” lets you know to come back the next day.
Quick Start Section
Two cards are shown side by side for quick access to frequently used features.
| Card | Subtitle | Icon | Color | Action |
|---|---|---|---|---|
| Write | Start a new record | Pen icon | Blue | Opens the new post editor |
| Upload PDF | Generate a draft from PDF | Upload icon | Purple | Upload a PDF to generate an AI draft |
Post Reading Layout
When you open a post, the screen is split into two areas.
┌──────────────────────────┬──────────────────────┐
│ │ ┌──────────────────┐ │
│ Main Content │ │ Info │ Comments │ Review │ │
│ (post body) │ └──────────────────┘ │
│ │ │
│ │ Tab content area │
│ │ │
└──────────────────────────┴──────────────────────┘Main Content (Left)
The post’s title, body, tags, and other primary content are displayed here.
Comment Sidebar (Right)
The right sidebar has three tabs.
| Tab | Content |
|---|---|
| Info | Post metadata (date created, tags, etc.) |
| Comments | The list of comments on this post and a form to write a new comment |
| Review | AI-generated review questions based on this post |
Click any tab to check comments or work through review questions while reading the post body.