feat(app): edit project and session titles

3 files changed, 29 insertions, 0 deletions

diff --git a/packages/ui/src/components/inline-input.css b/packages/ui/src/components/inline-input.css
new file mode 100644
index 000000000..1d8a00e08
--- /dev/null
+++ b/packages/ui/src/components/inline-input.css
@@ -0,0 +1,17 @@
+[data-component="inline-input"] {
+  color: inherit;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-md);
+  padding: 0;
+  min-width: 0;
+  font: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+  box-sizing: border-box;
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 1px var(--border-interactive-focus);
+  }
+}
diff --git a/packages/ui/src/components/inline-input.tsx b/packages/ui/src/components/inline-input.tsx
new file mode 100644
index 000000000..72711a197
--- /dev/null
+++ b/packages/ui/src/components/inline-input.tsx
@@ -0,0 +1,11 @@
+import type { ComponentProps } from "solid-js"
+import { splitProps } from "solid-js"
+
+export type InlineInputProps = ComponentProps<"input"> & {
+  width?: string
+}
+
+export function InlineInput(props: InlineInputProps) {
+  const [local, others] = splitProps(props, ["class", "width"])
+  return <input data-component="inline-input" class={local.class} style={{ width: local.width }} {...others} />
+}
diff --git a/packages/ui/src/styles/index.css b/packages/ui/src/styles/index.css
index 6e8bbe385..8ab4d6ca4 100644
--- a/packages/ui/src/styles/index.css
+++ b/packages/ui/src/styles/index.css
@@ -25,6 +25,7 @@
 @import "../components/icon-button.css" layer(components);
 @import "../components/image-preview.css" layer(components);
 @import "../components/text-field.css" layer(components);
+@import "../components/inline-input.css" layer(components);
 @import "../components/list.css" layer(components);
 @import "../components/logo.css" layer(components);
 @import "../components/markdown.css" layer(components);