chore: move client folders (#948)

apps/web/src/components/workspace-setting/general/General.tsx

@@ -0,0 +1,185 @@
+import { StyledInput, StyledProviderInfo, StyledAvatar } from './style';
+import { StyledSettingKey, StyledRow } from '../style';
+import { FlexWrapper, Content } from '@affine/component';
+
+import { useState } from 'react';
+import { Button } from '@affine/component';
+import { useAppState } from '@/providers/app-state-provider';
+import { WorkspaceDelete } from './delete';
+import { WorkspaceLeave } from './leave';
+import { UsersIcon } from '@blocksuite/icons';
+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 }: { workspace: WorkspaceUnit }) => {
+  const [showDelete, setShowDelete] = useState<boolean>(false);
+  const [showLeave, setShowLeave] = useState<boolean>(false);
+  const [workspaceName, setWorkspaceName] = useState<string>(workspace?.name);
+  const { currentWorkspace, isOwner } = useAppState();
+  const { updateWorkspace } = useWorkspaceHelper();
+  const { t } = useTranslation();
+
+  const handleUpdateWorkspaceName = () => {
+    currentWorkspace &&
+      updateWorkspace({ name: workspaceName }, currentWorkspace);
+  };
+
+  const fileChange = async (file: File) => {
+    const blob = new Blob([file], { type: file.type });
+    currentWorkspace &&
+      (await updateWorkspace({ avatarBlob: blob }, currentWorkspace));
+  };
+  if (!workspace) {
+    return null;
+  }
+
+  return (
+    <>
+      <StyledRow>
+        <StyledSettingKey>{t('Workspace Avatar')}</StyledSettingKey>
+        <StyledAvatar disabled={!isOwner}>
+          {isOwner ? (
+            <Upload
+              accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
+              fileChange={fileChange}
+            >
+              <>
+                <div className="camera-icon">
+                  <CameraIcon></CameraIcon>
+                </div>
+                <WorkspaceUnitAvatar
+                  size={72}
+                  name={workspace.name}
+                  workspaceUnit={workspace}
+                />
+              </>
+            </Upload>
+          ) : (
+            <WorkspaceUnitAvatar
+              size={72}
+              name={workspace.name}
+              workspaceUnit={workspace}
+            />
+          )}
+        </StyledAvatar>
+      </StyledRow>
+
+      <StyledRow>
+        <StyledSettingKey>{t('Workspace Name')}</StyledSettingKey>
+        <FlexWrapper>
+          <StyledInput
+            width={284}
+            height={38}
+            value={workspaceName}
+            placeholder={t('Workspace Name')}
+            maxLength={15}
+            minLength={0}
+            disabled={!isOwner}
+            onChange={newName => {
+              setWorkspaceName(newName);
+            }}
+          ></StyledInput>
+          {isOwner && (
+            <>
+              <Button
+                type="default"
+                shape="circle"
+                style={{ marginLeft: '24px' }}
+                onClick={() => {
+                  setWorkspaceName(workspace.name);
+                }}
+              >
+                {t('Cancel')}
+              </Button>
+              <Button
+                type="light"
+                shape="circle"
+                style={{ marginLeft: '24px' }}
+                onClick={() => {
+                  handleUpdateWorkspaceName();
+                }}
+              >
+                {t('Confirm')}
+              </Button>
+            </>
+          )}
+        </FlexWrapper>
+      </StyledRow>
+
+      <StyledRow>
+        <StyledSettingKey>{t('Workspace Type')}</StyledSettingKey>
+        <FlexWrapper>
+          {isOwner ? (
+            currentWorkspace?.provider === 'local' ? (
+              <FlexWrapper alignItems="center">
+                <LocalIcon />
+                <Content style={{ marginLeft: '15px' }}>
+                  {t('Local Workspace')}
+                </Content>
+              </FlexWrapper>
+            ) : (
+              <FlexWrapper alignItems="center">
+                <CloudIcon />
+                <Content style={{ marginLeft: '15px' }}>
+                  {t('Available Offline')}
+                </Content>
+              </FlexWrapper>
+            )
+          ) : (
+            <StyledProviderInfo>
+              <UsersIcon fontSize={20} color={'#FF646B'} />
+              {t('Joined Workspace')}
+            </StyledProviderInfo>
+          )}
+        </FlexWrapper>
+      </StyledRow>
+
+      <StyledRow>
+        <StyledSettingKey> {t('Delete Workspace')}</StyledSettingKey>
+        {isOwner ? (
+          <>
+            <Button
+              type="danger"
+              shape="circle"
+              style={{ borderRadius: '40px' }}
+              onClick={() => {
+                setShowDelete(true);
+              }}
+            >
+              {t('Delete Workspace')}
+            </Button>
+            <WorkspaceDelete
+              open={showDelete}
+              onClose={() => {
+                setShowDelete(false);
+              }}
+              workspace={workspace}
+            />
+          </>
+        ) : (
+          <>
+            <Button
+              type="danger"
+              shape="circle"
+              onClick={() => {
+                setShowLeave(true);
+              }}
+            >
+              {t('Leave Workspace')}
+            </Button>
+            <WorkspaceLeave
+              open={showLeave}
+              onClose={() => {
+                setShowLeave(false);
+              }}
+            />
+          </>
+        )}
+      </StyledRow>
+    </>
+  );
+};