feature flags

apps/desktop/package.json

@@ -37,8 +37,8 @@
     "@elwood/react": "workspace:*",
     "@elwood/typescript-config": "workspace:*",
     "@elwood/ui": "workspace:*",
-    "@tanstack/react-query": "^5.40.0",
-    "@types/node": "^20.14.0",
+    "@tanstack/react-query": "^5.40.1",
+    "@types/node": "^20.14.1",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.0",

apps/docs/package.json

@@ -20,7 +20,7 @@
     "@markdoc/next.js": "^0.3.7",
     "@sindresorhus/slugify": "^2.2.1",
     "@tailwindcss/typography": "^0.5.13",
-    "@types/node": "^20.14.0",
+    "@types/node": "^20.14.1",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/react-highlight-words": "^0.20.0",

apps/web/package.json

@@ -30,7 +30,7 @@
     "@elwood/eslint-config": "workspace:*",
     "@elwood/typescript-config": "workspace:*",
     "@next/eslint-plugin-next": "^14.2.3",
-    "@types/node": "^20.14.0",
+    "@types/node": "^20.14.1",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "typescript": "^5.4.5"

apps/www/package.json

@@ -35,7 +35,7 @@
     "@elwood/eslint-config": "workspace:*",
     "@elwood/typescript-config": "workspace:*",
     "@next/eslint-plugin-next": "^14.2.3",
-    "@types/node": "^20.14.0",
+    "@types/node": "^20.14.1",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "typescript": "^5.4.5"

config/jest-presets/package.json

@@ -7,7 +7,7 @@
     "ts-jest": "^29.1.4"
   },
   "devDependencies": {
-    "@types/node": "^20.14.0",
+    "@types/node": "^20.14.1",
     "jest-environment-jsdom": "^29.7.0"
   }
 }

packages/common/package.json

@@ -22,7 +22,7 @@
     "@elwood/jest-presets": "workspace:*",
     "@elwood/typescript-config": "workspace:*",
     "@types/jest": "^29.5.12",
-    "@types/node": "^20.14.0",
+    "@types/node": "^20.14.1",
     "jest": "^29.7.0",
     "tsup": "^8.1.0",
     "typescript": "^5.4.5"

packages/js/package.json

@@ -31,7 +31,7 @@
     "@elwood/jest-presets": "workspace:*",
     "@elwood/typescript-config": "workspace:*",
     "@types/jest": "^29.5.12",
-    "@types/node": "^20.14.0",
+    "@types/node": "^20.14.1",
     "jest": "^29.7.0",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "tsup": "^8.1.0",

packages/react/package.json

@@ -29,8 +29,8 @@
     "@elwood/js": "workspace:*",
     "@elwood/ui": "workspace:*",
     "@remix-run/router": "^1.16.1",
-    "@tanstack/react-query": "^5.40.0",
-    "@uppy/core": "^3.11.3",
+    "@tanstack/react-query": "^5.40.1",
+    "@uppy/core": "^3.12.0",
     "@uppy/dashboard": "^3.8.3",
     "@uppy/react": "^3.3.1",
     "@uppy/tus": "^3.5.5",
@@ -65,7 +65,7 @@
     "@storybook/test": "^8.1.5",
     "@types/crypto-js": "^4.2.2",
     "@types/jest": "^29.5.12",
-    "@types/node": "^20.14.0",
+    "@types/node": "^20.14.1",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "jest": "^29.7.0",

packages/react/src/components/files/breadcrumbs.tsx

@@ -47,14 +47,6 @@ export function FileBreadcrumbs(props: FilesBreadcrumbsProps): JSX.Element {
         props.className,
         'flex items-center leading-none text-sm',
       )}>
-      {variant !== 'compact' && (
-        <div className="flex mr-2 items-center justify-center">
-          <FileIcon
-            className="w-4 h-4 text-muted-foreground"
-            nodeType="BUCKET"
-          />
-        </div>
-      )}
       <BreadcrumbList>
         {breadcrumbs.map((item, idx) => {
           const isLast =

packages/react/src/components/header/search.tsx

@@ -61,7 +61,7 @@ export function HeaderSearch(props: HeaderSearchProps): JSX.Element {
     }
   }
 
-  const cl = clsx('flex items-center w-full h-full bg-transparent px-3 group', {
+  const cl = clsx('flex items-center w-full h-full bg-background px-3 group', {
     'border border-b-transparent rounded-t': open,
     'border rounded': !open,
   });

packages/react/src/components/layouts/content.tsx

@@ -35,7 +35,7 @@ export function ContentLayout(
             <div>{props.headerRight}</div>
           </header>
         ) : null}
-        <div className="flex-grow flex flex-row flex-nowrap min-h-0 px-8 pt-4">
+        <div className="flex-grow flex flex-row flex-nowrap min-h-0 px-8 pt-3">
           <div {...props.mainProps} className={bodyClass}>
             {props.children}
             {props.loading ? (

packages/react/src/components/layouts/main.tsx

@@ -13,7 +13,9 @@ export function MainLayout(
 
   return (
     <div className="w-full h-full grid grid-rows-[60px_auto] ">
-      <div className="border-b h-full bg-black">{props.header}</div>
+      <div className="border-b h-full bg-background-inverse">
+        {props.header}
+      </div>
       <div className="flex flex-row min-h-0">
         {children ? (
           children

packages/react/src/constants.ts

@@ -1,15 +1,4 @@
-export const AccessFlagLabel: Record<string, string> = {
-  can_read_tree: 'Can view folders',
-  can_write_tree: 'Can create folders',
-  can_destroy_tree: 'Can remove folders',
-  can_read_blob: 'Can view files',
-  can_write_blob: 'Can write files',
-  can_destroy_blob: 'Can remove files',
-  can_read_bucket: 'Can view buckets',
-  can_write_bucket: 'Can create buckets',
-  can_destroy_bucket: 'Can remove buckets',
-  can_read_comments: 'Can read comments',
-  can_write_comments: 'Can write comments',
-  can_download: 'Can download files',
-  can_share_public: 'Can share publicly',
-};
+export enum FeatureFlag {
+  EnableAssistant = 'enable_assistant',
+  EnabledBookmarks = 'enabled_bookmarks',
+}

packages/react/src/context.ts

@@ -3,6 +3,8 @@ import type Uppy from '@uppy/core';
 import type {Renderer, JsonObject, MemberRecord} from '@elwood/common';
 import {type ElwoodClient} from '@elwood/js';
 
+import {FeatureFlag} from './constants';
+
 export interface ProviderContextValue {
   workspaceName: string;
   client: ElwoodClient;
@@ -12,6 +14,7 @@ export interface ProviderContextValue {
   avatarUrl?: string | null;
   renderers?: Renderer[];
   onLogout(): void;
+  featureFlags: Record<FeatureFlag, boolean>;
 }
 
 export const ProviderContext = createContext<ProviderContextValue | null>(null);

packages/react/src/hooks/ui/use-main-layout.tsx

@@ -12,20 +12,18 @@ import {
 } from 'react';
 import {useDebounce} from 'react-use';
 import {FolderIcon, FileIcon, useTheme} from '@elwood/ui';
+import {Json} from '@elwood/common';
 
-import {useProviderContext} from '@/hooks/use-provider-context';
 import {type MainLayoutProps} from '@/components/layouts/main';
-
 import {Link} from '@/components/link';
 import {type HeaderProps} from '@/components/header/header';
 import {HeaderSearch, HeaderSearchProps} from '@/components/header/search';
-import {HeaderUserMenu} from '@/components/header/user-menu';
 
+import {HeaderUserMenu} from '@/components/header/user-menu';
+import {useProviderContext} from '@/hooks/use-provider-context';
 import {useSearch} from '@/data/search/use-search';
-import {useSidebarFooter} from './use-sidebar-footer';
 import {useCurrentMember} from '../use-current-member';
 import {useAssistant} from './use-assistant';
-import {Json} from '@elwood/common';
 
 type MainLayoutContextValue = {
   setTitle(title: ReactNode): void;

packages/react/src/hooks/use-provider-context.ts

@@ -2,8 +2,19 @@ import {useContext} from 'react';
 import {invariant} from '@elwood/common';
 import {ProviderContext, type ProviderContextValue} from '@/context';
 
+import {FeatureFlag} from '@/constants';
+
 export function useProviderContext(): ProviderContextValue {
   const value = useContext(ProviderContext);
   invariant(value, 'ProviderContext not found');
   return value;
 }
+
+export function useFeatureFlag(): ProviderContextValue['featureFlags'];
+export function useFeatureFlag(flag: FeatureFlag): boolean;
+export function useFeatureFlag(
+  flag?: FeatureFlag,
+): boolean | ProviderContextValue['featureFlags'] {
+  const {featureFlags} = useProviderContext();
+  return flag ? featureFlags[flag] ?? false : featureFlags;
+}

packages/react/src/provider.tsx

@@ -8,16 +8,17 @@ import Tus from '@uppy/tus';
 import {invariant, type MemberRecord} from '@elwood/common';
 import TimeAgo from 'javascript-time-ago';
 import en from 'javascript-time-ago/locale/en';
-import {Spinner} from '@elwood/ui';
 import {ProviderContext, type ProviderContextValue} from '@/context';
 import {NoAccess} from '@/components/no-access';
 import {defaultRenders} from '@/renderer/default-renderers';
 import {MainLayout} from '@/components/layouts/main';
 import {Header} from './components/header/header';
 
+import {FeatureFlag} from './constants';
+
 export type ElwoodProviderProps = Omit<
   ProviderContextValue,
-  'uploadManager' | 'member' | 'avatarUrl'
+  'uploadManager' | 'member' | 'avatarUrl' | 'featureFlags'
 >;
 
 const queryClient = new QueryClient();
@@ -41,6 +42,11 @@ export function ElwoodProvider(
   }, [accessToken, props.client.key]);
   const renderers = props.renderers ?? defaultRenders;
 
+  const featureFlags: ProviderContextValue['featureFlags'] = {
+    [FeatureFlag.EnableAssistant]: false,
+    [FeatureFlag.EnabledBookmarks]: false,
+  };
+
   useEffect(() => {
     setUploadManager(
       new Uppy().use(Tus, {
@@ -106,7 +112,14 @@ export function ElwoodProvider(
   return (
     <QueryClientProvider client={queryClient}>
       <ProviderContext.Provider
-        value={{...props, uploadManager, member, renderers, avatarUrl}}>
+        value={{
+          ...props,
+          featureFlags,
+          uploadManager,
+          member,
+          renderers,
+          avatarUrl,
+        }}>
         {props.children}
       </ProviderContext.Provider>
     </QueryClientProvider>

packages/react/src/routes/dashboard/home.tsx

@@ -5,15 +5,11 @@ import {NodeLink, createNodeLink} from '@/components/link';
 import {FilesTable} from '@/components/files/table';
 import {PageLayout} from '@/components/layouts/page';
 import {ContentLayout} from '@/components/layouts/content';
-import {useSetMainLayoutTitle} from '@/hooks/ui/use-main-layout';
 import {useProviderContext} from '@/hooks/use-provider-context';
-import {useEffect} from 'react';
 
 export default function FilesHome(): JSX.Element {
   const {member} = useProviderContext();
 
-  useSetMainLayoutTitle('files');
-
   const query = useGetNode({path: []});
   const buckets = toArray(query.data?.children);
 

packages/react/src/routes/dashboard/layout.tsx

@@ -1,3 +1,4 @@
+import {useMemo} from 'react';
 import {Outlet} from 'react-router-dom';
 import {
   Button,
@@ -12,9 +13,10 @@ import {MainLayout} from '@/components/layouts/main';
 import {Link} from '@/components/link';
 import {Header} from '@/components/header/header';
 import {useMainLayout, MainLayoutProvider} from '@/hooks/ui/use-main-layout';
-import {useMemo} from 'react';
+import {useFeatureFlag} from '@/hooks/use-provider-context';
 
 export default function Layout() {
+  const flags = useFeatureFlag();
   const {contextValue, workspaceName, title, search, assistant, userMenu} =
     useMainLayout();
 
@@ -28,20 +30,25 @@ export default function Layout() {
             search={search}
             actions={
               <>
-                <Drawer direction="right" shouldScaleBackground={false}>
-                  <DrawerTrigger asChild={true}>
-                    <Button type="button" size="sm" variant="outline-muted">
-                      <SparklesIcon className="size-4" />
-                    </Button>
-                  </DrawerTrigger>
-                  <DrawerContent className="border-l p-4">
-                    {assistant}
-                  </DrawerContent>
-                </Drawer>
+                {flags.enable_assistant && (
+                  <Drawer direction="right" shouldScaleBackground={false}>
+                    <DrawerTrigger asChild={true}>
+                      <Button type="button" size="sm" variant="outline-muted">
+                        <SparklesIcon className="size-4" />
+                      </Button>
+                    </DrawerTrigger>
+                    <DrawerContent className="border-l p-4">
+                      {assistant}
+                    </DrawerContent>
+                  </Drawer>
+                )}
+
+                {flags.enabled_bookmarks && (
+                  <Button href="/bookmarks" size="sm" variant="outline-muted">
+                    <BookMarkedIcon className="size-4" />
+                  </Button>
+                )}
 
-                <Button href="/bookmarks" size="sm" variant="outline-muted">
-                  <BookMarkedIcon className="size-4" />
-                </Button>
                 {userMenu}
               </>
             }

packages/ui/package.json

@@ -7,7 +7,11 @@
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
-  "files": ["dist/**", "tailwind.config.js", "postcss.config.js"],
+  "files": [
+    "dist/**",
+    "tailwind.config.js",
+    "postcss.config.js"
+  ],
   "scripts": {
     "build": "pnpm run build:ts && pnpm run build:css",
     "build:ts": "tsup src/index.ts --format esm,cjs --dts --external react",
@@ -68,7 +72,7 @@
     "@storybook/react-vite": "^8.1.5",
     "@storybook/test": "^8.1.5",
     "@types/jest": "^29.5.12",
-    "@types/node": "^20.14.0",
+    "@types/node": "^20.14.1",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "jest": "^29.7.0",

packages/ui/src/style.css

@@ -5,6 +5,7 @@
 @layer base {
   :root {
     --background: 0 0% 100%;
+    --background-inverse: 0 0% 100%;
     --foreground: 20 14.3% 4.1%;
     --card: 0 0% 100%;
     --card-foreground: 20 14.3% 4.1%;
@@ -25,10 +26,12 @@
     --ring: 20 14.3% 4.1%;
     --radius: 0.75rem;
     --brand: 249 26% 38%; /* #4f487a */
+    --brand-foreground: var(--brand);
   }
 
   .dark {
     --background: 20 14.3% 4.1%;
+    --background-inverse: 0 0% 0%;
     --foreground: 60 9.1% 97.8%;
     --card: 20 14.3% 4.1%;
     --card-foreground: 60 9.1% 97.8%;
@@ -47,12 +50,17 @@
     --border: 12 6.5% 15.1%;
     --input: 12 6.5% 15.1%;
     --ring: 24 5.7% 82.9%;
+    --brand-foreground: 248 20% 48%; /* #696294 */
   }
 
   * {
     border-color: hsl(var(--border));
   }
 
+  a:hover {
+    color: hsl(var(--brand-foreground));
+  }
+
   body {
     @apply bg-background text-foreground;