`d3fd134`

Add tooltips, dynamic cursors, and fix rendering issues

Add power button tooltips that appear on hover. Implement
dynamic cursor changes: text cursor over input fields,
pointer cursor over clickable elements.

Auto-select first user on startup and skip to password field.
Add login button click handling.

Fix power icon vertical line direction. Clear Cairo path
state in avatar rendering to prevent path leaks between
draws.

Authored by mfwolffe <wolffemf@dukes.jmu.edu> 3 months ago

SHA: d3fd1342cf8fba258f88cdaf6c78ff8b8ccecf4f
Parents: 654cca3
Tree: 6f30f4e

5 changed files

Status	File	+	-
M	`gardm-greeter/src/avatar.rs`	7	0
M	`gardm-greeter/src/icons.rs`	3	4
M	`gardm-greeter/src/main.rs`	142	4
M	`gardm-greeter/src/widgets/power_buttons.rs`	9	0
M	`gardm-greeter/src/widgets/user_list.rs`	14	21

gardm-greeter/src/avatar.rsmodified

      // Create circular clip
      ctx.save()?;
 +    ctx.new_path(); // Clear any previous path
      let radius = size / 2.0;
      ctx.arc(x + radius, y + radius, radius, 0.0, 2.0 * std::f64::consts::PI);
      ctx.clip();
      let cx = x + radius;
      let cy = y + radius;
 +    // Clear any previous path
 +    ctx.new_path();
++
      // Background circle with hue-based color
      let (r, g, b) = hue_to_rgb(hue);
      ctx.set_source_rgb(r * 0.6, g * 0.6, b * 0.6);
  /// Render avatar with border (for selected state)
  pub fn render_avatar_border(ctx: &Context, x: f64, y: f64, size: f64, selected: bool) -> Result<()> {
 +    // Clear any previous path
 +    ctx.new_path();
++
      let radius = size / 2.0;
      let cx = x + radius;
      let cy = y + radius;

gardm-greeter/src/icons.rsmodified

      ctx.arc(cx, cy, radius, PI / 2.0 + gap_angle, 5.0 * PI / 2.0 - gap_angle);
      ctx.stroke().ok();
 -    // Vertical line at top
 -    let line_length = 8.0 * scale;
 -    ctx.move_to(cx, cy - radius + stroke_width);
 -    ctx.line_to(cx, cy - radius + stroke_width - line_length);
 +    // Vertical line from top (outside) going down toward center
 +    ctx.move_to(cx, cy - radius - stroke_width); // Start above the circle gap
 +    ctx.line_to(cx, cy);                         // Go down to center
      ctx.stroke().ok();
+ }

gardm-greeter/src/main.rsmodified

  use render::Renderer;
  use transition::{render_with_fade, FadeOutTransition};
  use widgets::{FocusedField, LoginForm, PowerAction, PowerButtons, SessionSelector, UserList};
 -use window::GreeterWindow;
 +use window::{CursorType, GreeterWindow};
  /// Cursor blink interval
  const CURSOR_BLINK_MS: u64 = 500;
      );
      // Create X11 window
 -    let window = GreeterWindow::new().context("Failed to create window")?;
 +    let mut window = GreeterWindow::new().context("Failed to create window")?;
      let width = window.width();
      let height = window.height();
      tracing::info!(width, height, "Window created");
      // Create user list centered on primary monitor (above login form)
      let mut user_list = UserList::new(users, center_x, center_y);
 +    // Auto-select the first user and fill the form
 +    if let Some(username) = user_list.select_first() {
 +        tracing::info!(username, "Auto-selected first user");
 +        form.set_username(username);
 +        form.focused_field = FocusedField::Password; // Skip to password field
 +    }
++
      // Create session selector (positioned below login form on primary monitor)
      let selector_width = 200.0;
      let selector_x = center_x - selector_width / 2.0;
                  // Power buttons
                  power_buttons.render(ctx)?;
 +                // Power button tooltip
 +                if let Some((action, center_x, top_y)) = power_buttons.hovered_tooltip_info() {
 +                    render_tooltip(ctx, &pango_ctx, &theme, action, center_x, top_y)?;
 +                }
++
                  Ok(())
              })?;
+         }
                      power_buttons.update_hover(mouse_x, mouse_y);
                      session_selector.update_hover(mouse_x, mouse_y);
                      user_list.update_hover(mouse_x, mouse_y);
++
 +                    // Update cursor based on what's being hovered
 +                    let cursor = if form.is_over_input(mouse_x, mouse_y) {
 +                        CursorType::Text
 +                    } else if power_buttons.hovered_action().is_some()
 +                        || form.button_contains(mouse_x, mouse_y)
 +                        || session_selector.button_contains(mouse_x, mouse_y)
 +                        || user_list.contains(mouse_x, mouse_y)
 +                    {
 +                        CursorType::Pointer
 +                    } else {
 +                        CursorType::Default
 +                    };
 +                    window.set_cursor(cursor);
+                 }
                  Event::ButtonPress(e) => {
                      // Check user list clicks first
                      if let Some(username) = user_list.handle_click(click_x, click_y) {
                          tracing::info!(username, "User selected from list");
 -                        form.username = username;
 -                        form.password.clear();
 +                        form.set_username(username);
 +                        form.clear_password();
                          form.focused_field = FocusedField::Password;
                          form.clear_messages();
+                     }
 +                    // Check input field clicks (for cursor placement)
 +                    else if form.handle_input_click(
 +                        click_x,
 +                        click_y,
 +                        &pango_ctx,
 +                        &theme.font_family,
 +                        theme.font_size_normal,
 +                    ) {
 +                        // Click was handled by input field
 +                    }
 +                    // Check login button click
 +                    else if form.button_contains(click_x, click_y) && form.can_submit() {
 +                        // Get selected session exec command
 +                        let session_exec = session_selector
 +                            .selected_exec()
 +                            .unwrap_or("gar-session.sh")
 +                            .to_string();
++
 +                        // Attempt login
 +                        if let Some(fade) = handle_login(
 +                            &mut client,
 +                            &mut form,
 +                            &session_exec,
 +                            config.effective_fade_duration(),
 +                        )
 +                        .await?
 +                        {
 +                            fade_transition = Some(fade);
 +                        }
 +                    }
                      // Check power buttons
                      else if let Some(action) = power_buttons.handle_click(click_x, click_y) {
                          handle_power_action(&mut client, action).await?;
                              form.handle_backspace();
+                         }
 +                        keycodes::DELETE => {
 +                            form.handle_delete();
 +                        }
++
 +                        keycodes::LEFT => {
 +                            let shift = e.state.contains(x11rb::protocol::xproto::KeyButMask::SHIFT);
 +                            form.handle_left(shift);
 +                        }
++
 +                        keycodes::RIGHT => {
 +                            let shift = e.state.contains(x11rb::protocol::xproto::KeyButMask::SHIFT);
 +                            form.handle_right(shift);
 +                        }
++
 +                        keycodes::HOME => {
 +                            let shift = e.state.contains(x11rb::protocol::xproto::KeyButMask::SHIFT);
 +                            form.handle_home(shift);
 +                        }
++
 +                        keycodes::END => {
 +                            let shift = e.state.contains(x11rb::protocol::xproto::KeyButMask::SHIFT);
 +                            form.handle_end(shift);
 +                        }
++
 +                        keycodes::UP | keycodes::DOWN => {
 +                            // Up/down switch between fields
 +                            form.handle_tab();
 +                        }
++
                          _ => {
                              // Regular character key
                              if let Some(c) = keycode_to_char(e.detail, e.state) {
      form.is_loading = false;
      Ok(None)
+ }
++
 +/// Render a tooltip above a power button
 +fn render_tooltip(
 +    ctx: &cairo::Context,
 +    pango_ctx: &pango::Context,
 +    theme: &theme::Theme,
 +    action: PowerAction,
 +    center_x: f64,
 +    top_y: f64,
 +) -> Result<()> {
 +    use crate::render::rounded_rectangle;
 +    use pango::{FontDescription, Layout};
++
 +    let text = match action {
 +        PowerAction::Shutdown => "Shut Down",
 +        PowerAction::Reboot => "Restart",
 +        PowerAction::Suspend => "Sleep",
 +    };
++
 +    // Create text layout to measure
 +    let layout = Layout::new(pango_ctx);
 +    let mut font = FontDescription::new();
 +    font.set_family(&theme.font_family);
 +    font.set_size(11 * pango::SCALE);
 +    layout.set_font_description(Some(&font));
 +    layout.set_text(text);
++
 +    let (text_w, text_h) = layout.pixel_size();
 +    let padding_x = 10.0;
 +    let padding_y = 6.0;
 +    let tooltip_width = text_w as f64 + padding_x * 2.0;
 +    let tooltip_height = text_h as f64 + padding_y * 2.0;
 +    let tooltip_x = center_x - tooltip_width / 2.0;
 +    let tooltip_y = top_y - tooltip_height - 8.0; // 8px gap above button
++
 +    // Background
 +    ctx.set_source_rgba(0.1, 0.1, 0.1, 0.9);
 +    rounded_rectangle(ctx, tooltip_x, tooltip_y, tooltip_width, tooltip_height, 6.0);
 +    ctx.fill()?;
++
 +    // Border
 +    ctx.set_source_rgba(0.3, 0.3, 0.3, 0.8);
 +    rounded_rectangle(ctx, tooltip_x, tooltip_y, tooltip_width, tooltip_height, 6.0);
 +    ctx.set_line_width(1.0);
 +    ctx.stroke()?;
++
 +    // Text
 +    ctx.set_source_rgb(0.95, 0.95, 0.95);
 +    ctx.move_to(tooltip_x + padding_x, tooltip_y + padding_y);
 +    pangocairo::functions::show_layout(ctx, &layout);
++
 +    Ok(())
 +}

gardm-greeter/src/widgets/power_buttons.rsmodified

              .find(|b| b.hovered)
              .map(|b| b.action)
+     }
++
 +    /// Get the hovered button info for tooltip rendering (action, center_x, top_y)
 +    pub fn hovered_tooltip_info(&self) -> Option<(PowerAction, f64, f64)> {
 +        self.buttons.iter().find(|b| b.hovered).map(|b| {
 +            let center_x = b.x + b.size / 2.0;
 +            let top_y = b.y;
 +            (b.action, center_x, top_y)
 +        })
 +    }
+ }

gardm-greeter/src/widgets/user_list.rsmodified

      get_initials, render_avatar_border, render_avatar_fallback, render_avatar_image,
      string_to_hue, AvatarCache,
  };
 -use crate::render::rounded_rectangle;
  use crate::theme::Theme;
  use anyhow::Result;
  use cairo::Context;
          };
          // Center horizontally on primary monitor, position above center
 +        // Login form is 320px tall, centered, so top is at center_y - 160
 +        // Avatar (64px) + gap (8px) + name text (~20px) = ~92px
 +        // Need enough clearance above the login form
          let x = center_x - total_width / 2.0;
 -        let y = center_y - 220.0; // Above the login form
 +        let y = center_y - 280.0; // Above the login form with breathing room
          Self {
              users,
          self.users.is_empty()
+     }
 +    /// Select the first user and return their username
 +    pub fn select_first(&mut self) -> Option<String> {
 +        if self.users.is_empty() {
 +            None
 +        } else {
 +            self.selected_index = Some(0);
 +            Some(self.users[0].name.clone())
 +        }
 +    }
++
      /// Get the selected user's username
      pub fn selected_username(&self) -> Option<&str> {
          self.selected_index
              let item_y = self.y;
              let is_selected = self.selected_index == Some(i);
 -            let is_hovered = self.hovered_index == Some(i);
+-
 -            // Hover/selection background
 -            if is_hovered || is_selected {
 -                let bg_padding = 8.0;
 -                let bg_x = item_x - bg_padding;
 -                let bg_y = item_y - bg_padding;
 -                let bg_w = self.avatar_size + bg_padding * 2.0;
 -                let bg_h = self.avatar_size + 28.0 + bg_padding * 2.0; // Include name
+-
 -                if is_selected {
 -                    let ac = &theme.accent;
 -                    ctx.set_source_rgba(ac.r, ac.g, ac.b, 0.3);
 -                } else {
 -                    ctx.set_source_rgba(1.0, 1.0, 1.0, 0.1);
 -                }
 -                rounded_rectangle(ctx, bg_x, bg_y, bg_w, bg_h, theme.corner_radius * 0.75);
 -                ctx.fill()?;
 -            }
              // Avatar
              let home = user.home.to_str();