Lite: improve selection handling and add branch selection with diff view

apps/lite/AGENTS.md

@@ -5,3 +5,19 @@ Typechecking is the fastest way to validate that everything is okay. Always run
 ```console
 $ pnpm -F @gitbutler/lite check
 ```
+
+## Components
+
+Memoization utilities such as `useMemo`, `useCallback`, and `React.memo` are redundant as we use React Compiler.
+
+Component definitions should follow this pattern, optionally destructuring `p`:
+
+```tsx
+type Props = {
+  ...
+};
+
+export const MyComponent: FC<Props> = (p) => {
+  // [...]
+};
+```

apps/lite/ui/src/ChangeUnit.ts

@@ -1,9 +1,9 @@
 export type ChangeUnit =
 	| {
-			_tag: "commit";
+			_tag: "Commit";
 			commitId: string;
 	  }
 	| {
-			_tag: "changes";
+			_tag: "Changes";
 			stackId: string | null;
 	  };

apps/lite/ui/src/global.css

@@ -11,13 +11,19 @@ body {
 input,
 textarea,
 select {
+	padding: 0;
+	border: none;
+	background: none;
+	color: inherit;
 	font: inherit;
 	line-height: inherit;
 }
 
 button {
-	border: 1px solid;
-	border-color: black;
+	padding: 0;
+	border: none;
+	background: none;
+	color: inherit;
 	font: inherit;
 	line-height: inherit;
 	text-align: left;
@@ -42,7 +48,8 @@ p {
 	margin-block: 0;
 }
 
-textarea,
-button {
-	padding: 2px 4px;
+ul,
+ol {
+	padding-left: 0;
+	list-style: none;
 }

apps/lite/ui/src/routes/ProjectPanelLayout.tsx

@@ -72,6 +72,7 @@ export const ProjectPanelLayout: FC<{
 							<div className={sharedStyles.previewPane}>
 								<button
 									type="button"
+									className={sharedStyles.button}
 									onClick={() => {
 										setShowPreviewFullscreen(true);
 									}}
@@ -87,7 +88,7 @@ export const ProjectPanelLayout: FC<{
 			<Dialog.Root open={showPreviewFullscreen} onOpenChange={setShowPreviewFullscreen}>
 				<Dialog.Portal>
 					<Dialog.Popup aria-label="Preview" className={sharedStyles.previewDialogPopup}>
-						<Dialog.Close>
+						<Dialog.Close className={sharedStyles.button}>
 							Close fullscreen ({shortcutKeys.toggleFullscreenPreview}/esc)
 						</Dialog.Close>
 						{preview}

apps/lite/ui/src/routes/project-branches.module.css

@@ -1,8 +1,6 @@
 .branchesList {
 	flex-shrink: 0;
 	width: 350px;
-	padding-left: 0;
-	list-style: none;
 }
 
 .branchesListItem {