migrate filtering expressions to safer CEL and add a query builder

commafeed-client/src/components/sidebar/Tree.tsx

@@ -95,6 +95,7 @@ export function Tree() {
             expanded={false}
             level={0}
             hasError={false}
+            hasWarning={false}
             onClick={categoryClicked}
         />
     )
@@ -110,6 +111,7 @@ export function Tree() {
             expanded={false}
             level={0}
             hasError={false}
+            hasWarning={false}
             onClick={categoryClicked}
         />
     )
@@ -118,6 +120,7 @@ export function Tree() {
         if (!isCategoryDisplayed(category)) return null
 
         const hasError = !category.expanded && flattenCategoryTree(category).some(c => c.feeds.some(f => f.errorCount > errorThreshold))
+        const hasWarning = !category.expanded && flattenCategoryTree(category).some(c => c.feeds.some(f => !!f.filterLegacy))
         return (
             <TreeNode
                 id={category.id}
@@ -130,6 +133,7 @@ export function Tree() {
                 expanded={category.expanded}
                 level={level}
                 hasError={hasError}
+                hasWarning={hasWarning}
                 onClick={categoryClicked}
                 onIconClick={e => categoryIconClicked(e, category)}
                 key={category.id}
@@ -151,6 +155,7 @@ export function Tree() {
                 selected={source.type === "feed" && source.id === String(feed.id)}
                 level={level}
                 hasError={feed.errorCount > errorThreshold}
+                hasWarning={!!feed.filterLegacy}
                 onClick={feedClicked}
                 key={feed.id}
             />
@@ -168,6 +173,7 @@ export function Tree() {
             selected={source.type === "tag" && source.id === tag}
             level={0}
             hasError={false}
+            hasWarning={false}
             onClick={tagClicked}
             key={tag}
         />

commafeed-client/src/components/sidebar/TreeNode.tsx

@@ -15,6 +15,7 @@ interface TreeNodeProps {
     expanded?: boolean
     level: number
     hasError: boolean
+    hasWarning: boolean
     hasNewEntries: boolean
     onClick: (e: React.MouseEvent, id: string) => void
     onIconClick?: (e: React.MouseEvent, id: string) => void
@@ -24,15 +25,18 @@ const useStyles = tss
     .withParams<{
         selected: boolean
         hasError: boolean
+        hasWarning: boolean
         hasUnread: boolean
     }>()
-    .create(({ theme, colorScheme, selected, hasError, hasUnread }) => {
+    .create(({ theme, colorScheme, selected, hasError, hasWarning, hasUnread }) => {
         let backgroundColor = "inherit"
         if (selected) backgroundColor = colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[1]
 
         let color: string
         if (hasError) {
             color = theme.colors.red[6]
+        } else if (hasWarning) {
+            color = theme.colors.yellow[6]
         } else if (colorScheme === "dark") {
             color = hasUnread ? theme.colors.dark[0] : theme.colors.dark[3]
         } else {
@@ -63,6 +67,7 @@ export function TreeNode(props: Readonly<TreeNodeProps>) {
     const { classes } = useStyles({
         selected: props.selected,
         hasError: props.hasError,
+        hasWarning: props.hasWarning,
         hasUnread: props.unread > 0,
     })
     return (