Add rounded buttons, category field, and multi-mode navigation sorting with admin drag-reorder #6

Merged

Copilot merged 3 commits from copilot/style-buttons-and-organize-navbar into main

2025-11-04 12:47:09 -06:00

Copilot commented

2025-11-04 12:25:58 -06:00

(Migrated from github.com)

Changes

UI Polish

Increased button border-radius from 0.375rem → 0.75rem across all components (Header, Sidebar, forms)

Category System

Added category column to pages table with migration support
Extended create/update endpoints to accept optional category field
Added category input to PageEditor form

New sort dropdown in Sidebar with 5 modes:
- Alphabetical: title A-Z
- Category: grouped by user-defined category
- Recently Created: created_at DESC
- Creator: grouped by author_name
- Custom Order: admin-only drag reorder using display_order

Drag-and-Drop Reordering (Admin Only)

Added display_order integer column to pages table
New endpoint: PUT /api/pages/order/:slug with role check and numeric validation
Frontend uses HTML5 drag-and-drop with concurrent Promise.all() updates
Visual grip icon indicator on draggable items

// Concurrent order updates (was sequential await loop)
const updatePromises = newPages.map((page, index) => 
  pages.updateOrder(page.slug, index)
);
await Promise.all(updatePromises);

Database Migration

-- Runs automatically on startup if columns don't exist
ALTER TABLE pages ADD COLUMN category VARCHAR(100);
ALTER TABLE pages ADD COLUMN display_order INTEGER DEFAULT 0;

Screenshot

Shows: button rounding comparison, category input field, sort dropdown with all modes, grouped navigation views, and drag-and-drop interface details.

Original prompt

Can you please make the buttons look nicer? More rounded. I also want different options for organizing the navigation bar.

The navigation bar organization should at least include:

By category - User inputted category in a box when creating the wiki page
By recently created
By Creator

There should also be an option for an admin to manually drag pages around to where they want them to be on the navigation bar.

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Implements UI polish and navigation organization improvements: rounded buttons, user-defined page categories, multiple sorting modes (alphabetical, category, creator, recency, custom), and admin drag-and-drop reordering. ## Changes ### UI Polish - Increased button `border-radius` from `0.375rem` → `0.75rem` across all components (Header, Sidebar, forms) ### Category System - Added `category` column to `pages` table with migration support - Extended create/update endpoints to accept optional category field - Added category input to PageEditor form ### Navigation Sorting - New sort dropdown in Sidebar with 5 modes: - **Alphabetical**: title A-Z - **Category**: grouped by user-defined category - **Recently Created**: `created_at DESC` - **Creator**: grouped by `author_name` - **Custom Order**: admin-only drag reorder using `display_order` ### Drag-and-Drop Reordering (Admin Only) - Added `display_order` integer column to `pages` table - New endpoint: `PUT /api/pages/order/:slug` with role check and numeric validation - Frontend uses HTML5 drag-and-drop with concurrent `Promise.all()` updates - Visual grip icon indicator on draggable items ```javascript // Concurrent order updates (was sequential await loop) const updatePromises = newPages.map((page, index) => pages.updateOrder(page.slug, index) ); await Promise.all(updatePromises); ``` ### Database Migration ```sql -- Runs automatically on startup if columns don't exist ALTER TABLE pages ADD COLUMN category VARCHAR(100); ALTER TABLE pages ADD COLUMN display_order INTEGER DEFAULT 0; ``` ## Screenshot ![UI Changes](https://github.com/user-attachments/assets/f20c6c19-8a80-4e69-9c17-190106d4e69b) Shows: button rounding comparison, category input field, sort dropdown with all modes, grouped navigation views, and drag-and-drop interface details.  <details> <summary>Original prompt</summary> > Can you please make the buttons look nicer? More rounded. I also want different options for organizing the navigation bar. > > The navigation bar organization should at least include: > > By category - User inputted category in a box when creating the wiki page > By recently created > By Creator > > There should also be an option for an admin to manually drag pages around to where they want them to be on the navigation bar. </details>  --- 💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more [Copilot coding agent tips](https://gh.io/copilot-coding-agent-tips) in the docs.

SluberskiHomeLab (Migrated from github.com) reviewed

2025-11-04 12:25:58 -06:00