ui: add clan tool bar

To use for selecting a clan from the history

.gitignore

@@ -4,6 +4,7 @@
 **/qubeclan
 **/testdir
 democlan
+example_clan
 result*
 /pkgs/clan-cli/clan_cli/nixpkgs
 /pkgs/clan-cli/clan_cli/webui/assets

pkgs/ui/src/app/layout.tsx

@@ -18,6 +18,7 @@ import "./globals.css";
 import { darkTheme, lightTheme } from "./theme/themes";
 
 import { WithAppState } from "@/components/hooks/useAppContext";
+import { ClanToolbar } from "@/components/clanToolbar";
 
 const roboto = localFont({
   src: [
@@ -69,6 +70,7 @@ export default function RootLayout({
                     !showSidebar && translate
                   } flex h-full w-full flex-col overflow-y-scroll transition-[margin] duration-150 ease-in-out`}
                 >
+                  <ClanToolbar />
                   <div className="static top-0 mb-2 py-2">
                     <div className="grid grid-cols-3">
                       <div className="col-span-1">

pkgs/ui/src/components/clanToolbar/index.tsx

@@ -0,0 +1,65 @@
+import { IconButton, LinearProgress } from "@mui/material";
+import * as React from "react";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import { useFlakeHistoryList } from "@/api/flake/flake";
+import DynamicFeedIcon from "@mui/icons-material/DynamicFeed";
+
+interface ToolbarButtonProps {
+  icon: React.ReactNode;
+  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+function ToolbarButton(props: ToolbarButtonProps) {
+  const { icon, onClick } = props;
+  return (
+    <div className="">
+      <IconButton onClick={onClick}>{icon}</IconButton>
+    </div>
+  );
+}
+type ToolbarItem = {
+  icon: React.ReactNode;
+};
+const toolbarItems: ToolbarItem[] = [
+  {
+    icon: <DynamicFeedIcon />,
+  },
+];
+export function ClanToolbar() {
+  const { data, isLoading } = useFlakeHistoryList();
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  return (
+    <div className="grid w-full auto-cols-min grid-rows-1 grid-flow-col justify-end place-items-end gap-2">
+      {toolbarItems.map((item, index) => (
+        <ToolbarButton key={index} icon={item.icon} onClick={handleClick} />
+      ))}
+      <Menu
+        id="basic-menu"
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        MenuListProps={{
+          "aria-labelledby": "basic-button",
+        }}
+      >
+        {isLoading ? (
+          <LinearProgress />
+        ) : (
+          data?.data.map((item, index) => (
+            <MenuItem key={index}>{item}</MenuItem>
+          ))
+        )}
+        {!isLoading && data?.data.length === 0 && (
+          <MenuItem>No Clan History</MenuItem>
+        )}
+      </Menu>
+    </div>
+  );
+}