wip(app): line selection

packages/ui/src/components/markdown.css

@@ -60,8 +60,8 @@
   ol {
     margin-top: 0.5rem;
     margin-bottom: 1rem;
-    padding-left: 0;
-    list-style-position: inside;
+    padding-left: 1.5rem;
+    list-style-position: outside;
   }
 
   ul {
@@ -76,6 +76,16 @@
     margin-bottom: 0.5rem;
   }
 
+  li > p:first-child {
+    display: inline;
+    margin: 0;
+  }
+
+  li > p + p {
+    display: block;
+    margin-top: 0.5rem;
+  }
+
   li::marker {
     color: var(--text-weak);
   }

packages/ui/src/components/popover.tsx

@@ -13,6 +13,7 @@ export interface PopoverProps<T extends ValidComponent = "div">
   description?: JSXElement
   class?: ComponentProps<"div">["class"]
   classList?: ComponentProps<"div">["classList"]
+  portal?: boolean
 }
 
 export function Popover<T extends ValidComponent = "div">(props: PopoverProps<T>) {
@@ -26,40 +27,45 @@ export function Popover<T extends ValidComponent = "div">(props: PopoverProps<T>
     "class",
     "classList",
     "children",
+    "portal",
   ])
 
+  const content = () => (
+    <Kobalte.Content
+      data-component="popover-content"
+      classList={{
+        ...(local.classList ?? {}),
+        [local.class ?? ""]: !!local.class,
+      }}
+    >
+      {/* <Kobalte.Arrow data-slot="popover-arrow" /> */}
+      <Show when={local.title}>
+        <div data-slot="popover-header">
+          <Kobalte.Title data-slot="popover-title">{local.title}</Kobalte.Title>
+          <Kobalte.CloseButton
+            data-slot="popover-close-button"
+            as={IconButton}
+            icon="close"
+            variant="ghost"
+            aria-label={i18n.t("ui.common.close")}
+          />
+        </div>
+      </Show>
+      <Show when={local.description}>
+        <Kobalte.Description data-slot="popover-description">{local.description}</Kobalte.Description>
+      </Show>
+      <div data-slot="popover-body">{local.children}</div>
+    </Kobalte.Content>
+  )
+
   return (
     <Kobalte gutter={4} {...rest}>
       <Kobalte.Trigger as={local.triggerAs ?? "div"} data-slot="popover-trigger" {...(local.triggerProps as any)}>
         {local.trigger}
       </Kobalte.Trigger>
-      <Kobalte.Portal>
-        <Kobalte.Content
-          data-component="popover-content"
-          classList={{
-            ...(local.classList ?? {}),
-            [local.class ?? ""]: !!local.class,
-          }}
-        >
-          {/* <Kobalte.Arrow data-slot="popover-arrow" /> */}
-          <Show when={local.title}>
-            <div data-slot="popover-header">
-              <Kobalte.Title data-slot="popover-title">{local.title}</Kobalte.Title>
-              <Kobalte.CloseButton
-                data-slot="popover-close-button"
-                as={IconButton}
-                icon="close"
-                variant="ghost"
-                aria-label={i18n.t("ui.common.close")}
-              />
-            </div>
-          </Show>
-          <Show when={local.description}>
-            <Kobalte.Description data-slot="popover-description">{local.description}</Kobalte.Description>
-          </Show>
-          <div data-slot="popover-body">{local.children}</div>
-        </Kobalte.Content>
-      </Kobalte.Portal>
+      <Show when={local.portal ?? true} fallback={content()}>
+        <Kobalte.Portal>{content()}</Kobalte.Portal>
+      </Show>
     </Kobalte>
   )
 }

packages/ui/src/components/session-review.css

@@ -198,6 +198,7 @@
 
   [data-slot="session-review-diff-wrapper"] {
     position: relative;
+    overflow: hidden;
   }
 
   [data-slot="session-review-comment-anchor"] {
@@ -213,15 +214,15 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background: var(--surface-base);
-    border: 1px solid color-mix(in oklch, var(--icon-info-active) 60%, transparent);
-    color: var(--icon-info-active);
-    box-shadow: var(--shadow-xs-border);
+    background: var(--surface-warning-base);
+    border: 1px solid var(--border-warning-base);
+    color: var(--icon-warning-active);
+    box-shadow: var(--shadow-xs);
     cursor: pointer;
 
     &:hover {
-      background: var(--surface-raised-base-hover);
-      border-color: var(--icon-info-active);
+      background: var(--surface-warning-weak);
+      border-color: var(--border-warning-hover);
     }
 
     &:focus {
@@ -240,6 +241,12 @@
     max-width: 320px;
   }
 
+  [data-slot="session-review-comment-popover"] {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
   [data-slot="session-review-comment-hover-label"],
   [data-slot="session-review-comment-popover-label"] {
     font-family: var(--font-family-sans);

packages/ui/src/components/session-review.tsx

@@ -581,6 +581,7 @@ export const SessionReview = (props: SessionReviewProps) => {
                                 }}
                               >
                                 <Popover
+                                  portal={false}
                                   open={isCommentOpen(comment)}
                                   onOpenChange={(open) => {
                                     if (open) {
@@ -632,6 +633,7 @@ export const SessionReview = (props: SessionReviewProps) => {
                               <Show when={draftTop() !== undefined}>
                                 <div data-slot="session-review-comment-anchor" style={{ top: `${draftTop() ?? 0}px` }}>
                                   <Popover
+                                    portal={false}
                                     open={true}
                                     onOpenChange={(open) => {
                                       if (open) return

packages/ui/src/pierre/index.ts

@@ -32,11 +32,12 @@ const unsafeCSS = `
   --diffs-bg-addition-number: var(--diffs-bg-addition-number-override, light-dark( color-mix(in lab, var(--diffs-bg) 91%, var(--diffs-addition-base)), color-mix(in lab, var(--diffs-bg) 85%, var(--diffs-addition-base))));
   --diffs-bg-addition-hover: var(--diffs-bg-addition-hover-override, light-dark( color-mix(in lab, var(--diffs-bg) 80%, var(--diffs-addition-base)), color-mix(in lab, var(--diffs-bg) 70%, var(--diffs-addition-base))));
   --diffs-bg-addition-emphasis: var(--diffs-bg-addition-emphasis-override, light-dark(rgb(from var(--diffs-addition-base) r g b / 0.07), rgb(from var(--diffs-addition-base) r g b / 0.1)));
-  --diffs-selection-base: var(--text-interactive-base);
-  --diffs-selection-number-fg: light-dark( color-mix(in lab, var(--diffs-selection-base) 65%, var(--diffs-mixer)), color-mix(in lab, var(--diffs-selection-base) 75%, var(--diffs-mixer)));
-  --diffs-bg-selection: var(--diffs-bg-selection-override, rgb(from var(--diffs-selection-base) r g b / 0.18));
-  --diffs-bg-selection-number: var(--diffs-bg-selection-number-override, rgb(from var(--diffs-selection-base) r g b / 0.22));
-  --diffs-bg-selection-text: rgb(from var(--diffs-selection-base) r g b / 0.12);
+  --diffs-selection-base: var(--surface-warning-strong);
+  --diffs-selection-border: var(--border-warning-base);
+  --diffs-selection-number-fg: var(--text-on-warning-strong);
+  --diffs-bg-selection: var(--diffs-bg-selection-override, color-mix(in oklch, var(--surface-warning-base) 65%, transparent));
+  --diffs-bg-selection-number: var(--diffs-bg-selection-number-override, color-mix(in oklch, var(--surface-warning-base) 85%, transparent));
+  --diffs-bg-selection-text: color-mix(in oklch, var(--surface-warning-strong) 20%, transparent);
 }
 
 [data-diffs] ::selection {
@@ -52,6 +53,16 @@ const unsafeCSS = `
   color: var(--diffs-selection-number-fg);
 }
 
+[data-diffs] [data-selected-line] {
+  background-color: var(--diffs-bg-selection);
+  box-shadow: inset 2px 0 0 var(--diffs-selection-border);
+}
+
+[data-diffs] [data-selected-line] [data-column-number] {
+  background-color: var(--diffs-bg-selection-number);
+  color: var(--diffs-selection-number-fg);
+}
+
 [data-diffs-header],
 [data-diffs] {
   [data-separator-wrapper] {

packages/ui/src/styles/base.css

@@ -79,6 +79,11 @@ a {
   color: inherit;
   -webkit-text-decoration: inherit;
   text-decoration: inherit;
+  cursor: default;
+}
+
+*[data-tauri-drag-region] {
+  app-region: drag;
 }
 
 /*