feat: Enhance hotkeys app with customizable settings and modal support

- Added a modal component for user input in settings.
- Implemented drag-and-drop functionality for customizing hotkeys.
- Integrated toast notifications for user feedback on actions.
- Updated store to manage customizable items and namespaces.
- Enhanced the refresh button to fetch items with a refresh option.
- Improved settings button to open settings in a new tab.
- Added caching mechanisms for hotkeys data.
- Created a settings page to manage hotkeys and namespaces.
- Updated query module to handle configuration retrieval.

src/apps/hotkeys/components/icon.tsx

@@ -1,10 +1,11 @@
+import { wrapBasename } from "@/modules/basename";
 import { useStore } from "../store";
 export const RefreshButton = () => {
   const { isLoading, fetchItems } = useStore();
 
   return (
     <button
-      onClick={() => fetchItems()}
+      onClick={() => fetchItems(true)}
       disabled={isLoading}
       className={`
         group relative p-3 rounded-full
@@ -32,6 +33,9 @@ export const RefreshButton = () => {
 };
 
 export const SettingsButton = () => {
+  const onClick = () => {
+    window.open(wrapBasename('/settings/'), '_blank');
+  }
   return (
     <button
       className="
@@ -43,6 +47,7 @@ export const SettingsButton = () => {
         flex items-center justify-center
       "
       aria-label="Settings"
+      onClick={onClick}
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"