+
+
+
+ {
+ onClose();
+ }}
+ />
+
+
+ {t('New Workspace')}
+
+
+
+
+ );
+};
+
+const Header = styled('div')({
+ position: 'relative',
+ height: '44px',
+});
+
+const Content = styled('div')(({ theme }) => {
+ return {
+ padding: '0 84px',
+ textAlign: 'center',
+ fontSize: '18px',
+ lineHeight: '26px',
+ color: theme.colors.inputColor,
+ p: {
+ marginTop: '12px',
+ marginBottom: '16px',
+ },
+ };
+});
+
+const ContentTitle = styled('div')(() => {
+ return {
+ fontSize: '20px',
+ lineHeight: '28px',
+ fontWeight: 600,
+ textAlign: 'center',
+ paddingBottom: '16px',
+ };
+});
+
+// const Footer = styled('div')({
+// height: '70px',
+// paddingLeft: '24px',
+// marginTop: '32px',
+// textAlign: 'center',
+// });
diff --git a/packages/app/src/components/delete-workspace/index.tsx b/packages/app/src/components/delete-workspace/index.tsx
index 5cceb487a2..cead4b135e 100644
--- a/packages/app/src/components/delete-workspace/index.tsx
+++ b/packages/app/src/components/delete-workspace/index.tsx
@@ -29,8 +29,6 @@ export const DeleteModal = ({
{t('Workspace description')}
+ { + setWorkspaceName(value); + }} + > + +{text}
+{text ? text : t('Loading')}
+
+
+
+ Looks like you are browsing on a mobile device.
-- We are still working on mobile support and recommend you use a - desktop device. -
+{t('mobile device')}
+{t('mobile device description')}
Tips: Click Add to Favourites/Trash and the page will appear here.
-(Designer is grappling with designing)
+ {listType === 'all' &&{t('emptyAllPages')}
} + {listType === 'favorite' &&{t('emptyFavourite')}
} + {listType === 'trash' &&{t('emptyTrash')}
} +{t('still designed')}
+
+ 
+
+
+ ) : (
+
+ {(props.name || 'AFFiNE').substring(0, 1)}
+
+ )}
+
+ );
+};
diff --git a/packages/app/src/components/workspace-avatar/WorkspaceUnitAvatar.tsx b/packages/app/src/components/workspace-avatar/WorkspaceUnitAvatar.tsx
new file mode 100644
index 0000000000..bdb8431e2c
--- /dev/null
+++ b/packages/app/src/components/workspace-avatar/WorkspaceUnitAvatar.tsx
@@ -0,0 +1,43 @@
+import { useState, useEffect } from 'react';
+import type { WorkspaceUnit } from '@affine/datacenter';
+import { WorkspaceAvatar as Avatar } from './Avatar';
+
+const useAvatar = (workspaceUnit?: WorkspaceUnit) => {
+ const [avatarUrl, setAvatarUrl] = useState('');
+ const avatarId =
+ workspaceUnit?.avatar || workspaceUnit?.blocksuiteWorkspace?.meta.avatar;
+ const blobs = workspaceUnit?.blocksuiteWorkspace?.blobs;
+ useEffect(() => {
+ if (avatarId && blobs) {
+ blobs.then(blobs => {
+ blobs?.get(avatarId).then(url => setAvatarUrl(url || ''));
+ });
+ } else {
+ setAvatarUrl('');
+ }
+ }, [avatarId, blobs]);
+
+ return avatarUrl;
+};
+
+export const WorkspaceUnitAvatar = ({
+ size = 20,
+ name,
+ workspaceUnit,
+ style,
+}: {
+ size?: number;
+ name?: string;
+ workspaceUnit?: WorkspaceUnit | null;
+ style?: React.CSSProperties;
+}) => {
+ const avatarUrl = useAvatar(workspaceUnit || undefined);
+ return (
+ {user.name}
+{user.email}
+
+
+
+
+
+
{t('Create Or Import')}
+
+ {{ workspace: workspace.name }}
+
+ Is Comming
+
+
+ {workspace.published ? (
+ <>
+
+ {t('Published Description')}
+
+
+
+
+ {t('Share with link')}
+
+
+
+
+
+
+
+ ) : (
+
+ {t('Publishing Description')}
+
+ )}
+
+
+ {workspace.published ? (
+
+
+
+ ) : (
+ <>
+ )}
+
+ ) : (
+
+
+
+
+
+
+
+
+ {workspace.provider === 'local' ? (
+ <>
+
+ {workspace.name}
+ {t('is a Local Workspace')}
+
+
+
+
+ ) : (
+ <>
+
+ {workspace.name}
+ {t('is a Cloud Workspace')}
+
+
+
+
+
+ )}
+
+
+ );
+};
diff --git a/packages/app/src/components/workspace-setting/WorkspaceSetting.tsx b/packages/app/src/components/workspace-setting/WorkspaceSetting.tsx
deleted file mode 100644
index c1b07e2441..0000000000
--- a/packages/app/src/components/workspace-setting/WorkspaceSetting.tsx
+++ /dev/null
@@ -1,366 +0,0 @@
-import Modal, { ModalCloseButton } from '@/ui/modal';
-import {
- StyledCopyButtonContainer,
- StyledMemberAvatar,
- StyledMemberButtonContainer,
- StyledMemberEmail,
- StyledMemberInfo,
- StyledMemberListContainer,
- StyledMemberListItem,
- StyledMemberName,
- StyledMemberNameContainer,
- StyledMemberRoleContainer,
- StyledMemberTitleContainer,
- StyledMoreVerticalButton,
- StyledPublishContent,
- StyledPublishCopyContainer,
- StyledPublishExplanation,
- StyledSettingContainer,
- StyledSettingContent,
- StyledSettingH2,
- StyledSettingSidebar,
- StyledSettingSidebarHeader,
- StyledSettingTabContainer,
- StyledSettingTagIconContainer,
- WorkspaceSettingTagItem,
-} from './style';
-import {
- EditIcon,
- UsersIcon,
- PublishIcon,
- MoreVerticalIcon,
- EmailIcon,
- TrashIcon,
-} from '@blocksuite/icons';
-import { useCallback, useEffect, useState } from 'react';
-import { Button, IconButton } from '@/ui/button';
-import Input from '@/ui/input';
-import { InviteMembers } from '../invite-members/index';
-import { Workspace, Member, getDataCenter } from '@affine/datacenter';
-import { Avatar } from '@mui/material';
-import { Menu, MenuItem } from '@/ui/menu';
-import { toast } from '@/ui/toast';
-import { Empty } from '@/ui/empty';
-import { useAppState } from '@/providers/app-state-provider';
-import { WorkspaceDetails } from '../workspace-slider-bar/WorkspaceSelector/SelectorPopperContent';
-import { GeneralPage } from './general';
-
-enum ActiveTab {
- 'general' = 'general',
- 'members' = 'members',
- 'publish' = 'publish',
-}
-
-type SettingTabProps = {
- activeTab: ActiveTab;
- onTabChange?: (tab: ActiveTab) => void;
-};
-
-type WorkspaceSettingProps = {
- isShow: boolean;
- onClose?: () => void;
- workspace: Workspace;
- owner: WorkspaceDetails[string]['owner'];
-};
-
-const WorkspaceSettingTab = ({ activeTab, onTabChange }: SettingTabProps) => {
- return (
- {t('Local Workspace Description')}
+
+
+ All data will be synchronised and saved to the AFFiNE account
+
+ {{
+ email: '{' + user?.email + '}.',
+ }}
+
+
+
+
+
-
-
- Users({members.length})
-
- Access level
-
-
- {members.length === 0 && (
-
-
- {member.user.type === 'Registered' ? (
-
-
- )}
-
-
- {member.user.type === 'Registered' ? (
- {member.user.name}
- ) : (
- <>
- )}
- {member.user.email}
-
-
-
- {member.accepted
- ? member.type !== 99
- ? 'Member'
- : 'Workspace Owner'
- : 'Pending'}
-
-
-
-
-
- );
- })
- ) : (
- <>
- )}
-
-
-
- {
- setIsInviteModalShow(false);
- }}
- onInviteSuccess={() => {
- refreshMembers();
- }}
- workspaceId={workspace.id}
- open={isInviteModalShow}
- >
-
-
- );
-};
-
-const PublishPage = ({ workspace }: { workspace: Workspace }) => {
- const shareUrl = window.location.host + '/workspace/' + workspace.id;
- const [publicStatus, setPublicStatus] = useState
-
- {publicStatus ? (
- <>
-
- The current workspace has been published to the web, everyone can
- view the contents of this workspace through the link.
-
- Share with link
-
-
-
-
-
-
-
- ) : (
-
- After publishing to the web, everyone can view the content of this
- workspace through the link.
-
- )}
-
- {!publicStatus ? (
-
- ) : (
-
- )}
-
- );
-};
diff --git a/packages/app/src/components/workspace-setting/general/General.tsx b/packages/app/src/components/workspace-setting/general/General.tsx
index cef2daccb7..5b5bc26843 100644
--- a/packages/app/src/components/workspace-setting/general/General.tsx
+++ b/packages/app/src/components/workspace-setting/general/General.tsx
@@ -1,168 +1,169 @@
import {
StyledDeleteButtonContainer,
- StyledSettingAvatar,
+ // StyledSettingAvatar,
StyledSettingAvatarContent,
StyledSettingInputContainer,
+ StyledDoneButtonContainer,
+ StyledInput,
+ StyledProviderInfo,
+ StyleGeneral,
+ StyledAvatar,
} from './style';
import { StyledSettingH2 } from '../style';
import { useState } from 'react';
import { Button } from '@/ui/button';
-import Input from '@/ui/input';
-import { getDataCenter, Workspace, WorkspaceType } from '@affine/datacenter';
import { useAppState } from '@/providers/app-state-provider';
-import { WorkspaceDetails } from '@/components/workspace-slider-bar/WorkspaceSelector/SelectorPopperContent';
import { WorkspaceDelete } from './delete';
-import { Workspace as StoreWorkspace } from '@blocksuite/store';
-import { debounce } from '@/utils';
import { WorkspaceLeave } from './leave';
+import { DoneIcon, UsersIcon } from '@blocksuite/icons';
+// import { Upload } from '@/components/file-upload';
+import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
+import { WorkspaceUnit } from '@affine/datacenter';
+import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
+import { useTranslation } from '@affine/i18n';
+import { CloudIcon, LocalIcon } from '@/components/workspace-modal/icons';
+import { CameraIcon } from './icons';
import { Upload } from '@/components/file-upload';
-
-export const GeneralPage = ({
- workspace,
- owner,
-}: {
- workspace: Workspace;
- owner: WorkspaceDetails[string]['owner'];
- workspaces: Record
- Workspace Avatar
-
-
- {workspaces[workspace.id]?.meta.name[0]}
-
-
+
{isOwner ? (
<>
-
-
+
) : null;
};
diff --git a/packages/app/src/components/workspace-setting/general/delete/Delete.tsx b/packages/app/src/components/workspace-setting/general/delete/Delete.tsx
index 7fd14ef818..3fcab8c158 100644
--- a/packages/app/src/components/workspace-setting/general/delete/Delete.tsx
+++ b/packages/app/src/components/workspace-setting/general/delete/Delete.tsx
@@ -11,61 +11,77 @@ import {
import { useState } from 'react';
import { ModalCloseButton } from '@/ui/modal';
import { Button } from '@/ui/button';
-import { getDataCenter } from '@affine/datacenter';
import { useRouter } from 'next/router';
-import { useAppState } from '@/providers/app-state-provider';
+
+import { WorkspaceUnit } from '@affine/datacenter';
+import { Trans, useTranslation } from '@affine/i18n';
+import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
interface WorkspaceDeleteProps {
open: boolean;
onClose: () => void;
- workspaceName: string;
- workspaceId: string;
- nextWorkSpaceId: string;
+ workspace: WorkspaceUnit;
}
export const WorkspaceDelete = ({
open,
onClose,
- workspaceId,
- workspaceName,
- nextWorkSpaceId,
+ workspace,
}: WorkspaceDeleteProps) => {
const [deleteStr, setDeleteStr] = useState
+ {t('Workspace Avatar')}
+
+
+
+ <>
+
+
+ {/* TODO: Wait for image sync to complete */}
+ {/*
-
-
- {/* TODO: add upload logic */}
- {/* {isOwner ? (
- upload
- ) : null} */}
- {/* */}
-
- Workspace Name
-
-
-
- Workspace Owner
-
-
-
+
+ */}
+ {/* TODO: add upload logic */}
+
+ {t('Workspace Name')}
+
+ {
+ handleUpdateWorkspaceName();
+ }}
+ >
+
+ ) : null}
+
+ {t('Workspace Type')}
+
+ {isOwner ? (
+ currentWorkspace?.provider === 'local' ? (
+
+
+ ) : (
+
+
+ )
+ ) : (
+
+
+ )}
+
+
+
+
+
+
Home Page
;
+ return ;
};
export default Home;
diff --git a/packages/app/src/pages/invite/[invite_code].tsx b/packages/app/src/pages/invite/[invite_code].tsx
index c6ef0b6b4e..ff86784661 100644
--- a/packages/app/src/pages/invite/[invite_code].tsx
+++ b/packages/app/src/pages/invite/[invite_code].tsx
@@ -1,43 +1,34 @@
+import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
import { styled } from '@/styles';
import { Empty } from '@/ui/empty';
-import { Avatar } from '@mui/material';
-import { getDataCenter } from '@affine/datacenter';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
-const User = ({ name, avatar }: { name: string; avatar?: string }) => {
- return (
-