refactor: ♻️ Redesign post composer

app/components/ui/input-group/InputGroup.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <div
+    data-slot="input-group"
+    role="group"
+    :class="cn(
+      'group/input-group border-input bg-background relative flex w-full items-center rounded-md border outline-none',
+      'h-9 min-w-0 has-[>textarea]:h-auto',
+
+      // Variants based on alignment.
+      'has-[>[data-align=inline-start]]:[&>input]:pl-2',
+      'has-[>[data-align=inline-end]]:[&>input]:pr-2',
+      'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3',
+      'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3',
+
+      // Focus state.
+      'has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot=input-group-control]:focus-visible]:ring-1',
+
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>

app/components/ui/input-group/InputGroupAddon.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+import type { InputGroupVariants } from ".";
+import { inputGroupAddonVariants } from ".";
+
+const props = withDefaults(
+    defineProps<{
+        align?: InputGroupVariants["align"];
+        class?: HTMLAttributes["class"];
+    }>(),
+    {
+        align: "inline-start",
+    },
+);
+
+function handleInputGroupAddonClick(e: MouseEvent) {
+    const currentTarget = e.currentTarget as HTMLElement | null;
+    const target = e.target as HTMLElement | null;
+    if (target?.closest("button")) {
+        return;
+    }
+    if (currentTarget?.parentElement) {
+        currentTarget.parentElement?.querySelector("input")?.focus();
+    }
+}
+</script>
+
+<template>
+  <div
+    role="group"
+    data-slot="input-group-addon"
+    :data-align="props.align"
+    :class="cn(inputGroupAddonVariants({ align: props.align }), props.class)"
+    @click="handleInputGroupAddonClick"
+  >
+    <slot />
+  </div>
+</template>

app/components/ui/input-group/InputGroupButton.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import type { InputGroupButtonProps } from ".";
+import { inputGroupButtonVariants } from ".";
+
+const props = withDefaults(defineProps<InputGroupButtonProps>(), {
+    size: "xs",
+    variant: "ghost",
+});
+</script>
+
+<template>
+  <Button
+    :data-size="props.size"
+    :variant="props.variant"
+    :class="cn(inputGroupButtonVariants({ size: props.size }), props.class)"
+  >
+    <slot />
+  </Button>
+</template>

app/components/ui/input-group/InputGroupInput.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <Input
+    data-slot="input-group-control"
+    :class="cn(
+      'flex-1 rounded-none border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-transparent ring-offset-transparent dark:bg-transparent',
+      props.class,
+    )"
+  />
+</template>

app/components/ui/input-group/InputGroupText.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <span
+    :class="cn(
+      'text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4',
+      props.class,
+    )"
+  >
+    <slot />
+  </span>
+</template>

app/components/ui/input-group/InputGroupTextarea.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <Textarea
+    data-slot="input-group-control"
+    :class="cn(
+      'flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 focus-visible:ring-transparent ring-offset-transparent dark:bg-transparent',
+      props.class,
+    )"
+  />
+</template>

app/components/ui/input-group/index.ts

@@ -0,0 +1,62 @@
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+import type { HTMLAttributes } from "vue";
+import type { ButtonVariants } from "@/components/ui/button";
+
+export { default as InputGroup } from "./InputGroup.vue";
+export { default as InputGroupAddon } from "./InputGroupAddon.vue";
+export { default as InputGroupButton } from "./InputGroupButton.vue";
+export { default as InputGroupInput } from "./InputGroupInput.vue";
+export { default as InputGroupText } from "./InputGroupText.vue";
+export { default as InputGroupTextarea } from "./InputGroupTextarea.vue";
+
+export const inputGroupAddonVariants = cva(
+    "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
+    {
+        variants: {
+            align: {
+                "inline-start":
+                    "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+                "inline-end":
+                    "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+                "block-start":
+                    "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
+                "block-end":
+                    "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5",
+            },
+        },
+        defaultVariants: {
+            align: "inline-start",
+        },
+    },
+);
+
+export type InputGroupVariants = VariantProps<typeof inputGroupAddonVariants>;
+
+export const inputGroupButtonVariants = cva(
+    "text-sm shadow-none flex gap-2 items-center",
+    {
+        variants: {
+            size: {
+                xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
+                sm: "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
+                "icon-xs":
+                    "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+                "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+            },
+        },
+        defaultVariants: {
+            size: "xs",
+        },
+    },
+);
+
+export type InputGroupButtonVariants = VariantProps<
+    typeof inputGroupButtonVariants
+>;
+
+export interface InputGroupButtonProps {
+    variant?: ButtonVariants["variant"];
+    size?: InputGroupButtonVariants["size"];
+    class?: HTMLAttributes["class"];
+}