remove the onboarding flow and the accountMode leftover
Onboarding was dead in three layers:
- The OnboardingAdmin screen was only reachable from a route block in App.tsx
that has been commented out, so it never rendered. Its ServerTypeCard carried
accountMode ('organization' | 'single'), inherited from the codebase this was
based on and meaningless for a single-user platform.
- Two /onboarding-complete endpoints, one public and one protected, that no
frontend code called. Both read a server_config key that was never written, so
both answered false while the app's own path defaulted to true.
- HomeScreen gated on settings.onboarding.complete to show a welcome panel, and
seedHomeDir created an Onboarding folder from DATA_PATH/Onboarding and
/Onboarding_Admin — neither seed directory exists, so it only ever produced an
empty folder.
Also drops the onboarding key from UserSettings and the now-empty home-header
panel from the default home layout.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
brunorezio
co-authored by
Claude Opus 5
Claude Opus 5
parent
10400310c5
commit
1ac79f9c68
@@ -8,7 +8,7 @@ import { useInitialData } from '@/state/useInitialData';
|
||||
|
||||
export function App() {
|
||||
const { isLoading, isAuthenticated } = useAuth();
|
||||
const { onboardingComplete, plugins, isLoading: isServerSettingsLoading } = useServerSettings();
|
||||
const { plugins, isLoading: isServerSettingsLoading } = useServerSettings();
|
||||
useServerEnvironment();
|
||||
useInitialData();
|
||||
|
||||
@@ -26,14 +26,7 @@ export function App() {
|
||||
</Routes>
|
||||
</Authentication.AuthenticationLayout>
|
||||
)}
|
||||
{/* {isAuthenticated && !onboardingComplete && ( */}
|
||||
{/* <Routes> */}
|
||||
{/* <Route path="/onboarding-admin" element={<OnboardingAdmin />} /> */}
|
||||
{/* <Route path="/auth/signout" element={<SignoutScreen />} /> */}
|
||||
{/* <Route path="*" element={<Navigate to="/onboarding-admin" replace />} /> */}
|
||||
{/* </Routes> */}
|
||||
{/* )} */}
|
||||
{isAuthenticated && onboardingComplete && (
|
||||
{isAuthenticated && (
|
||||
<Dashboard.DashboardLayout>
|
||||
<Routes>
|
||||
<Route path="/" element={<Dashboard.HomeScreen />} />
|
||||
|
||||
@@ -1,61 +1,14 @@
|
||||
import type { LayoutNode, PanelComponents, DefaultFileSort } from 'officerdev';
|
||||
import { WorkspaceView, useFileViewerPanels } from 'officerdev';
|
||||
import type { LayoutNode } from 'officerdev';
|
||||
import { WorkspaceView } from 'officerdev';
|
||||
import { useDashboardState } from 'state/useDashboardState';
|
||||
import { useSettings } from 'state/useSettings';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { defaultLayout } from './defaultLayout';
|
||||
|
||||
const HomeHeader = () => {
|
||||
const { settings, saveSettings } = useSettings();
|
||||
|
||||
const completeOnboarding = () => {
|
||||
saveSettings({ ...settings, onboarding: { complete: true } });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-full items-center justify-center p-6 text-center">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">Welcome to your Officer.dev platform</h1>
|
||||
<p className="mt-2 text-sm opacity-70">
|
||||
Please follow the video instructions below in order to get familiar with all that is possible.
|
||||
</p>
|
||||
<Button className="mt-6" onClick={completeOnboarding}>
|
||||
I'm ready
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const components: PanelComponents = {
|
||||
'home-header': HomeHeader,
|
||||
};
|
||||
|
||||
const defaultSort: DefaultFileSort = { field: 'type', direction: 'desc' };
|
||||
|
||||
export const HomeScreen = () => {
|
||||
const workspace = useDashboardState<LayoutNode>('screens/home', defaultLayout);
|
||||
const ephemeral = useFileViewerPanels();
|
||||
const { settings } = useSettings();
|
||||
|
||||
if (settings.onboarding.complete) {
|
||||
return (
|
||||
<div className="h-full w-full">
|
||||
<WorkspaceView workspace={workspace} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-full w-full">
|
||||
<WorkspaceView
|
||||
workspace={workspace}
|
||||
locked
|
||||
initialFilePath="/Onboarding"
|
||||
defaultFileSort={defaultSort}
|
||||
components={components}
|
||||
ephemeral={ephemeral}
|
||||
/>
|
||||
<WorkspaceView workspace={workspace} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -4,9 +4,5 @@ export const defaultLayout: LayoutNode = {
|
||||
type: 'group',
|
||||
id: 'home-root',
|
||||
direction: 'vertical',
|
||||
children: [
|
||||
{ node: { type: 'panel', id: 'home-header', appType: null }, size: 30 },
|
||||
{ node: { type: 'panel', id: 'home-files', appType: 'officerdev/file-browser' }, size: 70 },
|
||||
],
|
||||
children: [{ node: { type: 'panel', id: 'home-files', appType: 'officerdev/file-browser' }, size: 100 }],
|
||||
};
|
||||
|
||||
|
||||
@@ -1,147 +0,0 @@
|
||||
import { useState } from 'react';
|
||||
import { Terminal, Copy, Check } from 'lucide-react';
|
||||
import { useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card } from '@/components/Card';
|
||||
import { useClient } from 'hooks/useClient';
|
||||
|
||||
type AIHarnessesCardProps = {
|
||||
onNext: () => void;
|
||||
onBack: () => void;
|
||||
saveSettings: (settings: Record<string, unknown>) => Promise<void>;
|
||||
};
|
||||
|
||||
export const AIHarnessesCard = ({ onNext, onBack, saveSettings }: AIHarnessesCardProps) => {
|
||||
const client = useClient();
|
||||
const queryClient = useQueryClient();
|
||||
const [installing, setInstalling] = useState(false);
|
||||
|
||||
type VersionInfo = { version: string | null; path: string | null; globalPath: string | null };
|
||||
type ClaudeAuthInfo = { authenticated: boolean; loggedIn?: boolean; subscriptionType?: string };
|
||||
|
||||
const { data: claudeVersion, isLoading: claudeLoading } = useQuery({
|
||||
queryKey: ['CLAUDE_CODE_VERSION'],
|
||||
queryFn: () => client.get<VersionInfo>('/server-settings/claude-code/version'),
|
||||
refetchInterval: (query) => {
|
||||
const data = query.state.data;
|
||||
return data?.version && !data?.globalPath ? 1000 : false;
|
||||
},
|
||||
});
|
||||
|
||||
const { data: claudeAuth } = useQuery({
|
||||
queryKey: ['CLAUDE_CODE_AUTH'],
|
||||
queryFn: () => client.get<ClaudeAuthInfo>('/server-settings/claude-code/auth'),
|
||||
enabled: !!claudeVersion?.version,
|
||||
refetchInterval: (query) => (!query.state.data?.authenticated ? 2000 : false),
|
||||
});
|
||||
|
||||
const installClaude = async () => {
|
||||
setInstalling(true);
|
||||
try {
|
||||
const result = await client.post<VersionInfo>('/server-settings/claude-code/install');
|
||||
queryClient.setQueryData(['CLAUDE_CODE_VERSION'], result);
|
||||
} finally {
|
||||
setInstalling(false);
|
||||
}
|
||||
};
|
||||
|
||||
const [copied, setCopied] = useState<string | null>(null);
|
||||
|
||||
const copyToClipboard = (text: string) => {
|
||||
navigator.clipboard.writeText(text);
|
||||
setCopied(text);
|
||||
setTimeout(() => setCopied(null), 1500);
|
||||
};
|
||||
|
||||
const CopyCommand = ({ command }: { command: string }) => (
|
||||
<div className="mt-2 text-xs text-amber-600">
|
||||
Not globally accessible. Run:
|
||||
<div className="flex items-center gap-1 mt-1">
|
||||
<code className="flex-1 bg-duck-dark/5 rounded px-2 py-1 text-duck-dark/70">{command}</code>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => copyToClipboard(command)}
|
||||
className="shrink-0 p-1 rounded hover:bg-duck-dark/10 cursor-pointer transition-colors"
|
||||
>
|
||||
{copied === command ? (
|
||||
<Check className="h-3.5 w-3.5 text-green-600" />
|
||||
) : (
|
||||
<Copy className="h-3.5 w-3.5 text-duck-dark/50" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const claudeReady = !!claudeVersion?.version && !!claudeVersion?.globalPath && !!claudeAuth?.authenticated;
|
||||
|
||||
const handleNext = async () => {
|
||||
await saveSettings({ aiHarnesses: { claudeCode: true }, onboardingComplete: true });
|
||||
onNext();
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="p-6">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<Terminal className="h-5 w-5 text-duck-forest" />
|
||||
<h2 className="text-xl font-bold text-duck-dark">AI Harnesses</h2>
|
||||
</div>
|
||||
<p className="text-duck-dark/70 text-sm mb-6">Set up Claude Code for AI-assisted development.</p>
|
||||
|
||||
<div className="flex flex-col gap-4">
|
||||
<div>
|
||||
<span className="text-sm font-medium text-duck-dark">Claude Code</span>
|
||||
<div className="ml-7 mt-2 text-xs text-duck-dark/50">
|
||||
{claudeLoading ? (
|
||||
'Checking version...'
|
||||
) : claudeVersion?.version ? (
|
||||
<>
|
||||
<div>{claudeVersion.version}</div>
|
||||
<div>{claudeVersion.path}</div>
|
||||
{claudeAuth && (
|
||||
<div className={`mt-1 ${claudeAuth.authenticated ? 'text-green-600' : 'text-amber-600'}`}>
|
||||
{claudeAuth.authenticated ? (
|
||||
`Logged in (${claudeAuth.subscriptionType ?? 'unknown plan'})`
|
||||
) : (
|
||||
<div className="flex items-center gap-2">
|
||||
<span>Not logged in</span>
|
||||
<Button
|
||||
size="sm"
|
||||
className="bg-duck-teal text-duck-yellow hover:bg-duck-teal/90"
|
||||
onClick={() => client.post('/server-settings/claude-code/auth/login')}
|
||||
>
|
||||
Login
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{!claudeVersion.globalPath && claudeVersion.path && (
|
||||
<CopyCommand command={`sudo ln -s ${claudeVersion.path} /usr/local/bin/claude`} />
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<Button
|
||||
size="sm"
|
||||
className="bg-duck-teal text-duck-yellow hover:bg-duck-teal/90"
|
||||
onClick={installClaude}
|
||||
disabled={installing}
|
||||
>
|
||||
{installing ? 'Installing...' : 'Install'}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between mt-6">
|
||||
<Button variant="outline" onClick={onBack}>
|
||||
Back
|
||||
</Button>
|
||||
<Button disabled={!claudeReady} onClick={handleNext}>
|
||||
Complete Setup
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
@@ -1,69 +0,0 @@
|
||||
import { useState } from 'react';
|
||||
import { Building2, UserRound } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card } from '@/components/Card';
|
||||
|
||||
type AccountMode = 'organization' | 'single' | null;
|
||||
|
||||
type ServerTypeCardProps = {
|
||||
onNext: () => void;
|
||||
saveSettings: (settings: Record<string, unknown>) => Promise<void>;
|
||||
};
|
||||
|
||||
export const ServerTypeCard = ({ onNext, saveSettings }: ServerTypeCardProps) => {
|
||||
const [accountMode, setAccountMode] = useState<AccountMode>(null);
|
||||
|
||||
const handleNext = async () => {
|
||||
await saveSettings({ accountMode });
|
||||
onNext();
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="p-6">
|
||||
<h2 className="text-xl font-bold text-duck-dark mb-2">Account Type</h2>
|
||||
<p className="text-duck-dark/70 text-sm mb-6">How will you be using Officer?</p>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setAccountMode('single')}
|
||||
className={`flex flex-col items-center gap-3 p-6 rounded-lg border-2 cursor-pointer transition-colors ${
|
||||
accountMode === 'single'
|
||||
? 'border-duck-teal bg-duck-teal/10'
|
||||
: 'border-duck-dark/20 hover:border-duck-dark/40'
|
||||
}`}
|
||||
>
|
||||
<UserRound className={`h-8 w-8 ${accountMode === 'single' ? 'text-duck-teal' : 'text-duck-dark/50'}`} />
|
||||
<span className={`text-sm font-medium ${accountMode === 'single' ? 'text-duck-teal' : 'text-duck-dark'}`}>
|
||||
Single User
|
||||
</span>
|
||||
<span className="text-xs text-duck-dark/50 text-center">Just me, personal use</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setAccountMode('organization')}
|
||||
className={`flex flex-col items-center gap-3 p-6 rounded-lg border-2 cursor-pointer transition-colors ${
|
||||
accountMode === 'organization'
|
||||
? 'border-duck-teal bg-duck-teal/10'
|
||||
: 'border-duck-dark/20 hover:border-duck-dark/40'
|
||||
}`}
|
||||
>
|
||||
<Building2 className={`h-8 w-8 ${accountMode === 'organization' ? 'text-duck-teal' : 'text-duck-dark/50'}`} />
|
||||
<span
|
||||
className={`text-sm font-medium ${accountMode === 'organization' ? 'text-duck-teal' : 'text-duck-dark'}`}
|
||||
>
|
||||
Organization
|
||||
</span>
|
||||
<span className="text-xs text-duck-dark/50 text-center">Multiple users and teams</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end mt-6">
|
||||
<Button disabled={!accountMode} onClick={handleNext}>
|
||||
Next
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
@@ -1,57 +0,0 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useServerSettings } from 'state/useServerSettings';
|
||||
import { ServerTypeCard } from './ServerTypeCard';
|
||||
import { AIHarnessesCard } from './AIHarnessesCard';
|
||||
|
||||
const STEPS = ['server-type', 'ai-harnesses'] as const;
|
||||
type Step = (typeof STEPS)[number];
|
||||
|
||||
const getStepFromHash = (): Step => {
|
||||
const hash = window.location.hash.slice(1);
|
||||
if (STEPS.includes(hash as Step)) return hash as Step;
|
||||
return STEPS[0]!;
|
||||
};
|
||||
|
||||
const setHash = (step: Step) => {
|
||||
window.location.hash = step;
|
||||
};
|
||||
|
||||
export const OnboardingAdmin = () => {
|
||||
const { saveSettings } = useServerSettings();
|
||||
const [step, setStep] = useState<Step>(getStepFromHash);
|
||||
|
||||
useEffect(() => {
|
||||
const onHashChange = () => setStep(getStepFromHash());
|
||||
window.addEventListener('hashchange', onHashChange);
|
||||
return () => window.removeEventListener('hashchange', onHashChange);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setHash(step);
|
||||
}, [step]);
|
||||
|
||||
const currentIndex = STEPS.indexOf(step);
|
||||
|
||||
const nextStep = () => {
|
||||
if (currentIndex < STEPS.length - 1) {
|
||||
setStep(STEPS[currentIndex + 1]!);
|
||||
}
|
||||
};
|
||||
|
||||
const prevStep = () => {
|
||||
if (currentIndex > 0) {
|
||||
setStep(STEPS[currentIndex - 1]!);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-center h-full px-4">
|
||||
<div className="w-full max-w-lg">
|
||||
{step === 'server-type' && <ServerTypeCard onNext={nextStep} saveSettings={saveSettings} />}
|
||||
{step === 'ai-harnesses' && (
|
||||
<AIHarnessesCard onNext={nextStep} onBack={prevStep} saveSettings={saveSettings} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,6 +1,5 @@
|
||||
export * from './Layout';
|
||||
export * from './Home';
|
||||
export * from './OnboardingAdmin';
|
||||
export * from './PasskeyGate';
|
||||
export * from './Plans';
|
||||
export * from './Processes';
|
||||
|
||||
Reference in New Issue
Block a user