feat(app): add app version display to settings (#10095)

packages/app/src/components/dialog-settings.tsx

@@ -3,6 +3,7 @@ import { Dialog } from "@opencode-ai/ui/dialog"
 import { Tabs } from "@opencode-ai/ui/tabs"
 import { Icon } from "@opencode-ai/ui/icon"
 import { useLanguage } from "@/context/language"
+import { usePlatform } from "@/context/platform"
 import { SettingsGeneral } from "./settings-general"
 import { SettingsKeybinds } from "./settings-keybinds"
 import { SettingsPermissions } from "./settings-permissions"
@@ -14,11 +15,21 @@ import { SettingsMcp } from "./settings-mcp"
 
 export const DialogSettings: Component = () => {
   const language = useLanguage()
+  const platform = usePlatform()
 
   return (
     <Dialog size="x-large">
       <Tabs orientation="vertical" variant="settings" defaultValue="general" class="h-full settings-dialog">
         <Tabs.List>
+          <div
+            style={{
+              display: "flex",
+              "flex-direction": "column",
+              "justify-content": "space-between",
+              height: "100%",
+              width: "100%",
+            }}
+          >
             <div
               style={{
                 display: "flex",
@@ -26,7 +37,6 @@ export const DialogSettings: Component = () => {
                 gap: "12px",
                 width: "100%",
                 "padding-top": "12px",
-              "padding-bottom": "12px",
               }}
             >
               <Tabs.SectionTitle>{language.t("settings.section.desktop")}</Tabs.SectionTitle>
@@ -41,6 +51,11 @@ export const DialogSettings: Component = () => {
                 </Tabs.Trigger>
               </div>
             </div>
+            <div class="flex flex-col gap-1 pl-1 py-1 text-12-medium text-text-weak">
+              <span>OpenCode Desktop</span>
+              <span class="text-11-regular">v{platform.version}</span>
+            </div>
+          </div>
           {/* <Tabs.SectionTitle>Server</Tabs.SectionTitle> */}
           {/* <Tabs.Trigger value="permissions"> */}
           {/*   <Icon name="checklist" /> */}