[site] Support filtering by payment hash in transactions table (#23014)

Adding filtering by payment hash per request from Chivo:

<img width="1500" height="1342" alt="Screenshot 2026-01-12 at 1 59
30 PM"
src="https://github.com/user-attachments/assets/b7b888a6-90c5-4367-86a3-edcb5e731307"
/>

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added a "Payment Hash" column to Transactions and a "Payment Hash"
string filter (64-character hex) to search and filter transactions by
payment hash.

* **Style**
* Consolidated filter action button layout into a shared component for
consistent spacing, wrapping, and max-width across table filters.

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

GitOrigin-RevId: 5c51f07e6a4bc347492fafd60e38aacb0a6cc107

Author: coreymartin

packages/ui/src/components/DataManagerTable/AppliedButtonsContainer.tsx

@@ -0,0 +1,14 @@
+import styled from "@emotion/styled";
+import { Spacing } from "../../styles/tokens/spacing.js";
+import { ButtonSelector } from "../Button.js";
+
+export const AppliedButtonsContainer = styled.div`
+  margin-top: ${Spacing.px.sm};
+  display: flex;
+  gap: ${Spacing.px.xs};
+  flex-wrap: wrap;
+
+  ${ButtonSelector()} {
+    max-width: 100%;
+  }
+`;

packages/ui/src/components/DataManagerTable/EnumFilter.tsx

@@ -1,9 +1,8 @@
-import styled from "@emotion/styled";
 import { ensureArray } from "@lightsparkdev/core";
-import { Spacing } from "../../styles/tokens/spacing.js";
 import { z } from "../../styles/z-index.js";
 import { Button } from "../Button.js";
 import Select from "../Select.js";
+import { AppliedButtonsContainer } from "./AppliedButtonsContainer.js";
 import { Filter, type FilterState } from "./Filter.js";
 import { FilterType, type EnumFilterValue } from "./filters.js";
 
@@ -105,10 +104,3 @@ export const EnumFilter = ({
     </>
   );
 };
-
-const AppliedButtonsContainer = styled.div`
-  margin-top: ${Spacing.px.sm};
-  display: flex;
-  gap: ${Spacing.px.xs};
-  flex-wrap: wrap;
-`;

packages/ui/src/components/DataManagerTable/IdFilter.tsx

@@ -1,7 +1,6 @@
-import styled from "@emotion/styled";
-import { Spacing } from "../../styles/tokens/spacing.js";
 import { Button } from "../Button.js";
 import { TextInput } from "../TextInput.js";
+import { AppliedButtonsContainer } from "./AppliedButtonsContainer.js";
 import { Filter, type FilterState } from "./Filter.js";
 import { FilterType } from "./filters.js";
 
@@ -148,10 +147,3 @@ export const IdFilter = ({
     </>
   );
 };
-
-const AppliedButtonsContainer = styled.div`
-  margin-top: ${Spacing.px.sm};
-  display: flex;
-  gap: ${Spacing.px.xs};
-  flex-wrap: wrap;
-`;

packages/ui/src/components/DataManagerTable/StringFilter.tsx

@@ -1,7 +1,6 @@
-import styled from "@emotion/styled";
-import { Spacing } from "../../styles/tokens/spacing.js";
 import { Button } from "../Button.js";
 import { TextInput } from "../TextInput.js";
+import { AppliedButtonsContainer } from "./AppliedButtonsContainer.js";
 import { Filter, type FilterState } from "./Filter.js";
 import { FilterType } from "./filters.js";
 
@@ -82,10 +81,3 @@ export const StringFilter = ({
     </>
   );
 };
-
-const AppliedButtonsContainer = styled.div`
-  margin-top: ${Spacing.px.sm};
-  display: flex;
-  gap: ${Spacing.px.xs};
-  flex-wrap: wrap;
-`;