add properties panel to projects

- Create ProjectPropertiesModal with EntityType.PROJECT
- Add properties button to TopBar (guarded by feature flag)
- Exclude special projects (root, trash) from properties panel

Author: danielkweon

js/app/packages/block-project/component/ProjectPropertiesModal.tsx

@@ -0,0 +1,54 @@
+import { SplitDrawer } from '@app/component/split-layout/components/SplitDrawer';
+import { useDrawerControl } from '@app/component/split-layout/components/SplitDrawerContext';
+import { IconButton } from '@core/component/IconButton';
+import { PropertiesView } from '@core/component/Properties/PropertiesView';
+import { useCanEdit } from '@core/signal/permissions';
+import TagIcon from '@icon/regular/tag.svg';
+import { EntityType } from '@service-properties/generated/schemas/entityType';
+import { Suspense } from 'solid-js';
+
+const DRAWER_ID = 'properties';
+
+export function ProjectPropertiesModal(props: {
+  buttonSize?: 'sm' | 'base';
+  name?: string;
+}) {
+  const drawerControl = useDrawerControl(DRAWER_ID);
+  const canEdit = useCanEdit();
+
+  return (
+    <>
+      <IconButton
+        icon={TagIcon}
+        theme={drawerControl.isOpen() ? 'accent' : 'clear'}
+        size={props.buttonSize ?? 'base'}
+        tooltip={{ label: 'Properties' }}
+        onClick={drawerControl.toggle}
+      />
+      <SplitDrawer id={DRAWER_ID} side="right" size={550} title="Properties">
+        <Suspense fallback={<LoadingFallback />}>
+          <ProjectPropertiesContent canEdit={canEdit()} name={props.name} />
+        </Suspense>
+      </SplitDrawer>
+    </>
+  );
+}
+
+function ProjectPropertiesContent(props: { canEdit: boolean; name?: string }) {
+  return (
+    <PropertiesView
+      blockType={'project'}
+      canEdit={props.canEdit}
+      entityType={EntityType.PROJECT}
+      documentName={props.name}
+    />
+  );
+}
+
+function LoadingFallback() {
+  return (
+    <div class="flex justify-center items-center py-8">
+      <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-ink-muted"></div>
+    </div>
+  );
+}

js/app/packages/block-project/component/TopBar.tsx

@@ -15,7 +15,10 @@ import { getIsSpecialProject } from '@block-project/isSpecial';
 import { projectBlockDataSignal } from '@block-project/signal/projectBlockData';
 import { useBlockId } from '@core/block';
 import { ShareButton } from '@core/component/TopBar/ShareButton';
-import { ENABLE_PROJECT_SHARING } from '@core/constant/featureFlags';
+import {
+  ENABLE_PROJECT_SHARING,
+  ENABLE_PROPERTIES_METADATA,
+} from '@core/constant/featureFlags';
 import {
   useCanEdit,
   useGetPermissions,
@@ -25,6 +28,7 @@ import { buildSimpleEntityUrl } from '@core/util/url';
 import { toast } from 'core/component/Toast/Toast';
 import { createMemo, Show } from 'solid-js';
 import { ProjectCreateMenu } from './ProjectCreateMenu';
+import { ProjectPropertiesModal } from './ProjectPropertiesModal';
 
 // TODO (SEAMUS) : Revisit this file when we figure out what we wanna do
 //     with folder block.
@@ -84,6 +88,9 @@ export function TopBar() {
       <SplitToolbarRight>
         <div class="flex items-center p-1">
           <div class="flex items-center">
+            <Show when={ENABLE_PROPERTIES_METADATA && !isSpecialProject}>
+              <ProjectPropertiesModal buttonSize="sm" name={name()} />
+            </Show>
             <SplitPermissionsBadge />
             <Show when={ENABLE_PROJECT_SHARING && !isSpecialProject}>
               <ShareButton