"Did you know?" start screen tips (#5982)

Co-authored-by: Aiden Cline <63023139+rekram1-node@users.noreply.github.com>
Co-authored-by: opencode-agent[bot] <opencode-agent[bot]@users.noreply.github.com>
Co-authored-by: rekram1-node <rekram1-node@users.noreply.github.com>
Co-authored-by: Aiden Cline <aidenpcline@gmail.com>

packages/opencode/src/cli/cmd/tui/routes/home.tsx

@@ -2,23 +2,28 @@ import { Prompt, type PromptRef } from "@tui/component/prompt"
 import { createMemo, Match, onMount, Show, Switch } from "solid-js"
 import { useTheme } from "@tui/context/theme"
 import { Logo } from "../component/logo"
+import { DidYouKnow, randomizeTip } from "../component/did-you-know"
 import { Locale } from "@/util/locale"
 import { useSync } from "../context/sync"
 import { Toast } from "../ui/toast"
 import { useArgs } from "../context/args"
 import { useDirectory } from "../context/directory"
-import { useRoute, useRouteData } from "@tui/context/route"
+import { useRouteData } from "@tui/context/route"
 import { usePromptRef } from "../context/prompt"
 import { Installation } from "@/installation"
+import { useKV } from "../context/kv"
+import { useCommandDialog } from "../component/dialog-command"
 
 // TODO: what is the best way to do this?
 let once = false
 
 export function Home() {
   const sync = useSync()
+  const kv = useKV()
   const { theme } = useTheme()
   const route = useRouteData("home")
   const promptRef = usePromptRef()
+  const command = useCommandDialog()
   const mcp = createMemo(() => Object.keys(sync.data.mcp).length > 0)
   const mcpError = createMemo(() => {
     return Object.values(sync.data.mcp).some((x) => x.status === "failed")
@@ -28,6 +33,27 @@ export function Home() {
     return Object.values(sync.data.mcp).filter((x) => x.status === "connected").length
   })
 
+  const isFirstTimeUser = createMemo(() => sync.data.session.length === 0)
+  const tipsHidden = createMemo(() => kv.get("tips_hidden", false))
+  const showTips = createMemo(() => {
+    // Don't show tips for first-time users
+    if (isFirstTimeUser()) return false
+    return !tipsHidden()
+  })
+
+  command.register(() => [
+    {
+      title: tipsHidden() ? "Show tips" : "Hide tips",
+      value: "tips.toggle",
+      keybind: "tips_toggle",
+      category: "System",
+      onSelect: (dialog) => {
+        kv.set("tips_hidden", !tipsHidden())
+        dialog.clear()
+      },
+    },
+  ])
+
   const Hint = (
     <Show when={connectedMcpCount() > 0}>
       <box flexShrink={0} flexDirection="row" gap={1}>
@@ -50,6 +76,7 @@ export function Home() {
   let prompt: PromptRef
   const args = useArgs()
   onMount(() => {
+    randomizeTip()
     if (once) return
     if (route.initialPrompt) {
       prompt.set(route.initialPrompt)
@@ -77,6 +104,11 @@ export function Home() {
         </box>
         <Toast />
       </box>
+      <Show when={!isFirstTimeUser()}>
+        <Show when={showTips()}>
+          <DidYouKnow />
+        </Show>
+      </Show>
       <box paddingTop={1} paddingBottom={1} paddingLeft={2} paddingRight={2} flexDirection="row" flexShrink={0} gap={2}>
         <text fg={theme.textMuted}>{directory()}</text>
         <box gap={1} flexDirection="row" flexShrink={0}>