improvement: add command panel

src/App.tsx

@@ -1,26 +1,17 @@
 import React, { useEffect } from "react";
+import { Outlet, useNavigate } from "react-router-dom";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { appWindow } from "@tauri-apps/api/window";
-import { Outlet, useNavigate } from "react-router-dom";
-import { ChannelList } from "./components/Subscribes";
+import { emit, listen } from "@tauri-apps/api/event";
+
 import { useBearStore } from "@/stores";
+import { ChannelList } from "./components/Subscribes";
 import * as dataAgent from "./helpers/dataAgent";
-
-import { BrowserRouter, Route, Routes } from "react-router-dom";
 import { RouteConfig } from "./config";
-import { ArticleContainer } from "./layout/Article";
-import { SettingContainer } from "./layout/Setting";
-
-import { General } from "./components/SettingPanel/General";
-import { FeedManager } from "./components/SettingPanel/Content";
-import { ImportAndExport } from "./components/SettingPanel/ImportAndExport";
-import { WelcomePage } from "./components/WelcomePage";
-import { Appearance } from "./components/SettingPanel/Appearance";
 
 import "./styles/index.global.scss";
-import { Shortcut } from "./components/SettingPanel/ShortCut";
-import { emit, listen } from "@tauri-apps/api/event";
+import { CommandPanel } from "./command";
 
 function App() {
  const store = useBearStore((state) => ({
@@ -92,6 +83,7 @@ function App() {
  </DndProvider>
  <Outlet />
  </div>
+ <CommandPanel />
  </>
  );
 }

src/command.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import * as React from "react";
+import {
+ Calculator,
+ Calendar,
+ CreditCard,
+ Settings,
+ Smile,
+ User,
+} from "lucide-react";
+
+import {
+ CommandDialog,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+ CommandSeparator,
+ CommandShortcut,
+} from "@/components/ui/command";
+
+export function CommandPanel() {
+ const [open, setOpen] = React.useState(false);
+
+ React.useEffect(() => {
+ const down = (e: KeyboardEvent) => {
+ if (e.key === "j" && (e.metaKey || e.ctrlKey)) {
+ e.preventDefault();
+ setOpen((open) => !open);
+ }
+ };
+
+ document.addEventListener("keydown", down);
+ return () => document.removeEventListener("keydown", down);
+ }, []);
+
+ return (
+ <>
+ <CommandDialog open={open} onOpenChange={setOpen}>
+ <CommandInput placeholder="Type a command or search..." />
+ <CommandList>
+ <CommandEmpty>No results found.</CommandEmpty>
+ <CommandGroup heading="Suggestions">
+ <CommandItem>
+ <Calendar className="mr-2 h-4 w-4" />
+ <span>Calendar</span>
+ </CommandItem>
+ <CommandItem>
+ <Smile className="mr-2 h-4 w-4" />
+ <span>Search Emoji</span>
+ </CommandItem>
+ <CommandItem>
+ <Calculator className="mr-2 h-4 w-4" />
+ <span>Calculator</span>
+ </CommandItem>
+ </CommandGroup>
+ <CommandSeparator />
+ <CommandGroup heading="Settings">
+ <CommandItem>
+ <User className="mr-2 h-4 w-4" />
+ <span>Profile</span>
+ <CommandShortcut>⌘P</CommandShortcut>
+ </CommandItem>
+ <CommandItem>
+ <CreditCard className="mr-2 h-4 w-4" />
+ <span>Billing</span>
+ <CommandShortcut>⌘B</CommandShortcut>
+ </CommandItem>
+ <CommandItem>
+ <Settings className="mr-2 h-4 w-4" />
+ <span>Settings</span>
+ <CommandShortcut>⌘S</CommandShortcut>
+ </CommandItem>
+ </CommandGroup>
+ </CommandList>
+ </CommandDialog>
+ </>
+ );
+}

src/styles/global.scss

@@ -6,8 +6,8 @@
  --inline-code-font: monospace !important;
  --mono-font: "JetBrains Mono", monospace !important;
 
- --app-channel-width: 240px;
- --app-article-width: 320px;
+ --app-channel-width: 280px;
+ --app-article-width: 340px;
  --app-toolbar-height: 50px;
  --app-setting-sidebar-width: 200px;
  --view-helpbar-width: 50px;