fix(desktop): prompt input cleanup

2 files changed, 26 insertions, 25 deletions

diff --git a/packages/app/src/components/prompt-input.tsx b/packages/app/src/components/prompt-input.tsx
index 5128fc0e6..9cc1579fb 100644
--- a/packages/app/src/components/prompt-input.tsx
+++ b/packages/app/src/components/prompt-input.tsx
@@ -1343,9 +1343,6 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                 : `Ask anything... "${PLACEHOLDERS[store.placeholder]}"`}
             </div>
           </Show>
-          <div class="absolute top-4.5 right-4">
-            <SessionContextUsage />
-          </div>
         </div>
         <div class="relative p-3 flex items-center justify-between">
           <div class="flex items-center justify-start gap-1">
@@ -1421,7 +1418,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
               </Match>
             </Switch>
           </div>
-          <div class="flex items-center gap-1 absolute right-2 bottom-2">
+          <div class="flex items-center gap-3 absolute right-2 bottom-2">
             <input
               ref={fileInputRef}
               type="file"
@@ -1433,17 +1430,16 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                 e.currentTarget.value = ""
               }}
             />
-            <Show when={store.mode === "normal"}>
-              <Tooltip placement="top" value="Attach image">
-                <IconButton
-                  type="button"
-                  icon="photo"
-                  variant="ghost"
-                  class="h-10 w-8"
-                  onClick={() => fileInputRef.click()}
-                />
-              </Tooltip>
-            </Show>
+            <div class="flex items-center gap-2">
+              <SessionContextUsage />
+              <Show when={store.mode === "normal"}>
+                <Tooltip placement="top" value="Attach image">
+                  <Button type="button" variant="ghost" class="size-6" onClick={() => fileInputRef.click()}>
+                    <Icon name="photo" class="size-4.5" />
+                  </Button>
+                </Tooltip>
+              </Show>
+            </div>
             <Tooltip
               placement="top"
               inactive={!prompt.dirty() && !working()}
@@ -1469,7 +1465,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                 disabled={!prompt.dirty() && store.imageAttachments.length === 0 && !working()}
                 icon={working() ? "stop" : "arrow-up"}
                 variant="primary"
-                class="h-10 w-8"
+                class="h-6 w-4.5"
               />
             </Tooltip>
           </div>
diff --git a/packages/app/src/components/session-context-usage.tsx b/packages/app/src/components/session-context-usage.tsx
index 0fa6bc99c..92dcd20d2 100644
--- a/packages/app/src/components/session-context-usage.tsx
+++ b/packages/app/src/components/session-context-usage.tsx
@@ -35,20 +35,25 @@ export function SessionContextUsage() {
       {(ctx) => (
         <Tooltip
           value={
-            <div class="grid grid-cols-2 gap-x-3 gap-y-1">
-              <span class="opacity-70 text-right">Tokens</span>
-              <span class="text-left">{ctx().tokens}</span>
-              <span class="opacity-70 text-right">Usage</span>
-              <span class="text-left">{ctx().percentage ?? 0}%</span>
-              <span class="opacity-70 text-right">Cost</span>
-              <span class="text-left">{cost()}</span>
+            <div class="">
+              <div class="flex items-center gap-2">
+                <span class="text-text-invert-strong">{ctx().tokens}</span>
+                <span class="text-text-invert-weak">Tokens</span>
+              </div>
+              <div class="flex items-center gap-2">
+                <span class="text-text-invert-strong">{ctx().percentage ?? 0}%</span>
+                <span class="text-text-invert-weak">Usage</span>
+              </div>
+              <div class="flex items-center gap-2">
+                <span class="text-text-invert-strong">{cost()}</span>
+                <span class="text-text-invert-weak">Cost</span>
+              </div>
             </div>
           }
           placement="top"
         >
-          <div class="flex items-center gap-1.5">
+          <div class="p-1">
             <ProgressCircle size={16} strokeWidth={2} percentage={ctx().percentage ?? 0} />
-            {/* <span class="text-12-medium text-text-weak">{`${ctx().percentage ?? 0}%`}</span> */}
           </div>
         </Tooltip>
       )}