- Implemented sidebar apps functionality including adding, editing, and deleting apps. - Created a modal for managing sidebar apps with forms for inputting app details. - Added icon picker component for selecting app icons. - Introduced inline app view for displaying apps within the sidebar. - Updated translations for new sidebar apps feature in Dutch and Portuguese. - Enhanced settings store to manage sidebar apps state. - Added hooks for managing sidebar apps state and modal visibility.
50 lines
1.4 KiB
TypeScript
50 lines
1.4 KiB
TypeScript
import { useState, useCallback } from 'react';
|
|
import { useSettingsStore } from '@/stores/settings-store';
|
|
|
|
export interface InlineAppState {
|
|
id: string;
|
|
url: string;
|
|
name: string;
|
|
}
|
|
|
|
export function useSidebarApps() {
|
|
const [showAppsModal, setShowAppsModal] = useState(false);
|
|
const [inlineApp, setInlineApp] = useState<InlineAppState | null>(null);
|
|
const [loadedApps, setLoadedApps] = useState<InlineAppState[]>([]);
|
|
const keepAppsLoaded = useSettingsStore((s) => s.keepAppsLoaded);
|
|
|
|
const handleManageApps = useCallback(() => {
|
|
setShowAppsModal(true);
|
|
}, []);
|
|
|
|
const handleInlineApp = useCallback((appId: string, url: string, name: string) => {
|
|
const app = { id: appId, url, name };
|
|
setInlineApp(app);
|
|
setLoadedApps((prev) => {
|
|
if (prev.some((a) => a.id === appId)) return prev;
|
|
return [...prev, app];
|
|
});
|
|
}, []);
|
|
|
|
const closeInlineApp = useCallback(() => {
|
|
if (!keepAppsLoaded) {
|
|
setLoadedApps((prev) => prev.filter((a) => a.id !== inlineApp?.id));
|
|
}
|
|
setInlineApp(null);
|
|
}, [keepAppsLoaded, inlineApp]);
|
|
|
|
const closeAppsModal = useCallback(() => {
|
|
setShowAppsModal(false);
|
|
}, []);
|
|
|
|
return {
|
|
showAppsModal,
|
|
inlineApp,
|
|
loadedApps: keepAppsLoaded ? loadedApps : (inlineApp ? [inlineApp] : []),
|
|
handleManageApps,
|
|
handleInlineApp,
|
|
closeInlineApp,
|
|
closeAppsModal,
|
|
};
|
|
}
|