perf: reduce re-renders, fix mobile keyboard handling, add chunk load recovery, and improve PATH management (#1028)
* fix: exclude file content from reverted prompt text Revert and fork now restore only the user's original prompt, not server-injected file content Uses existing isSyntheticPart helper for type-safe filtering * fix: keep scrollbar visible when hovering over thumb * fix: prevent ESC abort from triggering when terminal is focused * fix: pass directory to permission/question reply calls so approvals actually resolve * fix: default model selection not responding after Base UI migration * fix: prevent modal content from shifting and clipping footer buttons * fix: improve session switching performance and add sub-agent export with prompt collapse Defer viewport anchor saving to eliminate ~800ms UI freeze when switching sessions Add export dialog to include sub-agent tasks recursively in markdown export Add collapse chevron button for expanded user prompts in sticky header * fix: resolve sidebar scroll and TDZ crash in session sidebar * perf: reduce CPU overhead and re-renders across chat, layout, and settings * fix: position collapse button at top of message and prevent ESC abort in terminal * fix: position collapse button at top and add padding only when expanded * refactor: extract shared PATH utilities and mobile keyboard hook * refactor: import shared path-utils in electron, use module-level style constants - Electron now imports pathLooksUserConfigured/mergePathValues from shared path-utils.js instead of inline duplication - ToolPart collapsedCustomStyle moved from useMemo([]) to module const * fix: resolve remaining merge conflicts and type errors - Remove duplicate variable declarations in SessionNodeItem - Remove orphaned export callback body from conflict resolution - Fix HelpDialog description -> descriptionKey (i18n rename) * fix: resolve type-check and lint errors in session-actions.test.ts - Added missing bun:test type declarations (beforeEach, mock, mock.module) - Removed unused State import - Replaced 'as any' casts with proper OpencodeClient and ChildStoreManager types - Added eslint-disable for unused _ parameter in mock function * fix PR 1028 export and PATH edge cases * fix startup retry exhaustion state * remove opencode package lock change * fix sub-session rename cancellation --------- Co-authored-by: Bohdan Triapitsyn <artmore@protonmail.com>
This commit is contained in:
Islam Nofl
committed by
GitHub
GitHub
co-authored by
Bohdan Triapitsyn
Bohdan Triapitsyn
parent
632e6cc97b
commit
4523e9c486
@@ -5,6 +5,7 @@ import { NumberInput } from '@/components/ui/number-input';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { toast } from '@/components/ui';
|
||||
import { useAgentsStore, type AgentConfig, type AgentScope } from '@/stores/useAgentsStore';
|
||||
import { useShallow } from 'zustand/react/shallow';
|
||||
import { useDirectorySync } from '@/sync/sync-context';
|
||||
import { useDirectoryStore } from '@/stores/useDirectoryStore';
|
||||
import { useDeviceInfo } from '@/lib/device';
|
||||
@@ -184,7 +185,23 @@ const buildPermissionConfigWithGlobal = (
|
||||
export const AgentsPage: React.FC = () => {
|
||||
const { t } = useI18n();
|
||||
const { isMobile } = useDeviceInfo();
|
||||
const { selectedAgentName, getAgentByName, createAgent, updateAgent, agents, agentDraft, setAgentDraft } = useAgentsStore();
|
||||
const {
|
||||
selectedAgentName,
|
||||
getAgentByName,
|
||||
createAgent,
|
||||
updateAgent,
|
||||
agents,
|
||||
agentDraft,
|
||||
setAgentDraft,
|
||||
} = useAgentsStore(useShallow((s) => ({
|
||||
selectedAgentName: s.selectedAgentName,
|
||||
getAgentByName: s.getAgentByName,
|
||||
createAgent: s.createAgent,
|
||||
updateAgent: s.updateAgent,
|
||||
agents: s.agents,
|
||||
agentDraft: s.agentDraft,
|
||||
setAgentDraft: s.setAgentDraft,
|
||||
})));
|
||||
|
||||
const selectedAgent = selectedAgentName ? getAgentByName(selectedAgentName) : null;
|
||||
const isNewAgent = Boolean(agentDraft && agentDraft.name === selectedAgentName && !selectedAgent);
|
||||
|
||||
@@ -19,6 +19,7 @@ import {
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { RiAddLine, RiAiAgentFill, RiAiAgentLine, RiDeleteBinLine, RiFileCopyLine, RiMore2Line, RiRobot2Line, RiRobotLine, RiRestartLine, RiEditLine } from '@remixicon/react';
|
||||
import { useAgentsStore, isAgentBuiltIn, isAgentHidden, type AgentScope, type AgentDraft } from '@/stores/useAgentsStore';
|
||||
import { useShallow } from 'zustand/react/shallow';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { Agent } from '@opencode-ai/sdk/v2';
|
||||
import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
|
||||
@@ -116,7 +117,15 @@ export const AgentsSidebar: React.FC<AgentsSidebarProps> = ({ onItemSelect }) =>
|
||||
createAgent,
|
||||
deleteAgent,
|
||||
loadAgents,
|
||||
} = useAgentsStore();
|
||||
} = useAgentsStore(useShallow((s) => ({
|
||||
selectedAgentName: s.selectedAgentName,
|
||||
agents: s.agents,
|
||||
setSelectedAgent: s.setSelectedAgent,
|
||||
setAgentDraft: s.setAgentDraft,
|
||||
createAgent: s.createAgent,
|
||||
deleteAgent: s.deleteAgent,
|
||||
loadAgents: s.loadAgents,
|
||||
})));
|
||||
|
||||
React.useEffect(() => {
|
||||
loadAgents();
|
||||
|
||||
@@ -2,6 +2,7 @@ import React from 'react';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
@@ -73,7 +74,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
|
||||
const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
|
||||
const [searchQuery, setSearchQuery] = React.useState('');
|
||||
const [selectedIndex, setSelectedIndex] = React.useState(0);
|
||||
const itemRefs = React.useRef<(HTMLDivElement | null)[]>([]);
|
||||
const itemRefs = React.useRef<(HTMLElement | null)[]>([]);
|
||||
|
||||
const allowedProviderSet = React.useMemo(() => {
|
||||
if (!Array.isArray(allowedProviderIds) || allowedProviderIds.length === 0) {
|
||||
@@ -176,14 +177,14 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
|
||||
const showProviderLogo = keyPrefix === 'fav' || keyPrefix === 'recent';
|
||||
|
||||
return (
|
||||
<div
|
||||
<DropdownMenuItem
|
||||
key={`${keyPrefix}-${provID}-${modID}`}
|
||||
ref={(el) => { itemRefs.current[flatIndex] = el; }}
|
||||
className={cn(
|
||||
"typography-meta group flex items-center gap-2 px-2 py-1.5 rounded-md cursor-pointer",
|
||||
isHighlighted ? "bg-interactive-selection" : "hover:bg-interactive-hover/50"
|
||||
"group flex items-center gap-2",
|
||||
isHighlighted && "bg-interactive-selection"
|
||||
)}
|
||||
onClick={() => handleProviderAndModelChange(provID, modID)}
|
||||
onSelect={() => handleProviderAndModelChange(provID, modID)}
|
||||
onMouseEnter={() => setSelectedIndex(flatIndex)}
|
||||
>
|
||||
<div className="flex items-center gap-1.5 flex-1 min-w-0">
|
||||
@@ -223,7 +224,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -613,19 +614,18 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
|
||||
<ScrollableOverlay outerClassName="max-h-[min(400px,calc(100dvh-12rem))] flex-1">
|
||||
<div className="p-1">
|
||||
{/* Not selected option */}
|
||||
<div
|
||||
<DropdownMenuItem
|
||||
className={cn(
|
||||
"typography-meta flex items-center gap-2 px-2 py-1.5 rounded-md cursor-pointer",
|
||||
"hover:bg-interactive-hover/50"
|
||||
"flex items-center gap-2",
|
||||
)}
|
||||
onClick={() => handleProviderAndModelChange('', '')}
|
||||
onSelect={() => handleProviderAndModelChange('', '')}
|
||||
>
|
||||
<RiCloseLine className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
<span className="text-muted-foreground">{placeholder || t('settings.agents.modelSelector.notSelected')}</span>
|
||||
{!providerId && !modelId && (
|
||||
<RiCheckLine className="h-4 w-4 text-primary ml-auto" />
|
||||
)}
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
|
||||
<DropdownMenuSeparator />
|
||||
|
||||
|
||||
@@ -4,6 +4,7 @@ import { Input } from '@/components/ui/input';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { toast } from '@/components/ui';
|
||||
import { useCommandsStore, type CommandConfig, type CommandScope } from '@/stores/useCommandsStore';
|
||||
import { useShallow } from 'zustand/react/shallow';
|
||||
import { RiTerminalBoxLine, RiUser3Line, RiFolderLine } from '@remixicon/react';
|
||||
import { ModelSelector } from '../agents/ModelSelector';
|
||||
import { AgentSelector } from './AgentSelector';
|
||||
@@ -19,7 +20,23 @@ import { useI18n } from '@/lib/i18n';
|
||||
|
||||
export const CommandsPage: React.FC = () => {
|
||||
const { t } = useI18n();
|
||||
const { selectedCommandName, getCommandByName, createCommand, updateCommand, commands, commandDraft, setCommandDraft } = useCommandsStore();
|
||||
const {
|
||||
selectedCommandName,
|
||||
getCommandByName,
|
||||
createCommand,
|
||||
updateCommand,
|
||||
commands,
|
||||
commandDraft,
|
||||
setCommandDraft,
|
||||
} = useCommandsStore(useShallow((s) => ({
|
||||
selectedCommandName: s.selectedCommandName,
|
||||
getCommandByName: s.getCommandByName,
|
||||
createCommand: s.createCommand,
|
||||
updateCommand: s.updateCommand,
|
||||
commands: s.commands,
|
||||
commandDraft: s.commandDraft,
|
||||
setCommandDraft: s.setCommandDraft,
|
||||
})));
|
||||
|
||||
const selectedCommand = selectedCommandName ? getCommandByName(selectedCommandName) : null;
|
||||
const isNewCommand = Boolean(commandDraft && commandDraft.name === selectedCommandName && !selectedCommand);
|
||||
|
||||
@@ -20,6 +20,7 @@ import {
|
||||
import { RiAddLine, RiTerminalBoxLine, RiMore2Line, RiDeleteBinLine, RiFileCopyLine, RiRestartLine, RiEditLine } from '@remixicon/react';
|
||||
import { useCommandsStore, isCommandBuiltIn, type Command } from '@/stores/useCommandsStore';
|
||||
import { useSkillsStore } from '@/stores/useSkillsStore';
|
||||
import { useShallow } from 'zustand/react/shallow';
|
||||
import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { SettingsProjectSelector } from '@/components/sections/shared/SettingsProjectSelector';
|
||||
@@ -46,8 +47,17 @@ export const CommandsSidebar: React.FC<CommandsSidebarProps> = ({ onItemSelect }
|
||||
createCommand,
|
||||
deleteCommand,
|
||||
loadCommands,
|
||||
} = useCommandsStore();
|
||||
const { skills, loadSkills } = useSkillsStore();
|
||||
} = useCommandsStore(useShallow((s) => ({
|
||||
selectedCommandName: s.selectedCommandName,
|
||||
commands: s.commands,
|
||||
setSelectedCommand: s.setSelectedCommand,
|
||||
setCommandDraft: s.setCommandDraft,
|
||||
createCommand: s.createCommand,
|
||||
deleteCommand: s.deleteCommand,
|
||||
loadCommands: s.loadCommands,
|
||||
})));
|
||||
const skills = useSkillsStore((s) => s.skills);
|
||||
const loadSkills = useSkillsStore((s) => s.loadSkills);
|
||||
|
||||
React.useEffect(() => {
|
||||
loadCommands();
|
||||
|
||||
@@ -58,12 +58,10 @@ export const GitIdentityEditorDialog: React.FC<GitIdentityEditorDialogProps> = (
|
||||
importData,
|
||||
}) => {
|
||||
const { t } = useI18n();
|
||||
const {
|
||||
getProfileById,
|
||||
createProfile,
|
||||
updateProfile,
|
||||
deleteProfile,
|
||||
} = useGitIdentitiesStore();
|
||||
const getProfileById = useGitIdentitiesStore((s) => s.getProfileById);
|
||||
const createProfile = useGitIdentitiesStore((s) => s.createProfile);
|
||||
const updateProfile = useGitIdentitiesStore((s) => s.updateProfile);
|
||||
const deleteProfile = useGitIdentitiesStore((s) => s.deleteProfile);
|
||||
|
||||
const selectedProfile = React.useMemo(() =>
|
||||
profileId && profileId !== 'new' && !importData ? getProfileById(profileId) : null,
|
||||
|
||||
@@ -29,6 +29,7 @@ import {
|
||||
RiShieldKeyholeLine,
|
||||
} from '@remixicon/react';
|
||||
import { useGitIdentitiesStore, type GitIdentityProfile, type DiscoveredGitCredential } from '@/stores/useGitIdentitiesStore';
|
||||
import { useShallow } from 'zustand/react/shallow';
|
||||
import { GitSettings } from '@/components/sections/openchamber/GitSettings';
|
||||
import { GitHubSettings } from '@/components/sections/openchamber/GitHubSettings';
|
||||
import { GitIdentityEditorDialog } from './GitIdentityEditorDialog';
|
||||
@@ -66,7 +67,18 @@ export const GitPage: React.FC = () => {
|
||||
loadDefaultGitIdentityId,
|
||||
setDefaultGitIdentityId,
|
||||
getUnimportedCredentials,
|
||||
} = useGitIdentitiesStore();
|
||||
} = useGitIdentitiesStore(useShallow((s) => ({
|
||||
profiles: s.profiles,
|
||||
globalIdentity: s.globalIdentity,
|
||||
defaultGitIdentityId: s.defaultGitIdentityId,
|
||||
deleteProfile: s.deleteProfile,
|
||||
loadProfiles: s.loadProfiles,
|
||||
loadGlobalIdentity: s.loadGlobalIdentity,
|
||||
loadDiscoveredCredentials: s.loadDiscoveredCredentials,
|
||||
loadDefaultGitIdentityId: s.loadDefaultGitIdentityId,
|
||||
setDefaultGitIdentityId: s.setDefaultGitIdentityId,
|
||||
getUnimportedCredentials: s.getUnimportedCredentials,
|
||||
})));
|
||||
|
||||
const [editorOpen, setEditorOpen] = React.useState(false);
|
||||
const [editorProfileId, setEditorProfileId] = React.useState<string | null>(null);
|
||||
|
||||
@@ -13,6 +13,7 @@ import {
|
||||
type McpDraft,
|
||||
type McpScope,
|
||||
} from '@/stores/useMcpConfigStore';
|
||||
import { useShallow } from 'zustand/react/shallow';
|
||||
import {
|
||||
parseImportedMcpSnippet,
|
||||
applyImportedMcpToDraft,
|
||||
@@ -607,7 +608,17 @@ export const McpPage: React.FC = () => {
|
||||
createMcp,
|
||||
updateMcp,
|
||||
deleteMcp,
|
||||
} = useMcpConfigStore();
|
||||
} = useMcpConfigStore(useShallow((s) => ({
|
||||
selectedMcpName: s.selectedMcpName,
|
||||
mcpServers: s.mcpServers,
|
||||
mcpDraft: s.mcpDraft,
|
||||
setMcpDraft: s.setMcpDraft,
|
||||
setSelectedMcp: s.setSelectedMcp,
|
||||
getMcpByName: s.getMcpByName,
|
||||
createMcp: s.createMcp,
|
||||
updateMcp: s.updateMcp,
|
||||
deleteMcp: s.deleteMcp,
|
||||
})));
|
||||
|
||||
const currentDirectory = useDirectoryStore((state) => state.currentDirectory);
|
||||
const isVSCodeAuthRuntime = React.useMemo(() => isVSCodeRuntime(), []);
|
||||
|
||||
@@ -10,6 +10,7 @@ import {
|
||||
} from '@/components/ui/dialog';
|
||||
import { RiAddLine, RiDeleteBinLine, RiMore2Line, RiPlugLine, RiRefreshLine, RiServerLine, RiGlobalLine } from '@remixicon/react';
|
||||
import { useMcpConfigStore, type McpDraft, type McpServerConfig } from '@/stores/useMcpConfigStore';
|
||||
import { useShallow } from 'zustand/react/shallow';
|
||||
import { useMcpStore } from '@/stores/useMcpStore';
|
||||
import { useDirectoryStore } from '@/stores/useDirectoryStore';
|
||||
import { isMobileDeviceViaCSS } from '@/lib/device';
|
||||
@@ -64,7 +65,14 @@ export const McpSidebar: React.FC<McpSidebarProps> = ({ onItemSelect }) => {
|
||||
const bgClass = 'bg-background';
|
||||
|
||||
const { mcpServers, selectedMcpName, setSelectedMcp, setMcpDraft, loadMcpConfigs, deleteMcp } =
|
||||
useMcpConfigStore();
|
||||
useMcpConfigStore(useShallow((s) => ({
|
||||
mcpServers: s.mcpServers,
|
||||
selectedMcpName: s.selectedMcpName,
|
||||
setSelectedMcp: s.setSelectedMcp,
|
||||
setMcpDraft: s.setMcpDraft,
|
||||
loadMcpConfigs: s.loadMcpConfigs,
|
||||
deleteMcp: s.deleteMcp,
|
||||
})));
|
||||
|
||||
const currentDirectory = useDirectoryStore((state) => state.currentDirectory);
|
||||
const mcpStatus = useMcpStore((state) => state.getStatusForDirectory(currentDirectory ?? null));
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React from 'react';
|
||||
import { RiDiscordFill, RiDownloadLine, RiGithubFill, RiLoaderLine, RiTwitterXFill } from '@remixicon/react';
|
||||
import { useUpdateStore } from '@/stores/useUpdateStore';
|
||||
import { useShallow } from 'zustand/react/shallow';
|
||||
import { UpdateDialog } from '@/components/ui/UpdateDialog';
|
||||
import { useDeviceInfo } from '@/lib/device';
|
||||
import { toast } from '@/components/ui';
|
||||
@@ -16,7 +17,19 @@ export const AboutSettings: React.FC = () => {
|
||||
const { t } = useI18n();
|
||||
const [updateDialogOpen, setUpdateDialogOpen] = React.useState(false);
|
||||
const [showChecking, setShowChecking] = React.useState(false);
|
||||
const updateStore = useUpdateStore();
|
||||
const updateStore = useUpdateStore(useShallow((s) => ({
|
||||
info: s.info,
|
||||
checking: s.checking,
|
||||
available: s.available,
|
||||
error: s.error,
|
||||
downloading: s.downloading,
|
||||
downloaded: s.downloaded,
|
||||
progress: s.progress,
|
||||
runtimeType: s.runtimeType,
|
||||
checkForUpdates: s.checkForUpdates,
|
||||
downloadUpdate: s.downloadUpdate,
|
||||
restartToUpdate: s.restartToUpdate,
|
||||
})));
|
||||
const { isMobile } = useDeviceInfo();
|
||||
|
||||
const currentVersion = updateStore.info?.currentVersion || 'unknown';
|
||||
|
||||
@@ -107,11 +107,11 @@ export const SettingsSidebarItem: React.FC<SettingsSidebarItemProps> = ({
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-fit min-w-20">
|
||||
{actions.map((action, index) => {
|
||||
{actions.map((action) => {
|
||||
const Icon = action.icon;
|
||||
return (
|
||||
<DropdownMenuItem
|
||||
key={index}
|
||||
key={action.label}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
action.onClick();
|
||||
|
||||
@@ -4,6 +4,7 @@ import { Input } from '@/components/ui/input';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { toast } from '@/components/ui';
|
||||
import { useSkillsStore, type SkillConfig, type SkillScope, type SupportingFile, type PendingFile } from '@/stores/useSkillsStore';
|
||||
import { useShallow } from 'zustand/react/shallow';
|
||||
import { RiAddLine, RiBookOpenLine, RiDeleteBinLine, RiFileLine, RiFolderLine, RiRobot2Line, RiUser3Line } from '@remixicon/react';
|
||||
import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
|
||||
import {
|
||||
@@ -39,17 +40,27 @@ const SkillsCatalogStandalone: React.FC = () => (
|
||||
|
||||
const SkillsInstalledPage: React.FC = () => {
|
||||
const { t } = useI18n();
|
||||
const {
|
||||
selectedSkillName,
|
||||
getSkillByName,
|
||||
const {
|
||||
selectedSkillName,
|
||||
getSkillByName,
|
||||
getSkillDetail,
|
||||
createSkill,
|
||||
updateSkill,
|
||||
skills,
|
||||
skillDraft,
|
||||
createSkill,
|
||||
updateSkill,
|
||||
skills,
|
||||
skillDraft,
|
||||
setSkillDraft,
|
||||
setSelectedSkill,
|
||||
} = useSkillsStore();
|
||||
} = useSkillsStore(useShallow((s) => ({
|
||||
selectedSkillName: s.selectedSkillName,
|
||||
getSkillByName: s.getSkillByName,
|
||||
getSkillDetail: s.getSkillDetail,
|
||||
createSkill: s.createSkill,
|
||||
updateSkill: s.updateSkill,
|
||||
skills: s.skills,
|
||||
skillDraft: s.skillDraft,
|
||||
setSkillDraft: s.setSkillDraft,
|
||||
setSelectedSkill: s.setSelectedSkill,
|
||||
})));
|
||||
|
||||
const selectedSkill = selectedSkillName ? getSkillByName(selectedSkillName) : null;
|
||||
const isNewSkill = Boolean(skillDraft && skillDraft.name === selectedSkillName && !selectedSkill);
|
||||
|
||||
@@ -19,6 +19,7 @@ import {
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { RiAddLine, RiDeleteBinLine, RiFileCopyLine, RiMore2Line, RiEditLine, RiBookOpenLine } from '@remixicon/react';
|
||||
import { useSkillsStore, type DiscoveredSkill } from '@/stores/useSkillsStore';
|
||||
import { useShallow } from 'zustand/react/shallow';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
|
||||
import { SettingsProjectSelector } from '@/components/sections/shared/SettingsProjectSelector';
|
||||
@@ -45,7 +46,15 @@ export const SkillsSidebar: React.FC<SkillsSidebarProps> = ({ onItemSelect }) =>
|
||||
createSkill,
|
||||
deleteSkill,
|
||||
getSkillDetail,
|
||||
} = useSkillsStore();
|
||||
} = useSkillsStore(useShallow((s) => ({
|
||||
selectedSkillName: s.selectedSkillName,
|
||||
skills: s.skills,
|
||||
setSelectedSkill: s.setSelectedSkill,
|
||||
setSkillDraft: s.setSkillDraft,
|
||||
createSkill: s.createSkill,
|
||||
deleteSkill: s.deleteSkill,
|
||||
getSkillDetail: s.getSkillDetail,
|
||||
})));
|
||||
|
||||
// Skills are loaded by the Settings shell when this page is active.
|
||||
|
||||
|
||||
@@ -79,7 +79,9 @@ interface AddCatalogDialogProps {
|
||||
|
||||
export const AddCatalogDialog: React.FC<AddCatalogDialogProps> = ({ open, onOpenChange }) => {
|
||||
const { t } = useI18n();
|
||||
const { scanRepo, loadCatalog, isScanning } = useSkillsCatalogStore();
|
||||
const scanRepo = useSkillsCatalogStore((s) => s.scanRepo);
|
||||
const loadCatalog = useSkillsCatalogStore((s) => s.loadCatalog);
|
||||
const isScanning = useSkillsCatalogStore((s) => s.isScanning);
|
||||
const defaultGitIdentityId = useGitIdentitiesStore((s) => s.defaultGitIdentityId);
|
||||
const loadDefaultGitIdentityId = useGitIdentitiesStore((s) => s.loadDefaultGitIdentityId);
|
||||
|
||||
|
||||
@@ -46,7 +46,10 @@ type IdentityOption = { id: string; name: string };
|
||||
|
||||
export const InstallFromRepoDialog: React.FC<InstallFromRepoDialogProps> = ({ open, onOpenChange }) => {
|
||||
const { t } = useI18n();
|
||||
const { scanRepo, installSkills, isScanning, isInstalling } = useSkillsCatalogStore();
|
||||
const scanRepo = useSkillsCatalogStore((s) => s.scanRepo);
|
||||
const installSkills = useSkillsCatalogStore((s) => s.installSkills);
|
||||
const isScanning = useSkillsCatalogStore((s) => s.isScanning);
|
||||
const isInstalling = useSkillsCatalogStore((s) => s.isInstalling);
|
||||
const installedSkills = useSkillsStore((s) => s.skills);
|
||||
const defaultGitIdentityId = useGitIdentitiesStore((s) => s.defaultGitIdentityId);
|
||||
const loadDefaultGitIdentityId = useGitIdentitiesStore((s) => s.loadDefaultGitIdentityId);
|
||||
|
||||
@@ -39,7 +39,8 @@ interface InstallSkillDialogProps {
|
||||
|
||||
export const InstallSkillDialog: React.FC<InstallSkillDialogProps> = ({ open, onOpenChange, item }) => {
|
||||
const { t } = useI18n();
|
||||
const { installSkills, isInstalling } = useSkillsCatalogStore();
|
||||
const installSkills = useSkillsCatalogStore((s) => s.installSkills);
|
||||
const isInstalling = useSkillsCatalogStore((s) => s.isInstalling);
|
||||
const [scope, setScope] = React.useState<'user' | 'project'>('user');
|
||||
const [targetSource, setTargetSource] = React.useState<'opencode' | 'agents'>('opencode');
|
||||
const projects = useProjectsStore((s) => s.projects);
|
||||
|
||||
@@ -23,6 +23,7 @@ import {
|
||||
import { RiAddLine, RiDeleteBinLine, RiRefreshLine, RiDownloadLine, RiStarLine, RiSearchLine } from '@remixicon/react';
|
||||
|
||||
import { useSkillsCatalogStore } from '@/stores/useSkillsCatalogStore';
|
||||
import { useShallow } from 'zustand/react/shallow';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { SkillsCatalogItem } from '@/lib/api/types';
|
||||
|
||||
@@ -81,7 +82,21 @@ export const SkillsCatalogPage: React.FC<SkillsCatalogPageProps> = ({ mode, onMo
|
||||
loadedSourceIds,
|
||||
clawdhubHasMoreBySource,
|
||||
lastCatalogError,
|
||||
} = useSkillsCatalogStore();
|
||||
} = useSkillsCatalogStore(useShallow((s) => ({
|
||||
sources: s.sources,
|
||||
itemsBySource: s.itemsBySource,
|
||||
selectedSourceId: s.selectedSourceId,
|
||||
setSelectedSource: s.setSelectedSource,
|
||||
loadCatalog: s.loadCatalog,
|
||||
loadSource: s.loadSource,
|
||||
loadMoreClawdHub: s.loadMoreClawdHub,
|
||||
isLoadingCatalog: s.isLoadingCatalog,
|
||||
isLoadingSource: s.isLoadingSource,
|
||||
isLoadingMore: s.isLoadingMore,
|
||||
loadedSourceIds: s.loadedSourceIds,
|
||||
clawdhubHasMoreBySource: s.clawdhubHasMoreBySource,
|
||||
lastCatalogError: s.lastCatalogError,
|
||||
})));
|
||||
|
||||
const [search, setSearch] = React.useState('');
|
||||
const [addCatalogOpen, setAddCatalogOpen] = React.useState(false);
|
||||
|
||||
Reference in New Issue
Block a user