merge

11 files changed, 900 insertions, 59 deletions

diff --git a/apps/extension/package.json b/apps/extension/package.json
index 241470a8..4c12ef20 100644
--- a/apps/extension/package.json
+++ b/apps/extension/package.json
@@ -11,7 +11,10 @@
     "package": "zip -r extension.zip dist/"
   },
   "dependencies": {
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-tooltip": "^1.0.7",
+    "cmdk": "^1.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
diff --git a/apps/extension/pnpm-lock.yaml b/apps/extension/pnpm-lock.yaml
index 6dbe6882..e61391eb 100644
--- a/apps/extension/pnpm-lock.yaml
+++ b/apps/extension/pnpm-lock.yaml
@@ -5,9 +5,18 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@radix-ui/react-dialog':
+    specifier: ^1.0.5
+    version: 1.0.5(@types/[email protected])(@types/[email protected])([email protected])([email protected])
+  '@radix-ui/react-popover':
+    specifier: ^1.0.7
+    version: 1.0.7(@types/[email protected])(@types/[email protected])([email protected])([email protected])
   '@radix-ui/react-tooltip':
     specifier: ^1.0.7
     version: 1.0.7(@types/[email protected])(@types/[email protected])([email protected])([email protected])
+  cmdk:
+    specifier: ^1.0.0
+    version: 1.0.0(@types/[email protected])(@types/[email protected])([email protected])([email protected])
   react:
     specifier: ^18.2.0
     version: 18.2.0
@@ -687,6 +696,40 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@radix-ui/[email protected](@types/[email protected])(@types/[email protected])([email protected])([email protected]):
+    resolution: {integrity: sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.4
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(@types/[email protected])([email protected])
+      '@radix-ui/react-context': 1.0.1(@types/[email protected])([email protected])
+      '@radix-ui/react-dismissable-layer': 1.0.5(@types/[email protected])(@types/[email protected])([email protected])([email protected])
+      '@radix-ui/react-focus-guards': 1.0.1(@types/[email protected])([email protected])
+      '@radix-ui/react-focus-scope': 1.0.4(@types/[email protected])(@types/[email protected])([email protected])([email protected])
+      '@radix-ui/react-id': 1.0.1(@types/[email protected])([email protected])
+      '@radix-ui/react-portal': 1.0.4(@types/[email protected])(@types/[email protected])([email protected])([email protected])
+      '@radix-ui/react-presence': 1.0.1(@types/[email protected])(@types/[email protected])([email protected])([email protected])
+      '@radix-ui/react-primitive': 1.0.3(@types/[email protected])(@types/[email protected])([email protected])([email protected])
+      '@radix-ui/react-slot': 1.0.2(@types/[email protected])([email protected])
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/[email protected])([email protected])
+      '@types/react': 18.2.75
+      '@types/react-dom': 18.2.24
+      aria-hidden: 1.2.4
+      react: 18.2.0
+      react-dom: 18.2.0([email protected])
+      react-remove-scroll: 2.5.5(@types/[email protected])([email protected])
+    dev: false
+
   /@radix-ui/[email protected](@types/[email protected])(@types/[email protected])([email protected])([email protected]):
     resolution: {integrity: sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==}
     peerDependencies:
@@ -712,6 +755,43 @@ packages:
       react-dom: 18.2.0([email protected])
     dev: false
 
+  /@radix-ui/[email protected](@types/[email protected])([email protected]):
+    resolution: {integrity: sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.4
+      '@types/react': 18.2.75
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/[email protected](@types/[email protected])(@types/[email protected])([email protected])([email protected]):
+    resolution: {integrity: sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.4
+      '@radix-ui/react-compose-refs': 1.0.1(@types/[email protected])([email protected])
+      '@radix-ui/react-primitive': 1.0.3(@types/[email protected])(@types/[email protected])([email protected])([email protected])
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/[email protected])([email protected])
+      '@types/react': 18.2.75
+      '@types/react-dom': 18.2.24
+      react: 18.2.0
+      react-dom: 18.2.0([email protected])
+    dev: false
+
   /@radix-ui/[email protected](@types/[email protected])([email protected]):
     resolution: {integrity: sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==}
     peerDependencies:
@@ -727,6 +807,41 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@radix-ui/[email protected](@types/[email protected])(@types/[email protected])([email protected])([email protected]):
+    resolution: {integrity: sha512-shtvVnlsxT6faMnK/a7n0wptwBD23xc1Z5mdrtKLwVEfsEMXodS0r5s0/g5P0hX//EKYZS2sxUjqfzlg52ZSnQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.4
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(@types/[email protected])([email protected])
+      '@radix-ui/react-context': 1.0.1(@types/[email protected])([email protected])
+      '@radix-ui/react-dismissable-layer': 1.0.5(@types/[email protected])(@types/[email protected])([email protected])([email protected])
+      '@radix-ui/react-focus-guards': 1.0.1(@types/[email protected])([email protected])
+      '@radix-ui/react-focus-scope': 1.0.4(@types/[email protected])(@types/[email protected])([email protected])([email protected])
+      '@radix-ui/react-id': 1.0.1(@types/[email protected])([email protected])
+      '@radix-ui/react-popper': 1.1.3(@types/[email protected])(@types/[email protected])([email protected])([email protected])
+      '@radix-ui/react-portal': 1.0.4(@types/[email protected])(@types/[email protected])([email protected])([email protected])
+      '@radix-ui/react-presence': 1.0.1(@types/[email protected])(@types/[email protected])([email protected])([email protected])
+      '@radix-ui/react-primitive': 1.0.3(@types/[email protected])(@types/[email protected])([email protected])([email protected])
+      '@radix-ui/react-slot': 1.0.2(@types/[email protected])([email protected])
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/[email protected])([email protected])
+      '@types/react': 18.2.75
+      '@types/react-dom': 18.2.24
+      aria-hidden: 1.2.4
+      react: 18.2.0
+      react-dom: 18.2.0([email protected])
+      react-remove-scroll: 2.5.5(@types/[email protected])([email protected])
+    dev: false
+
   /@radix-ui/[email protected](@types/[email protected])(@types/[email protected])([email protected])([email protected]):
     resolution: {integrity: sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==}
     peerDependencies:
@@ -1362,6 +1477,13 @@ packages:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
     dev: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==}
+    engines: {node: '>=10'}
+    dependencies:
+      tslib: 2.6.2
+    dev: false
+
   /[email protected]:
     resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
     engines: {node: '>=8'}
@@ -1428,6 +1550,21 @@ packages:
       supports-color: 7.2.0
     dev: true
 
+  /[email protected](@types/[email protected])(@types/[email protected])([email protected])([email protected]):
+    resolution: {integrity: sha512-gDzVf0a09TvoJ5jnuPvygTB77+XdOSwEmJ88L6XPFPlv7T3RxbP9jgenfylrAMD0+Le1aO0nVjQUzl2g+vjz5Q==}
+    peerDependencies:
+      react: ^18.0.0
+      react-dom: ^18.0.0
+    dependencies:
+      '@radix-ui/react-dialog': 1.0.5(@types/[email protected])(@types/[email protected])([email protected])([email protected])
+      '@radix-ui/react-primitive': 1.0.3(@types/[email protected])(@types/[email protected])([email protected])([email protected])
+      react: 18.2.0
+      react-dom: 18.2.0([email protected])
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+    dev: false
+
   /[email protected]:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
     dependencies:
@@ -1485,6 +1622,10 @@ packages:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
     dev: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
+    dev: false
+
   /[email protected]:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
@@ -1740,6 +1881,11 @@ packages:
     engines: {node: '>=6.9.0'}
     dev: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
+    engines: {node: '>=6'}
+    dev: false
+
   /[email protected]:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
@@ -1832,6 +1978,12 @@ packages:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
     dev: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}
+    dependencies:
+      loose-envify: 1.4.0
+    dev: false
+
   /[email protected]:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
@@ -2087,6 +2239,58 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /[email protected](@types/[email protected])([email protected]):
+    resolution: {integrity: sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.2.75
+      react: 18.2.0
+      react-style-singleton: 2.2.1(@types/[email protected])([email protected])
+      tslib: 2.6.2
+    dev: false
+
+  /[email protected](@types/[email protected])([email protected]):
+    resolution: {integrity: sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.2.75
+      react: 18.2.0
+      react-remove-scroll-bar: 2.3.6(@types/[email protected])([email protected])
+      react-style-singleton: 2.2.1(@types/[email protected])([email protected])
+      tslib: 2.6.2
+      use-callback-ref: 1.3.2(@types/[email protected])([email protected])
+      use-sidecar: 1.1.2(@types/[email protected])([email protected])
+    dev: false
+
+  /[email protected](@types/[email protected])([email protected]):
+    resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.2.75
+      get-nonce: 1.0.1
+      invariant: 2.2.4
+      react: 18.2.0
+      tslib: 2.6.2
+    dev: false
+
   /[email protected]:
     resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
     engines: {node: '>=0.10.0'}
@@ -2238,6 +2442,10 @@ packages:
       typescript: 5.4.5
     dev: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
+    dev: false
+
   /[email protected]:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
@@ -2277,6 +2485,37 @@ packages:
       punycode: 2.3.1
     dev: true
 
+  /[email protected](@types/[email protected])([email protected]):
+    resolution: {integrity: sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.2.75
+      react: 18.2.0
+      tslib: 2.6.2
+    dev: false
+
+  /[email protected](@types/[email protected])([email protected]):
+    resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.9.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.2.75
+      detect-node-es: 1.1.0
+      react: 18.2.0
+      tslib: 2.6.2
+    dev: false
+
   /[email protected](@types/[email protected]):
     resolution: {integrity: sha512-OyZR+c1CE8yeHw5V5t59aXsUPPVTHMDjEZz8MgguLL/Q7NblxhZUlTu9xSPqlsUO/y+X7dlU05jdhvyycD55DA==}
     engines: {node: ^18.0.0 || >=20.0.0}
diff --git a/apps/extension/src/SideBar.tsx b/apps/extension/src/SideBar.tsx
index b3bfb08a..07461a2a 100644
--- a/apps/extension/src/SideBar.tsx
+++ b/apps/extension/src/SideBar.tsx
@@ -7,6 +7,17 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "./components/ui/tooltip";
+import { FilterSpaces } from "./components/FilterCombobox";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogTrigger,
+  DialogFooter,
+  DialogClose,
+} from "./components/ui/dialog";
 
 function sendUrlToAPI() {
   // get the current URL
@@ -39,6 +50,8 @@ function SideBar() {
 
   const [isSendingData, setIsSendingData] = useState(false);
 
+  const [selectedSpaces, setSelectedSpaces] = useState<number[]>([0, 1]);
+
   interface TweetData {
     tweetText: string;
     postUrl: string;
@@ -150,10 +163,7 @@ function SideBar() {
           {window.location.href.includes("twitter.com") ||
           window.location.href.includes("x.com") ? (
             <Tooltip delayDuration={300}>
-              <TooltipTrigger
-                className="anycontext-bg-transparent
-                        anycontext-border-none anycontext-m-0 anycontext-p-0"
-              >
+              <TooltipTrigger className="anycontext-bg-transparent anycontext-border-none anycontext-m-0 anycontext-p-0">
                 <button
                   onClick={() => {
                     if (window.location.href.endsWith("/i/bookmarks/all")) {
@@ -195,62 +205,99 @@ function SideBar() {
           ) : (
             <></>
           )}
-          <Tooltip delayDuration={300}>
-            <TooltipTrigger
-              className="anycontext-bg-transparent
-              anycontext-border-none anycontext-m-0 anycontext-p-0
-            "
-            >
-              <button
-                onClick={() => {
-                  sendUrlToAPI();
-                  setIsSendingData(true);
-                  setTimeout(() => {
-                    setIsSendingData(false);
-                    setSavedWebsites([...savedWebsites, window.location.href]);
-                  }, 1000);
-                }}
-                disabled={savedWebsites.includes(window.location.href)}
-                className="anycontext-open-button disabled:anycontext-opacity-30 anycontext-bg-transparent
-                anycontext-border-none anycontext-m-0 anycontext-p-0"
+          <Dialog>
+            <Tooltip delayDuration={300}>
+              <TooltipTrigger
+                className="anycontext-bg-transparent
+									anycontext-border-none anycontext-m-0 anycontext-p-0
+								"
               >
-                {savedWebsites.includes(window.location.href) ? (
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    className="lucide lucide-file-check-2"
-                  >
-                    <path d="M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4" />
-                    <path d="M14 2v4a2 2 0 0 0 2 2h4" />
-                    <path d="m3 15 2 2 4-4" />
-                  </svg>
-                ) : (
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                    className={`anycontext-w-5 anycontext-h-5 ${isSendingData ? "anycontext-animate-spin" : ""}`}
+                <DialogTrigger asChild>
+                  <button
+                    onClick={() => {
+                      return;
+                      sendUrlToAPI();
+                      setIsSendingData(true);
+                      setTimeout(() => {
+                        setIsSendingData(false);
+                        setSavedWebsites([
+                          ...savedWebsites,
+                          window.location.href,
+                        ]);
+                      }, 1000);
+                    }}
+                    disabled={savedWebsites.includes(window.location.href)}
+                    className="anycontext-open-button disabled:anycontext-opacity-30 anycontext-bg-transparent
+											anycontext-border-none anycontext-m-0 anycontext-p-0"
                   >
-                    <path d="M15.98 1.804a1 1 0 0 0-1.96 0l-.24 1.192a1 1 0 0 1-.784.785l-1.192.238a1 1 0 0 0 0 1.962l1.192.238a1 1 0 0 1 .785.785l.238 1.192a1 1 0 0 0 1.962 0l.238-1.192a1 1 0 0 1 .785-.785l1.192-.238a1 1 0 0 0 0-1.962l-1.192-.238a1 1 0 0 1-.785-.785l-.238-1.192ZM6.949 5.684a1 1 0 0 0-1.898 0l-.683 2.051a1 1 0 0 1-.633.633l-2.051.683a1 1 0 0 0 0 1.898l2.051.684a1 1 0 0 1 .633.632l.683 2.051a1 1 0 0 0 1.898 0l.683-2.051a1 1 0 0 1 .633-.633l2.051-.683a1 1 0 0 0 0-1.898l-2.051-.683a1 1 0 0 1-.633-.633L6.95 5.684ZM13.949 13.684a1 1 0 0 0-1.898 0l-.184.551a1 1 0 0 1-.632.633l-.551.183a1 1 0 0 0 0 1.898l.551.183a1 1 0 0 1 .633.633l.183.551a1 1 0 0 0 1.898 0l.184-.551a1 1 0 0 1 .632-.633l.551-.183a1 1 0 0 0 0-1.898l-.551-.184a1 1 0 0 1-.633-.632l-.183-.551Z" />
-                  </svg>
-                )}
-              </button>
-            </TooltipTrigger>
-            <TooltipContent className="anycontext-p-0" side="left">
-              <p className="anycontext-p-0 anycontext-m-0">
-                {savedWebsites.includes(window.location.href)
-                  ? "Added to memory"
-                  : "Add to memory"}
-              </p>
-            </TooltipContent>
-          </Tooltip>
+                    {savedWebsites.includes(window.location.href) ? (
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        className="lucide lucide-file-check-2"
+                      >
+                        <path d="M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4" />
+                        <path d="M14 2v4a2 2 0 0 0 2 2h4" />
+                        <path d="m3 15 2 2 4-4" />
+                      </svg>
+                    ) : (
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                        className={`anycontext-w-5 anycontext-h-5 ${isSendingData ? "anycontext-animate-spin" : ""}`}
+                      >
+                        <path d="M15.98 1.804a1 1 0 0 0-1.96 0l-.24 1.192a1 1 0 0 1-.784.785l-1.192.238a1 1 0 0 0 0 1.962l1.192.238a1 1 0 0 1 .785.785l.238 1.192a1 1 0 0 0 1.962 0l.238-1.192a1 1 0 0 1 .785-.785l1.192-.238a1 1 0 0 0 0-1.962l-1.192-.238a1 1 0 0 1-.785-.785l-.238-1.192ZM6.949 5.684a1 1 0 0 0-1.898 0l-.683 2.051a1 1 0 0 1-.633.633l-2.051.683a1 1 0 0 0 0 1.898l2.051.684a1 1 0 0 1 .633.632l.683 2.051a1 1 0 0 0 1.898 0l.683-2.051a1 1 0 0 1 .633-.633l2.051-.683a1 1 0 0 0 0-1.898l-2.051-.683a1 1 0 0 1-.633-.633L6.95 5.684ZM13.949 13.684a1 1 0 0 0-1.898 0l-.184.551a1 1 0 0 1-.632.633l-.551.183a1 1 0 0 0 0 1.898l.551.183a1 1 0 0 1 .633.633l.183.551a1 1 0 0 0 1.898 0l.184-.551a1 1 0 0 1 .632-.633l.551-.183a1 1 0 0 0 0-1.898l-.551-.184a1 1 0 0 1-.633-.632l-.183-.551Z" />
+                      </svg>
+                    )}
+                  </button>
+                </DialogTrigger>
+              </TooltipTrigger>
+              <TooltipContent className="anycontext-p-0" side="left">
+                <p className="anycontext-p-0 anycontext-m-0">
+                  {savedWebsites.includes(window.location.href)
+                    ? "Added to memory"
+                    : "Add to memory"}
+                </p>
+              </TooltipContent>
+            </Tooltip>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>Add to Memory</DialogTitle>
+                <DialogDescription>
+                  Add the current page to memory
+                </DialogDescription>
+              </DialogHeader>
+
+              <FilterSpaces
+                className="anycontext-mr-auto"
+                selectedSpaces={selectedSpaces}
+                setSelectedSpaces={setSelectedSpaces}
+                name={"Add to Spaces"}
+                spaces={[
+                  {
+                    name: "cool tech",
+                    id: 0,
+                  },
+                  {
+                    name: "cool libs",
+                    id: 1,
+                  },
+                ]}
+              />
+              <DialogFooter className="anycontext-w-full anycontext-text-sm">
+                <DialogClose>Add</DialogClose>
+                <DialogClose>Cancel</DialogClose>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
         </div>
       </TooltipProvider>
     </>
diff --git a/apps/extension/src/assets/Memories.tsx b/apps/extension/src/assets/Memories.tsx
new file mode 100644
index 00000000..0c138b1e
--- /dev/null
+++ b/apps/extension/src/assets/Memories.tsx
@@ -0,0 +1,69 @@
+export const MemoryIcon: React.FC<React.SVGAttributes<SVGElement>> = (
+  props,
+) => (
+  <svg
+    viewBox="0 0 89 53"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <rect
+      x="0.40697"
+      y="8.52821"
+      width="43.0286"
+      height="43.0286"
+      rx="5.5"
+      transform="rotate(-12 0.40697 8.52821)"
+      fill="var(--anycontext-icon-fill)"
+      stroke="var(--anycontext-icon-stroke)"
+    />
+    <rect
+      x="20.8257"
+      y="9.19775"
+      width="43"
+      height="43"
+      rx="5.5"
+      fill="var(--anycontext-icon-fill)"
+      stroke="var(--anycontext-icon-stroke)"
+    />
+    <rect
+      x="47.6965"
+      y="-0.612372"
+      width="43.0286"
+      height="43.0286"
+      rx="5.5"
+      transform="rotate(15 47.6965 -0.612372)"
+      fill="var(--anycontext-icon-fill)"
+      stroke="var(--anycontext-icon-stroke)"
+    />
+  </svg>
+);
+
+export const SpaceIcon: React.FC<React.SVGAttributes<SVGElement>> = (props) => (
+  <svg
+    viewBox="0 0 34 30"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <rect
+      x="1.39502"
+      y="5.2229"
+      width="24"
+      height="24"
+      rx="5.5"
+      fill="var(--anycontext-icon-fill)"
+      stroke="var(--anycontext-icon-stroke)"
+    />
+    <rect
+      x="11.2231"
+      y="-0.157702"
+      width="24"
+      height="24"
+      rx="5.5"
+      transform="rotate(20 11.2231 -0.157702)"
+      fill="var(--anycontext-icon-fill)"
+      stroke="var(--anycontext-icon-stroke)"
+    />
+  </svg>
+);
diff --git a/apps/extension/src/components/FilterCombobox.tsx b/apps/extension/src/components/FilterCombobox.tsx
new file mode 100644
index 00000000..f6215c03
--- /dev/null
+++ b/apps/extension/src/components/FilterCombobox.tsx
@@ -0,0 +1,155 @@
+import * as React from "react";
+import { Check, ChevronsUpDown, X } from "lucide-react";
+
+import { cn } from "../lib/utils";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "../components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../components/ui/popover";
+import { Space } from "../types/memory";
+
+export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  side?: "top" | "bottom";
+  align?: "end" | "start" | "center";
+  onClose?: () => void;
+  selectedSpaces: number[];
+  setSelectedSpaces: (
+    spaces: number[] | ((prev: number[]) => number[]),
+  ) => void;
+  name: string;
+  spaces: Space[];
+}
+
+export function FilterSpaces({
+  className,
+  side = "bottom",
+  align = "center",
+  onClose,
+  selectedSpaces,
+  setSelectedSpaces,
+  name,
+  spaces,
+  ...props
+}: Props) {
+  const [open, setOpen] = React.useState(false);
+
+  console.log(selectedSpaces, spaces);
+
+  const sortedSpaces = spaces.sort(({ id: a }, { id: b }) =>
+    selectedSpaces.includes(a) && !selectedSpaces.includes(b)
+      ? -1
+      : selectedSpaces.includes(b) && !selectedSpaces.includes(a)
+        ? 1
+        : 0,
+  );
+
+  React.useEffect(() => {
+    if (!open) {
+      onClose?.();
+    }
+  }, [open]);
+
+  return (
+    <div className="anycontext-flex anycontext-flex-wrap anycontext-gap-1 anycontext-text-sm anycontext-">
+      {selectedSpaces.map((spaceid) => {
+        const space = spaces.find((s) => s.id === spaceid)!;
+        return <SpaceItem {...space} key={spaceid} onRemove={() => {}} />;
+      })}
+    </div>
+  );
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <button
+          type={undefined}
+          data-state-on={open}
+          className={cn(
+            "anycontext-combobox-button anycontext-w-fit",
+            className,
+          )}
+          {...props}
+        >
+          {name}
+          <ChevronsUpDown className="anycontext-h-4 anycontext-w-4" />
+          <div
+            data-state-on={selectedSpaces.length > 0}
+            className="on:anycontext-flex anycontext-text-rgray-11 anycontext-border-rgray-6 anycontext-bg-rgray-2 anycontext-absolute anycontext-left-0 anycontext-top-0 anycontext-hidden anycontext-aspect-[1] anycontext-h-4 anycontext-w-4 anycontext--translate-x-1/3 anycontext--translate-y-1/3 anycontext-items-center anycontext-justify-center anycontext-rounded-full anycontext-border anycontext-text-center anycontext-text-[9px]"
+          >
+            {selectedSpaces.length}
+          </div>
+        </button>
+      </PopoverTrigger>
+      <PopoverContent
+        onCloseAutoFocus={(e) => e.preventDefault()}
+        align={align}
+        side={side}
+        className="anycontext-w-[200px] anycontext-p-0"
+      >
+        <Command
+          filter={(val, search) =>
+            spaces
+              .find((s) => s.id.toString() === val)
+              ?.name.toLowerCase()
+              .includes(search.toLowerCase().trim())
+              ? 1
+              : 0
+          }
+        >
+          <CommandInput placeholder="Filter spaces..." />
+          <CommandList asChild>
+            <div>
+              <CommandEmpty>Nothing found</CommandEmpty>
+              <CommandGroup>
+                {sortedSpaces.map((space) => (
+                  <CommandItem
+                    key={space.id}
+                    value={space.id.toString()}
+                    onSelect={(val) => {
+                      setSelectedSpaces((prev: number[]) =>
+                        prev.includes(parseInt(val))
+                          ? prev.filter((v) => v !== parseInt(val))
+                          : [...prev, parseInt(val)],
+                      );
+                    }}
+                    asChild
+                  >
+                    <div className="anycontext-text-black/90 dark:anycontext-text-white/90">
+                      {space.name}
+                      <Check
+                        data-state-on={selectedSpaces.includes(space.id)}
+                        className={cn(
+                          "on:anycontext-opacity-100 anycontext-ml-auto anycontext-h-4 anycontext-w-4 anycontext-opacity-0",
+                        )}
+                      />
+                    </div>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </div>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function SpaceItem({ name, onRemove }: { onRemove: () => void } & Space) {
+  return (
+    <div className="anycontext-flex anycontext-justify-center anycontext-items-center anycontext-gap-2 anycontext-p-1 anycontext-pl-2 anycontext-pr-3 anycontext-rounded-full anycontext-bg-black/5 dark:anycontext-bg-white/5 anycontext-border-white/20 dark:anycontext-border-black/20 border">
+      <button className="anycontext-flex hover:anycontext-bg-transparent anycontext-justify-center anycontext-scale-110 anycontext-items-center focus-visible:anycontext-outline-none anycontext-rounded-full anycontext-w-3 anycontext-bg-black/5 dark:anycontext-bg-white/5 anycontext-h-3 anycontext-text-transparent hover:anycontext-text-black dark:hover:anycontext-text-white">
+        <X className="anycontext-w-3 anycontext-h-3" />
+      </button>
+      {name}
+    </div>
+  );
+}
diff --git a/apps/extension/src/components/ui/command.tsx b/apps/extension/src/components/ui/command.tsx
new file mode 100644
index 00000000..858b67f4
--- /dev/null
+++ b/apps/extension/src/components/ui/command.tsx
@@ -0,0 +1,162 @@
+import * as React from "react";
+import { type DialogProps } from "@radix-ui/react-dialog";
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";
+
+import { cn } from "../../lib/utils";
+import { Dialog, DialogContent } from "../../components/ui/dialog";
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "anycontext-flex anycontext-h-full anycontext-w-full anycontext-flex-col anycontext-overflow-hidden anycontext-rounded-md anycontext-bg-white anycontext-text-stone-950 dark:anycontext-bg-stone-950 dark:anycontext-text-stone-50",
+      className,
+    )}
+    {...props}
+  />
+));
+Command.displayName = CommandPrimitive.displayName;
+
+interface CommandDialogProps extends DialogProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="anycontext-overflow-hidden anycontext-p-0 anycontext-shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:anycontext-px-2 [&_[cmdk-group-heading]]:anycontext-font-medium [&_[cmdk-group-heading]]:anycontext-text-stone-500 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:anycontext-pt-0 [&_[cmdk-group]]:anycontext-px-2 [&_[cmdk-input-wrapper]_svg]:anycontext-h-5 [&_[cmdk-input-wrapper]_svg]:anycontext-w-5 [&_[cmdk-input]]:anycontext-h-12 [&_[cmdk-item]]:anycontext-px-2 [&_[cmdk-item]]:anycontext-py-3 [&_[cmdk-item]_svg]:anycontext-h-5 [&_[cmdk-item]_svg]:anycontext-w-5 dark:[&_[cmdk-group-heading]]:anycontext-text-stone-400">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div
+    className="anycontext-flex anycontext-items-center anycontext-border-b anycontext-px-3"
+    cmdk-input-wrapper=""
+  >
+    <Search className="anycontext-mr-2 anycontext-h-4 anycontext-w-4 anycontext-shrink-0 anycontext-opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "anycontext-flex anycontext-h-11 anycontext-w-full anycontext-rounded-md anycontext-bg-transparent anycontext-py-3 anycontext-text-sm anycontext-outline-none placeholder:anycontext-text-stone-500 disabled:anycontext-cursor-not-allowed disabled:anycontext-opacity-50 dark:placeholder:anycontext-text-stone-400",
+        className,
+      )}
+      {...props}
+    />
+  </div>
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn(
+      "anycontext-max-h-[300px] anycontext-overflow-y-auto anycontext-overflow-x-hidden",
+      className,
+    )}
+    {...props}
+  />
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="anycontext-py-6 anycontext-text-center anycontext-text-sm"
+    {...props}
+  />
+));
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "anycontext-overflow-hidden anycontext-p-1 anycontext-text-stone-950 [&_[cmdk-group-heading]]:anycontext-px-2 [&_[cmdk-group-heading]]:anycontext-py-1.5 [&_[cmdk-group-heading]]:anycontext-text-xs [&_[cmdk-group-heading]]:anycontext-font-medium [&_[cmdk-group-heading]]:anycontext-text-stone-500 dark:anycontext-text-stone-50 dark:[&_[cmdk-group-heading]]:anycontext-text-stone-400",
+      className,
+    )}
+    {...props}
+  />
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn(
+      "anycontext--mx-1 anycontext-h-px anycontext-bg-stone-200 dark:anycontext-bg-stone-800",
+      className,
+    )}
+    {...props}
+  />
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "anycontext-relative anycontext-flex anycontext-cursor-default anycontext-select-none anycontext-items-center anycontext-rounded-sm anycontext-px-2 anycontext-py-1.5 anycontext-text-sm anycontext-outline-none aria-selected:anycontext-bg-stone-100 aria-selected:anycontext-text-stone-900 data-[disabled]:anycontext-pointer-events-none data-[disabled]:anycontext-opacity-50 dark:aria-selected:anycontext-bg-stone-800 dark:aria-selected:anycontext-text-stone-50",
+      className,
+    )}
+    {...props}
+  />
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "anycontext-ml-auto anycontext-text-xs anycontext-tracking-widest anycontext-text-stone-500 dark:anycontext-text-stone-400",
+        className,
+      )}
+      {...props}
+    />
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};
diff --git a/apps/extension/src/components/ui/dialog.tsx b/apps/extension/src/components/ui/dialog.tsx
new file mode 100644
index 00000000..583c335d
--- /dev/null
+++ b/apps/extension/src/components/ui/dialog.tsx
@@ -0,0 +1,123 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+
+import { cn } from "../../lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "anycontext-fixed anycontext-inset-0 anycontext-z-50 anycontext-bg-black/80 anycontext- data-[state=open]:anycontext-animate-in data-[state=closed]:anycontext-animate-out data-[state=closed]:anycontext-fade-out-0 data-[state=open]:anycontext-fade-in-0",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "anycontext-text-black dark:anycontext-text-white anycontext-fixed anycontext-left-[50%] anycontext-top-[50%] anycontext-z-50 anycontext-grid anycontext-w-full anycontext-max-w-lg anycontext-translate-x-[-50%] anycontext-translate-y-[-50%] anycontext-gap-4 anycontext-border anycontext-border-stone-200 anycontext-bg-white anycontext-p-6 anycontext-shadow-lg anycontext-duration-200 data-[state=open]:anycontext-animate-in data-[state=closed]:anycontext-animate-out data-[state=closed]:anycontext-fade-out-0 data-[state=open]:anycontext-fade-in-0 data-[state=closed]:anycontext-zoom-out-95 data-[state=open]:anycontext-zoom-in-95 data-[state=closed]:anycontext-slide-out-to-left-1/2 data-[state=closed]:anycontext-slide-out-to-top-[48%] data-[state=open]:anycontext-slide-in-from-left-1/2 data-[state=open]:anycontext-slide-in-from-top-[48%] sm:anycontext-rounded-lg dark:anycontext-border-stone-800 dark:anycontext-bg-stone-950",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="anycontext-absolute anycontext-right-4 anycontext-top-4 anycontext-rounded-sm anycontext-opacity-70 anycontext-ring-offset-white anycontext-transition-opacity hover:anycontext-opacity-100 focus:anycontext-outline-none focus:anycontext-ring-2 focus:anycontext-ring-stone-950 focus:anycontext-ring-offset-2 disabled:anycontext-pointer-events-none data-[state=open]:anycontext-bg-stone-100 data-[state=open]:anycontext-text-stone-500 dark:anycontext-ring-offset-stone-950 dark:focus:anycontext-ring-stone-300 dark:data-[state=open]:anycontext-bg-stone-800 dark:data-[state=open]:anycontext-text-stone-400">
+        <X className="anycontext-h-4 anycontext-w-4" />
+        <span className="anycontext-sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "anycontext-flex anycontext-flex-col anycontext-space-y-1.5 anycontext-text-center sm:anycontext-text-left",
+      className,
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "anycontext-flex anycontext-flex-col-reverse sm:anycontext-flex-row sm:anycontext-justify-end sm:anycontext-space-x-2",
+      className,
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "anycontext-text-lg anycontext-font-semibold anycontext-leading-none anycontext-tracking-tight",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn(
+      "anycontext-text-sm anycontext-text-stone-500 dark:anycontext-text-stone-400",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};
diff --git a/apps/extension/src/components/ui/popover.tsx b/apps/extension/src/components/ui/popover.tsx
new file mode 100644
index 00000000..e1b9282d
--- /dev/null
+++ b/apps/extension/src/components/ui/popover.tsx
@@ -0,0 +1,29 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+import { cn } from "../../lib/utils";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "anycontext-z-50 anycontext-w-72 anycontext-rounded-md anycontext-border anycontext-border-stone-200 anycontext-bg-white anycontext-p-4 anycontext-text-stone-950 anycontext-shadow-md anycontext-outline-none data-[state=open]:anycontext-animate-in data-[state=closed]:anycontext-animate-out data-[state=closed]:anycontext-fade-out-0 data-[state=open]:anycontext-fade-in-0 data-[state=closed]:anycontext-zoom-out-95 data-[state=open]:anycontext-zoom-in-95 data-[side=bottom]:anycontext-slide-in-from-top-2 data-[side=left]:anycontext-slide-in-from-right-2 data-[side=right]:anycontext-slide-in-from-left-2 data-[side=top]:anycontext-slide-in-from-bottom-2 dark:anycontext-border-stone-800 dark:anycontext-bg-stone-950 dark:anycontext-text-stone-50",
+        className,
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent };
diff --git a/apps/extension/src/ext.css b/apps/extension/src/ext.css
index 0583faad..bf7a4156 100644
--- a/apps/extension/src/ext.css
+++ b/apps/extension/src/ext.css
@@ -2,6 +2,16 @@
 @tailwind components;
 @tailwind utilities;
 
+.anycontext-combobox-button {
+  padding: 0.5rem 1rem;
+  display: flex;
+  flex-direction: row;
+  justify-items: center;
+  align-items: center;
+  gap: 0.5rem;
+  @apply anycontext-rounded-md dark:anycontext-bg-white/5 anycontext-bg-black/5;
+}
+
 .anycontext-overlay {
   position: fixed;
   top: 0;
diff --git a/apps/extension/src/types/memory.ts b/apps/extension/src/types/memory.ts
new file mode 100644
index 00000000..03ffb848
--- /dev/null
+++ b/apps/extension/src/types/memory.ts
@@ -0,0 +1,4 @@
+export type Space = {
+  id: number;
+  name: string;
+};
diff --git a/apps/extension/tailwind.config.js b/apps/extension/tailwind.config.js
index 84c01958..ed971842 100644
--- a/apps/extension/tailwind.config.js
+++ b/apps/extension/tailwind.config.js
@@ -1,7 +1,7 @@
 import tailwindcssAnimate from "tailwindcss-animate";
 /** @type {import('tailwindcss').Config} */
 export default {
-  darkMode: ["class"],
+  //darkMode: "prefe",
   content: [
     "./pages/**/*.{ts,tsx}",
     "./components/**/*.{ts,tsx}",