feat(app): changes view

packages/app/src/components/file-tree.tsx

@@ -18,7 +18,7 @@ export default function FileTree(props: {
     <Dynamic
       component={p.as ?? "div"}
       classList={{
-        "p-0.5 w-full flex items-center gap-x-2 hover:bg-background-panel cursor-pointer": true,
+        "p-0.5 w-full flex items-center gap-x-2 hover:bg-background-element cursor-pointer": true,
         "bg-background-element": local.file.active()?.path === p.node.path,
         [props.nodeClass ?? ""]: !!props.nodeClass,
       }}

packages/app/src/context/local.tsx

@@ -163,7 +163,7 @@ function init() {
       })
     }
 
-    const open = async (path: string, options?: { pin?: boolean }) => {
+    const open = async (path: string, options?: { pinned?: boolean; view?: LocalFile["view"] }) => {
       const relative = path.replace(sync.data.path.directory + "/", "")
       if (!store.node[relative]) {
         const parent = relative.split("/").slice(0, -1).join("/")
@@ -181,7 +181,8 @@ function init() {
         ]
       })
       setStore("active", relative)
-      if (options?.pin) setStore("node", path, "pinned", true)
+      if (options?.pinned) setStore("node", path, "pinned", true)
+      if (options?.view && store.node[relative].view === undefined) setStore("node", path, "view", options.view)
       if (store.node[relative].loaded) return
       return load(relative)
     }
@@ -297,6 +298,7 @@ function init() {
         setStore("node", path, "selectedChange", index)
       },
       changed,
+      changes,
       status,
       children(path: string) {
         return Object.values(store.node).filter(

packages/app/src/pages/index.tsx

@@ -259,7 +259,26 @@ export default function Page() {
             <FileTree path="" onFileClick={handleFileClick} />
           </Tabs.Content>
           <Tabs.Content value="changes" class="grow min-h-0 py-2 bg-background">
-            <div class="px-2 text-xs text-text-muted">No changes yet</div>
+            <div class="text-xs text-text-muted">
+              <ul class="">
+                <For each={[...local.file.changes()]}>
+                  {(path) => (
+                    <li>
+                      <button
+                        onClick={() => local.file.open(path, { view: "diff-unified", pinned: true })}
+                        class="w-full flex items-center px-2 py-0.5 gap-x-2 text-text-muted grow min-w-0 cursor-pointer hover:bg-background-element"
+                      >
+                        <FileIcon node={{ path, type: "file" }} class="shrink-0 size-3" />
+                        <span class="text-xs text-text whitespace-nowrap">{getFilename(path)}</span>
+                        <span class="text-xs text-text-muted/60 whitespace-nowrap truncate min-w-0">
+                          {getDirectory(path)}
+                        </span>
+                      </button>
+                    </li>
+                  )}
+                </For>
+              </ul>
+            </div>
           </Tabs.Content>
         </Tabs>
       </div>
@@ -579,7 +598,7 @@ export default function Page() {
             </div>
           )}
           onClose={() => setStore("fileSelectOpen", false)}
-          onSelect={(x) => (x ? local.file.open(x, { pin: true }) : undefined)}
+          onSelect={(x) => (x ? local.file.open(x, { pinned: true }) : undefined)}
         />
       </Show>
     </div>