Consistent library UI

web/components/UI.tsx

@@ -52,6 +52,19 @@ export const Input: React.FC<InputProps> = ({ className = '', ...props }) => {
   );
 };
 
+interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {}
+
+export const Select: React.FC<SelectProps> = ({ className = '', children, ...props }) => {
+  return (
+    <select
+      className={`flex h-9 w-full rounded-md border-0 bg-white/5 px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 [&>option]:bg-card text-foreground disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
+      {...props}
+    >
+      {children}
+    </select>
+  );
+};
+
 // Card - Glassmorphism style, very subtle border
 interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
@@ -104,6 +117,59 @@ interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
 }
 export const TableCell: React.FC<TableCellProps> = ({ children, className = '', ...props }) => <td className={`p-4 align-middle text-sm [&:has([role=checkbox])]:pr-0 ${className}`} {...props}>{children}</td>;
 
+interface LibraryPageShellProps {
+  title: string;
+  primaryAction: React.ReactNode;
+  filterBar: React.ReactNode;
+  children: React.ReactNode;
+}
+
+export const LibraryPageShell: React.FC<LibraryPageShellProps> = ({ title, primaryAction, filterBar, children }) => {
+  return (
+    <div className="space-y-6 animate-in fade-in py-4 pb-10">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold tracking-tight text-white">{title}</h1>
+        {primaryAction}
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 bg-card/50 p-4 rounded-lg border border-white/5 shadow-sm">
+        {filterBar}
+      </div>
+      {children}
+    </div>
+  );
+};
+
+interface TableStatusRowProps {
+  colSpan: number;
+  text: string;
+}
+
+export const TableStatusRow: React.FC<TableStatusRowProps> = ({ colSpan, text }) => {
+  return (
+    <TableRow>
+      <TableCell colSpan={colSpan} className="text-center py-8 text-muted-foreground">
+        {text}
+      </TableCell>
+    </TableRow>
+  );
+};
+
+interface LibraryActionCellProps {
+  previewAction?: React.ReactNode;
+  editAction: React.ReactNode;
+  deleteAction: React.ReactNode;
+}
+
+export const LibraryActionCell: React.FC<LibraryActionCellProps> = ({ previewAction, editAction, deleteAction }) => {
+  return (
+    <TableCell className="text-right">
+      {previewAction}
+      {editAction}
+      {deleteAction}
+    </TableCell>
+  );
+};
+
 // Drawer (Side Sheet)
 interface DrawerProps {
   isOpen: boolean;