nandi/frq · 5326d79

modified deps.edn +6 -2 Viewed

@@ -2,12 +2,16 @@
2	2
3	3	;; glimmer owns the reactive half (ratom, components, reconciler);
4	4	;; glimmer-vidya paints it as Vidya/egui through libvidya's retained-tree ABI.
5		- ;; Our fork of glimmer, until the reconciler fix in it lands upstream: a
	5	+ ;; Our fork of glimmer, until the reconciler fixes in it land upstream. A
6	6	;; component unmounted between a cell firing and the queued render running
7	7	;; used to render anyway, into widgets the backend had already freed and
8	8	;; handed out again — which took the message list apart in a busy channel.
	9	+ ;; And replacing a native node with one of another tag left every watcher
	10	+ ;; under it subscribed, so swapping the phone layout for the split one and
	11	+ ;; back shredded the chat: one component's props painted onto another's
	12	+ ;; widget.
9	13	:deps {jolt-lang/glimmer {:git/url "https://gitlab.com/nandithebull/glimmer"
10		- :git/sha "4e733aa26343cef0478d8dfd3f2b76c0113b0969"}
	14	+ :git/sha "399df371c790d690fb6e4560c3d4d7f838502857"}
11	15	nandi/glimmer-vidya {:local/root "../vidya/glimmer"}}
12	16
13	17	;; libvidya, the Rust/egui build (the C/raylib one does not export the tree

   ;; glimmer owns the reactive half (ratom, components, reconciler);
   ;; glimmer-vidya paints it as Vidya/egui through libvidya's retained-tree ABI.
-- ;; Our fork of glimmer, until the reconciler fix in it lands upstream: a
++ ;; Our fork of glimmer, until the reconciler fixes in it land upstream. A
   ;; component unmounted between a cell firing and the queued render running
   ;; used to render anyway, into widgets the backend had already freed and
   ;; handed out again — which took the message list apart in a busy channel.
++ ;; And replacing a native node with one of another tag left every watcher
++ ;; under it subscribed, so swapping the phone layout for the split one and
++ ;; back shredded the chat: one component's props painted onto another's
++ ;; widget.
   :deps {jolt-lang/glimmer   {:git/url "https://gitlab.com/nandithebull/glimmer"
--                             :git/sha "4e733aa26343cef0478d8dfd3f2b76c0113b0969"}
++                             :git/sha "399df371c790d690fb6e4560c3d4d7f838502857"}
          nandi/glimmer-vidya {:local/root "../vidya/glimmer"}}
   ;; libvidya, the Rust/egui build (the C/raylib one does not export the tree

modified src/frq/app.jolt +65 -8 Viewed

@@ -584,7 +584,13 @@
584	584	;; bottom of a screen wants is above it, not beneath it.
585	585	[:vbox {:spacing 8 :margin 12 :margin-bottom 4}
586	586	[:hbox {:spacing 8}
587		- [:button {:label "← Chats" :on-click #(reset! s/screen :chats)}]
	587	+ ;; The way back to the list, on a window with room for one thing at a
	588	+ ;; time. Beside the list there is nothing to go back to, so the button
	589	+ ;; goes — in a wrapper of its own, since a child that comes and goes
	590	+ ;; would otherwise renumber the row for the reconciler.
	591	+ [:vbox {:key :back}
	592	+ (when-not (s/wide?)
	593	+ [:button {:label "← Chats" :on-click #(reset! s/screen :chats)}])]
588	594	[:title {:label (or name "Chat")}]]
589	595	[error-note]
590	596	;; :reserve leaves room for everything below: the jump button's row, the
@@ -660,6 +666,46 @@
660	666	:on-activate s/send-draft!}]
661	667	[:button {:label "Send" :kind :primary :on-click s/send-draft!}]]]))
662	668
	669	+;; ---------------------------------------------------------------- split
	670	+
	671	+(def ^:private sidebar-width 320)
	672	+
	673	+(defn- no-chat-pane
	674	+ "What fills the second pane before a conversation has been picked. The pane
	675	+ is there either way — a list that widened into two columns and back again as
	676	+ channels were opened would be a worse answer than an empty half."
	677	+ []
	678	+ [:vbox {:spacing 8 :margin 12}
	679	+ [:title {:label "frq"}]
	680	+ [:card {} [:dim-label {:label "Pick a conversation on the left."}]]])
	681	+
	682	+(defn split-screen
	683	+ "The chats list and the conversation side by side, for a window wide enough
	684	+ to hold both.
	685	+
	686	+ Same components as the narrow layout, in a row instead of one at a time: the
	687	+ list keeps its own scroll and its own tab bar, and the conversation keeps the
	688	+ compose bar pinned under a backlog that scrolls on its own.
	689	+
	690	+ Both panes take `:fill-height`: a column in a row is otherwise as tall as the
	691	+ row, which at the moment it is placed is one button — and the list and the
	692	+ message backlog both size themselves against the height they are handed.
	693	+
	694	+ Only the list is given a width. The conversation takes what is left, rather
	695	+ than the window's width minus the list's: the list costs a little more than
	696	+ its 320 (its page has padding of its own), and a second column asking for
	697	+ more than remains is wrapped onto a row below — painting the whole
	698	+ conversation off the bottom of the window, which reads exactly like a
	699	+ conversation that has gone missing."
	700	+ []
	701	+ [:hbox {:spacing 0 :wrap false}
	702	+ [:vbox {:key :list :width-request sidebar-width :fill-height true}
	703	+ [chats-screen]]
	704	+ [:vbox {:key :chat :fill-height true}
	705	+ (if @s/current
	706	+ [chat-screen]
	707	+ [no-chat-pane])]])
	708	+
663	709	;; ---------------------------------------------------------------- discover
664	710
665	711	(defn discover-screen []
@@ -719,13 +765,17 @@
719	765	(cond
720	766	@s/lightbox [lightbox-screen]
721	767	@s/image-picker [image-picker-screen]
722		- :else
723		- (case @s/screen
724		- :connect [connect-screen]
725		- :chat [chat-screen]
726		- :discover [discover-screen]
727		- :settings [settings-screen]
728		- [chats-screen])))
	768	+ ;; Wide enough for both, and on one of the two screens that are halves of
	769	+ ;; the same thing: the list and the conversation it opens. Discover and
	770	+ ;; settings stay whole screens — they are somewhere else, not the other
	771	+ ;; half of here.
	772	+ (and (s/wide?) (contains? #{:chats :chat} @s/screen)) [split-screen]
	773	+ :else (case @s/screen
	774	+ :connect [connect-screen]
	775	+ :chat [chat-screen]
	776	+ :discover [discover-screen]
	777	+ :settings [settings-screen]
	778	+ [chats-screen])))
729	779
730	780	(defn -main [& _]
731	781	;; Before the window: the rooms this client has been in, and a saved sign-in
@@ -739,4 +789,11 @@
739	789	;; user should be looking at while this happens, and if it fails, the
740	790	;; error lands somewhere visible.
741	791	(vidya/after! 150 s/connect!))
	792	+ ;; The window's width, into a ratom, a few times a second. Polled rather than
	793	+ ;; delivered: the backend reports a size by writing it onto the window node,
	794	+ ;; and only what a component derefs re-renders — so the layout follows a drag
	795	+ ;; of the window's edge without every frame touching the tree.
	796	+ (vidya/every! 200 #(let [w (vidya/window-width)]
	797	+ (when (not= w @s/window-width)
	798	+ (reset! s/window-width w))))
742	799	(ui/run app :title "frq" :width 520 :height 860))

      ;; bottom of a screen wants is above it, not beneath it.
      [:vbox {:spacing 8 :margin 12 :margin-bottom 4}
       [:hbox {:spacing 8}
--      [:button {:label "← Chats" :on-click #(reset! s/screen :chats)}]
++      ;; The way back to the list, on a window with room for one thing at a
++      ;; time. Beside the list there is nothing to go back to, so the button
++      ;; goes — in a wrapper of its own, since a child that comes and goes
++      ;; would otherwise renumber the row for the reconciler.
++      [:vbox {:key :back}
++       (when-not (s/wide?)
++         [:button {:label "← Chats" :on-click #(reset! s/screen :chats)}])]
        [:title {:label (or name "Chat")}]]
       [error-note]
       ;; :reserve leaves room for everything below: the jump button's row, the
                 :on-activate s/send-draft!}]
        [:button {:label "Send" :kind :primary :on-click s/send-draft!}]]]))
++;; ---------------------------------------------------------------- split
++
++(def ^:private sidebar-width 320)
++
++(defn- no-chat-pane
++  "What fills the second pane before a conversation has been picked. The pane
++  is there either way — a list that widened into two columns and back again as
++  channels were opened would be a worse answer than an empty half."
++  []
++  [:vbox {:spacing 8 :margin 12}
++   [:title {:label "frq"}]
++   [:card {} [:dim-label {:label "Pick a conversation on the left."}]]])
++
++(defn split-screen
++  "The chats list and the conversation side by side, for a window wide enough
++  to hold both.
++
++  Same components as the narrow layout, in a row instead of one at a time: the
++  list keeps its own scroll and its own tab bar, and the conversation keeps the
++  compose bar pinned under a backlog that scrolls on its own.
++
++  Both panes take `:fill-height`: a column in a row is otherwise as tall as the
++  row, which at the moment it is placed is one button — and the list and the
++  message backlog both size themselves against the height they are handed.
++
++  Only the list is given a width. The conversation takes what is left, rather
++  than the window's width minus the list's: the list costs a little more than
++  its 320 (its page has padding of its own), and a second column asking for
++  more than remains is wrapped onto a row below — painting the whole
++  conversation off the bottom of the window, which reads exactly like a
++  conversation that has gone missing."
++  []
++  [:hbox {:spacing 0 :wrap false}
++   [:vbox {:key :list :width-request sidebar-width :fill-height true}
++    [chats-screen]]
++   [:vbox {:key :chat :fill-height true}
++    (if @s/current
++      [chat-screen]
++      [no-chat-pane])]])
++
  ;; ---------------------------------------------------------------- discover
  (defn discover-screen []
    (cond
      @s/lightbox [lightbox-screen]
      @s/image-picker [image-picker-screen]
--    :else
++    ;; Wide enough for both, and on one of the two screens that are halves of
--    (case @s/screen
++    ;; the same thing: the list and the conversation it opens. Discover and
--      :connect [connect-screen]
++    ;; settings stay whole screens — they are somewhere else, not the other
--      :chat [chat-screen]
++    ;; half of here.
--      :discover [discover-screen]
++    (and (s/wide?) (contains? #{:chats :chat} @s/screen)) [split-screen]
--      :settings [settings-screen]
++    :else (case @s/screen
--      [chats-screen])))
++            :connect [connect-screen]
++            :chat [chat-screen]
++            :discover [discover-screen]
++            :settings [settings-screen]
++            [chats-screen])))
  (defn -main [& _]
    ;; Before the window: the rooms this client has been in, and a saved sign-in
      ;; user should be looking at while this happens, and if it fails, the
      ;; error lands somewhere visible.
      (vidya/after! 150 s/connect!))
++  ;; The window's width, into a ratom, a few times a second. Polled rather than
++  ;; delivered: the backend reports a size by writing it onto the window node,
++  ;; and only what a component derefs re-renders — so the layout follows a drag
++  ;; of the window's edge without every frame touching the tree.
++  (vidya/every! 200 #(let [w (vidya/window-width)]
++                       (when (not= w @s/window-width)
++                         (reset! s/window-width w))))
    (ui/run app :title "frq" :width 520 :height 860))

modified src/frq/state.jolt +31 -2 Viewed

@@ -88,6 +88,32 @@
88	88	(defonce lightbox (atom nil)) ; {:path :url}
89	89	(defonce join-input (atom ""))
90	90
	91	+;; The window's content width in points, polled from the backend a few times a
	92	+;; second. The app is laid out for a phone-width window, and this is what lets
	93	+;; a wide one be more than a phone with margins: past `wide-width` the channel
	94	+;; list and the conversation are both on screen instead of taking turns.
	95	+(defonce window-width (atom 0))
	96	+
	97	+;; Where the second pane starts paying for itself. Below this a 300pt list
	98	+;; beside a conversation leaves the messages narrower than the phone layout
	99	+;; they were written for.
	100	+(def wide-width 900)
	101	+
	102	+(defn wide?
	103	+ "True while the window has room for the list and a conversation at once."
	104	+ []
	105	+ (>= @window-width wide-width))
	106	+
	107	+(defn chat-visible?
	108	+ "Whether the conversation in `current` is on screen.
	109	+
	110	+ On a narrow window that is the chat screen alone. On a wide one the chats
	111	+ screen shows it too, in the pane beside the list — so this, and not the
	112	+ screen, is what decides whether an arriving line counts as unread."
	113	+ []
	114	+ (or (= :chat @screen)
	115	+ (and (wide?) (= :chats @screen))))
	116	+
91	117	;; Whether the chat view is showing the newest line, and a counter the view
92	118	;; watches to be told to go back to it. A counter rather than a flag: a flag
93	119	;; would need clearing, and there is no frame in which to clear it.
@@ -150,7 +176,7 @@
150	176	(swap! channels
151	177	(fn [m]
152	178	(let [m (ensure-channel m channel)
153		- viewing? (and (= :chat @screen) (= channel @current))]
	179	+ viewing? (and (chat-visible?) (= channel @current))]
154	180	(-> m
155	181	(update-in [channel :messages] conj
156	182	{:from from :text text :system? (= "*" from)
@@ -170,7 +196,10 @@
170	196	buffer stays), and opening one is a request to be in it."
171	197	[name]
172	198	(reset! current name)
173		- (reset! screen :chat)
	199	+ ;; On a wide window the conversation lives in the chats screen's second
	200	+ ;; pane, beside the list; :chat is the narrow window's way of showing it
	201	+ ;; instead of the list, and there is nothing there to trade it for.
	202	+ (reset! screen (if (wide?) :chats :chat))
174	203	;; A picker belongs to the message it was opened on; carrying it into another
175	204	;; buffer would offer to react to something that is no longer on screen.
176	205	(reset! reacting nil)

  (defonce lightbox (atom nil))            ; {:path :url}
  (defonce join-input (atom ""))
++;; The window's content width in points, polled from the backend a few times a
++;; second. The app is laid out for a phone-width window, and this is what lets
++;; a wide one be more than a phone with margins: past `wide-width` the channel
++;; list and the conversation are both on screen instead of taking turns.
++(defonce window-width (atom 0))
++
++;; Where the second pane starts paying for itself. Below this a 300pt list
++;; beside a conversation leaves the messages narrower than the phone layout
++;; they were written for.
++(def wide-width 900)
++
++(defn wide?
++  "True while the window has room for the list and a conversation at once."
++  []
++  (>= @window-width wide-width))
++
++(defn chat-visible?
++  "Whether the conversation in `current` is on screen.
++
++  On a narrow window that is the chat screen alone. On a wide one the chats
++  screen shows it too, in the pane beside the list — so this, and not the
++  screen, is what decides whether an arriving line counts as unread."
++  []
++  (or (= :chat @screen)
++      (and (wide?) (= :chats @screen))))
++
  ;; Whether the chat view is showing the newest line, and a counter the view
  ;; watches to be told to go back to it. A counter rather than a flag: a flag
  ;; would need clearing, and there is no frame in which to clear it.
       (swap! channels
              (fn [m]
                (let [m (ensure-channel m channel)
--                    viewing? (and (= :chat @screen) (= channel @current))]
++                    viewing? (and (chat-visible?) (= channel @current))]
                  (-> m
                      (update-in [channel :messages] conj
                                 {:from from :text text :system? (= "*" from)
    buffer stays), and opening one is a request to be in it."
    [name]
    (reset! current name)
--  (reset! screen :chat)
++  ;; On a wide window the conversation lives in the chats screen's second
++  ;; pane, beside the list; :chat is the narrow window's way of showing it
++  ;; instead of the list, and there is nothing there to trade it for.
++  (reset! screen (if (wide?) :chats :chat))
    ;; A picker belongs to the message it was opened on; carrying it into another
    ;; buffer would offer to react to something that is no longer on screen.
    (reset! reacting nil)

Merge branch 'claude/channel-message-layout-b148bc'