cafe_car 0.1.1 → 0.1.2

data/app/assets/stylesheets/ui/Button.css

@@ -1,12 +1,13 @@
 .Button {
   --background: var(--button);
   --color: var(--color);
+  --darken: rgb(0 0 0 / 0.2);
+  --lighten: rgb(255 255 255 / 0.2);
   background: var(--background);
   color: var(--color);
   border-radius: var(--control-radius);
   padding: var(--half-gap);
-  box-shadow: rgba(34, 32, 29, 0.05) 0px 1px 2px;
-  /* border: 1px solid rgba(255,255,255, 0.3); */
+  box-shadow: inset var(--darken) 0 -1px 0 1px;
   border: 0;
   display: flex;
   align-items: center;
@@ -17,7 +18,7 @@
 .Button:where(:not(.Button-current)):hover {
   cursor: pointer;
   text-decoration: none;
-  box-shadow: rgba(34, 32, 29, 0.1) 0px 1px 2px;
+  box-shadow: inset var(--darken) 0 -2px 0 1px;
   filter: brightness(1.05);
   z-index: 1;
 }
@@ -25,10 +26,9 @@
 .Button:active,
 .Button-current {
   text-decoration: none;
-  box-shadow: rgba(34, 32, 29, 0.1) 0px 1px 2px;
   filter: brightness(0.95);
-  /* border-style: inset; */
-  box-shadow: inset rgba(34, 32, 29, 0.1) 0px 1px 2px;
+  border-bottom-width: 1px;
+  box-shadow: inset var(--darken) 0 1px;
 }
 
 .Button-primary {

data/app/assets/stylesheets/ui/Card.css

@@ -8,8 +8,10 @@
 .Card_Image {
   display: block;
   aspect-ratio: 5/4;
-  background-size: cover;
-  background-position: center;
+  object-position: center;
+  object-fit: cover;
+  overflow: hidden;
+  width: 100%;
   border-top-left-radius: var(--radius);
   border-top-right-radius: var(--radius);
   /* &::before {
@@ -43,7 +45,9 @@
 }
 
 :is(.Card_Head, .Card_Section, .Card_Foot) {
-  & + &, & + form > &, form > & + & {
+  & + &,
+  & + form > &,
+  form > & + & {
     border-top: 1px solid var(--border);
   }
 }

data/app/assets/stylesheets/ui/Chat.css

@@ -0,0 +1,33 @@
+.Chat {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap);
+  padding: var(--gap);
+}
+
+.Chat_Message {
+  padding: var(--gap);
+  border-radius: var(--radius);
+  box-shadow: var(--box-shadow);
+  max-width: 80%;
+
+}
+
+.Chat_Message-local,
+.Chat_Message-right {
+  align-self: end;
+}
+
+.Chat_Message-remote,
+.Chat_Message-left {
+  align-self: start;
+}
+
+.Chat_Message-local {
+  background-color: var(--blue);
+  color: var(--white);
+}
+
+.Chat_Message-remote {
+  background-color: var(--gray);
+}

data/app/assets/stylesheets/ui/Close.css

@@ -0,0 +1,11 @@
+.Close {
+  cursor: pointer;
+  line-height: 1;
+  opacity: 0.3;
+}
+
+.Close:hover {
+  opacity: 0.8;
+  text-decoration: none;
+  alignment-baseline: middle;
+}

data/app/assets/stylesheets/ui/Grid.css

@@ -1,4 +1,6 @@
 .Grid {
+  container: Grid / inline-size;
   display: grid;
   gap: var(--gap);
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 }

data/app/assets/stylesheets/ui/Icon.css

@@ -1,14 +1,14 @@
 @charset "utf-8";
 
 .Icon {
-  vertical-align: bottom;
-  display: flex;
+  vertical-align: text-bottom;
+  display: inline-flex;
   gap: var(--half-gap);
   font-style: inherit;
 
   &::before {
     display: block;
-    content: '';
+    content: "";
     height: 1.5em;
     width: 1.5em;
   }

data/app/assets/stylesheets/ui/Layout.css

@@ -3,35 +3,44 @@
 }
 
 .Layout {
-  display: flex;
-  align-items: start;
+  /* display: flex; */
+  /* align-items: stretch; */
+  flex-grow: 1;
 }
 
 .Layout_Sidebar {
-  --indent: .7rem;
+  --indent: 0.7rem;
 
   width: var(--sidebar-width);
-  position: sticky;
+  /* position: sticky; */
+  position: fixed;
   inset: 0;
+
   overflow: auto;
+  max-height: 100dvh;
+  height: 100%;
 
   display: flex;
   flex-flow: column;
   flex-shrink: 0;
+  align-self: start;
 
   padding: var(--gap);
   white-space: nowrap;
-  transition: margin var(--duration), width var(--duration);
+  transition:
+    margin var(--duration),
+    width var(--duration);
 }
 
 .Layout_Main {
   transition: transform var(--duration);
-  /* margin-left: var(--sidebar-width); */
+  margin-left: var(--sidebar-width);
   display: flex;
   flex-flow: column;
   align-items: stretch;
   flex-grow: 1;
   padding: var(--gap);
+  position: relative;
   z-index: 1;
 }
 
@@ -43,7 +52,6 @@
   height: 40px;
   text-align: center;
   cursor: pointer;
-  vertical-align: center;
   border-color: transparent;
   background: none;
 
@@ -62,7 +70,7 @@
     display: block;
     font-size: 30px;
     line-height: 1;
-    margin-top: -3px;
+    margin-top: -1px;
   }
 }
 
@@ -72,16 +80,15 @@
     transform: translateX(var(--sidebar-width));
   }
 
+  .Layout_Sidebar {
+    margin-left: calc(-1 * var(--sidebar-width));
+  }
+
   body:has(.Layout_Menu:checked) {
     overflow-x: hidden;
   }
 
   body:not(:has(.Layout_Menu:checked)) {
-    .Layout_Sidebar {
-      margin-left: calc(-1 * var(--sidebar-width));
-      /* width: 100vw; */
-    }
-
     .Layout_Main {
       transform: none;
     }

data/app/assets/stylesheets/ui/Modal.css

@@ -1,5 +1,5 @@
 .Modal {
-  z-index: 1;
+  z-index: 9;
   inset: 0;
   display: grid;
   grid-template-columns: fit-content(var(--modal-width));
@@ -10,18 +10,11 @@
   overflow: auto;
   backdrop-filter: blur(8px);
   padding: var(--gap);
-  animation: fade-in 100ms;
-}
-
-.Modal_Close {
-  font-size: 150%;
-  cursor: pointer;
-  line-height: 1;
-}
+  animation: fade-in var(--duration);
 
-.Modal_Close:hover {
-  opacity: .8;
-  text-decoration: none;
+  & > * {
+    min-width: 250px;
+  }
 }
 
 .Modal-fixed {

data/app/assets/stylesheets/ui/Navigation.css

@@ -1,28 +1,36 @@
 .Navigation {
-  --indent: .7em;
-  display: grid;
+  --indent: 0.7em;
+  display: flex;
+  flex-flow: column;
+  flex-grow: 1;
   align-content: start;
 }
 
 .Navigation_Link {
-  padding: .7em;
+  padding: 0.7em;
   position: relative;
   color: inherit;
   display: flex;
   align-items: center;
 }
 
+.Navigation_Link-bottom {
+  margin-top: auto;
+}
 
 .Navigation_Link:is(a):hover,
-.Navigation-current,
+.Navigation_Link-current,
+.Navigation_Link-ancestor,
 .Navigation_Link.current {
   text-decoration: none;
+
   &::after {
-    content: '';
+    content: "";
     display: block;
     position: absolute;
     inset: 3px 0;
     border-radius: var(--control-radius);
+    box-shadow: inset rgb(0 0 0 / 0.2) 0 -2px;
     background: var(--hover);
     z-index: -1;
   }

data/app/assets/stylesheets/ui/Page.css

@@ -2,10 +2,17 @@
   container: Page;
   display: flex;
   flex-flow: wrap;
-  justify-content: stretch;
+  justify-content: start;
   gap: var(--gap);
   background: var(--background);
   border-radius: var(--radius);
+  min-height: 100%;
+  align-content: start;
+}
+
+.Page-center {
+  justify-content: start;
+  padding: var(--gap);
 }
 
 .Page_Head {
@@ -18,6 +25,10 @@
   left: var(--gap);
 }
 
+.Page_Foot {
+  width: 100%;
+}
+
 .Page_Title {
   margin: 0;
 }
@@ -28,21 +39,48 @@
   margin-left: auto;
 }
 
+@keyframes Page_Aside-popup {
+  from {
+    margin-right: -400px;
+    opacity: 0;
+  }
+
+  to {
+    margin-right: 0px;
+    opacity: 1;
+  }
+}
+
 .Page_Aside {
   min-width: 300px;
+  max-width: 720px;
   display: flex;
   flex-flow: column;
   gap: var(--gap);
+
+  &.popup {
+    animation: Page_Aside-popup var(--duration);
+    z-index: 2;
+  }
+
+  &.remove {
+    opacity: 1;
+    margin-right: -400px;
+    pointer-events: none;
+  }
 }
 
 .Page_Body {
-  flex: 1 1 20px;
+  flex: 1 1;
+  width: 0;
   display: flex;
   flex-flow: column;
   gap: var(--gap);
+  /* overflow: auto; */
 }
 
-.Page-slim .Page_Body {
+.Page-slim .Page_Body,
+.Page_Body-slim {
   max-width: 720px;
 }
 
@@ -62,5 +100,6 @@
   .Page_Aside,
   .Page_Foot {
     justify-self: stretch;
+    width: auto;
   }
 }

data/app/assets/stylesheets/ui/Table.css

@@ -4,10 +4,8 @@
   align-items: stretch;
   box-shadow: var(--box-shadow);
   border-radius: var(--radius);
-  width: 100%;
-  overflow: clip;
-  position: relative;
-  z-index: 0;
+  background: var(--card);
+  min-width: min-content;
 }
 
 .Table_Head,
@@ -19,60 +17,29 @@
   grid-column: 1/-1;
 }
 
-.Table_Body {
-  background: var(--card);
-}
-
 .Table_Head {
-  /*overflow: hidden;*/
   z-index: 2;
   white-space: nowrap;
   font-weight: bold;
   position: relative;
-
-  &::before, &::after {
-    content: "";
-    display: block;
-    position: absolute;
-    inset: 0;
-    height: 200%;
-    pointer-events: none;
-  }
-
-  &::before {
-    backdrop-filter: blur(20px);
-    mask-image: linear-gradient(
-      to bottom,
-      black 0 50%,
-      transparent 50% 100%
-    );
-  }
-
-  &::after {
-    backdrop-filter: blur(5px);
-    background: rgba(38, 51, 54, 0.1);
-
-    mask-image: linear-gradient(
-      to bottom,
-      transparent 0 50%,
-      black 50% 51%,
-      transparent 51%
-    );
-  }
+  background: var(--card);
+  border-bottom: solid 2px var(--border);
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
 
   .Table_Cell {
     &:first-child {
-      border-top-left-radius: var(--radius);
+      border-top-left-radius: inherit;
     }
 
     &:last-child {
-      border-top-right-radius: var(--radius);
+      border-top-right-radius: inherit;
     }
 
     &:not(:empty) + &:not(:empty)::before {
       display: block;
       cursor: col-resize;
-      content: '';
+      content: "";
       inset: var(--gap) auto var(--gap) 0;
       position: absolute;
       border-left: 1px solid var(--border);
@@ -85,10 +52,15 @@
   }
 }
 
+.Table_Head-sticky {
+  position: sticky;
+  top: 0;
+}
+
 .Table_Row {
   align-items: center;
 
-  &:not(:hover) .Table-shy {
+  &:not(:hover) .Table_Cell-shy {
     visibility: hidden;
   }
 
@@ -98,33 +70,32 @@
 }
 
 .Table_Cell {
+  position: relative;
+  padding: 0.75em 1em;
+  align-items: center;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  padding: 1em;
-  position: relative;
-  display: flex;
-  align-items: center;
   gap: 2px;
 
+  > code {
+    white-space: nowrap;
+  }
+
   &:has(img) {
     padding-block: 0;
   }
 
-  > img, > a > img {
+  > img,
+  > a > img {
     height: 2em;
     /* margin: 4px; */
     display: inline-block;
     border-radius: 99px;
     max-width: none;
   }
-}
 
-.Table-sticky {
-  position: sticky;
-  top: 0;
-}
-
-.Table-controls {
-  text-align: right;
+  &-controls {
+    text-align: right;
+  }
 }

data/app/assets/stylesheets/ui/components.css

@@ -1,7 +1,9 @@
 @import url("Alert.css");
 @import url("Article.css");
 @import url("Button.css");
+@import url("Close.css");
 @import url("Card.css");
+@import url("Chat.css");
 @import url("Code.css");
 @import url("Controls.css");
 @import url("Error.css");

data/app/controllers/cafe_car/examples_controller.rb

@@ -12,7 +12,7 @@ module CafeCar
     def index
       @examples = view_context.template_glob("cafe_car/examples/ui/*")
         .map { _1.name.sub(/\..+$/, "") }
-        .to_h { [_1.camelize, "cafe_car/examples/ui/#{_1}"] }
+        .to_h { [ _1.camelize, "cafe_car/examples/ui/#{_1}" ] }
     end
 
     private

data/app/controllers/cafe_car/sessions_controller.rb

@@ -0,0 +1,30 @@
+module CafeCar
+  class SessionsController < const(:ApplicationController)
+    include Controller
+
+    cafe_car model: CafeCar[:Session]
+    rate_limit to: 10, within: 3.minutes, only: :create # , with: -> { redirect_to new_session_path, alert: "Try again later." }
+    before_action :skip_policy_scope, except: :index
+
+    after_create :persist_session
+    after_destroy :terminate_session
+
+    def create
+      run_callbacks(:create) { object.save! }
+      respond_with object, location: after_authentication_url
+    end
+
+    def destroy
+      run_callbacks(:destroy) { object.destroy! }
+      respond_with object, location: main_app.root_path
+    end
+
+    private
+
+    def find_object
+      self.object = current_session
+    end
+
+    def build_object = find_object
+  end
+end

data/app/controllers/concerns/cafe_car/authentication.rb

@@ -0,0 +1,61 @@
+module CafeCar
+  module Authentication
+    extend ActiveSupport::Concern
+
+    included do
+      helper_method :authenticated?, :current_user, :current_session
+    end
+
+    private
+
+    # Sessions/login are opt-in: a host enables them by running the
+    # `cafe_car:sessions` generator and exposing the session routes. When that
+    # infrastructure is absent we can't redirect to a login page, so callers
+    # fall back to 403 Forbidden instead of 500ing on a missing route.
+    def sessions_available?
+      respond_to?(:new_session_path) && CafeCar.sessions_available?
+    rescue StandardError
+      false
+    end
+
+    def authenticated?
+      current_user
+    end
+
+    def current_user
+      current_session.user
+    end
+
+    def current_session
+      CafeCar[:Current].session ||= find_session_by_cookie || build_session
+    end
+
+    def build_session
+      CafeCar[:Session].new user_agent: request.user_agent,
+                            ip_address: request.remote_ip
+    end
+
+    def terminate_session
+      CafeCar[:Current].session.destroy!
+      CafeCar[:Current].session = nil
+      cookies.delete(:session_id)
+    end
+
+    def persist_session
+      cookies.signed.permanent[:session_id] = { value: current_session.id, httponly: true, same_site: :lax }
+    end
+
+    def find_session_by_cookie
+      cookies.signed[:session_id].try { Session.find(_1) }
+    end
+
+    def request_authentication
+      session[:return_to_after_authenticating] = request.url
+      redirect_to new_session_path, warning: t(:auth_required, new_session: t(:new_session))
+    end
+
+    def after_authentication_url
+      session.delete(:return_to_after_authenticating) || root_url
+    end
+  end
+end

data/app/javascript/cafe_car.js

@@ -16,29 +16,34 @@ addEventListener("mousedown", event => {
 })
 
 addEventListener("mouseup", event => {
-  if (event.target === window.mouseDownTarget && event.target.matches(".Modal_Close, .Modal")) {
+  let isClose = event.target.closest(".Close") || event.target.matches(".Modal")
+  if (isClose && event.target === window.mouseDownTarget) {
     event.preventDefault()
     event.stopPropagation()
-    event.target.closest(".Modal").classList.add("remove")
+    event.target.closest(".popup").classList.add("remove")
   }
 }, { capture: true })
 
 addEventListener("keydown", event => {
   switch (event.key) {
     case "Escape":
-      let modal = event.target.closest(".Modal") ||
-        last(document.querySelectorAll(".Modal-fixed"))
-      if (modal) modal.classList.add("remove");
+      let popup = event.target.closest(".popup") ||
+        last(document.querySelectorAll(".popup"))
+      if (popup) popup.classList.add("remove");
   }
 })
 
-addEventListener("animationend", event => {
-  if (event.target.matches(".remove")) event.target.remove()
-})
+function animationEnd({ target }) {
+  if (target.matches(".remove")) target.remove()
+  else if (target.matches(".popup")) {
+    let input = target.querySelector("input:not([type=hidden]), textarea")
+    input?.focus()
+    input?.setSelectionRange(-1, -1)
+  }
+}
 
-addEventListener("transitionend", event => {
-  if (event.target.matches(".remove")) event.target.remove()
-})
+addEventListener("animationend", animationEnd)
+addEventListener("transitionend", animationEnd)
 
 // NOTE: field-sizing property is used instead
 // function adjustHeight(textarea) {