Skip to content

Commit 94fe528

Browse files
robertpiosikrobertpiosik
committed
Consolidate social media and support icons into the UI package and redesign the application footer
1 parent dca7856 commit 94fe528

12 files changed

Lines changed: 266 additions & 172 deletions

File tree

‎packages/ui/src/assets/icons/buy-me-a-coffee.svg‎

Lines changed: 4 additions & 28 deletions
Loading

packages/vscode/resources/reddit-logo-dark.svg renamed to packages/ui/src/assets/icons/reddit.svg

Lines changed: 1 addition & 1 deletion
Loading

packages/vscode/resources/x-logo-dark.svg renamed to packages/ui/src/assets/icons/x.svg

Lines changed: 1 addition & 2 deletions
Loading

‎packages/ui/src/components/editor/Icon/Icon.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ import Doubao from '../../../assets/icons/doubao.svg'
1515
import Command from '../../../assets/icons/command.svg'
1616
import Enter from '../../../assets/icons/enter.svg'
1717
import Perplexity from '../../../assets/icons/perplexity.svg'
18+
import Reddit from '../../../assets/icons/reddit.svg'
19+
import X from '../../../assets/icons/x.svg'
1820

1921
export namespace Icon {
2022
export type Variant =
@@ -35,6 +37,8 @@ export namespace Icon {
3537
| 'COMMAND'
3638
| 'ENTER'
3739
| 'PERPLEXITY'
40+
| 'REDDIT'
41+
| 'X'
3842

3943
export type Props = {
4044
variant: Variant
@@ -96,6 +100,12 @@ export const Icon: React.FC<Icon.Props> = ({ variant }) => {
96100
case 'PERPLEXITY':
97101
icon = <Perplexity />
98102
break
103+
case 'REDDIT':
104+
icon = <Reddit />
105+
break
106+
case 'X':
107+
icon = <X />
108+
break
99109
default:
100110
// Handle cases where variant might not match any known icon
101111
// This could be an empty fragment, a default icon, or throw an error

‎packages/ui/src/styles/global.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ button {
1818
background: none;
1919
padding: 0;
2020
cursor: pointer;
21+
font-size: 13px;
22+
font-family: inherit;
2123
}
2224

2325
a:focus {

‎packages/vscode/package.json‎

Lines changed: 6 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -320,24 +320,6 @@
320320
"title": "Repository",
321321
"category": "Code Web Chat",
322322
"icon": "$(github-alt)"
323-
},
324-
{
325-
"command": "codeWebChat.openX",
326-
"title": "@CodeWebChat",
327-
"category": "Code Web Chat",
328-
"icon": {
329-
"light": "resources/x-logo-light.svg",
330-
"dark": "resources/x-logo-dark.svg"
331-
}
332-
},
333-
{
334-
"command": "codeWebChat.openReddit",
335-
"title": "/r/CodeWebChat",
336-
"category": "Code Web Chat",
337-
"icon": {
338-
"light": "resources/reddit-logo-light.svg",
339-
"dark": "resources/reddit-logo-dark.svg"
340-
}
341323
}
342324
],
343325
"menus": {
@@ -429,14 +411,6 @@
429411
{
430412
"command": "codeWebChat.openRepository",
431413
"when": "false"
432-
},
433-
{
434-
"command": "codeWebChat.openX",
435-
"when": "false"
436-
},
437-
{
438-
"command": "codeWebChat.openReddit",
439-
"when": "false"
440414
}
441415
],
442416
"view/title": [
@@ -503,22 +477,12 @@
503477
{
504478
"command": "codeWebChat.openRepository",
505479
"when": "view == codeWebChatView",
506-
"group": "navigation@2"
507-
},
508-
{
509-
"command": "codeWebChat.openX",
510-
"when": "view == codeWebChatView",
511-
"group": "navigation@3"
512-
},
513-
{
514-
"command": "codeWebChat.openReddit",
515-
"when": "view == codeWebChatView",
516-
"group": "navigation@4"
480+
"group": "navigation@1"
517481
},
518482
{
519483
"command": "codeWebChat.settings",
520484
"when": "view == codeWebChatView",
521-
"group": "navigation@7"
485+
"group": "navigation@2"
522486
}
523487
],
524488
"view/item/context": [
@@ -804,7 +768,8 @@
804768
"typed-css-modules": "^0.9.1",
805769
"typescript": "^5.8.3",
806770
"webpack": "^5.99.9",
807-
"webpack-cli": "^6.0.1"
771+
"webpack-cli": "^6.0.1",
772+
"react-outside-click-handler": "1.3.0"
808773
},
809774
"dependencies": {
810775
"@svgr/webpack": "^8.1.0",
@@ -823,6 +788,7 @@
823788
"simplebar-react": "^3.3.1",
824789
"ui": "workspace:*",
825790
"utf-8-validate": "^6.0.5",
826-
"ws": "^8.18.3"
791+
"ws": "^8.18.3",
792+
"@types/react-outside-click-handler": "1.3.0"
827793
}
828794
}

‎packages/vscode/resources/reddit-logo-light.svg‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎packages/vscode/resources/x-logo-light.svg‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎packages/vscode/src/extension.ts‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -158,18 +158,6 @@ export async function activate(context: vscode.ExtensionContext) {
158158
command: 'codeWebChat.openRepository',
159159
url: 'https://github.com/robertpiosik/CodeWebChat'
160160
}),
161-
open_url_command({
162-
command: 'codeWebChat.openX',
163-
url: 'https://x.com/CodeWebChat'
164-
}),
165-
open_url_command({
166-
command: 'codeWebChat.openReddit',
167-
url: 'https://www.reddit.com/r/CodeWebChat/'
168-
}),
169-
open_url_command({
170-
command: 'codeWebChat.rateExtension',
171-
url: 'https://marketplace.visualstudio.com/items?itemName=robertpiosik.gemini-coder&ssr=false#review-details'
172-
}),
173161
open_settings_command(context),
174162
apply_context_from_clipboard_command(workspace_provider)
175163
)

‎packages/vscode/src/view/frontend/home/HomeView/HomeView.module.scss‎

Lines changed: 69 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
.container {
2+
position: relative;
23
display: flex;
34
flex-direction: column;
45
height: 100%;
@@ -29,67 +30,93 @@
2930
display: flex;
3031
flex-direction: column;
3132
padding: var(--padding-4px) 0 var(--padding-12px) 0;
33+
&--with-commands-tooltip-visible {
34+
padding: var(--padding-4px) 0 92px 0;
35+
}
36+
}
37+
38+
.commands {
39+
position: absolute;
40+
z-index: 1;
41+
bottom: calc(24px + 16px + 1px + 4px);
42+
left: 0;
43+
margin: 0 8px;
44+
padding: 4px 0;
45+
width: calc(100% - 16px);
46+
border-radius: var(--border-radius-4px);
47+
transform: translateY(5px);
48+
transition: all 0.1s ease-in-out;
49+
opacity: 0;
50+
background-color: var(--vscode-quickInput-background);
51+
color: var(--vscode-quickInput-foreground);
52+
border: 1px solid var(--vscode-widget-border);
53+
box-shadow: 0 0 8px 2px var(--vscode-widget-shadow);
54+
55+
&--visible {
56+
transform: translateY(0);
57+
opacity: 1;
58+
}
3259
}
3360

3461
.footer {
3562
display: flex;
36-
flex-direction: column;
37-
gap: var(--padding-2px);
38-
width: 100%;
39-
background: var(--vscode-sideBar-background);
40-
padding: var(--padding-6px) 0 var(--padding-4px) 0;
63+
overflow: hidden;
64+
gap: var(--padding-8px);
65+
padding: var(--padding-8px) var(--padding-12px);
4166
border-top: 1px solid var(--vscode-sideBarSectionHeader-border);
4267

43-
&__commands {
68+
&__button {
4469
display: flex;
45-
flex-direction: column;
46-
gap: var(--padding-2px);
70+
align-items: center;
71+
gap: var(--padding-6px);
72+
height: 24px;
73+
padding: 0 5px;
74+
border-radius: var(--border-radius-4px);
75+
text-decoration: none;
76+
color: var(--vscode-foreground);
4777

48-
&__heading {
49-
padding: 0 var(--padding-12px);
50-
font-size: 13px;
78+
&:hover {
5179
color: var(--vscode-foreground);
52-
opacity: 0.7;
5380
}
5481

55-
&__inner {
56-
display: flex;
57-
flex-direction: column;
82+
> svg {
83+
flex-shrink: 0;
84+
fill: var(--vscode-icon-foreground);
85+
width: 16px;
86+
height: 16px;
5887
}
59-
}
6088

61-
&__links {
62-
padding: 0 var(--padding-12px);
63-
display: flex;
64-
gap: var(--padding-6px);
65-
justify-content: space-between;
66-
color: black;
67-
68-
a {
69-
display: flex;
70-
align-items: center;
71-
text-decoration: none;
72-
gap: var(--padding-2px);
73-
font-size: 12px;
74-
white-space: nowrap;
75-
overflow: hidden;
76-
text-overflow: ellipsis;
77-
span:last-child:hover {
78-
text-decoration: underline;
89+
&--buy-me-a-coffee {
90+
background-color: #f7d600;
91+
92+
&:hover {
93+
background-color: #ebcb00;
94+
}
95+
96+
> svg {
97+
fill: black;
7998
}
8099
}
81100

82-
&__left {
83-
overflow: hidden;
84-
a > span:last-child {
85-
text-overflow: ellipsis;
86-
overflow: hidden;
101+
&--filled {
102+
background-color: var(--vscode-list-hoverBackground);
103+
&:hover {
104+
background-color: var(--vscode-toolbar-hoverBackground);
87105
}
88106
}
89107

90-
&__right {
91-
display: flex;
92-
gap: var(--padding-6px);
108+
&--outlined {
109+
border: 1px solid var(--vscode-commandCenter-inactiveBorder);
110+
&:hover {
111+
border-color: var(--vscode-commandCenter-activeBorder);
112+
}
113+
}
114+
115+
&--outlined-active {
116+
border-color: var(--vscode-focusBorder);
117+
&:hover {
118+
border-color: var(--vscode-focusBorder);
119+
}
93120
}
94121
}
95122
}

0 commit comments

Comments
 (0)