Cleanup & start transition of moduleConfig
This commit is contained in:
Sacha Weatherstone
@@ -9,7 +9,7 @@ export interface GroupViewProps {
|
||||
export const GroupView = ({ group }: GroupViewProps): JSX.Element => {
|
||||
return (
|
||||
<Combobox.Option
|
||||
value={group.name}
|
||||
value={group.label}
|
||||
className={({ active }) =>
|
||||
`flex cursor-default select-none items-center rounded-md px-3 py-2 ${
|
||||
active ? "bg-backgroundPrimary text-textPrimary" : ""
|
||||
@@ -19,7 +19,7 @@ export const GroupView = ({ group }: GroupViewProps): JSX.Element => {
|
||||
{({ active }) => (
|
||||
<>
|
||||
<group.icon className="h-6 w-6" />
|
||||
<span className="ml-3 flex-auto truncate">{group.name}</span>
|
||||
<span className="ml-3 flex-auto truncate">{group.label}</span>
|
||||
{active && <ChevronRightIcon className="h-5 text-textSecondary" />}
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -40,12 +40,12 @@ import { Blur } from "@components/generic/Blur.js";
|
||||
import { ThemeController } from "@components/generic/ThemeController.js";
|
||||
|
||||
export interface Group {
|
||||
name: string;
|
||||
label: string;
|
||||
icon: ComponentType<SVGProps<SVGSVGElement>>;
|
||||
commands: Command[];
|
||||
}
|
||||
export interface Command {
|
||||
name: string;
|
||||
label: string;
|
||||
icon: ComponentType<SVGProps<SVGSVGElement>>;
|
||||
action?: () => void;
|
||||
subItems?: SubItem[];
|
||||
@@ -53,7 +53,7 @@ export interface Command {
|
||||
}
|
||||
|
||||
export interface SubItem {
|
||||
name: string;
|
||||
label: string;
|
||||
icon: JSX.Element;
|
||||
action: () => void;
|
||||
}
|
||||
@@ -77,32 +77,25 @@ export const CommandPalette = (): JSX.Element => {
|
||||
|
||||
const groups: Group[] = [
|
||||
{
|
||||
name: "Goto",
|
||||
label: "Goto",
|
||||
icon: LinkIcon,
|
||||
commands: [
|
||||
{
|
||||
name: "Messages",
|
||||
label: "Messages",
|
||||
icon: InboxIcon,
|
||||
action() {
|
||||
setActivePage("messages");
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "Map",
|
||||
label: "Map",
|
||||
icon: MapIcon,
|
||||
action() {
|
||||
setActivePage("map");
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "Extensions",
|
||||
icon: BeakerIcon,
|
||||
action() {
|
||||
setActivePage("extensions");
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "Config",
|
||||
label: "Config",
|
||||
icon: Cog8ToothIcon,
|
||||
action() {
|
||||
setActivePage("config");
|
||||
@@ -110,14 +103,14 @@ export const CommandPalette = (): JSX.Element => {
|
||||
tags: ["settings"]
|
||||
},
|
||||
{
|
||||
name: "Channels",
|
||||
label: "Channels",
|
||||
icon: Square3Stack3DIcon,
|
||||
action() {
|
||||
setActivePage("channels");
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "Peers",
|
||||
label: "Peers",
|
||||
icon: UsersIcon,
|
||||
action() {
|
||||
setActivePage("peers");
|
||||
@@ -126,15 +119,15 @@ export const CommandPalette = (): JSX.Element => {
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "Manage",
|
||||
label: "Manage",
|
||||
icon: DevicePhoneMobileIcon,
|
||||
commands: [
|
||||
{
|
||||
name: "Switch Node",
|
||||
label: "Switch Node",
|
||||
icon: ArrowsRightLeftIcon,
|
||||
subItems: getDevices().map((device) => {
|
||||
return {
|
||||
name:
|
||||
label:
|
||||
device.nodes.find(
|
||||
(n) => n.data.num === device.hardware.myNodeNum
|
||||
)?.data.user?.longName ?? device.hardware.myNodeNum.toString(),
|
||||
@@ -151,7 +144,7 @@ export const CommandPalette = (): JSX.Element => {
|
||||
})
|
||||
},
|
||||
{
|
||||
name: "Connect New Node",
|
||||
label: "Connect New Node",
|
||||
icon: PlusIcon,
|
||||
action() {
|
||||
setSelectedDevice(0);
|
||||
@@ -160,22 +153,22 @@ export const CommandPalette = (): JSX.Element => {
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "Contextual",
|
||||
label: "Contextual",
|
||||
icon: CubeTransparentIcon,
|
||||
commands: [
|
||||
{
|
||||
name: "QR Code",
|
||||
label: "QR Code",
|
||||
icon: QrCodeIcon,
|
||||
subItems: [
|
||||
{
|
||||
name: "Generator",
|
||||
label: "Generator",
|
||||
icon: <QueueListIcon className="w-4" />,
|
||||
action() {
|
||||
setDialogOpen("QR", true);
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "Import",
|
||||
label: "Import",
|
||||
icon: <ArrowDownOnSquareStackIcon className="w-4" />,
|
||||
action() {
|
||||
setDialogOpen("import", true);
|
||||
@@ -184,7 +177,7 @@ export const CommandPalette = (): JSX.Element => {
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "Disconnect",
|
||||
label: "Disconnect",
|
||||
icon: XCircleIcon,
|
||||
action() {
|
||||
void connection?.disconnect();
|
||||
@@ -193,21 +186,21 @@ export const CommandPalette = (): JSX.Element => {
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "Schedule Shutdown",
|
||||
label: "Schedule Shutdown",
|
||||
icon: PowerIcon,
|
||||
action() {
|
||||
setDialogOpen("shutdown", true);
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "Schedule Reboot",
|
||||
label: "Schedule Reboot",
|
||||
icon: ArrowPathIcon,
|
||||
action() {
|
||||
setDialogOpen("reboot", true);
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "Reset Peers",
|
||||
label: "Reset Peers",
|
||||
icon: TrashIcon,
|
||||
action() {
|
||||
if (connection) {
|
||||
@@ -220,7 +213,7 @@ export const CommandPalette = (): JSX.Element => {
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "Factory Reset",
|
||||
label: "Factory Reset",
|
||||
icon: ArrowPathRoundedSquareIcon,
|
||||
action() {
|
||||
if (connection) {
|
||||
@@ -235,18 +228,18 @@ export const CommandPalette = (): JSX.Element => {
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "Debug",
|
||||
label: "Debug",
|
||||
icon: BugAntIcon,
|
||||
commands: [
|
||||
{
|
||||
name: "Reconfigure",
|
||||
label: "Reconfigure",
|
||||
icon: ArrowPathIcon,
|
||||
action() {
|
||||
void connection?.configure();
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "[WIP] Clear Messages",
|
||||
label: "[WIP] Clear Messages",
|
||||
icon: ArchiveBoxXMarkIcon,
|
||||
action() {
|
||||
alert("This feature is not implemented");
|
||||
@@ -255,22 +248,22 @@ export const CommandPalette = (): JSX.Element => {
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "Application",
|
||||
label: "Application",
|
||||
icon: WindowIcon,
|
||||
commands: [
|
||||
{
|
||||
name: "Toggle Dark Mode",
|
||||
label: "Toggle Dark Mode",
|
||||
icon: MoonIcon,
|
||||
action() {
|
||||
setDarkMode(!darkMode);
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "Accent Color",
|
||||
label: "Accent Color",
|
||||
icon: SwatchIcon,
|
||||
subItems: [
|
||||
{
|
||||
name: "Red",
|
||||
label: "Red",
|
||||
icon: (
|
||||
<span
|
||||
className={`h-3 w-3 rounded-full ${
|
||||
@@ -283,7 +276,7 @@ export const CommandPalette = (): JSX.Element => {
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "Orange",
|
||||
label: "Orange",
|
||||
icon: (
|
||||
<span
|
||||
className={`h-3 w-3 rounded-full ${
|
||||
@@ -296,7 +289,7 @@ export const CommandPalette = (): JSX.Element => {
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "Yellow",
|
||||
label: "Yellow",
|
||||
icon: (
|
||||
<span
|
||||
className={`h-3 w-3 rounded-full ${
|
||||
@@ -309,7 +302,7 @@ export const CommandPalette = (): JSX.Element => {
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "Green",
|
||||
label: "Green",
|
||||
icon: (
|
||||
<span
|
||||
className={`h-3 w-3 rounded-full ${
|
||||
@@ -322,7 +315,7 @@ export const CommandPalette = (): JSX.Element => {
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "Blue",
|
||||
label: "Blue",
|
||||
icon: (
|
||||
<span
|
||||
className={`h-3 w-3 rounded-full ${
|
||||
@@ -335,7 +328,7 @@ export const CommandPalette = (): JSX.Element => {
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "Purple",
|
||||
label: "Purple",
|
||||
icon: (
|
||||
<span
|
||||
className={`h-3 w-3 rounded-full ${
|
||||
@@ -348,7 +341,7 @@ export const CommandPalette = (): JSX.Element => {
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "Pink",
|
||||
label: "Pink",
|
||||
icon: (
|
||||
<span
|
||||
className={`h-3 w-3 rounded-full ${
|
||||
@@ -386,7 +379,7 @@ export const CommandPalette = (): JSX.Element => {
|
||||
return {
|
||||
...group,
|
||||
commands: group.commands.filter((command) => {
|
||||
const nameIncludes = `${group.name} ${command.name}`
|
||||
const nameIncludes = `${group.label} ${command.label}`
|
||||
.toLowerCase()
|
||||
.includes(query.toLowerCase());
|
||||
|
||||
@@ -399,7 +392,7 @@ export const CommandPalette = (): JSX.Element => {
|
||||
const subItemsInclude = (
|
||||
command.subItems
|
||||
?.map((s) =>
|
||||
s.name.toLowerCase().includes(query.toLowerCase())
|
||||
s.label.toLowerCase().includes(query.toLowerCase())
|
||||
)
|
||||
.filter(Boolean) ?? []
|
||||
).length;
|
||||
|
||||
@@ -11,7 +11,7 @@ export const SearchResult = ({ group }: SearchResultProps): JSX.Element => {
|
||||
<div className="rounded-md border-2 border-backgroundPrimary py-2">
|
||||
<div className="flex items-center px-3 py-2">
|
||||
<group.icon className="text-gray-900 h-6 w-6 flex-none text-opacity-40" />
|
||||
<span className="ml-3 flex-auto truncate">{group.name}</span>
|
||||
<span className="ml-3 flex-auto truncate">{group.label}</span>
|
||||
</div>
|
||||
{group.commands.map((command, index) => (
|
||||
<div key={index}>
|
||||
@@ -30,7 +30,7 @@ export const SearchResult = ({ group }: SearchResultProps): JSX.Element => {
|
||||
active ? "text-opacity-100" : ""
|
||||
}`}
|
||||
/>
|
||||
<span className="ml-3">{command.name}</span>
|
||||
<span className="ml-3">{command.label}</span>
|
||||
{active && (
|
||||
<ChevronRightIcon className="text-gray-400 ml-auto h-4" />
|
||||
)}
|
||||
@@ -54,7 +54,7 @@ export const SearchResult = ({ group }: SearchResultProps): JSX.Element => {
|
||||
{({ active }) => (
|
||||
<>
|
||||
{item.icon}
|
||||
<span className="ml-3">{item.name}</span>
|
||||
<span className="ml-3">{item.label}</span>
|
||||
{active && (
|
||||
<ChevronRightIcon className="text-gray-400 ml-auto h-4" />
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user