Redesign for the v1 stable release #3

Merged
reya merged 30 commits from v1-redesign into master 2026-02-04 01:43:24 +00:00
8 changed files with 128 additions and 64 deletions
Showing only changes of commit 2e91145276 - Show all commits

View File

@@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
<path d="M9.8007 10.25C8.74816 10.25 8.16683 11.4713 8.83056 12.2882L11.0301 14.9953C11.5303 15.611 12.4701 15.611 12.9704 14.9953L15.1699 12.2882C15.8336 11.4713 15.2523 10.25 14.1997 10.25H9.8007Z" fill="currentColor"/>
</svg>

Before

Width:  |  Height:  |  Size: 302 B

3
assets/icons/invite.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
<path d="M4.75 10.9853V4.75C4.75 3.64543 5.64543 2.75 6.75 2.75H17.25C18.3546 2.75 19.25 3.64543 19.25 4.75V10.9853M9.75 7.75H14.25M12.617 13.5499L19.9415 11.1744C20.5875 10.9649 21.25 11.4465 21.25 12.1256V18.25C21.25 19.3546 20.3546 20.25 19.25 20.25H4.75C3.64543 20.25 2.75 19.3546 2.75 18.25V12.1256C2.75 11.4465 3.41249 10.9649 4.0585 11.1744L11.383 13.5499C11.784 13.68 12.216 13.68 12.617 13.5499Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 576 B

3
assets/icons/profile.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
<path d="M17.75 2.75H6.25C5.14543 2.75 4.25 3.64543 4.25 4.75V19.25C4.25 20.3546 5.14543 21.25 6.25 21.25H17.75C18.8546 21.25 19.75 20.3546 19.75 19.25V4.75C19.75 3.64543 18.8546 2.75 17.75 2.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><circle cx="12" cy="12.25" r="2.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M16 21C16 18.7909 14.2091 17 12 17C9.79086 17 8 18.7909 8 21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M9.75 6.25H14.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>

After

Width:  |  Height:  |  Size: 696 B

3
assets/icons/ship.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
<path d="M2.75 20.25L6.26353 19.4903M6.26353 19.4903L6.95233 19.3414C7.23089 19.2812 7.51911 19.2812 7.79767 19.3414L11.5773 20.1586C11.8559 20.2188 12.1441 20.2188 12.4227 20.1586L16.2023 19.3414C16.4809 19.2812 16.7691 19.2812 17.0477 19.3414L17.7365 19.4903M6.26353 19.4903C5.08645 17.9188 4.46034 16.5675 4.08992 15.0117C3.8539 14.0205 4.52677 13.0678 5.51689 12.827L11.5273 11.365C11.8379 11.2894 12.1621 11.2894 12.4727 11.365L18.4831 12.827C19.4732 13.0678 20.1461 14.0205 19.9101 15.0117C19.5397 16.5675 18.9136 17.9188 17.7365 19.4903M17.7365 19.4903L21.25 20.25M5.75 12.75V7.75C5.75 7.19772 6.19772 6.75 6.75 6.75H17.25C17.8023 6.75 18.25 7.19772 18.25 7.75V12.75M9.75 6.75V3.75C9.75 3.19772 10.1977 2.75 10.75 2.75H13.25C13.8023 2.75 14.25 3.19772 14.25 3.75V6.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 946 B

3
assets/icons/usb.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
<path d="M10 5.75V7.25M14 5.75V7.25M3.75 10.25H20.25V19.25C20.25 20.3546 19.3546 21.25 18.25 21.25H5.75C4.64543 21.25 3.75 20.3546 3.75 19.25V10.25ZM5.75 2.75H18.25V10.25H5.75V2.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 353 B

View File

@@ -7,7 +7,7 @@ use gpui::{
use state::NostrRegistry; use state::NostrRegistry;
use theme::ActiveTheme; use theme::ActiveTheme;
use ui::button::{Button, ButtonVariants}; use ui::button::{Button, ButtonVariants};
use ui::{h_flex, v_flex, Icon, IconName, StyledExt}; use ui::{h_flex, v_flex, Icon, IconName, Sizable, StyledExt};
pub fn init(window: &mut Window, cx: &mut App) -> Entity<Greeter> { pub fn init(window: &mut Window, cx: &mut App) -> Entity<Greeter> {
cx.new(|cx| Greeter::new(window, cx)) cx.new(|cx| Greeter::new(window, cx))
@@ -62,7 +62,7 @@ impl Focusable for Greeter {
impl Render for Greeter { impl Render for Greeter {
fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement { fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
const TITLE: &str = "Welcome to Coop!"; const TITLE: &str = "Welcome to Coop!";
const DESCRIPTION: &str = "You can bring your own keys to use your identity"; const DESCRIPTION: &str = "Chat Freely, Stay Private on Nostr.";
let nostr = NostrRegistry::global(cx); let nostr = NostrRegistry::global(cx);
let identity = nostr.read(cx).identity(); let identity = nostr.read(cx).identity();
@@ -78,47 +78,87 @@ impl Render for Greeter {
.items_center() .items_center()
.justify_center() .justify_center()
.child( .child(
svg() h_flex()
.path("brand/coop.svg") .gap_2()
.size_16() .child(
.text_color(cx.theme().elevated_surface_background), svg()
.path("brand/coop.svg")
.size_12()
.text_color(cx.theme().icon_muted),
)
.child(
v_flex()
.child(
div()
.font_semibold()
.line_height(relative(1.25))
.child(SharedString::from(TITLE)),
)
.child(
div()
.text_sm()
.text_color(cx.theme().text_muted)
.line_height(relative(1.25))
.child(SharedString::from(DESCRIPTION)),
),
),
) )
.when(!identity.read(cx).owned, |this| { .child(
this.child( v_flex()
v_flex() .gap_2()
.text_center() .child(
.child( h_flex()
div() .gap_1()
.font_semibold() .text_sm()
.line_height(relative(1.25)) .font_semibold()
.child(SharedString::from(TITLE)), .text_color(cx.theme().text_muted)
) .child(SharedString::from("Get Started"))
.child( .child(div().flex_1().h_px().bg(cx.theme().border)),
div() )
.text_sm() .child(
.text_color(cx.theme().text_muted) v_flex()
.child(SharedString::from(DESCRIPTION)), .items_start()
), .justify_start()
) .gap_2()
.child( .when(!identity.read(cx).owned, |this| {
v_flex() this.child(
.gap_2() Button::new("connect")
.child( .icon(Icon::new(IconName::Door))
Button::new("connect") .label("Connect account via Nostr Connect")
.icon(Icon::new(IconName::ArrowRight)) .ghost()
.label(SharedString::from( .small(),
"Connect account via Nostr Connect", )
)) .child(
.primary() Button::new("import")
.reverse(), .icon(Icon::new(IconName::Usb))
) .label("Import a secret key or bunker")
.child( .ghost()
Button::new("key") .small(),
.label("Import a secret key or bunker") )
.ghost_alt(), })
), .child(
) Button::new("profile")
}), .icon(Icon::new(IconName::Profile))
.label("Update profile")
.ghost()
.small(),
)
.child(
Button::new("changelog")
.icon(Icon::new(IconName::Ship))
.label("Keep up to date")
.ghost()
.small(),
)
.child(
Button::new("invite")
.icon(Icon::new(IconName::Invite))
.label("Invite people")
.ghost()
.small(),
),
),
),
) )
} }
} }

View File

@@ -670,23 +670,32 @@ impl Render for Sidebar {
), ),
) )
.when(!loading && total_rooms == 0, |this| { .when(!loading && total_rooms == 0, |this| {
this.child(deferred( this.child(
v_flex() div().px_2p5().child(deferred(
.py_2() v_flex()
.px_3() .p_3()
.items_center() .h_24()
.justify_center() .w_full()
.text_center() .border_2()
.child( .border_dashed()
div() .border_color(cx.theme().border_variant)
.text_sm() .rounded(cx.theme().radius_lg)
.font_semibold() .items_center()
.child(SharedString::from("No conversations")), .justify_center()
) .text_center()
.child(div().text_xs().text_color(cx.theme().text_muted).child( .child(
SharedString::from("Start a conversation with someone to get started."), div()
)), .text_sm()
)) .font_semibold()
.child(SharedString::from("No conversations")),
)
.child(div().text_xs().text_color(cx.theme().text_muted).child(
SharedString::from(
"Start a conversation with someone to get started.",
),
)),
)),
)
}) })
// Chat Rooms // Chat Rooms
.child( .child(

View File

@@ -12,7 +12,6 @@ pub enum IconName {
ArrowLeft, ArrowLeft,
ArrowRight, ArrowRight,
Boom, Boom,
ChevronDown,
CaretDown, CaretDown,
CaretRight, CaretRight,
CaretUp, CaretUp,
@@ -27,17 +26,21 @@ pub enum IconName {
Emoji, Emoji,
Eye, Eye,
Info, Info,
Invite,
Link, Link,
Loader, Loader,
Moon, Moon,
Plus, Plus,
PlusCircle, PlusCircle,
Profile,
Relay, Relay,
Reply, Reply,
Search, Search,
Settings, Settings,
Sun, Sun,
Ship,
Upload, Upload,
Usb,
PanelLeft, PanelLeft,
PanelLeftOpen, PanelLeftOpen,
PanelRight, PanelRight,
@@ -58,7 +61,6 @@ impl IconName {
Self::ArrowLeft => "icons/arrow-left.svg", Self::ArrowLeft => "icons/arrow-left.svg",
Self::ArrowRight => "icons/arrow-right.svg", Self::ArrowRight => "icons/arrow-right.svg",
Self::Boom => "icons/boom.svg", Self::Boom => "icons/boom.svg",
Self::ChevronDown => "icons/chevron-down.svg",
Self::CaretDown => "icons/caret-down.svg", Self::CaretDown => "icons/caret-down.svg",
Self::CaretRight => "icons/caret-right.svg", Self::CaretRight => "icons/caret-right.svg",
Self::CaretUp => "icons/caret-up.svg", Self::CaretUp => "icons/caret-up.svg",
@@ -73,17 +75,21 @@ impl IconName {
Self::Emoji => "icons/emoji.svg", Self::Emoji => "icons/emoji.svg",
Self::Eye => "icons/eye.svg", Self::Eye => "icons/eye.svg",
Self::Info => "icons/info.svg", Self::Info => "icons/info.svg",
Self::Invite => "icons/invite.svg",
Self::Link => "icons/link.svg", Self::Link => "icons/link.svg",
Self::Loader => "icons/loader.svg", Self::Loader => "icons/loader.svg",
Self::Moon => "icons/moon.svg", Self::Moon => "icons/moon.svg",
Self::Plus => "icons/plus.svg", Self::Plus => "icons/plus.svg",
Self::PlusCircle => "icons/plus-circle.svg", Self::PlusCircle => "icons/plus-circle.svg",
Self::Profile => "icons/profile.svg",
Self::Relay => "icons/relay.svg", Self::Relay => "icons/relay.svg",
Self::Reply => "icons/reply.svg", Self::Reply => "icons/reply.svg",
Self::Search => "icons/search.svg", Self::Search => "icons/search.svg",
Self::Settings => "icons/settings.svg", Self::Settings => "icons/settings.svg",
Self::Sun => "icons/sun.svg", Self::Sun => "icons/sun.svg",
Self::Ship => "icons/ship.svg",
Self::Upload => "icons/upload.svg", Self::Upload => "icons/upload.svg",
Self::Usb => "icons/usb.svg",
Self::PanelLeft => "icons/panel-left.svg", Self::PanelLeft => "icons/panel-left.svg",
Self::PanelLeftOpen => "icons/panel-left-open.svg", Self::PanelLeftOpen => "icons/panel-left-open.svg",
Self::PanelRight => "icons/panel-right.svg", Self::PanelRight => "icons/panel-right.svg",