refactor(webview): Refactoring Input Form and Timeline Components

packages/vscode-ide-companion/src/webview/styles/tailwind.css

@@ -35,4 +35,123 @@
   .icon-sm {
     @apply w-4 h-4;
   }
-}
+
+  /* Composer: root container anchored to bottom (Claude-style) */
+  .composer-root {
+    @apply absolute bottom-4 left-4 right-4 flex flex-col z-20;
+  }
+
+  /* Composer: form wrapper */
+  .composer-form {
+    @apply relative flex flex-col max-w-[680px] mx-auto rounded-large border shadow-sm transition-colors duration-200;
+    background: var(--app-input-secondary-background);
+    border-color: var(--app-input-border);
+    color: var(--app-input-foreground);
+  }
+  .composer-form:focus-within {
+    /* match existing highlight behavior */
+    border-color: var(--app-input-highlight);
+    box-shadow: 0 1px 2px color-mix(in srgb, var(--app-input-highlight), transparent 80%);
+  }
+
+  /* Composer: input editable area */
+  .composer-input {
+    /* Use plain CSS for font-family inheritance; Tailwind has no `font-inherit` utility */
+    @apply flex-1 self-stretch py-2.5 px-3.5 outline-none overflow-y-auto relative select-text min-h-[1.5em] max-h-[200px] bg-transparent border-0 rounded-none overflow-x-hidden break-words whitespace-pre-wrap;
+    font-family: inherit;
+    font-size: var(--vscode-chat-font-size, 13px);
+    color: var(--app-input-foreground);
+  }
+  .composer-input:empty:before {
+    content: attr(data-placeholder);
+    color: var(--app-input-placeholder-foreground);
+    pointer-events: none;
+    position: absolute;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: calc(100% - 28px);
+  }
+  .composer-input:focus {
+    outline: none;
+  }
+  .composer-input:disabled,
+  .composer-input[contenteditable="false"] {
+    color: #999;
+    cursor: not-allowed;
+  }
+
+  /* Composer: actions row (more compact) */
+  .composer-actions {
+    @apply flex items-center gap-1 min-w-0 z-[1];
+    padding: 5px; /* Claude: padding: 5px */
+    color: var(--app-secondary-foreground);
+    border-top: 0.5px solid var(--app-input-border);
+  }
+
+  /* Text button (icon + label), compact like Claude `.s` */
+  .btn-text-compact {
+    @apply inline-flex items-center gap-1 px-1 py-0.5 rounded-[2px] cursor-pointer appearance-none bg-transparent border-0 min-w-0 shrink text-[0.85em] transition-colors duration-150;
+    color: var(--app-secondary-foreground);
+  }
+  .btn-text-compact--primary {
+    color: var(--app-primary-foreground);
+  }
+  .btn-text-compact:hover {
+    background-color: var(--app-ghost-button-hover-background);
+  }
+  .btn-text-compact:active:not(:disabled) {
+    filter: brightness(1.1);
+  }
+  .btn-text-compact > svg {
+    height: 1em; /* match font size */
+    flex-shrink: 0;
+  }
+  .btn-text-compact > span {
+    display: inline-block;
+    min-width: 0;
+    max-width: 200px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+  }
+
+  @media screen and (max-width: 300px) {
+    .btn-text-compact > svg { display: none; }
+  }
+
+  /* Icon-only button, compact square (26x26) */
+  .btn-icon-compact {
+    @apply inline-flex items-center justify-center w-[26px] h-[26px] p-0 rounded-small bg-transparent border border-transparent cursor-pointer shrink-0 transition-all duration-150;
+    color: var(--app-secondary-foreground);
+  }
+  .btn-icon-compact:hover {
+    background-color: var(--app-ghost-button-hover-background);
+  }
+  .btn-icon-compact > svg {
+    @apply w-4 h-4;
+  }
+  /* Active/primary state for icon button (e.g., Thinking on) */
+  .btn-icon-compact--active {
+    background-color: var(--app-qwen-clay-button-orange);
+    color: var(--app-qwen-ivory);
+  }
+  .btn-icon-compact--active > svg {
+    stroke: var(--app-qwen-ivory);
+    fill: var(--app-qwen-ivory);
+  }
+
+  /* Optional: overlay background layer matching Claude `.si` */
+  .composer-overlay {
+    @apply absolute inset-0 rounded-large z-0;
+    background: var(--app-input-background);
+  }
+
+  /* Optional: send button variant */
+  .btn-send-compact {
+    @apply btn-icon-compact ml-auto hover:brightness-110 disabled:opacity-40 disabled:cursor-not-allowed;
+    background-color: var(--app-qwen-clay-button-orange);
+    color: var(--app-qwen-ivory);
+  }
+}