feat: Added "Files Table View" to Labs

packages/features/src/Domain/Feature/FeatureIdentifier.ts

@@ -38,6 +38,8 @@ export enum FeatureIdentifier {
   TaskEditor = 'org.standardnotes.simple-task-editor',
   TokenVaultEditor = 'org.standardnotes.token-vault',
 
+  FilesTableView = 'org.standardnotes.files-table-view',
+
   DeprecatedBoldEditor = 'org.standardnotes.bold-editor',
   DeprecatedMarkdownBasicEditor = 'org.standardnotes.simple-markdown-editor',
   DeprecatedMarkdownMathEditor = 'org.standardnotes.fancy-markdown-editor',
@@ -51,4 +53,4 @@ export enum FeatureIdentifier {
  */
 export const LegacyFileSafeIdentifier = 'org.standardnotes.legacy.file-safe'
 
-export const ExperimentalFeatures = []
+export const ExperimentalFeatures = [FeatureIdentifier.FilesTableView]

packages/features/src/Domain/Lists/ExperimentalFeatures.ts

@@ -1,5 +1,18 @@
+import { RoleName, SubscriptionName } from '@standardnotes/common'
 import { FeatureDescription } from '../Feature/FeatureDescription'
+import { FeatureIdentifier } from '../Feature/FeatureIdentifier'
+import { PermissionName } from '../Permission/PermissionName'
 
 export function experimentalFeatures(): FeatureDescription[] {
-  return []
+  const filesTableView: FeatureDescription = {
+    identifier: FeatureIdentifier.FilesTableView,
+    name: 'Files Table View',
+    description:
+      'Replaces the current Files view with a table view, with name, size, and date sort options. Requires reload to take effect.',
+    availableInSubscriptions: [SubscriptionName.PlusPlan, SubscriptionName.ProPlan],
+    availableInRoles: [RoleName.PlusUser, RoleName.ProUser],
+    permission_name: PermissionName.FilesTableView,
+  }
+
+  return [filesTableView]
 }

packages/features/src/Domain/Permission/PermissionName.ts

@@ -40,4 +40,5 @@ export enum PermissionName {
   TwoFactorAuth = 'server:two-factor-auth',
   SubscriptionSharing = 'server:subscription-sharing',
   SuperEditor = 'editor:super-editor',
+  FilesTableView = 'app:files-table-view',
 }

packages/web/src/javascripts/Components/ContentListView/ContentList.tsx

@@ -12,8 +12,7 @@ import { NavigationController } from '@/Controllers/Navigation/NavigationControl
 import { NotesController } from '@/Controllers/NotesController/NotesController'
 import { ElementIds } from '@/Constants/ElementIDs'
 import { classNames } from '@standardnotes/utils'
-import { ContentType, SNTag } from '@standardnotes/snjs'
-import { featureTrunkEnabled, FeatureTrunkName } from '@/FeatureTrunk'
+import { ContentType, FeatureIdentifier, SNTag } from '@standardnotes/snjs'
 
 type Props = {
   application: WebApplication
@@ -98,7 +97,7 @@ const ContentList: FunctionComponent<Props> = ({
 
   const hasNotes = items.some((item) => item.content_type === ContentType.Note)
 
-  const isFilesTableViewEnabled = featureTrunkEnabled(FeatureTrunkName.FilesTableView)
+  const isFilesTableViewEnabled = application.features.isExperimentalFeatureEnabled(FeatureIdentifier.FilesTableView)
 
   return (
     <div

packages/web/src/javascripts/Components/ContentListView/ContentListItem.tsx

@@ -1,5 +1,4 @@
-import { featureTrunkEnabled, FeatureTrunkName } from '@/FeatureTrunk'
-import { ContentType, FileItem, SNNote } from '@standardnotes/snjs'
+import { ContentType, FeatureIdentifier, FileItem, SNNote } from '@standardnotes/snjs'
 import React, { FunctionComponent } from 'react'
 import FileListItem from './FileListItem'
 import FileListItemCard from './FileListItemCard'
@@ -8,7 +7,9 @@ import { AbstractListItemProps, doListItemPropsMeritRerender } from './Types/Abs
 import { ListableContentItem } from './Types/ListableContentItem'
 
 const ContentListItem: FunctionComponent<AbstractListItemProps<ListableContentItem>> = (props) => {
-  const isFilesTableViewEnabled = featureTrunkEnabled(FeatureTrunkName.FilesTableView)
+  const isFilesTableViewEnabled = props.application.features.isExperimentalFeatureEnabled(
+    FeatureIdentifier.FilesTableView,
+  )
 
   switch (props.item.content_type) {
     case ContentType.Note:

packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx

@@ -9,7 +9,7 @@ import {
 } from '@standardnotes/ui-services'
 import { WebApplication } from '@/Application/Application'
 import { PANEL_NAME_NOTES } from '@/Constants/Constants'
-import { FileItem, PrefKey, SystemViewId, WebAppEvent } from '@standardnotes/snjs'
+import { FeatureIdentifier, FileItem, PrefKey, SystemViewId, WebAppEvent } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { forwardRef, useCallback, useEffect, useMemo } from 'react'
 import ContentList from '@/Components/ContentListView/ContentList'
@@ -39,7 +39,6 @@ import { isMobileScreen } from '@/Utils'
 import FloatingAddButton from './FloatingAddButton'
 import FilesTableView from '../FilesTableView/FilesTableView'
 import { FeaturesController } from '@/Controllers/FeaturesController'
-import { featureTrunkEnabled, FeatureTrunkName } from '@/FeatureTrunk'
 
 type Props = {
   accountMenuController: AccountMenuController
@@ -182,7 +181,7 @@ const ContentListView = forwardRef<HTMLDivElement, Props>(
       }
     }, [isFilesSmartView, filesController, createNewNote, toggleAppPane, application])
 
-    const isFilesTableViewEnabled = featureTrunkEnabled(FeatureTrunkName.FilesTableView)
+    const isFilesTableViewEnabled = application.features.isExperimentalFeatureEnabled(FeatureIdentifier.FilesTableView)
     const shouldShowFilesTableView = isFilesTableViewEnabled && selectedTag?.uuid === SystemViewId.Files
 
     useEffect(() => {

packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenu.tsx

@@ -1,6 +1,7 @@
 import {
   CollectionSort,
   CollectionSortProperty,
+  FeatureIdentifier,
   IconType,
   isSmartView,
   isSystemView,
@@ -24,7 +25,6 @@ import NoSubscriptionBanner from '@/Components/NoSubscriptionBanner/NoSubscripti
 import MenuRadioButtonItem from '@/Components/Menu/MenuRadioButtonItem'
 import MenuSwitchButtonItem from '@/Components/Menu/MenuSwitchButtonItem'
 import { Pill } from '@/Components/Preferences/PreferencesComponents/Content'
-import { featureTrunkEnabled, FeatureTrunkName } from '@/FeatureTrunk'
 
 const DailyEntryModeEnabled = true
 
@@ -250,7 +250,7 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
     )
   }
 
-  const isFilesTableViewEnabled = featureTrunkEnabled(FeatureTrunkName.FilesTableView)
+  const isFilesTableViewEnabled = application.features.isExperimentalFeatureEnabled(FeatureIdentifier.FilesTableView)
   const shouldHideNonApplicableOptions = isFilesTableViewEnabled && selectedTag?.uuid === SystemViewId.Files
 
   return (

packages/web/src/javascripts/FeatureTrunk.ts

@@ -2,13 +2,11 @@ import { isDev } from '@/Utils'
 
 export enum FeatureTrunkName {
   Super,
-  FilesTableView,
   ImportTools,
 }
 
 const FeatureTrunkStatus: Record<FeatureTrunkName, boolean> = {
   [FeatureTrunkName.Super]: isDev && true,
-  [FeatureTrunkName.FilesTableView]: isDev && true,
   [FeatureTrunkName.ImportTools]: isDev && true,
 }