salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mpre ui fixes

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2025-12-27 08:00:09 +00:00
parent 4482d2f4c4
commit 034c640601
17 changed files with 352 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/layout/AppHeader.tsx
View File

@@ -1,6 +1,7 @@
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { usePageContext } from "../context/PageContext";
import { useSidebar } from "../context/SidebarContext";
import { ThemeToggleButton } from "../components/common/ThemeToggleButton";
import NotificationDropdown from "../components/header/NotificationDropdown";
import UserDropdown from "../components/header/UserDropdown";
@@ -29,6 +30,7 @@ const AppHeader: React.FC = () => {
const [isApplicationMenuOpen, setApplicationMenuOpen] = useState(false);
const [isSearchOpen, setIsSearchOpen] = useState(false);
const { pageInfo } = usePageContext();
const { isExpanded, toggleSidebar } = useSidebar();
const toggleApplicationMenu = () => {
setApplicationMenuOpen(!isApplicationMenuOpen);
@@ -71,6 +73,22 @@ const AppHeader: React.FC = () => {
{/* Page Title with Badge - Desktop */}
{pageInfo && (
<div className="hidden lg:flex items-center gap-3">
{/* Sidebar Toggle Button - Always visible on desktop */}
<button
onClick={toggleSidebar}
className="flex items-center justify-center w-6 h-6 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-full shadow-sm hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
aria-label={isExpanded ? "Collapse Sidebar" : "Expand Sidebar"}
>
<svg
className={`w-3.5 h-3.5 text-gray-500 dark:text-gray-400 transition-transform duration-300 ${isExpanded ? 'rotate-180' : ''}`}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
</svg>
</button>
{pageInfo.badge && (
<div className={`flex items-center justify-center w-8 h-8 rounded-lg ${badgeColors[pageInfo.badge.color]?.bg || 'bg-gray-600'} flex-shrink-0`}>
{pageInfo.badge.icon && typeof pageInfo.badge.icon === 'object' && 'type' in pageInfo.badge.icon

29
frontend/src/layout/AppSidebar.tsx
View File

@@ -131,11 +131,11 @@ const AppSidebar: React.FC = () => {
icon: <TaskIcon />,
name: "Writer",
subItems: [
{ name: "Queue", path: "/writer/tasks" },
{ name: "Drafts", path: "/writer/content" },
{ name: "Images", path: "/writer/images" },
{ name: "Review", path: "/writer/review" },
{ name: "Approved", path: "/writer/approved" },
{ name: "Content Queue", path: "/writer/tasks" },
{ name: "Content Drafts", path: "/writer/content" },
{ name: "Content Images", path: "/writer/images" },
{ name: "Content Review", path: "/writer/review" },
{ name: "Content Approved", path: "/writer/approved" },
],
});
}
@@ -452,25 +452,6 @@ const AppSidebar: React.FC = () => {
onMouseEnter={() => !isExpanded && setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
{/* Collapse/Expand Toggle Button - Fixed 5px from sidebar edge, does not move with hover */}
<button
onClick={toggleSidebar}
className={`hidden lg:flex absolute top-20 w-6 h-6 items-center justify-center bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-full shadow-sm hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors z-[60] ${
isExpanded ? 'left-[295px]' : 'left-[95px]'
}`}
style={{ position: 'fixed' }}
aria-label={isExpanded ? "Collapse Sidebar" : "Expand Sidebar"}
>
<svg
className={`w-3.5 h-3.5 text-gray-500 dark:text-gray-400 transition-transform duration-300 ${isExpanded ? 'rotate-180' : ''}`}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
</svg>
</button>
<div className="py-4 flex justify-center items-center">
<Link to="/" className="flex justify-center items-center">
{isExpanded || isHovered || isMobileOpen ? (