tyiu/notedeck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui crate and chrome sidebar

Browse Source 
Signed-off-by: William Casarin <jb55@jb55.com>
This commit is contained in:
William Casarin
2025-03-26 12:18:44 -07:00
parent 415a052602
commit 9c9b4199f5
38 changed files with 902 additions and 750 deletions
Download Patch File Download Diff File Expand all files Collapse all files

384
crates/notedeck_columns/src/ui/side_panel.rs
View File

@@ -1,35 +1,29 @@
use egui::{
vec2, Button, Color32, InnerResponse, Label, Layout, Margin, RichText, ScrollArea, Separator,
Stroke, ThemePreference, Widget,
vec2, Color32, InnerResponse, Layout, Margin, RichText, ScrollArea, Separator, Stroke, Widget,
};
use tracing::{error, info};
use crate::{
accounts::AccountsRoute,
app::{get_active_columns_mut, get_decks_mut},
app_style::DECK_ICON_SIZE,
colors,
decks::{DecksAction, DecksCache},
nav::SwitchingAction,
route::Route,
support::Support,
};
use notedeck::{Accounts, Images, NotedeckTextStyle, ThemeHandler, UserAccount};
use notedeck::{Accounts, UserAccount};
use notedeck_ui::colors;
use super::{
anim::{AnimationHelper, ICON_EXPANSION_MULTIPLE},
configure_deck::deck_icon,
profile::preview::get_account_url,
ProfilePic, View,
View,
};
pub static SIDE_PANEL_WIDTH: f32 = 68.0;
static ICON_WIDTH: f32 = 40.0;
pub struct DesktopSidePanel<'a> {
ndb: &'a nostrdb::Ndb,
img_cache: &'a mut Images,
selected_account: Option<&'a UserAccount>,
decks_cache: &'a DecksCache,
}
@@ -42,18 +36,13 @@ impl View for DesktopSidePanel<'_> {
#[derive(Debug, Eq, PartialEq, Clone, Copy)]
pub enum SidePanelAction {
Panel,
Account,
Settings,
Columns,
ComposeNote,
Search,
ExpandSidePanel,
Support,
NewDeck,
SwitchDeck(usize),
EditDeck(usize),
SaveTheme(ThemePreference),
Wallet,
}
@@ -69,228 +58,133 @@ impl SidePanelResponse {
}
impl<'a> DesktopSidePanel<'a> {
pub fn new(
ndb: &'a nostrdb::Ndb,
img_cache: &'a mut Images,
selected_account: Option<&'a UserAccount>,
decks_cache: &'a DecksCache,
) -> Self {
pub fn new(selected_account: Option<&'a UserAccount>, decks_cache: &'a DecksCache) -> Self {
Self {
ndb,
img_cache,
selected_account,
decks_cache,
}
}
pub fn show(&mut self, ui: &mut egui::Ui) -> SidePanelResponse {
let mut frame = egui::Frame::new().inner_margin(Margin::same(8));
pub fn show(&mut self, ui: &mut egui::Ui) -> Option<SidePanelResponse> {
let frame = egui::Frame::new().inner_margin(Margin::same(8));
if !ui.visuals().dark_mode {
frame = frame.fill(colors::ALMOST_WHITE);
let rect = ui.available_rect_before_wrap();
ui.painter().rect(
rect,
0,
colors::ALMOST_WHITE,
egui::Stroke::new(0.0, egui::Color32::TRANSPARENT),
egui::StrokeKind::Inside,
);
}
frame.show(ui, |ui| self.show_inner(ui)).inner
}
fn show_inner(&mut self, ui: &mut egui::Ui) -> SidePanelResponse {
fn show_inner(&mut self, ui: &mut egui::Ui) -> Option<SidePanelResponse> {
let dark_mode = ui.ctx().style().visuals.dark_mode;
let inner = ui
.vertical(|ui| {
let top_resp = ui
.with_layout(Layout::top_down(egui::Align::Center), |ui| {
// macos needs a bit of space to make room for window
// minimize/close buttons
if cfg!(target_os = "macos") {
ui.add_space(24.0);
}
ui.with_layout(Layout::top_down(egui::Align::Center), |ui| {
// macos needs a bit of space to make room for window
// minimize/close buttons
//if cfg!(target_os = "macos") {
// ui.add_space(24.0);
//}
let expand_resp = ui.add(expand_side_panel_button());
ui.add_space(4.0);
ui.add(milestone_name());
ui.add_space(16.0);
let is_interactive = self
.selected_account
.is_some_and(|s| s.key.secret_key.is_some());
let compose_resp = ui.add(compose_note_button(is_interactive, dark_mode));
let compose_resp = if is_interactive {
compose_resp
} else {
compose_resp.on_hover_cursor(egui::CursorIcon::NotAllowed)
};
let search_resp = ui.add(search_button());
let column_resp = ui.add(add_column_button(dark_mode));
let is_interactive = self
.selected_account
.is_some_and(|s| s.key.secret_key.is_some());
let compose_resp = ui.add(compose_note_button(is_interactive, dark_mode));
let compose_resp = if is_interactive {
compose_resp
} else {
compose_resp.on_hover_cursor(egui::CursorIcon::NotAllowed)
};
let search_resp = ui.add(search_button());
let column_resp = ui.add(add_column_button(dark_mode));
ui.add(Separator::default().horizontal().spacing(8.0).shrink(4.0));
ui.add(Separator::default().horizontal().spacing(8.0).shrink(4.0));
ui.add_space(8.0);
ui.add(egui::Label::new(
RichText::new("DECKS")
.size(11.0)
.color(ui.visuals().noninteractive().fg_stroke.color),
));
ui.add_space(8.0);
let add_deck_resp = ui.add(add_deck_button());
ui.add_space(8.0);
ui.add(egui::Label::new(
RichText::new("DECKS")
.size(11.0)
.color(ui.visuals().noninteractive().fg_stroke.color),
));
ui.add_space(8.0);
let add_deck_resp = ui.add(add_deck_button());
let decks_inner = ScrollArea::vertical()
.max_height(ui.available_height() - (3.0 * (ICON_WIDTH + 12.0)))
.show(ui, |ui| {
show_decks(ui, self.decks_cache, self.selected_account)
})
.inner;
if expand_resp.clicked() {
let decks_inner = ScrollArea::vertical()
.max_height(ui.available_height() - (3.0 * (ICON_WIDTH + 12.0)))
.show(ui, |ui| {
show_decks(ui, self.decks_cache, self.selected_account)
})
.inner;
/*
if expand_resp.clicked() {
Some(InnerResponse::new(
SidePanelAction::ExpandSidePanel,
expand_resp,
))
*/
if compose_resp.clicked() {
Some(InnerResponse::new(
SidePanelAction::ComposeNote,
compose_resp,
))
} else if search_resp.clicked() {
Some(InnerResponse::new(SidePanelAction::Search, search_resp))
} else if column_resp.clicked() {
Some(InnerResponse::new(SidePanelAction::Columns, column_resp))
} else if add_deck_resp.clicked() {
Some(InnerResponse::new(SidePanelAction::NewDeck, add_deck_resp))
} else if decks_inner.response.secondary_clicked() {
info!("decks inner secondary click");
if let Some(clicked_index) = decks_inner.inner {
Some(InnerResponse::new(
SidePanelAction::ExpandSidePanel,
expand_resp,
SidePanelAction::EditDeck(clicked_index),
decks_inner.response,
))
} else if compose_resp.clicked() {
Some(InnerResponse::new(
SidePanelAction::ComposeNote,
compose_resp,
))
} else if search_resp.clicked() {
Some(InnerResponse::new(SidePanelAction::Search, search_resp))
} else if column_resp.clicked() {
Some(InnerResponse::new(SidePanelAction::Columns, column_resp))
} else if add_deck_resp.clicked() {
Some(InnerResponse::new(SidePanelAction::NewDeck, add_deck_resp))
} else if decks_inner.response.secondary_clicked() {
info!("decks inner secondary click");
if let Some(clicked_index) = decks_inner.inner {
Some(InnerResponse::new(
SidePanelAction::EditDeck(clicked_index),
decks_inner.response,
))
} else {
None
}
} else if decks_inner.response.clicked() {
if let Some(clicked_index) = decks_inner.inner {
Some(InnerResponse::new(
SidePanelAction::SwitchDeck(clicked_index),
decks_inner.response,
))
} else {
None
}
} else {
None
}
})
.inner;
ui.add(Separator::default().horizontal().spacing(8.0).shrink(4.0));
let (pfp_resp, bottom_resp) = ui
.with_layout(Layout::bottom_up(egui::Align::Center), |ui| {
let pfp_resp = self.pfp_button(ui);
let settings_resp = ui.add(settings_button(dark_mode));
let save_theme = if let Some((theme, resp)) = match ui.ctx().theme() {
egui::Theme::Dark => {
let resp = ui
.add(Button::new("☀").frame(false))
.on_hover_text("Switch to light mode");
if resp.clicked() {
Some((ThemePreference::Light, resp))
} else {
None
}
}
egui::Theme::Light => {
let resp = ui
.add(Button::new("🌙").frame(false))
.on_hover_text("Switch to dark mode");
if resp.clicked() {
Some((ThemePreference::Dark, resp))
} else {
None
}
}
} {
ui.ctx().set_theme(theme);
Some((theme, resp))
} else {
None
};
let support_resp = ui.add(support_button());
let wallet_resp = ui.add(wallet_button());
let optional_inner = if pfp_resp.clicked() {
Some(egui::InnerResponse::new(
SidePanelAction::Account,
pfp_resp.clone(),
))
} else if settings_resp.clicked() || settings_resp.hovered() {
Some(egui::InnerResponse::new(
SidePanelAction::Settings,
settings_resp,
))
} else if support_resp.clicked() {
Some(egui::InnerResponse::new(
SidePanelAction::Support,
support_resp,
))
} else if let Some((theme, resp)) = save_theme {
Some(egui::InnerResponse::new(
SidePanelAction::SaveTheme(theme),
resp,
))
} else if wallet_resp.clicked() {
Some(egui::InnerResponse::new(
SidePanelAction::Wallet,
wallet_resp,
} else if decks_inner.response.clicked() {
if let Some(clicked_index) = decks_inner.inner {
Some(InnerResponse::new(
SidePanelAction::SwitchDeck(clicked_index),
decks_inner.response,
))
} else {
None
};
(pfp_resp, optional_inner)
})
.inner;
if let Some(bottom_inner) = bottom_resp {
bottom_inner
} else if let Some(top_inner) = top_resp {
top_inner
} else {
egui::InnerResponse::new(SidePanelAction::Panel, pfp_resp)
}
}
} else {
None
}
})
.inner
})
.inner;
SidePanelResponse::new(inner.inner, inner.response)
}
fn pfp_button(&mut self, ui: &mut egui::Ui) -> egui::Response {
let max_size = ICON_WIDTH * ICON_EXPANSION_MULTIPLE; // max size of the widget
let helper = AnimationHelper::new(ui, "pfp-button", vec2(max_size, max_size));
let min_pfp_size = ICON_WIDTH;
let cur_pfp_size = helper.scale_1d_pos(min_pfp_size);
let txn = nostrdb::Transaction::new(self.ndb).expect("should be able to create txn");
let profile_url = get_account_url(&txn, self.ndb, self.selected_account);
let widget = ProfilePic::new(self.img_cache, profile_url).size(cur_pfp_size);
ui.put(helper.get_animation_rect(), widget);
helper.take_animation_response()
if let Some(inner) = inner {
Some(SidePanelResponse::new(inner.inner, inner.response))
} else {
None
}
}
pub fn perform_action(
decks_cache: &mut DecksCache,
accounts: &Accounts,
support: &mut Support,
theme_handler: &mut ThemeHandler,
action: SidePanelAction,
) -> Option<SwitchingAction> {
let router = get_active_columns_mut(accounts, decks_cache).get_first_router();
let mut switching_response = None;
match action {
/*
SidePanelAction::Panel => {} // TODO
SidePanelAction::Account => {
if router
@@ -312,6 +206,15 @@ impl<'a> DesktopSidePanel<'a> {
router.route_to(Route::relays());
}
}
SidePanelAction::Support => {
if router.routes().iter().any(|r| r == &Route::Support) {
router.go_back();
} else {
support.refresh();
router.route_to(Route::Support);
}
}
*/
SidePanelAction::Columns => {
if router
.routes()
@@ -342,14 +245,6 @@ impl<'a> DesktopSidePanel<'a> {
// TODO
info!("Clicked expand side panel button");
}
SidePanelAction::Support => {
if router.routes().iter().any(|r| r == &Route::Support) {
router.go_back();
} else {
support.refresh();
router.route_to(Route::Support);
}
}
SidePanelAction::NewDeck => {
if router.routes().iter().any(|r| r == &Route::NewDeck) {
router.go_back();
@@ -382,9 +277,6 @@ impl<'a> DesktopSidePanel<'a> {
}
}
}
SidePanelAction::SaveTheme(theme) => {
theme_handler.save(theme);
}
SidePanelAction::Wallet => 's: {
if router
.routes()
@@ -402,31 +294,6 @@ impl<'a> DesktopSidePanel<'a> {
}
}
fn settings_button(dark_mode: bool) -> impl Widget {
move |ui: &mut egui::Ui| {
let img_size = 24.0;
let max_size = ICON_WIDTH * ICON_EXPANSION_MULTIPLE; // max size of the widget
let img_data = if dark_mode {
egui::include_image!("../../../../assets/icons/settings_dark_4x.png")
} else {
egui::include_image!("../../../../assets/icons/settings_light_4x.png")
};
let img = egui::Image::new(img_data).max_width(img_size);
let helper = AnimationHelper::new(ui, "settings-button", vec2(max_size, max_size));
let cur_img_size = helper.scale_1d_pos(img_size);
img.paint_at(
ui,
helper
.get_animation_rect()
.shrink((max_size - cur_img_size) / 2.0),
);
helper.take_animation_response()
}
}
fn add_column_button(dark_mode: bool) -> impl Widget {
move |ui: &mut egui::Ui| {
let img_size = 24.0;
@@ -554,41 +421,6 @@ pub fn search_button() -> impl Widget {
}
// TODO: convert to responsive button when expanded side panel impl is finished
fn expand_side_panel_button() -> impl Widget {
|ui: &mut egui::Ui| -> egui::Response {
let img_size = 40.0;
let img_data = egui::include_image!("../../../../assets/damus_rounded_80.png");
let img = egui::Image::new(img_data).max_width(img_size);
ui.add(img)
}
}
fn support_button() -> impl Widget {
|ui: &mut egui::Ui| -> egui::Response {
let img_size = 16.0;
let max_size = ICON_WIDTH * ICON_EXPANSION_MULTIPLE; // max size of the widget
let img_data = if ui.visuals().dark_mode {
egui::include_image!("../../../../assets/icons/help_icon_dark_4x.png")
} else {
egui::include_image!("../../../../assets/icons/help_icon_inverted_4x.png")
};
let img = egui::Image::new(img_data).max_width(img_size);
let helper = AnimationHelper::new(ui, "help-button", vec2(max_size, max_size));
let cur_img_size = helper.scale_1d_pos(img_size);
img.paint_at(
ui,
helper
.get_animation_rect()
.shrink((max_size - cur_img_size) / 2.0),
);
helper.take_animation_response()
}
}
fn add_deck_button() -> impl Widget {
|ui: &mut egui::Ui| -> egui::Response {
@@ -676,23 +508,3 @@ fn show_decks<'a>(
}
InnerResponse::new(clicked_index, resp)
}
fn milestone_name() -> impl Widget {
|ui: &mut egui::Ui| -> egui::Response {
ui.vertical_centered(|ui| {
let font = egui::FontId::new(
notedeck::fonts::get_font_size(
ui.ctx(),
&NotedeckTextStyle::Tiny,
),
egui::FontFamily::Name(notedeck::fonts::NamedFontFamily::Bold.as_str().into()),
);
ui.add(Label::new(
RichText::new("ALPHA")
.color( ui.style().visuals.noninteractive().fg_stroke.color)
.font(font),
).selectable(false)).on_hover_text("Notedeck is an alpha product. Expect bugs and contact us when you run into issues.").on_hover_cursor(egui::CursorIcon::Help)
})
.inner
}
}