Skip to content

Commit e3aac3a

Browse files
DishpitDishpit
authored
Merge pull request #322 from DishpitDev/staging
v0.3.0
2 parents df26e64 + 14afeed commit e3aac3a

23 files changed

+738
-146
lines changed

‎.github/workflows/build-app.yml

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
name: 'publish'
2+
3+
on:
4+
workflow_dispatch:
5+
push:
6+
branches:
7+
- mommy
8+
9+
jobs:
10+
publish-tauri:
11+
permissions:
12+
contents: write
13+
strategy:
14+
fail-fast: false
15+
matrix:
16+
include:
17+
- platform: 'macos-latest'
18+
args: '--target aarch64-apple-darwin'
19+
- platform: 'macos-latest'
20+
args: '--target x86_64-apple-darwin'
21+
- platform: 'ubuntu-22.04'
22+
args: ''
23+
- platform: 'windows-latest'
24+
args: ''
25+
26+
runs-on: ${{ matrix.platform }}
27+
steps:
28+
- uses: actions/checkout@v4
29+
30+
- name: install dependencies (ubuntu only)
31+
if: matrix.platform == 'ubuntu-22.04'
32+
run: |
33+
sudo apt-get update
34+
sudo apt-get install -y libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf
35+
36+
- name: setup node
37+
uses: actions/setup-node@v4
38+
with:
39+
node-version: lts/*
40+
cache: 'npm'
41+
42+
- name: install Rust stable
43+
uses: dtolnay/rust-toolchain@stable # Set this to dtolnay/rust-toolchain@nightly
44+
with:
45+
# Those targets are only used on macos runners so it's in an `if` to slightly speed up windows and linux builds.
46+
targets: ${{ matrix.platform == 'macos-latest' && 'aarch64-apple-darwin,x86_64-apple-darwin' || '' }}
47+
48+
- name: Rust cache
49+
uses: swatinem/rust-cache@v2
50+
with:
51+
workspaces: './src-tauri -> target'
52+
53+
- name: install frontend dependencies
54+
# If you don't have `beforeBuildCommand` configured you may want to build your frontend here too.
55+
run: npm install # change this to npm or pnpm depending on which one you use.
56+
57+
- uses: tauri-apps/tauri-action@v0
58+
env:
59+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
60+
with:
61+
tagName: app-v__VERSION__ # the action automatically replaces \_\_VERSION\_\_ with the app version.
62+
releaseName: 'App v__VERSION__'
63+
releaseBody: 'See the assets to download this version and install.'
64+
releaseDraft: true
65+
prerelease: false
66+
args: ${{ matrix.args }}

‎Slopify/src-tauri/tauri.conf.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"$schema": "https://schema.tauri.app/config/2",
33
"productName": "slopify",
4-
"version": "0.2.0",
4+
"version": "0.3.0",
55
"identifier": "com.slopify.app",
66
"build": {
77
"beforeDevCommand": "npm run dev",
@@ -13,8 +13,8 @@
1313
"windows": [
1414
{
1515
"title": "Slopify",
16-
"minWidth": 800,
17-
"minHeight": 600,
16+
"minWidth": 900,
17+
"minHeight": 800,
1818
"center": true,
1919
"focus": true
2020
}

‎Slopify/src/App.jsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
22
import HomePage from "./pages/HomePage";
33
import ChatPage from "./pages/ChatPage";
4+
import SlopboxPage from "./pages/Slopbox";
5+
import ProfilePage from "./pages/ProfilePage";
46
import "./styles/global.css";
57

68
export default function App() {
@@ -11,12 +13,11 @@ export default function App() {
1113
<Routes>
1214
<Route path="/" element={<HomePage />} />
1315
<Route path="/chat" element={<ChatPage />} />
16+
<Route path="/slopbox" element={<SlopboxPage />} />
17+
<Route path="/profile" element={<ProfilePage />} />
1418
</Routes>
1519
</Router>
1620
</main>
17-
<footer>
18-
<p>Powered by Gruvbox</p>
19-
</footer>
2021
</div>
2122
);
2223
}

‎Slopify/src/components/Button.jsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export default function Button(data) {
2+
return (
3+
<>
4+
<button
5+
style={{ backgroundColor: data.background, color: data.color }}
6+
type={data.action}
7+
>
8+
{data.content}
9+
</button>
10+
</>
11+
);
12+
}

‎Slopify/src/components/LoginForm.jsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { useState } from "react";
22
import { supabase } from "../supabaseClient";
33
import { useNavigate } from "react-router-dom";
4+
import Button from "./Button";
45

56
export default function LoginForm() {
67
const [email, setEmail] = useState("");
@@ -40,7 +41,12 @@ export default function LoginForm() {
4041
onChange={(e) => setPassword(e.target.value)}
4142
required
4243
/>
43-
<button type="submit">Login</button>
44+
<Button
45+
action="submit"
46+
content="Login"
47+
background="#458588"
48+
color="white"
49+
/>
4450
</form>
4551
);
4652
}

‎Slopify/src/components/Message.jsx

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
export default function Message(data) {
2+
return (
3+
<>
4+
<div key={data.key} className="message">
5+
<div
6+
style={{
7+
display: "flex",
8+
justifyContent: "space-between",
9+
alignItems: "center",
10+
}}
11+
>
12+
<div style={{ display: "flex", gap: "10px", maxWidth: "90%" }}>
13+
<img
14+
src={data.photo}
15+
alt="Profile"
16+
style={{
17+
width: "50px",
18+
height: "50px",
19+
objectFit: "cover",
20+
borderRadius: "50%",
21+
}}
22+
/>
23+
<div style={{ maxWidth: "90%" }}>
24+
<strong style={{ color: data.color }}>{data.name}</strong>
25+
<p style={{ margin: 0, marginTop: "0.5rem" }}>{data.message}</p>
26+
</div>
27+
</div>
28+
<small style={{ minWidth: "15%" }}>{data.date}</small>
29+
</div>
30+
</div>
31+
</>
32+
);
33+
}

‎Slopify/src/components/MessageForm.jsx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { useState } from "react";
22
import { supabase } from "../supabaseClient";
3+
import Button from "./Button";
34

45
export default function MessageForm() {
56
const [message, setMessage] = useState("");
@@ -38,9 +39,12 @@ export default function MessageForm() {
3839
onChange={(e) => setMessage(e.target.value)}
3940
style={{ padding: "0.5rem", width: "80%" }}
4041
/>
41-
<button type="submit" style={{ padding: "0.5rem" }}>
42-
Send
43-
</button>
42+
<Button
43+
action="submit"
44+
content="Send"
45+
background="#458588"
46+
color="white"
47+
/>
4448
</form>
4549
);
4650
}

‎Slopify/src/components/MessageList.jsx

Lines changed: 55 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { useEffect, useState } from "react";
22
import { supabase } from "../supabaseClient";
3+
import Message from "./Message";
34

45
const PAGE_SIZE = 50;
56

@@ -9,6 +10,13 @@ export default function MessageList() {
910
const [hasMore, setHasMore] = useState(true);
1011
const [scrolling, setScrolling] = useState(false);
1112

13+
useEffect(() => {
14+
const messageBox = document.getElementById("message-box");
15+
if (messageBox) {
16+
messageBox.scrollTop = messageBox.scrollHeight;
17+
}
18+
}, [messages]);
19+
1220
useEffect(() => {
1321
fetchMessages();
1422
const subscription = supabase
@@ -19,7 +27,7 @@ export default function MessageList() {
1927
(payload) => {
2028
const newMessage = payload.new;
2129
attachDisplayName(newMessage).then((msgWithDisplayName) => {
22-
setMessages((prev) => [msgWithDisplayName, ...prev]);
30+
setMessages((prev) => [...prev, msgWithDisplayName]);
2331
});
2432
},
2533
)
@@ -30,10 +38,44 @@ export default function MessageList() {
3038
};
3139
}, []);
3240

41+
const formatDate = (utcDateString) => {
42+
const messageDate = new Date(`${utcDateString}Z`);
43+
const now = new Date();
44+
45+
const isToday = messageDate.toDateString() === now.toDateString();
46+
47+
const isYesterday =
48+
messageDate.toDateString() ===
49+
new Date(now.setDate(now.getDate() - 1)).toDateString();
50+
51+
if (isToday) {
52+
return `Today, ${messageDate.toLocaleTimeString(undefined, {
53+
hour: "numeric",
54+
minute: "2-digit",
55+
second: "2-digit",
56+
})}`;
57+
} else if (isYesterday) {
58+
return `Yesterday, ${messageDate.toLocaleTimeString(undefined, {
59+
hour: "numeric",
60+
minute: "2-digit",
61+
second: "2-digit",
62+
})}`;
63+
} else {
64+
return messageDate.toLocaleString(undefined, {
65+
year: "numeric",
66+
month: "short",
67+
day: "numeric",
68+
hour: "numeric",
69+
minute: "2-digit",
70+
second: "2-digit",
71+
});
72+
}
73+
};
74+
3375
const attachDisplayName = async (message) => {
3476
const { data: profile, error } = await supabase
3577
.from("profiles")
36-
.select("display_name, profile_color")
78+
.select("display_name, profile_color, profile_photo_url")
3779
.eq("id", message.user_id)
3880
.single();
3981

@@ -49,6 +91,7 @@ export default function MessageList() {
4991
...message,
5092
display_name: profile.display_name,
5193
profile_color: profile.profile_color,
94+
profile_photo_url: profile.profile_photo_url,
5295
};
5396
};
5497

@@ -59,7 +102,7 @@ export default function MessageList() {
59102
const query = supabase
60103
.from("messages")
61104
.select("id, user_id, content, created_at")
62-
.order("created_at", { ascending: false })
105+
.order("created_at", { ascending: true })
63106
.limit(PAGE_SIZE);
64107

65108
if (olderThan) {
@@ -100,36 +143,28 @@ export default function MessageList() {
100143

101144
return (
102145
<div
146+
id="message-box"
103147
style={{
104148
height: "400px",
105149
overflowY: "auto",
106150
border: "1px solid #ccc",
107-
padding: "1rem",
108151
}}
109152
onScroll={handleScroll}
110153
>
111154
{loading ? (
112155
<p>Loading...</p>
113156
) : (
114157
messages.map((msg) => (
115-
<div key={msg.id} style={{ marginBottom: "1rem" }}>
116-
<div
117-
style={{
118-
display: "flex",
119-
justifyContent: "space-between",
120-
alignItems: "center",
121-
}}
122-
>
123-
<strong style={{ color: msg.profile_color }}>
124-
{msg.display_name}
125-
</strong>
126-
<small>{new Date(msg.created_at).toLocaleString()}</small>
127-
</div>
128-
<p style={{ margin: 0, marginTop: "0.5rem" }}>{msg.content}</p>
129-
</div>
158+
<Message
159+
key={msg.id}
160+
name={msg.display_name}
161+
color={msg.profile_color}
162+
photo={msg.profile_photo_url}
163+
date={formatDate(msg.created_at)}
164+
message={msg.content}
165+
/>
130166
))
131167
)}
132-
{!hasMore && <p>No more messages</p>}
133168
</div>
134169
);
135170
}

‎Slopify/src/components/RegisterForm.jsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { useState } from "react";
22
import { supabase } from "../supabaseClient";
33
import { useNavigate } from "react-router-dom";
4+
import Button from "./Button";
45

56
export default function RegisterForm() {
67
const [email, setEmail] = useState("");
@@ -109,7 +110,12 @@ export default function RegisterForm() {
109110
onChange={(e) => setPasswordConfirm(e.target.value)}
110111
required
111112
/>
112-
<button type="submit">Register</button>
113+
<Button
114+
action="submit"
115+
content="Register"
116+
background="#458588"
117+
color="white"
118+
/>
113119
</form>
114120
);
115121
}

0 commit comments

Comments
 (0)