Better colours and filters

Author: binary-koan

app/models/category.rb

@@ -1,7 +1,26 @@
 class Category < ApplicationRecord
   include Deletable
 
-  COLORS = %w(gray red orange yellow green teal blue cyan purple pink)
+  COLORS = %w(
+    gray
+    red
+    orange
+    yellow
+    green
+    teal
+    blue
+    cyan
+    purple
+    pink
+    indigo
+    fuchsia
+    amber
+    lime
+    emerald
+    sky
+    violet
+    rose
+  )
   ICONS = YAML.load_file(Rails.root.join('config', 'data', 'icons.yml'))['icons']
 
   has_many :category_budgets

web/src/components/categories/CategoryForm.tsx

@@ -67,15 +67,21 @@ const CategoryForm: Component<{
             { value: "gray", content: <ColorOptionContent value="gray" /> },
             { value: "red", content: <ColorOptionContent value="red" /> },
             { value: "orange", content: <ColorOptionContent value="orange" /> },
+            { value: "amber", content: <ColorOptionContent value="amber" /> },
             { value: "yellow", content: <ColorOptionContent value="yellow" /> },
+            { value: "lime", content: <ColorOptionContent value="lime" /> },
             { value: "green", content: <ColorOptionContent value="green" /> },
+            { value: "emerald", content: <ColorOptionContent value="emerald" /> },
             { value: "teal", content: <ColorOptionContent value="teal" /> },
-            { value: "blue", content: <ColorOptionContent value="blue" /> },
             { value: "cyan", content: <ColorOptionContent value="cyan" /> },
+            { value: "sky", content: <ColorOptionContent value="sky" /> },
+            { value: "blue", content: <ColorOptionContent value="blue" /> },
+            { value: "indigo", content: <ColorOptionContent value="indigo" /> },
+            { value: "violet", content: <ColorOptionContent value="violet" /> },
             { value: "purple", content: <ColorOptionContent value="purple" /> },
+            { value: "fuchsia", content: <ColorOptionContent value="fuchsia" /> },
             { value: "pink", content: <ColorOptionContent value="pink" /> },
-            { value: "indigo", content: <ColorOptionContent value="indigo" /> },
-            { value: "fuchsia", content: <ColorOptionContent value="fuchsia" /> }
+            { value: "rose", content: <ColorOptionContent value="rose" /> }
           ] satisfies Array<{ value: CategoryColor; content: JSX.Element }>
         }
       />

web/src/components/transactions/TransactionFilters.tsx

@@ -1,13 +1,14 @@
 import { Form, FormStore, getValue } from "@modular-forms/solid"
 import { noop } from "lodash"
-import { IconFilter } from "@tabler/icons-solidjs"
+import { IconFilter, IconX } from "@tabler/icons-solidjs"
 import { Component, JSX, Show } from "solid-js"
 import { useCategoriesQuery } from "../../graphql/queries/categoriesQuery"
 import { namedIcons } from "../../utils/namedIcons"
 import CategoryIndicator from "../CategoryIndicator"
 import FormInput from "../forms/FormInput"
 import FormOptionButtons from "../forms/FormOptionButtons"
 import { stripTime } from "../../utils/date"
+import { Button } from "../base/Button"
 
 export type TransactionFilterValues = {
   dateFrom?: string
@@ -21,11 +22,13 @@ export type TransactionFilterValues = {
 
 export const TransactionFilters: Component<{
   form: FormStore<TransactionFilterValues, undefined>
+  clearFilters: () => void
+  hasFilterValues: boolean
 }> = (props) => {
   const data = useCategoriesQuery(() => ({ archived: false, today: stripTime(new Date()) }))
 
   return (
-    <div class="mb-4 bg-white p-4 shadow-xs lg:rounded-sm" data-testid="filters-container">
+    <div class="shadow-xs mb-4 bg-white p-4 lg:rounded-sm" data-testid="filters-container">
       <Form of={props.form} onSubmit={noop}>
         <FormInput
           of={props.form}
@@ -100,6 +103,16 @@ export const TransactionFilters: Component<{
           ]}
         />
       </Form>
+
+      <Button
+        variant="ghost"
+        size="sm"
+        class="gap-2"
+        onClick={props.clearFilters}
+        disabled={!props.hasFilterValues}
+      >
+        <IconX /> Clear filters
+      </Button>
     </div>
   )
 }

web/src/pages/transactions/TransactionsListPage.tsx

@@ -1,6 +1,6 @@
 import { Title } from "@solidjs/meta"
 import { useNavigate, useRouteData } from "@solidjs/router"
-import { IconCalendarEvent, IconFilter, IconPlus, IconX } from "@tabler/icons-solidjs"
+import { IconCalendarEvent, IconFilter, IconPlus } from "@tabler/icons-solidjs"
 import { Component, Show, createSignal, onMount } from "solid-js"
 import { Cell } from "../../components/Cell"
 import { Button } from "../../components/base/Button"
@@ -37,7 +37,7 @@ const TransactionsListPage: Component = () => {
   const [isFiltering, setFiltering] = createSignal(false)
   const [creatingTransaction, setCreatingTransaction] = createSignal(false)
 
-  const { form, hasFilterValues, filterCount, clearFilters, setFilterValue } =
+  const { form, filterCount, hasFilterValues, clearFilters, setFilterValue } =
     usePageFilter<TransactionFilterValues>({
       basePath: "/transactions/list",
       paramName: "filter",
@@ -75,24 +75,15 @@ const TransactionsListPage: Component = () => {
           <IconPlus size="1.25em" class="-ml-1 mr-2" />
           Add
         </button>
-        <Button
-          class="mr-2"
-          classList={{ hidden: !hasFilterValues() }}
-          size="sm"
-          colorScheme="primary"
-          onClick={clearFilters}
-        >
-          {filterCount()} {filterCount() === 1 ? "filter" : "filters"}
-          <IconX class="ml-2" />
-        </Button>
         <Button
           colorScheme={isFiltering() ? "primary" : "neutral"}
           variant={isFiltering() ? "solid" : "ghost"}
-          size="square"
+          size={hasFilterValues() ? "md" : "square"}
           aria-label="Filter"
           onClick={() => setFiltering((isFiltering) => !isFiltering)}
         >
           <IconFilter size="1.25em" />
+          {hasFilterValues() && `(${filterCount()})`}
         </Button>
         <Button
           class="ml-2"
@@ -111,7 +102,11 @@ const TransactionsListPage: Component = () => {
       </Show>
 
       <div classList={{ block: isFiltering(), hidden: !isFiltering() }}>
-        <TransactionFilters form={form} />
+        <TransactionFilters
+          form={form}
+          clearFilters={clearFilters}
+          hasFilterValues={hasFilterValues()}
+        />
       </div>
 
       <Cell

web/src/utils/categoryColors.ts

@@ -11,35 +11,53 @@ export type CategoryColor =
   | "pink"
   | "indigo"
   | "fuchsia"
+  | "amber"
+  | "lime"
+  | "emerald"
+  | "sky"
+  | "violet"
+  | "rose"
 
 export const CATEGORY_BACKGROUND_COLORS: { [key in CategoryColor]: string } = {
   gray: "bg-gray-500",
   red: "bg-red-500",
   orange: "bg-orange-500",
+  amber: "bg-amber-500",
   yellow: "bg-yellow-500",
+  lime: "bg-lime-500",
   green: "bg-green-500",
+  emerald: "bg-emerald-500",
   teal: "bg-teal-500",
-  blue: "bg-blue-500",
   cyan: "bg-cyan-500",
+  sky: "bg-sky-500",
+  blue: "bg-blue-500",
+  indigo: "bg-indigo-500",
+  violet: "bg-violet-500",
   purple: "bg-purple-500",
+  fuchsia: "bg-fuchsia-500",
   pink: "bg-pink-500",
-  indigo: "bg-indigo-500",
-  fuchsia: "bg-fuchsia-500"
+  rose: "bg-rose-500"
 }
 
 export const CATEGORY_PALE_BACKGROUND_COLORS: { [key in CategoryColor]: string } = {
   gray: "bg-gray-200",
   red: "bg-red-200",
   orange: "bg-orange-200",
+  amber: "bg-amber-200",
   yellow: "bg-yellow-200",
+  lime: "bg-lime-200",
+  emerald: "bg-emerald-200",
   green: "bg-green-200",
   teal: "bg-teal-200",
   blue: "bg-blue-200",
   cyan: "bg-cyan-200",
+  sky: "bg-sky-200",
+  violet: "bg-violet-200",
   purple: "bg-purple-200",
-  pink: "bg-pink-200",
   indigo: "bg-indigo-200",
-  fuchsia: "bg-fuchsia-200"
+  fuchsia: "bg-fuchsia-200",
+  pink: "bg-pink-200",
+  rose: "bg-rose-200"
 }
 
 export const CATEGORY_COLORS = Object.keys(CATEGORY_BACKGROUND_COLORS)