feat: UI Refactor (4b7aaa72) · Commits · sc07 / Canvas · GitLab

package.json

+0 −3

Original line number	Diff line number	Diff line
		@@ -57,9 +57,6 @@
		"vite-plugin-simple-html": "^1.1.0"
		},
		"dependencies": {
		"@fortawesome/fontawesome-svg-core": "^7.2.0",
		"@fortawesome/free-brands-svg-icons": "^7.2.0",
		"@fortawesome/react-fontawesome": "^3.2.0",
		"@internationalized/date": "^3.11.0",
		"@quixo3/prisma-session-store": "^3.1.19",
		"@sentry/react": "^10.39.0",

packages/admin/package.json

+1 −4

Original line number	Diff line number	Diff line
		@@ -10,14 +10,11 @@
		"preview": "vite preview"
		},
		"dependencies": {
		"@fortawesome/fontawesome-svg-core": "^7.2.0",
		"@fortawesome/free-brands-svg-icons": "^7.2.0",
		"@fortawesome/free-solid-svg-icons": "^7.2.0",
		"@fortawesome/react-fontawesome": "^3.3.1",
		"@nextui-org/react": "^2.6.11",
		"apexcharts": "^5.5.0",
		"framer-motion": "^12.34.0",
		"localforage": "^1.10.0",
		"lucide-react": "^1.23.0",
		"match-sorter": "^8.2.0",
		"next-themes": "^0.4.6",
		"react": "^19.2.5",

packages/admin/src/components/sidebar/Sidebar.tsx

+16 −29

Original line number	Diff line number	Diff line
		@@ -2,20 +2,7 @@ import { useState } from "react";
		import { Sidebar } from "./sidebar.styles";
		import { SidebarItem } from "./sidebar-item";
		import { SidebarMenu } from "./sidebar-menu";
		import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
		import {
		faChartBar,
		faClock,
		faCog,
		faHashtag,
		faHome,
		faList,
		faServer,
		faShieldHalved,
		faSquare,
		faUsers,
		faWarning,
		} from "@fortawesome/free-solid-svg-icons";
		import { ChartColumn, Clock, Hash, House, List, Server, Settings, Shield, Square, TriangleAlert, Users } from "lucide-react";
		import { useLocation } from "react-router-dom";
		import { CollapseItems } from "./collapse-items";

		@@ -37,7 +24,7 @@ export const SidebarWrapper = () => {
		>
		<div className={Sidebar.Header()}>
		<div className="flex items-center gap-2">
		<FontAwesomeIcon icon={faSquare} />
		<Square aria-hidden="true" size={16} />
		<div className="flex flex-col gap-4">
		<h3 className="text-xl font-medium m-0 text-default-900 -mb-4 whitespace-nowrap">
		Canvas
		@@ -52,24 +39,24 @@ export const SidebarWrapper = () => {
		<div className={Sidebar.Body()}>
		<SidebarItem
		title="Home"
		icon={<FontAwesomeIcon icon={faHome} />}
		icon={<House aria-hidden="true" size={16} />}
		isActive={pathname === "/"}
		href="/"
		/>
		<SidebarItem
		title="Pixel Reports"
		icon={<FontAwesomeIcon icon={faWarning} />}
		icon={<TriangleAlert aria-hidden="true" size={16} />}
		isActive={pathname === "/reports"}
		href="/reports"
		/>
		<SidebarItem
		title="Audit Log"
		icon={<FontAwesomeIcon icon={faList} />}
		icon={<List aria-hidden="true" size={16} />}
		isActive={pathname === "/audit"}
		href="/audit"
		/>
		<CollapseItems
		icon={<FontAwesomeIcon icon={faChartBar} />}
		icon={<ChartColumn aria-hidden="true" size={16} />}
		title="Stats"
		items={["Pixels"]}
		/>
		@@ -77,19 +64,19 @@ export const SidebarWrapper = () => {
		<SidebarItem
		isActive={pathname === "/accounts"}
		title="Accounts"
		icon={<FontAwesomeIcon icon={faUsers} />}
		icon={<Users aria-hidden="true" size={16} />}
		href="/accounts"
		/>
		<SidebarItem
		isActive={pathname === "/instances"}
		title="Instances"
		icon={<FontAwesomeIcon icon={faServer} />}
		icon={<Server aria-hidden="true" size={16} />}
		href="/instances"
		/>
		<SidebarItem
		isActive={pathname === "/accounts/settings"}
		title="Settings"
		icon={<FontAwesomeIcon icon={faCog} />}
		icon={<Settings aria-hidden="true" size={16} />}
		href="/accounts/settings"
		/>
		</SidebarMenu>
		@@ -98,13 +85,13 @@ export const SidebarWrapper = () => {
		<SidebarItem
		isActive={pathname === "/clans"}
		title="Clans"
		icon={<FontAwesomeIcon icon={faShieldHalved} />}
		icon={<Shield aria-hidden="true" size={16} />}
		href="/clans"
		/>
		<SidebarItem
		isActive={pathname === "/clans/settings"}
		title="Settings"
		icon={<FontAwesomeIcon icon={faCog} />}
		icon={<Settings aria-hidden="true" size={16} />}
		href="/clans/settings"
		/>
		</SidebarMenu>
		@@ -113,13 +100,13 @@ export const SidebarWrapper = () => {
		<SidebarItem
		isActive={pathname === "/chat/rooms"}
		title="Rooms"
		icon={<FontAwesomeIcon icon={faHashtag} />}
		icon={<Hash aria-hidden="true" size={16} />}
		href="/chat/rooms"
		/>
		<SidebarItem
		isActive={pathname === "/chat/settings"}
		title="Settings"
		icon={<FontAwesomeIcon icon={faCog} />}
		icon={<Settings aria-hidden="true" size={16} />}
		href="/chat/settings"
		/>
		</SidebarMenu>
		@@ -128,19 +115,19 @@ export const SidebarWrapper = () => {
		<SidebarItem
		isActive={pathname === "/chat/rooms"}
		title="Shards"
		icon={<FontAwesomeIcon icon={faServer} />}
		icon={<Server aria-hidden="true" size={16} />}
		href="/chat/rooms"
		/>
		<SidebarItem
		isActive={pathname === "/chat/rooms"}
		title="Timelapse"
		icon={<FontAwesomeIcon icon={faClock} />}
		icon={<Clock aria-hidden="true" size={16} />}
		href="/chat/rooms"
		/>
		<SidebarItem
		isActive={pathname === "/service/settings"}
		title="Settings"
		icon={<FontAwesomeIcon icon={faCog} />}
		icon={<Settings aria-hidden="true" size={16} />}
		href="/service/settings"
		/>
		</SidebarMenu>

packages/admin/src/components/sidebar/collapse-items.tsx

+2 −3

Original line number	Diff line number	Diff line
		@@ -2,8 +2,7 @@
		import React from "react";
		// import { ChevronUpIcon } from "../icons/sidebar/chevron-up-icon";
		import { Accordion, AccordionItem } from "@nextui-org/react";
		import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
		import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
		import { ChevronDown } from "lucide-react";

		interface Props {
		icon: React.ReactNode;
		@@ -16,7 +15,7 @@ export const CollapseItems = ({ icon, items, title }: Props) => {
		<div className="flex gap-4 h-full items-center cursor-pointer">
		<Accordion className="px-0">
		<AccordionItem
		indicator={<FontAwesomeIcon icon={faChevronDown} />}
		indicator={<ChevronDown aria-hidden="true" size={16} />}
		classNames={{
		indicator: "data-[open=true]:-rotate-180",
		trigger:

packages/admin/src/pages/Accounts/Accounts/page.tsx

+2 −3

Original line number	Diff line number	Diff line
		import { faFile } from "@fortawesome/free-solid-svg-icons";
		import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
		import { FileText } from "lucide-react";
		import { BreadcrumbItem, Breadcrumbs, Button, Input } from "@nextui-org/react";
		import { AccountsTable } from "./AccountsTable";

		@@ -30,7 +29,7 @@ export const AccountsPage = () => {
		{/* <AddUser /> */}
		<Button
		color="primary"
		startContent={<FontAwesomeIcon icon={faFile} />}
		startContent={<FileText aria-hidden="true" size={16} />}
		>
		Export to CSV
		</Button>