feat: auto create first workspace

fixes #327

localization/locales/en/translation.json

@@ -2,6 +2,7 @@
  "Hello": "Hello",
  "WorkspaceSelector": {
  "Add": "Add",
+ "Guide": "Guide",
  "OpenWorkspaceTagTiddler": "Open {{tagName}}",
  "DefaultTiddlers": "Default Tiddlers",
  "OpenWorkspaceMenuName": "Open Workspace",
@@ -229,7 +230,8 @@
  "CheckingRebaseStatus": "Analyzing the rebase processing plan",
  "InitializeWikiGit": "Initializing Wiki and Git",
  "InitializeWorkspaceView": "Initializing workspace and browser view, and loading the web content, please wait",
- "GitTokenExpireOrWrong": "The Git credential (Token) has expired and you need to log in again, or the credential does not correspond to the user name"
+ "GitTokenExpireOrWrong": "The Git credential (Token) has expired and you need to log in again, or the credential does not correspond to the user name",
+ "InitializeWorkspaceViewDone": "Created successfully, content will be loaded soon"
  },
  "Cancel": "Cancel",
  "Preference": {

localization/locales/zh_CN/translation.json

@@ -3,6 +3,7 @@
  "LinOnetwo": "林一二",
  "WorkspaceSelector": {
  "Add": "添加",
+ "Guide": "引导",
  "OpenWorkspaceTagTiddler": "打开 {{tagName}}",
  "DefaultTiddlers": "默认条目",
  "OpenWorkspaceMenuName": "打开工作区",
@@ -247,6 +248,7 @@
  "SynchronizationFinish": "同步完成",
  "InitializeWikiGit": "正在初始化 Wiki 和 Git",
  "InitializeWorkspaceView": "正在初始化工作区和浏览器窗口，并加载内容，请耐心等待",
+ "InitializeWorkspaceViewDone": "创建成功，即将加载内容",
  "PrepareCloneOnlineWiki": "准备导入线上 Wiki",
  "StartFetchingFromGithubRemote": "正在拉取Github远端仓库的数据，需要的时间取决于网速和仓库大小，请耐心等待",
  "UsingUrlAndUsername": "使用 Git Url {{githubRepoUrl}} 和用户名 {{username}} 和 accessToken {{accessToken}}"

src/components/WorkspaceIconAndSelector/WorkspaceSelector.tsx

@@ -109,7 +109,7 @@ const AvatarPicture = styled.img<{ large?: boolean }>`
  `}
 `;
 
-const ShortcutText = styled.p`
+const ShortcutText = styled.p<{ active?: boolean }>`
  margin-top: 2px;
  margin-bottom: 0;
  padding: 0;
@@ -118,6 +118,12 @@ const ShortcutText = styled.p`
  display: inline-block;
  word-break: break-all;
  text-align: center;
+ ${({ active }) =>
+ active === true &&
+ css`
+ text-decoration: underline;
+ text-underline-offset: 0.2em;
+ `}
 `;
 const Badge = styled(BadgeRaw)`
  line-height: 20px;
@@ -171,15 +177,21 @@ export function WorkspaceSelector({
  transparent={transparentBackground}
  addAvatar={id === 'add'}
  highlightAdd={index === 0}
- id={id === 'add' ? 'add-workspace-button' : `workspace-avatar-${id}`}>
+ id={id === 'add' || id === 'guide' ? 'add-workspace-button' : `workspace-avatar-${id}`}>
  {id === 'add' ? (
  '+'
+ ) : id === 'guide' ? (
+ '※'
  ) : (
  <AvatarPicture alt="Icon" large={!showSidebarShortcutHints} src={getAssetsFileUrl(picturePath ?? defaultIcon)} draggable={false} />
  )}
  </Avatar>
  </Badge>
- {showSidebarShortcutHints && <ShortcutText>{id === 'add' ? t('WorkspaceSelector.Add') : shortWorkspaceName}</ShortcutText>}
+ {showSidebarShortcutHints && (
+ <ShortcutText active={active}>
+ {id === 'add' ? t('WorkspaceSelector.Add') : id === 'guide' ? t('WorkspaceSelector.Guide') : shortWorkspaceName}
+ </ShortcutText>
+ )}
  </Root>
  );
 }

src/constants/paths.ts

@@ -31,3 +31,5 @@ export const LOCALIZATION_FOLDER = isDevelopmentOrTest
  ? path.resolve(sourcePath, '..', localizationFolderName)
  : path.resolve(process.resourcesPath, localizationFolderName);
 export const DEFAULT_WIKI_FOLDER = isDevelopmentOrTest ? path.resolve(os.tmpdir(), developmentWikiFolderName) : DESKTOP_PATH;
+export const DEFAULT_FIRST_WIKI_NAME = 'wiki';
+export const DEFAULT_FIRST_WIKI_PATH = path.join(DEFAULT_WIKI_FOLDER, DEFAULT_FIRST_WIKI_NAME);

src/pages/AddWorkspace/useCallWikiInitialization.ts

@@ -7,6 +7,7 @@ export async function callWikiInitialization(
  wikiCreationMessageSetter: (m: string) => void,
  t: TFunction<'translation'>,
  gitUserInfo: IGitUserInfos | undefined,
+ notClose?: boolean,
 ): Promise<void> {
  wikiCreationMessageSetter(t('Log.InitializeWikiGit'));
  const newWorkspace = await window.service.wikiGitWorkspace.initWikiGitTransaction(newWorkspaceConfig, gitUserInfo);
@@ -17,7 +18,11 @@ export async function callWikiInitialization(
  wikiCreationMessageSetter(t('Log.InitializeWorkspaceView'));
  /** create workspace from workspaceService to store workspace configs, and create a BrowserView to actually display wiki web content from viewService */
  await window.service.workspaceView.initializeWorkspaceView(newWorkspace, { isNew: true });
+ wikiCreationMessageSetter(t('Log.InitializeWorkspaceViewDone'));
  await window.service.workspaceView.setActiveWorkspaceView(newWorkspace.id);
- // wait for wiki to start and close the window now.
- await window.remote.closeCurrentWindow();
+ wikiCreationMessageSetter('');
+ if (notClose !== true) {
+ // wait for wiki to start and close the window now.
+ await window.remote.closeCurrentWindow();
+ }
 }

src/pages/AddWorkspace/useForm.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/ban-types */
 /* eslint-disable unicorn/no-null */
 /* eslint-disable @typescript-eslint/strict-boolean-expressions */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
@@ -10,6 +11,7 @@ import { useStorageServiceUserInfoObservable } from '@services/auth/hooks';
 import { SupportedStorageServices } from '@services/types';
 import { ISubWikiPluginContent } from '@services/wiki/plugin/subWikiPlugin';
 import { INewWorkspaceConfig, IWorkspace } from '@services/workspaces/interface';
+import type { INewWikiRequiredFormData } from './useNewWiki';
 
 export function useIsCreateSyncedWorkspace(): [boolean, React.Dispatch<React.SetStateAction<boolean>>] {
  const [isCreateSyncedWorkspace, isCreateSyncedWorkspaceSetter] = useState(false);
@@ -151,15 +153,15 @@ export interface IWikiWorkspaceFormProps {
  isCreateMainWorkspace: boolean;
 }
 
-export function workspaceConfigFromForm(form: IWikiWorkspaceForm, isCreateMainWorkspace: boolean, isCreateSyncedWorkspace: boolean): INewWorkspaceConfig {
+export function workspaceConfigFromForm(form: INewWikiRequiredFormData, isCreateMainWorkspace: boolean, isCreateSyncedWorkspace: boolean): INewWorkspaceConfig {
  return {
  gitUrl: isCreateSyncedWorkspace ? form.gitRepoUrl : null,
  isSubWiki: !isCreateMainWorkspace,
- mainWikiToLink: !isCreateMainWorkspace ? form.mainWikiToLink.wikiFolderLocation : null,
- mainWikiID: !isCreateMainWorkspace ? form.mainWikiToLink.id : null,
+ mainWikiToLink: isCreateMainWorkspace ? null : form.mainWikiToLink.wikiFolderLocation,
+ mainWikiID: isCreateMainWorkspace ? null : form.mainWikiToLink.id,
  name: form.wikiFolderName,
  storageService: form.storageProvider,
- tagName: !isCreateMainWorkspace ? form.tagName : null,
+ tagName: isCreateMainWorkspace ? null : form.tagName,
  port: form.wikiPort,
  wikiFolderLocation: form.wikiFolderLocation!,
  backupOnInterval: true,

src/pages/AddWorkspace/useNewWiki.ts

@@ -1,9 +1,11 @@
+/* eslint-disable @typescript-eslint/ban-types */
 /* eslint-disable @typescript-eslint/strict-boolean-expressions */
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { callWikiInitialization } from './useCallWikiInitialization';
 import { IErrorInWhichComponent, IWikiWorkspaceForm, workspaceConfigFromForm } from './useForm';
 import { updateErrorInWhichComponentSetterByErrorMessage } from './useIndicator';
+import { ConditionalExcept } from 'type-fest';
 
 export function useValidateNewWiki(
  isCreateMainWorkspace: boolean,
@@ -56,20 +58,21 @@ export function useValidateNewWiki(
  return [hasError, wikiCreationMessage, wikiCreationMessageSetter, hasErrorSetter];
 }
 
+export type INewWikiRequiredFormData = ConditionalExcept<IWikiWorkspaceForm, Function>;
 export function useNewWiki(
  isCreateMainWorkspace: boolean,
  isCreateSyncedWorkspace: boolean,
- form: IWikiWorkspaceForm,
+ form: INewWikiRequiredFormData,
  wikiCreationMessageSetter: (m: string) => void,
- hasErrorSetter: (m: boolean) => void,
- errorInWhichComponentSetter: (errors: IErrorInWhichComponent) => void,
- options?: { noCopyTemplate?: boolean },
+ hasErrorSetter?: (m: boolean) => void,
+ errorInWhichComponentSetter?: (errors: IErrorInWhichComponent) => void,
+ options?: { noCopyTemplate?: boolean; notClose?: boolean },
 ): () => Promise<void> {
  const { t } = useTranslation();
 
  const onSubmit = useCallback(async () => {
  wikiCreationMessageSetter(t('AddWorkspace.Processing'));
- hasErrorSetter(false);
+ hasErrorSetter?.(false);
  try {
  const newWorkspaceConfig = workspaceConfigFromForm(form, isCreateMainWorkspace, isCreateSyncedWorkspace);
  if (isCreateMainWorkspace) {
@@ -79,22 +82,13 @@ export function useNewWiki(
  } else {
  await window.service.wiki.createSubWiki(form.parentFolderLocation, form.wikiFolderName, form.mainWikiToLink?.wikiFolderLocation, form.tagName);
  }
- await callWikiInitialization(newWorkspaceConfig, wikiCreationMessageSetter, t, form.gitUserInfo);
+ await callWikiInitialization(newWorkspaceConfig, wikiCreationMessageSetter, t, form.gitUserInfo, options?.notClose);
  } catch (error) {
  wikiCreationMessageSetter((error as Error).message);
- updateErrorInWhichComponentSetterByErrorMessage(t, (error as Error).message, errorInWhichComponentSetter);
- hasErrorSetter(true);
+ errorInWhichComponentSetter && updateErrorInWhichComponentSetterByErrorMessage(t, (error as Error).message, errorInWhichComponentSetter);
+ hasErrorSetter?.(true);
  }
- }, [
- wikiCreationMessageSetter,
- t,
- hasErrorSetter,
- form,
- isCreateMainWorkspace,
- isCreateSyncedWorkspace,
- options?.noCopyTemplate,
- errorInWhichComponentSetter,
- ]);
+ }, [wikiCreationMessageSetter, t, hasErrorSetter, form, isCreateMainWorkspace, isCreateSyncedWorkspace, options, errorInWhichComponentSetter]);
 
  return onSubmit;
 }

src/pages/Main/index.tsx

@@ -1,5 +1,6 @@
+/* eslint-disable @typescript-eslint/strict-boolean-expressions */
 /* eslint-disable @typescript-eslint/promise-function-async */
-import React from 'react';
+import React, { useState } from 'react';
 import styled, { css } from 'styled-components';
 import is, { isNot } from 'typescript-styled-is';
 import { useTranslation } from 'react-i18next';
@@ -28,6 +29,7 @@ import { Languages } from '../Preferences/sections/Languages';
 import { TiddlyWiki } from '../Preferences/sections/TiddlyWiki';
 import { NewUserMessage } from './NewUserMessage';
 import { WikiErrorMessages, ViewLoadErrorMessages } from './ErrorMessage';
+import { useAutoCreateFirstWorkspace } from './useAutoCreateFirstWorkspace';
 
 const OuterRoot = styled.div`
  display: flex;
@@ -151,6 +153,8 @@ const SidebarContainer = ({ children }: { children: React.ReactNode }): JSX.Elem
 export default function Main(): JSX.Element {
  const { t } = useTranslation();
  const workspacesList = useWorkspacesListObservable();
+ const [wikiCreationMessage, wikiCreationMessageSetter] = useState('');
+ useAutoCreateFirstWorkspace(workspacesList, wikiCreationMessageSetter);
  const preferences = usePreferenceObservable();
  /** is title bar on. This only take effect after reload, so we don't want to get this preference from observable */
  const titleBar = usePromiseValue<boolean>(() => window.service.preference.get('titleBar'), false)!;
@@ -188,6 +192,13 @@ export default function Main(): JSX.Element {
  showSidebarShortcutHints={sidebarShortcutHints}
  onClick={() => void window.service.window.open(WindowNames.addWorkspace)}
  />
+ <WorkspaceSelector
+ id="guide"
+ index={workspacesList?.length ? workspacesList.length + 1 : 1}
+ active={activeWorkspace?.id === undefined}
+ showSidebarShortcutHints={sidebarShortcutHints}
+ onClick={() => void window.service.workspace.clearActiveWorkspace(activeWorkspace?.id)}
+ />
  </SidebarTop>
  <SideBarEnd>
  {(workspacesList?.length ?? 0) > 0 && (
@@ -233,6 +244,7 @@ export default function Main(): JSX.Element {
  {Array.isArray(workspacesList) && workspacesList.length > 0 && activeWorkspaceMetadata?.isLoading === true && (
  <Typography color="textSecondary">{t('Loading')}</Typography>
  )}
+ {wikiCreationMessage && <Typography color="textSecondary">{wikiCreationMessage}</Typography>}
  {Array.isArray(workspacesList) && workspacesList.length === 0 && <NewUserMessage sidebar={sidebar} themeSource={themeSource} />}
  </InnerContentRoot>
  <Languages languageSelectorOnly />

src/pages/Main/useAutoCreateFirstWorkspace.ts

@@ -0,0 +1,40 @@
+/* eslint-disable @typescript-eslint/promise-function-async */
+import { useEffect, useState } from 'react';
+import { IWorkspaceWithMetadata } from '@services/workspaces/interface';
+import { INewWikiRequiredFormData, useNewWiki } from '../AddWorkspace/useNewWiki';
+import { SupportedStorageServices } from '@services/types';
+import { useWikiWorkspaceForm } from '../AddWorkspace/useForm';
+import { usePromiseValue } from '@/helpers/useServiceValue';
+
+export function useAutoCreateFirstWorkspace(workspacesList: IWorkspaceWithMetadata[] | undefined, wikiCreationMessageSetter: (m: string) => void): void {
+ const form = useWikiWorkspaceForm();
+ const DEFAULT_FIRST_WIKI_PATH = usePromiseValue<string | undefined>(() => window.service.context.get('DEFAULT_FIRST_WIKI_PATH'));
+ const DEFAULT_WIKI_FOLDER = usePromiseValue<string | undefined>(() => window.service.context.get('DEFAULT_WIKI_FOLDER'))!;
+ const defaultNewWorkspaceConfig: INewWikiRequiredFormData = {
+ ...form,
+ wikiFolderName: 'wiki',
+ wikiFolderLocation: DEFAULT_FIRST_WIKI_PATH,
+ parentFolderLocation: DEFAULT_WIKI_FOLDER,
+ storageProvider: SupportedStorageServices.local,
+ wikiPort: 5212,
+ };
+
+ /** allow user delete all workspace, to enter the empty list state. */
+ const [created, createdSetter] = useState(false);
+ const onSubmit = useNewWiki(true, false, defaultNewWorkspaceConfig, wikiCreationMessageSetter, undefined, undefined, { notClose: true });
+
+ useEffect(() => {
+ if (created) return;
+ // skip this logic if already have workspaces
+ if (workspacesList?.length !== undefined && workspacesList?.length > 0) {
+ createdSetter(true);
+ return;
+ }
+ // if is first opened (or page refreshed) with empty workspace list, create one
+ if (DEFAULT_WIKI_FOLDER === undefined || DEFAULT_FIRST_WIKI_PATH === undefined) return;
+ if (workspacesList?.length === 0) {
+ createdSetter(true);
+ void onSubmit();
+ }
+ }, [workspacesList?.length, created, createdSetter, onSubmit, DEFAULT_WIKI_FOLDER, DEFAULT_FIRST_WIKI_PATH]);
+}

src/services/context/interface.ts

@@ -3,6 +3,8 @@ import { ContextChannel } from '@/constants/channels';
 
 export interface IPaths {
  CHROME_ERROR_PATH: string;
+ DEFAULT_FIRST_WIKI_NAME: string;
+ DEFAULT_FIRST_WIKI_PATH: string;
  DEFAULT_WIKI_FOLDER: string;
  DESKTOP_PATH: string;
  LOCALIZATION_FOLDER: string;

src/services/workspaces/index.ts

@@ -355,7 +355,14 @@ export class Workspace implements IWorkspaceService {
  // active new one
  await this.update(id, { active: true, hibernated: false });
  // de-active the other one
- if (typeof oldActiveWorkspaceID === 'string' && oldActiveWorkspaceID !== id) {
+ if (oldActiveWorkspaceID !== id) {
+ await this.clearActiveWorkspace(oldActiveWorkspaceID);
+ }
+ }
+
+ public async clearActiveWorkspace(oldActiveWorkspaceID: string | undefined): Promise<void> {
+ // de-active the other one
+ if (typeof oldActiveWorkspaceID === 'string') {
  await this.update(oldActiveWorkspaceID, { active: false });
  }
  }

src/services/workspaces/interface.ts

@@ -121,6 +121,8 @@ export type INewWorkspaceConfig = SetOptional<
  * Manage workspace level preferences and workspace metadata.
  */
 export interface IWorkspaceService {
+ /** Enter a state that no workspace is active (show welcome page) */
+ clearActiveWorkspace(oldActiveWorkspaceID: string | undefined): Promise<void>;
  countWorkspaces(): Promise<number>;
  create(newWorkspaceConfig: INewWorkspaceConfig): Promise<IWorkspace>;
  get(id: string): Promise<IWorkspace | undefined>;
@@ -157,6 +159,7 @@ export const WorkspaceServiceIPCDescriptor = {
  channel: WorkspaceChannel.name,
  properties: {
  countWorkspaces: ProxyPropertyType.Function,
+ clearActiveWorkspace: ProxyPropertyType.Function,
  create: ProxyPropertyType.Function,
  get: ProxyPropertyType.Function,
  get$: ProxyPropertyType.Function$,