diff --git a/web/dist/app.js b/web/dist/app.js index 8ad82e7..380e609 100644 --- a/web/dist/app.js +++ b/web/dist/app.js @@ -1,2 +1,2 @@ -var _e,k,$e,it,q,Ee,Ae,He,Oe,he,fe,de,ct,X={},Re=[],at=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i,se=Array.isArray;function F(e,t){for(var n in t)e[n]=t[n];return e}function me(e){e&&e.parentNode&&e.parentNode.removeChild(e)}function y(e,t,n){var r,i,_,c={};for(_ in t)_=="key"?r=t[_]:_=="ref"?i=t[_]:c[_]=t[_];if(arguments.length>2&&(c.children=arguments.length>3?_e.call(arguments,2):n),typeof e=="function"&&e.defaultProps!=null)for(_ in e.defaultProps)c[_]===void 0&&(c[_]=e.defaultProps[_]);return ne(e,c,r,i,null)}function ne(e,t,n,r,i){var _={type:e,props:t,key:n,ref:r,__k:null,__:null,__b:0,__e:null,__c:null,constructor:void 0,__v:i??++$e,__i:-1,__u:0};return i==null&&k.vnode!=null&&k.vnode(_),_}function ie(e){return e.children}function oe(e,t){this.props=e,this.context=t}function z(e,t){if(t==null)return e.__?z(e.__,e.__i+1):null;for(var n;tu&&q.sort(He),e=q.shift(),u=q.length,e.__d&&(n=void 0,r=void 0,i=(r=(t=e).__v).__e,_=[],c=[],t.__P&&((n=F({},r)).__v=r.__v+1,k.vnode&&k.vnode(n),ve(t.__P,n,r,t.__n,t.__P.namespaceURI,32&r.__u?[i]:null,_,i??z(r),!!(32&r.__u),c),n.__v=r.__v,n.__.__k[n.__i]=n,Fe(_,n,c),r.__e=r.__=null,n.__e!=i&&De(n)));re.__r=0}function Ue(e,t,n,r,i,_,c,u,m,a,v){var s,p,h,w,P,T,g,b=r&&r.__k||Re,A=t.length;for(m=lt(n,t,b,m,A),s=0;s0?c=e.__k[_]=ne(c.type,c.props,c.key,c.ref?c.ref:null,c.__v):e.__k[_]=c,m=_+p,c.__=e,c.__b=e.__b+1,u=null,(a=c.__i=ut(c,n,m,s))!=-1&&(s--,(u=n[a])&&(u.__u|=2)),u==null||u.__v==null?(a==-1&&(i>v?p--:im?p--:p++,c.__u|=4))):e.__k[_]=null;if(s)for(_=0;_(v?1:0)){for(i=n-1,_=n+1;i>=0||_=0?i--:_++])!=null&&(2&a.__u)==0&&u==a.key&&m==a.type)return c}return-1}function Ne(e,t,n){t[0]=="-"?e.setProperty(t,n??""):e[t]=n==null?"":typeof n!="number"||at.test(t)?n:n+"px"}function te(e,t,n,r,i){var _,c;e:if(t=="style")if(typeof n=="string")e.style.cssText=n;else{if(typeof r=="string"&&(e.style.cssText=r=""),r)for(t in r)n&&t in n||Ne(e.style,t,"");if(n)for(t in n)r&&n[t]==r[t]||Ne(e.style,t,n[t])}else if(t[0]=="o"&&t[1]=="n")_=t!=(t=t.replace(Oe,"$1")),c=t.toLowerCase(),t=c in e||t=="onFocusOut"||t=="onFocusIn"?c.slice(2):t.slice(2),e.l||(e.l={}),e.l[t+_]=n,n?r?n.u=r.u:(n.u=he,e.addEventListener(t,_?de:fe,_)):e.removeEventListener(t,_?de:fe,_);else{if(i=="http://www.w3.org/2000/svg")t=t.replace(/xlink(H|:h)/,"h").replace(/sName$/,"s");else if(t!="width"&&t!="height"&&t!="href"&&t!="list"&&t!="form"&&t!="tabIndex"&&t!="download"&&t!="rowSpan"&&t!="colSpan"&&t!="role"&&t!="popover"&&t in e)try{e[t]=n??"";break e}catch{}typeof n=="function"||(n==null||n===!1&&t[4]!="-"?e.removeAttribute(t):e.setAttribute(t,t=="popover"&&n==1?"":n))}}function Me(e){return function(t){if(this.l){var n=this.l[t.type+e];if(t.t==null)t.t=he++;else if(t.t0?e:se(e)?e.map(We):F({},e)}function ft(e,t,n,r,i,_,c,u,m){var a,v,s,p,h,w,P,T=n.props||X,g=t.props,b=t.type;if(b=="svg"?i="http://www.w3.org/2000/svg":b=="math"?i="http://www.w3.org/1998/Math/MathML":i||(i="http://www.w3.org/1999/xhtml"),_!=null){for(a=0;a<_.length;a++)if((h=_[a])&&"setAttribute"in h==!!b&&(b?h.localName==b:h.nodeType==3)){e=h,_[a]=null;break}}if(e==null){if(b==null)return document.createTextNode(g);e=document.createElementNS(i,b,g.is&&g),u&&(k.__m&&k.__m(t,_),u=!1),_=null}if(b==null)T===g||u&&e.data==g||(e.data=g);else{if(_=_&&_e.call(e.childNodes),!u&&_!=null)for(T={},a=0;a=n.__.length&&n.__.push({}),n.__[e]}function E(e){return ee=1,pt(tt,e)}function pt(e,t,n){var r=ke(Z++,2);if(r.t=e,!r.__c&&(r.__=[n?n(t):tt(void 0,t),function(u){var m=r.__N?r.__N[0]:r.__[0],a=r.t(m,u);m!==a&&(r.__N=[a,r.__[1]],r.__c.setState({}))}],r.__c=C,!C.__f)){var i=function(u,m,a){if(!r.__c.__H)return!0;var v=r.__c.__H.__.filter(function(p){return!!p.__c});if(v.every(function(p){return!p.__N}))return!_||_.call(this,u,m,a);var s=r.__c.props!==u;return v.forEach(function(p){if(p.__N){var h=p.__[0];p.__=p.__N,p.__N=void 0,h!==p.__[0]&&(s=!0)}}),_&&_.call(this,u,m,a)||s};C.__f=!0;var _=C.shouldComponentUpdate,c=C.componentWillUpdate;C.componentWillUpdate=function(u,m,a){if(this.__e){var v=_;_=void 0,i(u,m,a),_=v}c&&c.call(this,u,m,a)},C.shouldComponentUpdate=i}return r.__N||r.__}function $(e,t){var n=ke(Z++,3);!I.__s&&et(n.__H,t)&&(n.__=e,n.u=t,C.__H.__h.push(n))}function R(e){return ee=5,Ze(function(){return{current:e}},[])}function Ze(e,t){var n=ke(Z++,7);return et(n.__H,t)&&(n.__=e(),n.__H=t,n.__h=e),n.__}function G(e,t){return ee=8,Ze(function(){return e},t)}function ht(){for(var e;e=Xe.shift();)if(e.__P&&e.__H)try{e.__H.__h.forEach(ce),e.__H.__h.forEach(ge),e.__H.__h=[]}catch(t){e.__H.__h=[],I.__e(t,e.__v)}}I.__b=function(e){C=null,Be&&Be(e)},I.__=function(e,t){e&&t.__k&&t.__k.__m&&(e.__m=t.__k.__m),Qe&&Qe(e,t)},I.__r=function(e){qe&&qe(e),Z=0;var t=(C=e.__c).__H;t&&(be===C?(t.__h=[],C.__h=[],t.__.forEach(function(n){n.__N&&(n.__=n.__N),n.u=n.__N=void 0})):(t.__h.forEach(ce),t.__h.forEach(ge),t.__h=[],Z=0)),be=C},I.diffed=function(e){Ke&&Ke(e);var t=e.__c;t&&t.__H&&(t.__H.__h.length&&(Xe.push(t)!==1&&Ve===I.requestAnimationFrame||((Ve=I.requestAnimationFrame)||mt)(ht)),t.__H.__.forEach(function(n){n.u&&(n.__H=n.u),n.u=void 0})),be=C=null},I.__c=function(e,t){t.some(function(n){try{n.__h.forEach(ce),n.__h=n.__h.filter(function(r){return!r.__||ge(r)})}catch(r){t.some(function(i){i.__h&&(i.__h=[])}),t=[],I.__e(r,n.__v)}}),ze&&ze(e,t)},I.unmount=function(e){Ge&&Ge(e);var t,n=e.__c;n&&n.__H&&(n.__H.__.forEach(function(r){try{ce(r)}catch(i){t=i}}),n.__H=void 0,t&&I.__e(t,n.__v))};var Ye=typeof requestAnimationFrame=="function";function mt(e){var t,n=function(){clearTimeout(r),Ye&&cancelAnimationFrame(t),setTimeout(e)},r=setTimeout(n,35);Ye&&(t=requestAnimationFrame(n))}function ce(e){var t=C,n=e.__c;typeof n=="function"&&(e.__c=void 0,n()),C=t}function ge(e){var t=C;e.__c=e.__(),C=t}function et(e,t){return!e||e.length!==t.length||t.some(function(n,r){return n!==e[r]})}function tt(e,t){return typeof t=="function"?t(e):t}var vt="/api/v1",yt=15,bt=3e3,gt=1e4;function M(e,t={}){let n=localStorage.getItem("neoirc_token"),r={"Content-Type":"application/json",...t.headers||{}};n&&(r.Authorization=`Bearer ${n}`);let{signal:i,..._}=t;return fetch(vt+e,{..._,headers:r,signal:i}).then(async c=>{let u=await c.json().catch(()=>null);if(!c.ok)throw{status:c.status,data:u};return u})}function nt(e){return new Date(e).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit",second:"2-digit"})}function ot(e){let t=0;for(let r=0;r{M("/server").then(p=>{p.name&&m(p.name),p.motd&&c(p.motd)}).catch(()=>{}),localStorage.getItem("neoirc_token")&&M("/state").then(p=>e(p.nick)).catch(()=>localStorage.removeItem("neoirc_token")),a.current?.focus()},[]),y("div",{class:"login-screen"},y("h1",null,u),_&&y("div",{class:"motd"},_),y("form",{onSubmit:async s=>{s.preventDefault(),i("");try{let p=await M("/session",{method:"POST",body:JSON.stringify({nick:t.trim()})});localStorage.setItem("neoirc_token",p.token),e(p.nick)}catch(p){i(p.data?.error||"Connection failed")}}},y("input",{ref:a,type:"text",placeholder:"Choose a nickname...",value:t,onInput:s=>n(s.target.value),maxLength:32,autoFocus:!0}),y("button",{type:"submit"},"Connect")),r&&y("div",{class:"error"},r))}function St({msg:e}){return e.system?y("div",{class:"message system"},y("span",{class:"timestamp"},nt(e.ts)),y("span",{class:"content"},e.text)):y("div",{class:"message"},y("span",{class:"timestamp"},nt(e.ts)),y("span",{class:"nick",style:{color:ot(e.from)}},e.from),y("span",{class:"content"},e.text))}function wt(){let[e,t]=E(!1),[n,r]=E(""),[i,_]=E([{type:"server",name:"Server"}]),[c,u]=E(0),[m,a]=E({Server:[]}),[v,s]=E({}),[p,h]=E({}),[w,P]=E({}),[T,g]=E(""),[b,A]=E(""),[D,J]=E(!0),U=R(0),Q=R(new Set),V=R(null),H=R(i),K=R(c),N=R(n),L=R(),Se=R();$(()=>{H.current=i},[i]),$(()=>{K.current=c},[c]),$(()=>{N.current=n},[n]),$(()=>{let o=i.filter(l=>l.type==="channel").map(l=>l.name);localStorage.setItem("neoirc_channels",JSON.stringify(o))},[i]),$(()=>{let o=i[c];o&&P(l=>({...l,[o.name]:0}))},[c,i]);let O=G((o,l)=>{if(l.id&&Q.current.has(l.id))return;l.id&&Q.current.add(l.id),a(d=>({...d,[o]:[...d[o]||[],l]}));let f=H.current[K.current];(!f||f.name!==o)&&P(d=>({...d,[o]:(d[o]||0)+1}))},[]),W=G((o,l)=>{a(f=>({...f,[o]:[...f[o]||[],{id:"sys-"+Date.now()+"-"+Math.random(),ts:new Date().toISOString(),text:l,system:!0}]}))},[]),B=G(o=>{let l=o.replace("#","");M(`/channels/${l}/members`).then(f=>{s(d=>({...d,[o]:f}))}).catch(()=>{})},[]),ae=G(o=>{let l=Array.isArray(o.body)?o.body.join(` -`):"",f={id:o.id,ts:o.ts,from:o.from,to:o.to,command:o.command};switch(o.command){case"PRIVMSG":case"NOTICE":{let d={...f,text:l,system:!1},S=o.to;if(S&&S.startsWith("#"))O(S,d);else{let x=o.from===N.current?o.to:o.from;_(Y=>Y.find(xe=>xe.type==="dm"&&xe.name===x)?Y:[...Y,{type:"dm",name:x}]),O(x,d)}break}case"JOIN":{let d=`${o.from} has joined ${o.to}`;o.to&&O(o.to,{...f,text:d,system:!0}),o.to&&o.to.startsWith("#")&&B(o.to);break}case"PART":{let d=l?": "+l:"",S=`${o.from} has left ${o.to}${d}`;o.to&&O(o.to,{...f,text:S,system:!0}),o.to&&o.to.startsWith("#")&&B(o.to);break}case"QUIT":{let d=l?": "+l:"",S=`${o.from} has quit${d}`;H.current.forEach(x=>{x.type==="channel"&&O(x.name,{...f,text:S,system:!0})});break}case"NICK":{let d=Array.isArray(o.body)?o.body[0]:l,S=`${o.from} is now known as ${d}`;H.current.forEach(x=>{x.type==="channel"&&O(x.name,{...f,text:S,system:!0})}),o.from===N.current&&d&&r(d),H.current.forEach(x=>{x.type==="channel"&&B(x.name)});break}case"TOPIC":{let d=`${o.from} set the topic: ${l}`;o.to&&(O(o.to,{...f,text:d,system:!0}),h(S=>({...S,[o.to]:l})));break}case"375":case"372":case"376":O("Server",{...f,text:l,system:!0});break;default:O("Server",{...f,text:l||o.command,system:!0})}},[O,B]);$(()=>{if(!e)return;let o=!0;return(async()=>{for(;o;)try{let f=new AbortController;V.current=f;let d=await M(`/messages?after=${U.current}&timeout=${yt}`,{signal:f.signal});if(!o)break;if(J(!0),d.messages)for(let S of d.messages)ae(S);d.last_id>U.current&&(U.current=d.last_id)}catch(f){if(!o)break;if(f.name==="AbortError")continue;J(!1),await new Promise(d=>setTimeout(d,bt))}})(),()=>{o=!1,V.current?.abort()}},[e,ae]),$(()=>{if(!e)return;let o=i[c];if(!o||o.type!=="channel")return;B(o.name);let l=setInterval(()=>B(o.name),gt);return()=>clearInterval(l)},[e,c,i,B]),$(()=>{L.current?.scrollIntoView({behavior:"smooth"})},[m,c]),$(()=>{Se.current?.focus()},[c]),$(()=>{if(!e)return;let o=i[c];!o||o.type!=="channel"||M("/channels").then(l=>{let f=l.find(d=>d.name===o.name);f&&f.topic&&h(d=>({...d,[o.name]:f.topic}))}).catch(()=>{})},[e,c,i]);let rt=G(async o=>{r(o),t(!0),W("Server",`Connected as ${o}`);let l=JSON.parse(localStorage.getItem("neoirc_channels")||"[]");for(let f of l)try{await M("/messages",{method:"POST",body:JSON.stringify({command:"JOIN",to:f})}),_(d=>d.find(S=>S.type==="channel"&&S.name===f)?d:[...d,{type:"channel",name:f}])}catch{}},[W]),le=async o=>{if(o){o=o.trim(),o.startsWith("#")||(o="#"+o);try{await M("/messages",{method:"POST",body:JSON.stringify({command:"JOIN",to:o})}),_(l=>l.find(f=>f.type==="channel"&&f.name===o)?l:[...l,{type:"channel",name:o}]),u(i.length);try{let l=await M(`/history?target=${encodeURIComponent(o)}&limit=50`);if(Array.isArray(l))for(let f of l)ae(f)}catch{}A("")}catch(l){W("Server",`Failed to join ${o}: ${l.data?.error||"error"}`)}}},we=async o=>{try{await M("/messages",{method:"POST",body:JSON.stringify({command:"PART",to:o})})}catch{}_(l=>l.filter(f=>!(f.type==="channel"&&f.name===o))),u(0)},_t=o=>{let l=i[o];l.type==="channel"?we(l.name):l.type==="dm"&&(_(f=>f.filter((d,S)=>S!==o)),c>=o&&u(Math.max(0,c-1)))},Ce=o=>{_(f=>f.find(d=>d.type==="dm"&&d.name===o)?f:[...f,{type:"dm",name:o}]);let l=i.findIndex(f=>f.type==="dm"&&f.name===o);u(l>=0?l:i.length)},Te=async()=>{let o=T.trim();if(!o)return;g("");let l=i[c];if(!(!l||l.type==="server")){if(o.startsWith("/")){let f=o.split(" "),d=f[0].toLowerCase();if(d==="/join"&&f[1]){le(f[1]);return}if(d==="/part"){l.type==="channel"&&we(l.name);return}if(d==="/msg"&&f[1]&&f.slice(2).join(" ")){let S=f[1],x=f.slice(2).join(" ");try{await M("/messages",{method:"POST",body:JSON.stringify({command:"PRIVMSG",to:S,body:[x]})}),Ce(S)}catch(Y){W("Server",`DM failed: ${Y.data?.error||"error"}`)}return}if(d==="/nick"&&f[1]){try{await M("/messages",{method:"POST",body:JSON.stringify({command:"NICK",body:[f[1]]})})}catch(S){W("Server",`Nick change failed: ${S.data?.error||"error"}`)}return}if(d==="/topic"&&l.type==="channel"){let S=f.slice(1).join(" ");try{await M("/messages",{method:"POST",body:JSON.stringify({command:"TOPIC",to:l.name,body:[S]})})}catch(x){W("Server",`Topic failed: ${x.data?.error||"error"}`)}return}W("Server",`Unknown command: ${d}`);return}try{await M("/messages",{method:"POST",body:JSON.stringify({command:"PRIVMSG",to:l.name,body:[o]})})}catch(f){W(l.name,`Send failed: ${f.data?.error||"error"}`)}}};if(!e)return y(kt,{onLogin:rt});let j=i[c]||i[0],st=m[j.name]||[],Ie=v[j.name]||[],ue=p[j.name]||"";return y("div",{class:"app"},y("div",{class:"tab-bar"},!D&&y("div",{class:"connection-status"},"\u26A0 Reconnecting..."),i.map((o,l)=>y("div",{class:`tab ${l===c?"active":""}`,onClick:()=>u(l)},o.type==="dm"?`\u2192${o.name}`:o.name,w[o.name]>0&&l!==c&&y("span",{class:"unread-badge"},w[o.name]),o.type!=="server"&&y("span",{class:"close-btn",onClick:f=>{f.stopPropagation(),_t(l)}},"\xD7"))),y("div",{class:"join-dialog"},y("input",{placeholder:"#channel",value:b,onInput:o=>A(o.target.value),onKeyDown:o=>o.key==="Enter"&&le(b)}),y("button",{onClick:()=>le(b)},"Join"))),j.type==="channel"&&ue&&y("div",{class:"topic-bar",title:ue},ue),y("div",{class:"content"},y("div",{class:"messages-pane"},y("div",{class:j.type==="server"?"server-messages":"messages"},st.map(o=>y(St,{msg:o})),y("div",{ref:L})),j.type!=="server"&&y("div",{class:"input-bar"},y("input",{ref:Se,placeholder:`Message ${j.name}...`,value:T,onInput:o=>g(o.target.value),onKeyDown:o=>o.key==="Enter"&&Te()}),y("button",{onClick:Te},"Send"))),j.type==="channel"&&y("div",{class:"user-list"},y("h3",null,"Users (",Ie.length,")"),Ie.map(o=>y("div",{class:"user",onClick:()=>Ce(o.nick),style:{color:ot(o.nick)}},o.nick)))))}Je(y(wt,null),document.getElementById("root")); +var ae,S,He,ht,K,Ae,Re,De,Le,he,de,pe,yt,X={},je=[],vt=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i,_e=Array.isArray;function J(e,t){for(var n in t)e[n]=t[n];return e}function ye(e){e&&e.parentNode&&e.parentNode.removeChild(e)}function y(e,t,n){var r,a,s,c={};for(s in t)s=="key"?r=t[s]:s=="ref"?a=t[s]:c[s]=t[s];if(arguments.length>2&&(c.children=arguments.length>3?ae.call(arguments,2):n),typeof e=="function"&&e.defaultProps!=null)for(s in e.defaultProps)c[s]===void 0&&(c[s]=e.defaultProps[s]);return oe(e,c,r,a,null)}function oe(e,t,n,r,a){var s={type:e,props:t,key:n,ref:r,__k:null,__:null,__b:0,__e:null,__c:null,constructor:void 0,__v:a??++He,__i:-1,__u:0};return a==null&&S.vnode!=null&&S.vnode(s),s}function ce(e){return e.children}function re(e,t){this.props=e,this.context=t}function Q(e,t){if(t==null)return e.__?Q(e.__,e.__i+1):null;for(var n;tu&&K.sort(De),e=K.shift(),u=K.length,e.__d&&(n=void 0,r=void 0,a=(r=(t=e).__v).__e,s=[],c=[],t.__P&&((n=J({},r)).__v=r.__v+1,S.vnode&&S.vnode(n),ve(t.__P,n,r,t.__n,t.__P.namespaceURI,32&r.__u?[a]:null,s,a??Q(r),!!(32&r.__u),c),n.__v=r.__v,n.__.__k[n.__i]=n,Be(s,n,c),r.__e=r.__=null,n.__e!=a&&We(n)));se.__r=0}function Fe(e,t,n,r,a,s,c,u,v,l,b){var _,m,h,T,A,x,g,k=r&&r.__k||je,O=t.length;for(v=bt(n,t,k,v,O),_=0;_0?c=e.__k[s]=oe(c.type,c.props,c.key,c.ref?c.ref:null,c.__v):e.__k[s]=c,v=s+m,c.__=e,c.__b=e.__b+1,u=null,(l=c.__i=kt(c,n,v,_))!=-1&&(_--,(u=n[l])&&(u.__u|=2)),u==null||u.__v==null?(l==-1&&(a>b?m--:av?m--:m++,c.__u|=4))):e.__k[s]=null;if(_)for(s=0;s(b?1:0)){for(a=n-1,s=n+1;a>=0||s=0?a--:s++])!=null&&(2&l.__u)==0&&u==l.key&&v==l.type)return c}return-1}function $e(e,t,n){t[0]=="-"?e.setProperty(t,n??""):e[t]=n==null?"":typeof n!="number"||vt.test(t)?n:n+"px"}function ne(e,t,n,r,a){var s,c;e:if(t=="style")if(typeof n=="string")e.style.cssText=n;else{if(typeof r=="string"&&(e.style.cssText=r=""),r)for(t in r)n&&t in n||$e(e.style,t,"");if(n)for(t in n)r&&n[t]==r[t]||$e(e.style,t,n[t])}else if(t[0]=="o"&&t[1]=="n")s=t!=(t=t.replace(Le,"$1")),c=t.toLowerCase(),t=c in e||t=="onFocusOut"||t=="onFocusIn"?c.slice(2):t.slice(2),e.l||(e.l={}),e.l[t+s]=n,n?r?n.u=r.u:(n.u=he,e.addEventListener(t,s?pe:de,s)):e.removeEventListener(t,s?pe:de,s);else{if(a=="http://www.w3.org/2000/svg")t=t.replace(/xlink(H|:h)/,"h").replace(/sName$/,"s");else if(t!="width"&&t!="height"&&t!="href"&&t!="list"&&t!="form"&&t!="tabIndex"&&t!="download"&&t!="rowSpan"&&t!="colSpan"&&t!="role"&&t!="popover"&&t in e)try{e[t]=n??"";break e}catch{}typeof n=="function"||(n==null||n===!1&&t[4]!="-"?e.removeAttribute(t):e.setAttribute(t,t=="popover"&&n==1?"":n))}}function Ue(e){return function(t){if(this.l){var n=this.l[t.type+e];if(t.t==null)t.t=he++;else if(t.t0?e:_e(e)?e.map(Ve):J({},e)}function gt(e,t,n,r,a,s,c,u,v){var l,b,_,m,h,T,A,x=n.props||X,g=t.props,k=t.type;if(k=="svg"?a="http://www.w3.org/2000/svg":k=="math"?a="http://www.w3.org/1998/Math/MathML":a||(a="http://www.w3.org/1999/xhtml"),s!=null){for(l=0;l=n.__.length&&n.__.push({}),n.__[e]}function E(e){return ee=1,wt(st,e)}function wt(e,t,n){var r=Se(Z++,2);if(r.t=e,!r.__c&&(r.__=[n?n(t):st(void 0,t),function(u){var v=r.__N?r.__N[0]:r.__[0],l=r.t(v,u);v!==l&&(r.__N=[l,r.__[1]],r.__c.setState({}))}],r.__c=C,!C.__f)){var a=function(u,v,l){if(!r.__c.__H)return!0;var b=r.__c.__H.__.filter(function(m){return!!m.__c});if(b.every(function(m){return!m.__N}))return!s||s.call(this,u,v,l);var _=r.__c.props!==u;return b.forEach(function(m){if(m.__N){var h=m.__[0];m.__=m.__N,m.__N=void 0,h!==m.__[0]&&(_=!0)}}),s&&s.call(this,u,v,l)||_};C.__f=!0;var s=C.shouldComponentUpdate,c=C.componentWillUpdate;C.componentWillUpdate=function(u,v,l){if(this.__e){var b=s;s=void 0,a(u,v,l),s=b}c&&c.call(this,u,v,l)},C.shouldComponentUpdate=a}return r.__N||r.__}function U(e,t){var n=Se(Z++,3);!I.__s&&rt(n.__H,t)&&(n.__=e,n.u=t,C.__H.__h.push(n))}function L(e){return ee=5,ot(function(){return{current:e}},[])}function ot(e,t){var n=Se(Z++,7);return rt(n.__H,t)&&(n.__=e(),n.__H=t,n.__h=e),n.__}function z(e,t){return ee=8,ot(function(){return e},t)}function Ct(){for(var e;e=nt.shift();)if(e.__P&&e.__H)try{e.__H.__h.forEach(ie),e.__H.__h.forEach(ge),e.__H.__h=[]}catch(t){e.__H.__h=[],I.__e(t,e.__v)}}I.__b=function(e){C=null,ze&&ze(e)},I.__=function(e,t){e&&t.__k&&t.__k.__m&&(e.__m=t.__k.__m),et&&et(e,t)},I.__r=function(e){Qe&&Qe(e),Z=0;var t=(C=e.__c).__H;t&&(ke===C?(t.__h=[],C.__h=[],t.__.forEach(function(n){n.__N&&(n.__=n.__N),n.u=n.__N=void 0})):(t.__h.forEach(ie),t.__h.forEach(ge),t.__h=[],Z=0)),ke=C},I.diffed=function(e){Ye&&Ye(e);var t=e.__c;t&&t.__H&&(t.__H.__h.length&&(nt.push(t)!==1&&Ke===I.requestAnimationFrame||((Ke=I.requestAnimationFrame)||Tt)(Ct)),t.__H.__.forEach(function(n){n.u&&(n.__H=n.u),n.u=void 0})),ke=C=null},I.__c=function(e,t){t.some(function(n){try{n.__h.forEach(ie),n.__h=n.__h.filter(function(r){return!r.__||ge(r)})}catch(r){t.some(function(a){a.__h&&(a.__h=[])}),t=[],I.__e(r,n.__v)}}),Xe&&Xe(e,t)},I.unmount=function(e){Ze&&Ze(e);var t,n=e.__c;n&&n.__H&&(n.__H.__.forEach(function(r){try{ie(r)}catch(a){t=a}}),n.__H=void 0,t&&I.__e(t,n.__v))};var tt=typeof requestAnimationFrame=="function";function Tt(e){var t,n=function(){clearTimeout(r),tt&&cancelAnimationFrame(t),setTimeout(e)},r=setTimeout(n,35);tt&&(t=requestAnimationFrame(n))}function ie(e){var t=C,n=e.__c;typeof n=="function"&&(e.__c=void 0,n()),C=t}function ge(e){var t=C;e.__c=e.__(),C=t}function rt(e,t){return!e||e.length!==t.length||t.some(function(n,r){return n!==e[r]})}function st(e,t){return typeof t=="function"?t(e):t}var xt="/api/v1",It=15,Pt=3e3,Et=1e4,Mt=100;function M(e,t={}){let n=localStorage.getItem("neoirc_token"),r={"Content-Type":"application/json",...t.headers||{}};n&&(r.Authorization=`Bearer ${n}`);let{signal:a,...s}=t;return fetch(xt+e,{...s,headers:r,signal:a}).then(async c=>{let u=await c.json().catch(()=>null);if(!c.ok)throw{status:c.status,data:u};return u})}function we(e){return new Date(e).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit",second:"2-digit"})}function at(e){let t=0;for(let r=0;r{M("/server").then(m=>{m.name&&v(m.name),m.motd&&c(m.motd)}).catch(()=>{}),localStorage.getItem("neoirc_token")&&M("/state").then(m=>e(m.nick)).catch(()=>localStorage.removeItem("neoirc_token")),l.current?.focus()},[]),y("div",{class:"login-screen"},y("h1",null,u),s&&y("div",{class:"motd"},s),y("form",{onSubmit:async _=>{_.preventDefault(),a("");try{let m=await M("/session",{method:"POST",body:JSON.stringify({nick:t.trim()})});localStorage.setItem("neoirc_token",m.token),e(m.nick)}catch(m){a(m.data?.error||"Connection failed")}}},y("input",{ref:l,type:"text",placeholder:"Choose a nickname...",value:t,onInput:_=>n(_.target.value),maxLength:32,autoFocus:!0}),y("button",{type:"submit"},"Connect")),r&&y("div",{class:"error"},r))}function At({msg:e}){return e.system?y("div",{class:"message system"},y("span",{class:"timestamp"},we(e.ts)),y("span",{class:"content"},e.text)):e.action?y("div",{class:"message action"},y("span",{class:"timestamp"},we(e.ts)),y("span",{class:"content"},"* ",y("span",{class:"action-nick",style:{color:at(e.from)}},e.from)," ",e.text)):y("div",{class:"message"},y("span",{class:"timestamp"},we(e.ts)),y("span",{class:"nick",style:{color:at(e.from)}},e.from),y("span",{class:"content"},e.text))}function Ot({members:e,userModes:t,onDM:n}){let r=[...e].sort((a,s)=>{let c=t[a.nick]||"",u=t[s.nick]||"",v=c==="o"?0:c==="v"?1:2,l=u==="o"?0:u==="v"?1:2;return v!==l?v-l:a.nick.localeCompare(s.nick)});return y("div",{class:"user-list"},y("div",{class:"user-list-header"},"Users (",e.length,")"),y("div",{class:"user-list-entries"},r.map(a=>{let s=t[a.nick]||"",c=s==="o"?"@":s==="v"?"+":"";return y("div",{class:`user ${s==="o"?"op":s==="v"?"voice":""}`,onClick:()=>n(a.nick),title:a.nick},c,a.nick)})))}function $t(){let[e,t]=E(!1),[n,r]=E(""),[a,s]=E([{type:"server",name:"Server"}]),[c,u]=E(0),[v,l]=E({Server:[]}),[b,_]=E({}),[m,h]=E({}),[T,A]=E({}),[x,g]=E({}),[k,O]=E(""),[j,V]=E(!0),[H,te]=E([]),[B,R]=E(-1),q=L(0),$=L(new Set),W=L(null),Y=L(a),Ce=L(c),le=L(n),Te=L(),xe=L();U(()=>{Y.current=a},[a]),U(()=>{Ce.current=c},[c]),U(()=>{le.current=n},[n]),U(()=>{let o=a.filter(i=>i.type==="channel").map(i=>i.name);localStorage.setItem("neoirc_channels",JSON.stringify(o))},[a]),U(()=>{let o=a[c];o&&g(i=>({...i,[o.name]:0}))},[c,a]);let D=z((o,i)=>{if(i.id&&$.current.has(i.id))return;i.id&&$.current.add(i.id),l(d=>({...d,[o]:[...d[o]||[],i]}));let f=Y.current[Ce.current];(!f||f.name!==o)&&g(d=>({...d,[o]:(d[o]||0)+1}))},[]),P=z((o,i)=>{l(f=>({...f,[o]:[...f[o]||[],{id:"sys-"+Date.now()+"-"+Math.random(),ts:new Date().toISOString(),text:i,system:!0}]}))},[]),G=z(o=>{let i=o.replace("#","");M(`/channels/${i}/members`).then(f=>{_(d=>({...d,[o]:f}))}).catch(()=>{})},[]),Ie=z((o,i)=>{let f=i.trim().split(/\s+/),d={};for(let p of f)p.startsWith("@")?d[p.slice(1)]="o":p.startsWith("+")&&(d[p.slice(1)]="v");h(p=>({...p,[o]:{...p[o]||{},...d}}))},[]),ue=z(o=>{let i=Array.isArray(o.body)?o.body.join(` +`):"",f={id:o.id,ts:o.ts,from:o.from,to:o.to,command:o.command},d=o.meta&&o.meta.action;switch(o.command){case"PRIVMSG":case"NOTICE":{let p={...f,text:i,system:!1,action:d},w=o.to;if(w&&w.startsWith("#"))D(w,p);else{let N=o.from===le.current?o.to:o.from;s(fe=>fe.find(Ne=>Ne.type==="dm"&&Ne.name===N)?fe:[...fe,{type:"dm",name:N}]),D(N,p)}break}case"JOIN":{let p=`${o.from} has joined ${o.to}`;o.to&&D(o.to,{...f,text:p,system:!0}),o.to&&o.to.startsWith("#")&&G(o.to);break}case"PART":{let p=i?": "+i:"",w=`${o.from} has parted ${o.to}${p}`;o.to&&D(o.to,{...f,text:w,system:!0}),o.to&&o.to.startsWith("#")&&G(o.to);break}case"QUIT":{let p=i?": "+i:"",w=`${o.from} has quit${p}`;Y.current.forEach(N=>{N.type==="channel"&&D(N.name,{...f,text:w,system:!0})});break}case"NICK":{let p=Array.isArray(o.body)?o.body[0]:i,w=`${o.from} is now known as ${p}`;Y.current.forEach(N=>{N.type==="channel"&&D(N.name,{...f,text:w,system:!0})}),o.from===le.current&&p&&r(p),Y.current.forEach(N=>{N.type==="channel"&&G(N.name)});break}case"TOPIC":{let p=`${o.from} set the topic: ${i}`;o.to&&(D(o.to,{...f,text:p,system:!0}),A(w=>({...w,[o.to]:i})));break}case"332":{let p=Array.isArray(o.params)&&o.params.length>0?o.params[0]:o.to;p&&A(w=>({...w,[p]:i}));break}case"353":{let p=Array.isArray(o.params)&&o.params.length>1?o.params[1]:o.to;p&&i&&Ie(p,i);break}case"366":break;case"375":case"372":case"376":D("Server",{...f,text:i,system:!0});break;default:D("Server",{...f,text:i||o.command,system:!0})}},[D,G,Ie]);U(()=>{if(!e)return;let o=!0;return(async()=>{for(;o;)try{let f=new AbortController;W.current=f;let d=await M(`/messages?after=${q.current}&timeout=${It}`,{signal:f.signal});if(!o)break;if(V(!0),d.messages)for(let p of d.messages)ue(p);d.last_id>q.current&&(q.current=d.last_id)}catch(f){if(!o)break;if(f.name==="AbortError")continue;V(!1),await new Promise(d=>setTimeout(d,Pt))}})(),()=>{o=!1,W.current?.abort()}},[e,ue]),U(()=>{if(!e)return;let o=a[c];if(!o||o.type!=="channel")return;G(o.name);let i=setInterval(()=>G(o.name),Et);return()=>clearInterval(i)},[e,c,a,G]),U(()=>{Te.current?.scrollIntoView({behavior:"smooth"})},[v,c]),U(()=>{xe.current?.focus()},[c]),U(()=>{if(!e)return;let o=a[c];!o||o.type!=="channel"||M("/channels").then(i=>{let f=i.find(d=>d.name===o.name);f&&f.topic&&A(d=>({...d,[o.name]:f.topic}))}).catch(()=>{})},[e,c,a]);let _t=z(async o=>{r(o),t(!0),P("Server",`Connected as ${o}`);let i=JSON.parse(localStorage.getItem("neoirc_channels")||"[]");for(let f of i)try{await M("/messages",{method:"POST",body:JSON.stringify({command:"JOIN",to:f})}),s(d=>d.find(p=>p.type==="channel"&&p.name===f)?d:[...d,{type:"channel",name:f}])}catch{}},[P]),ct=async o=>{if(o){o=o.trim(),o.startsWith("#")||(o="#"+o);try{await M("/messages",{method:"POST",body:JSON.stringify({command:"JOIN",to:o})}),s(i=>i.find(f=>f.type==="channel"&&f.name===o)?i:[...i,{type:"channel",name:o}]),u(a.length);try{let i=await M(`/history?target=${encodeURIComponent(o)}&limit=50`);if(Array.isArray(i))for(let f of i)ue(f)}catch{}}catch(i){P("Server",`Failed to join ${o}: ${i.data?.error||"error"}`)}}},Pe=async(o,i)=>{try{let f={command:"PART",to:o};i&&(f.body=[i]),await M("/messages",{method:"POST",body:JSON.stringify(f)})}catch{}s(f=>f.filter(d=>!(d.type==="channel"&&d.name===o))),u(0)},it=o=>{let i=a[o];i.type==="channel"?Pe(i.name):i.type==="dm"&&(s(f=>f.filter((d,p)=>p!==o)),c>=o&&u(Math.max(0,c-1)))},Ee=o=>{s(f=>f.find(d=>d.type==="dm"&&d.name===o)?f:[...f,{type:"dm",name:o}]);let i=a.findIndex(f=>f.type==="dm"&&f.name===o);u(i>=0?i:a.length)},lt=async o=>{let i=o.split(" "),f=i[0].toLowerCase(),d=a[c];switch(f){case"/join":i[1]?ct(i[1]):P(d?.name||"Server","Usage: /join #channel");break;case"/part":{if(d?.type==="channel"){let p=i.slice(1).join(" ")||"";Pe(d.name,p)}else P(d?.name||"Server","Not in a channel");break}case"/msg":if(i[1]&&i.slice(2).join(" ")){let p=i[1],w=i.slice(2).join(" ");try{await M("/messages",{method:"POST",body:JSON.stringify({command:"PRIVMSG",to:p,body:[w]})}),Ee(p)}catch(N){P("Server",`DM failed: ${N.data?.error||"error"}`)}}else P(d?.name||"Server","Usage: /msg ");break;case"/me":if(d&&d.type!=="server"){let p=i.slice(1).join(" ");if(p)try{await M("/messages",{method:"POST",body:JSON.stringify({command:"PRIVMSG",to:d.name,body:[p],meta:{action:!0}})})}catch(w){P(d.name,`Action failed: ${w.data?.error||"error"}`)}else P(d.name,"Usage: /me ")}break;case"/nick":if(i[1])try{await M("/messages",{method:"POST",body:JSON.stringify({command:"NICK",body:[i[1]]})})}catch(p){P("Server",`Nick change failed: ${p.data?.error||"error"}`)}else P(d?.name||"Server","Usage: /nick ");break;case"/topic":if(d?.type==="channel"){let p=i.slice(1).join(" ");try{await M("/messages",{method:"POST",body:JSON.stringify({command:"TOPIC",to:d.name,body:[p]})})}catch(w){P(d.name,`Topic failed: ${w.data?.error||"error"}`)}}else P(d?.name||"Server","Not in a channel");break;case"/mode":if(d?.type==="channel"&&i.length>=2){let p=i[1].startsWith("#")?i[1]:d.name,w=i[1].startsWith("#")?i.slice(2):i.slice(1);try{await M("/messages",{method:"POST",body:JSON.stringify({command:"MODE",to:p,params:w})})}catch(N){P(d.name,`Mode failed: ${N.data?.error||"error"}`)}}else P(d?.name||"Server","Usage: /mode [#channel] <+/-mode> [nick]");break;case"/quit":{let p=i.slice(1).join(" ");try{let w={command:"QUIT"};p&&(w.body=[p]),await M("/messages",{method:"POST",body:JSON.stringify(w)})}catch{}localStorage.removeItem("neoirc_token"),window.location.reload();break}case"/help":P(d?.name||"Server","Commands: /join #channel, /part [reason], /msg nick message, /me action, /nick newnick, /topic text, /mode [#channel] +/-mode [nick], /quit [reason], /help");break;default:P(d?.name||"Server",`Unknown command: ${f} \u2014 Type /help for available commands`)}},ut=async()=>{let o=k.trim();if(!o)return;te(f=>[o,...f].slice(0,Mt)),R(-1),O("");let i=a[c];if(o.startsWith("/")){await lt(o);return}if(!i||i.type==="server"){P("Server","Cannot send messages to the server tab. Join a channel with /join #channel");return}try{await M("/messages",{method:"POST",body:JSON.stringify({command:"PRIVMSG",to:i.name,body:[o]})})}catch(f){P(i.name,`Send failed: ${f.data?.error||"error"}`)}},ft=o=>{if(o.key==="Enter")ut();else if(o.key==="ArrowUp"){if(o.preventDefault(),H.length>0){let i=Math.min(B+1,H.length-1);R(i),O(H[i])}}else if(o.key==="ArrowDown")if(o.preventDefault(),B>0){let i=B-1;R(i),O(H[i])}else R(-1),O("")};if(!e)return y(Nt,{onLogin:_t});let F=a[c]||a[0],dt=v[F.name]||[],pt=b[F.name]||[],mt=m[F.name]||{},Me=T[F.name]||"";return y("div",{class:"app"},y("div",{class:"tab-bar"},!j&&y("div",{class:"connection-status"},"\u26A0 Reconnecting..."),a.map((o,i)=>y("div",{class:`tab ${i===c?"active":""} ${o.type}`,onClick:()=>u(i)},y("span",{class:"tab-name"},o.type==="dm"?`\u2192${o.name}`:o.name),x[o.name]>0&&i!==c&&y("span",{class:"unread-badge"},x[o.name]),o.type!=="server"&&y("span",{class:"close-btn",onClick:f=>{f.stopPropagation(),it(i)}},"\xD7")))),F.type==="channel"&&y("div",{class:"topic-bar",title:Me},y("span",{class:"topic-label"},"Topic:")," ",Me||"(no topic set)"),y("div",{class:"content"},y("div",{class:"messages-pane"},y("div",{class:F.type==="server"?"server-messages":"messages"},dt.map(o=>y(At,{msg:o})),y("div",{ref:Te}))),F.type==="channel"&&y(Ot,{members:pt,userModes:mt,onDM:Ee})),y("div",{class:"input-bar"},y("span",{class:"input-nick"},n),y("input",{ref:xe,placeholder:F.type==="server"?"Type /join #channel to get started...":`Message ${F.name}...`,value:k,onInput:o=>O(o.target.value),onKeyDown:ft})))}Ge(y($t,null),document.getElementById("root")); diff --git a/web/dist/style.css b/web/dist/style.css index ecf3ebb..9514429 100644 --- a/web/dist/style.css +++ b/web/dist/style.css @@ -1,28 +1,40 @@ -* { margin: 0; padding: 0; box-sizing: border-box; } - -:root { - --bg: #1a1a2e; - --bg-secondary: #16213e; - --bg-input: #0f3460; - --text: #e0e0e0; - --text-muted: #888; - --accent: #e94560; - --accent2: #0f3460; - --border: #2a2a4a; - --nick: #53a8b6; - --timestamp: #666; - --tab-active: #e94560; - --tab-bg: #16213e; - --tab-hover: #1a1a3e; - --topic-bg: #121a30; - --unread-bg: #e94560; - --warn: #f0ad4e; +* { + margin: 0; + padding: 0; + box-sizing: border-box; } -html, body, #root { +:root { + --bg: #0a0e14; + --bg-secondary: #0d1117; + --bg-input: #161b22; + --bg-highlight: #1a2030; + --text: #c9d1d9; + --text-muted: #6e7681; + --accent: #58a6ff; + --accent-dim: #1f6feb; + --border: #21262d; + --nick: #79c0ff; + --timestamp: #484f58; + --tab-active: #58a6ff; + --tab-bg: #0d1117; + --tab-hover: #161b22; + --topic-bg: #0d1117; + --unread-bg: #da3633; + --warn: #d29922; + --op-color: #f0883e; + --voice-color: #3fb950; + --action-color: #bc8cff; + --system-color: #484f58; +} + +html, +body, +#root { height: 100%; - font-family: 'Courier New', Courier, monospace; - font-size: 14px; + font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', + Courier, monospace; + font-size: 13px; background: var(--bg); color: var(--text); } @@ -57,15 +69,19 @@ html, body, #root { padding: 10px 24px; font-size: 16px; font-family: inherit; - background: var(--accent); + background: var(--accent-dim); border: none; color: white; border-radius: 4px; cursor: pointer; } +.login-screen button:hover { + background: var(--accent); +} + .login-screen .error { - color: var(--accent); + color: var(--unread-bg); } .login-screen .motd { @@ -89,36 +105,63 @@ html, body, #root { border-bottom: 1px solid var(--border); overflow-x: auto; flex-shrink: 0; - align-items: center; + align-items: stretch; + min-height: 32px; +} + +.tab-bar::-webkit-scrollbar { + height: 2px; +} + +.tab-bar::-webkit-scrollbar-thumb { + background: var(--border); } .tab { - padding: 8px 16px; + display: flex; + align-items: center; + padding: 6px 12px; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; color: var(--text-muted); user-select: none; - position: relative; + font-size: 12px; + gap: 6px; + transition: + background 0.1s, + color 0.1s; } .tab:hover { background: var(--tab-hover); + color: var(--text); } .tab.active { color: var(--text); border-bottom-color: var(--tab-active); + background: var(--bg-highlight); +} + +.tab.server { + font-weight: bold; +} + +.tab .tab-name { + overflow: hidden; + text-overflow: ellipsis; } .tab .close-btn { - margin-left: 8px; color: var(--text-muted); - font-size: 12px; + font-size: 14px; + line-height: 1; + flex-shrink: 0; } .tab .close-btn:hover { - color: var(--accent); + color: var(--unread-bg); } .tab .unread-badge { @@ -127,19 +170,22 @@ html, body, #root { color: white; font-size: 10px; font-weight: bold; - padding: 1px 5px; + padding: 0 5px; border-radius: 8px; - margin-left: 6px; min-width: 16px; text-align: center; + line-height: 16px; + flex-shrink: 0; } /* Connection status */ .connection-status { - padding: 4px 12px; + display: flex; + align-items: center; + padding: 0 12px; background: var(--warn); - color: #1a1a2e; - font-size: 12px; + color: var(--bg); + font-size: 11px; font-weight: bold; white-space: nowrap; flex-shrink: 0; @@ -147,7 +193,7 @@ html, body, #root { /* Topic bar */ .topic-bar { - padding: 6px 12px; + padding: 4px 12px; background: var(--topic-bg); border-bottom: 1px solid var(--border); color: var(--text-muted); @@ -158,6 +204,11 @@ html, body, #root { flex-shrink: 0; } +.topic-bar .topic-label { + color: var(--accent); + font-weight: bold; +} + /* Content area */ .content { display: flex; @@ -171,147 +222,210 @@ html, body, #root { display: flex; flex-direction: column; overflow: hidden; + min-width: 0; } .messages { flex: 1; overflow-y: auto; - padding: 8px 12px; + padding: 4px 0; +} + +.messages::-webkit-scrollbar { + width: 6px; +} + +.messages::-webkit-scrollbar-thumb { + background: var(--border); + border-radius: 3px; } .message { - padding: 2px 0; - line-height: 1.4; + padding: 1px 12px; + line-height: 1.5; word-wrap: break-word; } +.message:hover { + background: var(--bg-highlight); +} + .message .timestamp { color: var(--timestamp); - font-size: 12px; - margin-right: 8px; + font-size: 11px; + margin-right: 6px; } .message .nick { - color: var(--nick); font-weight: bold; - margin-right: 8px; + margin-right: 6px; } -.message .nick::before { content: '<'; } -.message .nick::after { content: '>'; } +.message .nick::before { + content: '<'; + color: var(--text-muted); +} + +.message .nick::after { + content: '>'; + color: var(--text-muted); +} .message.system { - color: var(--text-muted); + color: var(--system-color); font-style: italic; } -.message.system .nick { - color: var(--text-muted); +.message.system .timestamp { + color: var(--timestamp); } -.message.system .nick::before, -.message.system .nick::after { content: ''; } +.message.system .content::before { + content: '*** '; +} -/* Input */ +.message.action { + color: var(--action-color); +} + +.message.action .timestamp { + color: var(--timestamp); +} + +.message.action .action-nick { + font-weight: bold; +} + +/* Input bar — full width at bottom */ .input-bar { display: flex; + align-items: center; border-top: 1px solid var(--border); background: var(--bg-secondary); flex-shrink: 0; } +.input-bar .input-nick { + padding: 0 8px 0 12px; + color: var(--accent); + font-weight: bold; + white-space: nowrap; + flex-shrink: 0; + font-size: 13px; +} + +.input-bar .input-nick::after { + content: '>'; + color: var(--text-muted); + margin-left: 1px; +} + .input-bar input { flex: 1; - padding: 10px 12px; + padding: 8px 8px; font-family: inherit; - font-size: 14px; - background: var(--bg-input); + font-size: 13px; + background: transparent; border: none; color: var(--text); outline: none; } -.input-bar button { - padding: 10px 16px; - font-family: inherit; - background: var(--accent); - border: none; - color: white; - cursor: pointer; +.input-bar input::placeholder { + color: var(--text-muted); } /* User list */ .user-list { - width: 160px; + width: 170px; background: var(--bg-secondary); border-left: 1px solid var(--border); - overflow-y: auto; - padding: 8px; + display: flex; + flex-direction: column; flex-shrink: 0; } -.user-list h3 { +.user-list-header { + padding: 6px 10px; color: var(--text-muted); font-size: 11px; text-transform: uppercase; - margin-bottom: 8px; - letter-spacing: 1px; + letter-spacing: 0.5px; + border-bottom: 1px solid var(--border); + font-weight: bold; + flex-shrink: 0; +} + +.user-list-entries { + overflow-y: auto; + flex: 1; + padding: 4px 0; +} + +.user-list-entries::-webkit-scrollbar { + width: 4px; +} + +.user-list-entries::-webkit-scrollbar-thumb { + background: var(--border); } .user-list .user { - padding: 3px 4px; - color: var(--nick); - font-size: 13px; + padding: 2px 10px; + font-size: 12px; cursor: pointer; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + color: var(--text); } .user-list .user:hover { background: var(--tab-hover); } -/* Server tab */ +.user-list .user.op { + color: var(--op-color); +} + +.user-list .user.voice { + color: var(--voice-color); +} + +/* Server tab messages */ .server-messages { color: var(--text-muted); - padding: 12px; + padding: 8px 12px; white-space: pre-wrap; overflow-y: auto; flex: 1; } -/* Channel join dialog */ -.join-dialog { - padding: 12px; - display: flex; - gap: 8px; - background: var(--bg-secondary); - border-bottom: 1px solid var(--border); - margin-left: auto; +.server-messages .message { + padding: 1px 0; } -.join-dialog input { - padding: 6px 10px; - font-family: inherit; - font-size: 13px; - background: var(--bg-input); - border: 1px solid var(--border); - color: var(--text); - border-radius: 3px; - width: 200px; -} - -.join-dialog button { - padding: 6px 14px; - font-family: inherit; - font-size: 13px; - background: var(--accent2); - border: none; - color: var(--text); - border-radius: 3px; - cursor: pointer; +.server-messages .message:hover { + background: var(--bg-highlight); } /* Responsive */ @media (max-width: 600px) { - .user-list { display: none; } - .tab { padding: 6px 10px; font-size: 13px; } + .user-list { + display: none; + } + + .tab { + padding: 5px 8px; + font-size: 11px; + } + + .input-bar .input-nick { + padding-left: 8px; + font-size: 12px; + } + + .input-bar input { + font-size: 12px; + } } diff --git a/web/src/app.jsx b/web/src/app.jsx index 47ef442..f3fcd16 100644 --- a/web/src/app.jsx +++ b/web/src/app.jsx @@ -5,13 +5,17 @@ const API = '/api/v1'; const POLL_TIMEOUT = 15; const RECONNECT_DELAY = 3000; const MEMBER_REFRESH_INTERVAL = 10000; +const MAX_HISTORY = 100; function api(path, opts = {}) { const token = localStorage.getItem('neoirc_token'); - const headers = { 'Content-Type': 'application/json', ...(opts.headers || {}) }; + const headers = { + 'Content-Type': 'application/json', + ...(opts.headers || {}), + }; if (token) headers['Authorization'] = `Bearer ${token}`; const { signal, ...rest } = opts; - return fetch(API + path, { ...rest, headers, signal }).then(async r => { + return fetch(API + path, { ...rest, headers, signal }).then(async (r) => { const data = await r.json().catch(() => null); if (!r.ok) throw { status: r.status, data }; return data; @@ -20,12 +24,17 @@ function api(path, opts = {}) { function formatTime(ts) { const d = new Date(ts); - return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' }); + return d.toLocaleTimeString([], { + hour: '2-digit', + minute: '2-digit', + second: '2-digit', + }); } function nickColor(nick) { let h = 0; - for (let i = 0; i < nick.length; i++) h = nick.charCodeAt(i) + ((h << 5) - h); + for (let i = 0; i < nick.length; i++) + h = nick.charCodeAt(i) + ((h << 5) - h); const hue = Math.abs(h) % 360; return `hsl(${hue}, 70%, 65%)`; } @@ -38,13 +47,17 @@ function LoginScreen({ onLogin }) { const inputRef = useRef(); useEffect(() => { - api('/server').then(s => { - if (s.name) setServerName(s.name); - if (s.motd) setMotd(s.motd); - }).catch(() => {}); + api('/server') + .then((s) => { + if (s.name) setServerName(s.name); + if (s.motd) setMotd(s.motd); + }) + .catch(() => {}); const saved = localStorage.getItem('neoirc_token'); if (saved) { - api('/state').then(u => onLogin(u.nick)).catch(() => localStorage.removeItem('neoirc_token')); + api('/state') + .then((u) => onLogin(u.nick)) + .catch(() => localStorage.removeItem('neoirc_token')); } inputRef.current?.focus(); }, []); @@ -55,7 +68,7 @@ function LoginScreen({ onLogin }) { try { const res = await api('/session', { method: 'POST', - body: JSON.stringify({ nick: nick.trim() }) + body: JSON.stringify({ nick: nick.trim() }), }); localStorage.setItem('neoirc_token', res.token); onLogin(res.nick); @@ -74,7 +87,7 @@ function LoginScreen({ onLogin }) { type="text" placeholder="Choose a nickname..." value={nick} - onInput={e => setNick(e.target.value)} + onInput={(e) => setNick(e.target.value)} maxLength={32} autoFocus /> @@ -94,15 +107,64 @@ function Message({ msg }) { ); } + if (msg.action) { + return ( +
+ {formatTime(msg.ts)} + + {'* '} + + {msg.from} + {' '} + {msg.text} + +
+ ); + } return (
{formatTime(msg.ts)} - {msg.from} + + {msg.from} + {msg.text}
); } +function UserList({ members, userModes, onDM }) { + const sorted = [...members].sort((a, b) => { + const modeA = userModes[a.nick] || ''; + const modeB = userModes[b.nick] || ''; + const rankA = modeA === 'o' ? 0 : modeA === 'v' ? 1 : 2; + const rankB = modeB === 'o' ? 0 : modeB === 'v' ? 1 : 2; + if (rankA !== rankB) return rankA - rankB; + return a.nick.localeCompare(b.nick); + }); + + return ( +
+
Users ({members.length})
+
+ {sorted.map((u) => { + const mode = userModes[u.nick] || ''; + const prefix = mode === 'o' ? '@' : mode === 'v' ? '+' : ''; + return ( +
onDM(u.nick)} + title={u.nick} + > + {prefix} + {u.nick} +
+ ); + })} +
+
+ ); +} + function App() { const [loggedIn, setLoggedIn] = useState(false); const [nick, setNick] = useState(''); @@ -110,11 +172,13 @@ function App() { const [activeTab, setActiveTab] = useState(0); const [messages, setMessages] = useState({ Server: [] }); const [members, setMembers] = useState({}); + const [userModes, setUserModes] = useState({}); const [topics, setTopics] = useState({}); const [unread, setUnread] = useState({}); const [input, setInput] = useState(''); - const [joinInput, setJoinInput] = useState(''); const [connected, setConnected] = useState(true); + const [cmdHistory, setCmdHistory] = useState([]); + const [historyIdx, setHistoryIdx] = useState(-1); const lastIdRef = useRef(0); const seenIdsRef = useRef(new Set()); @@ -125,132 +189,210 @@ function App() { const messagesEndRef = useRef(); const inputRef = useRef(); - useEffect(() => { tabsRef.current = tabs; }, [tabs]); - useEffect(() => { activeTabRef.current = activeTab; }, [activeTab]); - useEffect(() => { nickRef.current = nick; }, [nick]); + useEffect(() => { + tabsRef.current = tabs; + }, [tabs]); + useEffect(() => { + activeTabRef.current = activeTab; + }, [activeTab]); + useEffect(() => { + nickRef.current = nick; + }, [nick]); // Persist joined channels useEffect(() => { - const channels = tabs.filter(t => t.type === 'channel').map(t => t.name); + const channels = tabs.filter((t) => t.type === 'channel').map((t) => t.name); localStorage.setItem('neoirc_channels', JSON.stringify(channels)); }, [tabs]); // Clear unread on tab switch useEffect(() => { const tab = tabs[activeTab]; - if (tab) setUnread(prev => ({ ...prev, [tab.name]: 0 })); + if (tab) setUnread((prev) => ({ ...prev, [tab.name]: 0 })); }, [activeTab, tabs]); const addMessage = useCallback((tabName, msg) => { if (msg.id && seenIdsRef.current.has(msg.id)) return; if (msg.id) seenIdsRef.current.add(msg.id); - setMessages(prev => ({ + setMessages((prev) => ({ ...prev, - [tabName]: [...(prev[tabName] || []), msg] + [tabName]: [...(prev[tabName] || []), msg], })); const currentTab = tabsRef.current[activeTabRef.current]; if (!currentTab || currentTab.name !== tabName) { - setUnread(prev => ({ ...prev, [tabName]: (prev[tabName] || 0) + 1 })); + setUnread((prev) => ({ + ...prev, + [tabName]: (prev[tabName] || 0) + 1, + })); } }, []); const addSystemMessage = useCallback((tabName, text) => { - setMessages(prev => ({ + setMessages((prev) => ({ ...prev, - [tabName]: [...(prev[tabName] || []), { - id: 'sys-' + Date.now() + '-' + Math.random(), - ts: new Date().toISOString(), - text, - system: true - }] + [tabName]: [ + ...(prev[tabName] || []), + { + id: 'sys-' + Date.now() + '-' + Math.random(), + ts: new Date().toISOString(), + text, + system: true, + }, + ], })); }, []); const refreshMembers = useCallback((channel) => { const chName = channel.replace('#', ''); - api(`/channels/${chName}/members`).then(m => { - setMembers(prev => ({ ...prev, [channel]: m })); - }).catch(() => {}); + api(`/channels/${chName}/members`) + .then((m) => { + setMembers((prev) => ({ ...prev, [channel]: m })); + }) + .catch(() => {}); }, []); - const processMessage = useCallback((msg) => { - const body = Array.isArray(msg.body) ? msg.body.join('\n') : ''; - const base = { id: msg.id, ts: msg.ts, from: msg.from, to: msg.to, command: msg.command }; - - switch (msg.command) { - case 'PRIVMSG': - case 'NOTICE': { - const parsed = { ...base, text: body, system: false }; - const target = msg.to; - if (target && target.startsWith('#')) { - addMessage(target, parsed); - } else { - const dmPeer = msg.from === nickRef.current ? msg.to : msg.from; - setTabs(prev => { - if (!prev.find(t => t.type === 'dm' && t.name === dmPeer)) { - return [...prev, { type: 'dm', name: dmPeer }]; - } - return prev; - }); - addMessage(dmPeer, parsed); - } - break; + const parseNamesReply = useCallback((channel, namesStr) => { + // Parse 353 RPL_NAMREPLY body: "@op1 alice bob +voiced1" + const nicks = namesStr.trim().split(/\s+/); + const modes = {}; + for (const entry of nicks) { + if (entry.startsWith('@')) { + modes[entry.slice(1)] = 'o'; + } else if (entry.startsWith('+')) { + modes[entry.slice(1)] = 'v'; } - case 'JOIN': { - const text = `${msg.from} has joined ${msg.to}`; - if (msg.to) addMessage(msg.to, { ...base, text, system: true }); - if (msg.to && msg.to.startsWith('#')) refreshMembers(msg.to); - break; - } - case 'PART': { - const reason = body ? ': ' + body : ''; - const text = `${msg.from} has left ${msg.to}${reason}`; - if (msg.to) addMessage(msg.to, { ...base, text, system: true }); - if (msg.to && msg.to.startsWith('#')) refreshMembers(msg.to); - break; - } - case 'QUIT': { - const reason = body ? ': ' + body : ''; - const text = `${msg.from} has quit${reason}`; - tabsRef.current.forEach(tab => { - if (tab.type === 'channel') { - addMessage(tab.name, { ...base, text, system: true }); - } - }); - break; - } - case 'NICK': { - const newNick = Array.isArray(msg.body) ? msg.body[0] : body; - const text = `${msg.from} is now known as ${newNick}`; - tabsRef.current.forEach(tab => { - if (tab.type === 'channel') { - addMessage(tab.name, { ...base, text, system: true }); - } - }); - if (msg.from === nickRef.current && newNick) setNick(newNick); - // Refresh members in all channels - tabsRef.current.forEach(tab => { - if (tab.type === 'channel') refreshMembers(tab.name); - }); - break; - } - case 'TOPIC': { - const text = `${msg.from} set the topic: ${body}`; - if (msg.to) { - addMessage(msg.to, { ...base, text, system: true }); - setTopics(prev => ({ ...prev, [msg.to]: body })); - } - break; - } - case '375': - case '372': - case '376': - addMessage('Server', { ...base, text: body, system: true }); - break; - default: - addMessage('Server', { ...base, text: body || msg.command, system: true }); + // plain nicks have no mode entry } - }, [addMessage, refreshMembers]); + setUserModes((prev) => ({ + ...prev, + [channel]: { ...(prev[channel] || {}), ...modes }, + })); + }, []); + + const processMessage = useCallback( + (msg) => { + const body = Array.isArray(msg.body) ? msg.body.join('\n') : ''; + const base = { + id: msg.id, + ts: msg.ts, + from: msg.from, + to: msg.to, + command: msg.command, + }; + const isAction = msg.meta && msg.meta.action; + + switch (msg.command) { + case 'PRIVMSG': + case 'NOTICE': { + const parsed = { + ...base, + text: body, + system: false, + action: isAction, + }; + const target = msg.to; + if (target && target.startsWith('#')) { + addMessage(target, parsed); + } else { + const dmPeer = + msg.from === nickRef.current ? msg.to : msg.from; + setTabs((prev) => { + if (!prev.find((t) => t.type === 'dm' && t.name === dmPeer)) { + return [...prev, { type: 'dm', name: dmPeer }]; + } + return prev; + }); + addMessage(dmPeer, parsed); + } + break; + } + case 'JOIN': { + const text = `${msg.from} has joined ${msg.to}`; + if (msg.to) + addMessage(msg.to, { ...base, text, system: true }); + if (msg.to && msg.to.startsWith('#')) refreshMembers(msg.to); + break; + } + case 'PART': { + const reason = body ? ': ' + body : ''; + const text = `${msg.from} has parted ${msg.to}${reason}`; + if (msg.to) + addMessage(msg.to, { ...base, text, system: true }); + if (msg.to && msg.to.startsWith('#')) refreshMembers(msg.to); + break; + } + case 'QUIT': { + const reason = body ? ': ' + body : ''; + const text = `${msg.from} has quit${reason}`; + tabsRef.current.forEach((tab) => { + if (tab.type === 'channel') { + addMessage(tab.name, { ...base, text, system: true }); + } + }); + break; + } + case 'NICK': { + const newNick = Array.isArray(msg.body) ? msg.body[0] : body; + const text = `${msg.from} is now known as ${newNick}`; + tabsRef.current.forEach((tab) => { + if (tab.type === 'channel') { + addMessage(tab.name, { ...base, text, system: true }); + } + }); + if (msg.from === nickRef.current && newNick) setNick(newNick); + tabsRef.current.forEach((tab) => { + if (tab.type === 'channel') refreshMembers(tab.name); + }); + break; + } + case 'TOPIC': { + const text = `${msg.from} set the topic: ${body}`; + if (msg.to) { + addMessage(msg.to, { ...base, text, system: true }); + setTopics((prev) => ({ ...prev, [msg.to]: body })); + } + break; + } + case '332': { + // RPL_TOPIC — channel topic on join + const channel = + Array.isArray(msg.params) && msg.params.length > 0 + ? msg.params[0] + : msg.to; + if (channel) { + setTopics((prev) => ({ ...prev, [channel]: body })); + } + break; + } + case '353': { + // RPL_NAMREPLY — parse user modes from names list + const channel = + Array.isArray(msg.params) && msg.params.length > 1 + ? msg.params[1] + : msg.to; + if (channel && body) { + parseNamesReply(channel, body); + } + break; + } + case '366': + // RPL_ENDOFNAMES — ignore + break; + case '375': + case '372': + case '376': + addMessage('Server', { ...base, text: body, system: true }); + break; + default: + addMessage('Server', { + ...base, + text: body || msg.command, + system: true, + }); + } + }, + [addMessage, refreshMembers, parseNamesReply], + ); // Long-poll loop useEffect(() => { @@ -264,7 +406,7 @@ function App() { pollAbortRef.current = controller; const result = await api( `/messages?after=${lastIdRef.current}&timeout=${POLL_TIMEOUT}`, - { signal: controller.signal } + { signal: controller.signal }, ); if (!alive) break; setConnected(true); @@ -278,13 +420,16 @@ function App() { if (!alive) break; if (err.name === 'AbortError') continue; setConnected(false); - await new Promise(r => setTimeout(r, RECONNECT_DELAY)); + await new Promise((r) => setTimeout(r, RECONNECT_DELAY)); } } }; poll(); - return () => { alive = false; pollAbortRef.current?.abort(); }; + return () => { + alive = false; + pollAbortRef.current?.abort(); + }; }, [loggedIn, processMessage]); // Refresh members for active channel @@ -293,7 +438,10 @@ function App() { const tab = tabs[activeTab]; if (!tab || tab.type !== 'channel') return; refreshMembers(tab.name); - const iv = setInterval(() => refreshMembers(tab.name), MEMBER_REFRESH_INTERVAL); + const iv = setInterval( + () => refreshMembers(tab.name), + MEMBER_REFRESH_INTERVAL, + ); return () => clearInterval(iv); }, [loggedIn, activeTab, tabs, refreshMembers]); @@ -303,71 +451,100 @@ function App() { }, [messages, activeTab]); // Focus input on tab change - useEffect(() => { inputRef.current?.focus(); }, [activeTab]); + useEffect(() => { + inputRef.current?.focus(); + }, [activeTab]); // Fetch topic for active channel useEffect(() => { if (!loggedIn) return; const tab = tabs[activeTab]; if (!tab || tab.type !== 'channel') return; - api('/channels').then(channels => { - const ch = channels.find(c => c.name === tab.name); - if (ch && ch.topic) setTopics(prev => ({ ...prev, [tab.name]: ch.topic })); - }).catch(() => {}); + api('/channels') + .then((channels) => { + const ch = channels.find((c) => c.name === tab.name); + if (ch && ch.topic) + setTopics((prev) => ({ ...prev, [tab.name]: ch.topic })); + }) + .catch(() => {}); }, [loggedIn, activeTab, tabs]); - const onLogin = useCallback(async (userNick) => { - setNick(userNick); - setLoggedIn(true); - addSystemMessage('Server', `Connected as ${userNick}`); - // Auto-rejoin saved channels - const saved = JSON.parse(localStorage.getItem('neoirc_channels') || '[]'); - for (const ch of saved) { - try { - await api('/messages', { method: 'POST', body: JSON.stringify({ command: 'JOIN', to: ch }) }); - setTabs(prev => { - if (prev.find(t => t.type === 'channel' && t.name === ch)) return prev; - return [...prev, { type: 'channel', name: ch }]; - }); - } catch (e) { - // Channel may not exist anymore + const onLogin = useCallback( + async (userNick) => { + setNick(userNick); + setLoggedIn(true); + addSystemMessage('Server', `Connected as ${userNick}`); + // Auto-rejoin saved channels + const saved = JSON.parse( + localStorage.getItem('neoirc_channels') || '[]', + ); + for (const ch of saved) { + try { + await api('/messages', { + method: 'POST', + body: JSON.stringify({ command: 'JOIN', to: ch }), + }); + setTabs((prev) => { + if (prev.find((t) => t.type === 'channel' && t.name === ch)) + return prev; + return [...prev, { type: 'channel', name: ch }]; + }); + } catch (e) { + // Channel may not exist anymore + } } - } - }, [addSystemMessage]); + }, + [addSystemMessage], + ); const joinChannel = async (name) => { if (!name) return; name = name.trim(); if (!name.startsWith('#')) name = '#' + name; try { - await api('/messages', { method: 'POST', body: JSON.stringify({ command: 'JOIN', to: name }) }); - setTabs(prev => { - if (prev.find(t => t.type === 'channel' && t.name === name)) return prev; + await api('/messages', { + method: 'POST', + body: JSON.stringify({ command: 'JOIN', to: name }), + }); + setTabs((prev) => { + if (prev.find((t) => t.type === 'channel' && t.name === name)) + return prev; return [...prev, { type: 'channel', name }]; }); setActiveTab(tabs.length); // Load history try { - const hist = await api(`/history?target=${encodeURIComponent(name)}&limit=50`); + const hist = await api( + `/history?target=${encodeURIComponent(name)}&limit=50`, + ); if (Array.isArray(hist)) { for (const m of hist) processMessage(m); } } catch (e) { // History may be empty } - setJoinInput(''); } catch (err) { - addSystemMessage('Server', `Failed to join ${name}: ${err.data?.error || 'error'}`); + addSystemMessage( + 'Server', + `Failed to join ${name}: ${err.data?.error || 'error'}`, + ); } }; - const partChannel = async (name) => { + const partChannel = async (name, reason) => { try { - await api('/messages', { method: 'POST', body: JSON.stringify({ command: 'PART', to: name }) }); + const payload = { command: 'PART', to: name }; + if (reason) payload.body = [reason]; + await api('/messages', { + method: 'POST', + body: JSON.stringify(payload), + }); } catch (e) { // Ignore } - setTabs(prev => prev.filter(t => !(t.type === 'channel' && t.name === name))); + setTabs((prev) => + prev.filter((t) => !(t.type === 'channel' && t.name === name)), + ); setActiveTab(0); }; @@ -376,68 +553,284 @@ function App() { if (tab.type === 'channel') { partChannel(tab.name); } else if (tab.type === 'dm') { - setTabs(prev => prev.filter((_, i) => i !== idx)); + setTabs((prev) => prev.filter((_, i) => i !== idx)); if (activeTab >= idx) setActiveTab(Math.max(0, activeTab - 1)); } }; const openDM = (targetNick) => { - setTabs(prev => { - if (prev.find(t => t.type === 'dm' && t.name === targetNick)) return prev; + setTabs((prev) => { + if (prev.find((t) => t.type === 'dm' && t.name === targetNick)) + return prev; return [...prev, { type: 'dm', name: targetNick }]; }); - const idx = tabs.findIndex(t => t.type === 'dm' && t.name === targetNick); + const idx = tabs.findIndex( + (t) => t.type === 'dm' && t.name === targetNick, + ); setActiveTab(idx >= 0 ? idx : tabs.length); }; + const handleCommand = async (text) => { + const parts = text.split(' '); + const cmd = parts[0].toLowerCase(); + const tab = tabs[activeTab]; + + switch (cmd) { + case '/join': + if (parts[1]) joinChannel(parts[1]); + else + addSystemMessage( + tab?.name || 'Server', + 'Usage: /join #channel', + ); + break; + + case '/part': { + if (tab?.type === 'channel') { + const reason = parts.slice(1).join(' ') || ''; + partChannel(tab.name, reason); + } else { + addSystemMessage( + tab?.name || 'Server', + 'Not in a channel', + ); + } + break; + } + + case '/msg': + if (parts[1] && parts.slice(2).join(' ')) { + const target = parts[1]; + const msgBody = parts.slice(2).join(' '); + try { + await api('/messages', { + method: 'POST', + body: JSON.stringify({ + command: 'PRIVMSG', + to: target, + body: [msgBody], + }), + }); + openDM(target); + } catch (err) { + addSystemMessage( + 'Server', + `DM failed: ${err.data?.error || 'error'}`, + ); + } + } else { + addSystemMessage( + tab?.name || 'Server', + 'Usage: /msg ', + ); + } + break; + + case '/me': + if (tab && tab.type !== 'server') { + const actionText = parts.slice(1).join(' '); + if (actionText) { + try { + await api('/messages', { + method: 'POST', + body: JSON.stringify({ + command: 'PRIVMSG', + to: tab.name, + body: [actionText], + meta: { action: true }, + }), + }); + } catch (err) { + addSystemMessage( + tab.name, + `Action failed: ${err.data?.error || 'error'}`, + ); + } + } else { + addSystemMessage(tab.name, 'Usage: /me '); + } + } + break; + + case '/nick': + if (parts[1]) { + try { + await api('/messages', { + method: 'POST', + body: JSON.stringify({ + command: 'NICK', + body: [parts[1]], + }), + }); + } catch (err) { + addSystemMessage( + 'Server', + `Nick change failed: ${err.data?.error || 'error'}`, + ); + } + } else { + addSystemMessage( + tab?.name || 'Server', + 'Usage: /nick ', + ); + } + break; + + case '/topic': + if (tab?.type === 'channel') { + const topicText = parts.slice(1).join(' '); + try { + await api('/messages', { + method: 'POST', + body: JSON.stringify({ + command: 'TOPIC', + to: tab.name, + body: [topicText], + }), + }); + } catch (err) { + addSystemMessage( + tab.name, + `Topic failed: ${err.data?.error || 'error'}`, + ); + } + } else { + addSystemMessage( + tab?.name || 'Server', + 'Not in a channel', + ); + } + break; + + case '/mode': + if (tab?.type === 'channel' && parts.length >= 2) { + const modeTarget = parts[1].startsWith('#') + ? parts[1] + : tab.name; + const modeParams = parts[1].startsWith('#') + ? parts.slice(2) + : parts.slice(1); + try { + await api('/messages', { + method: 'POST', + body: JSON.stringify({ + command: 'MODE', + to: modeTarget, + params: modeParams, + }), + }); + } catch (err) { + addSystemMessage( + tab.name, + `Mode failed: ${err.data?.error || 'error'}`, + ); + } + } else { + addSystemMessage( + tab?.name || 'Server', + 'Usage: /mode [#channel] <+/-mode> [nick]', + ); + } + break; + + case '/quit': { + const quitMsg = parts.slice(1).join(' '); + try { + const payload = { command: 'QUIT' }; + if (quitMsg) payload.body = [quitMsg]; + await api('/messages', { + method: 'POST', + body: JSON.stringify(payload), + }); + } catch (e) { + // Ignore + } + localStorage.removeItem('neoirc_token'); + window.location.reload(); + break; + } + + case '/help': + addSystemMessage( + tab?.name || 'Server', + 'Commands: /join #channel, /part [reason], /msg nick message, ' + + '/me action, /nick newnick, /topic text, /mode [#channel] +/-mode [nick], ' + + '/quit [reason], /help', + ); + break; + + default: + addSystemMessage( + tab?.name || 'Server', + `Unknown command: ${cmd} — Type /help for available commands`, + ); + } + }; + const sendMessage = async () => { const text = input.trim(); if (!text) return; + + // Add to command history + setCmdHistory((prev) => { + const next = [text, ...prev]; + return next.slice(0, MAX_HISTORY); + }); + setHistoryIdx(-1); setInput(''); + const tab = tabs[activeTab]; - if (!tab || tab.type === 'server') return; if (text.startsWith('/')) { - const parts = text.split(' '); - const cmd = parts[0].toLowerCase(); - if (cmd === '/join' && parts[1]) { joinChannel(parts[1]); return; } - if (cmd === '/part') { if (tab.type === 'channel') partChannel(tab.name); return; } - if (cmd === '/msg' && parts[1] && parts.slice(2).join(' ')) { - const target = parts[1]; - const body = parts.slice(2).join(' '); - try { - await api('/messages', { method: 'POST', body: JSON.stringify({ command: 'PRIVMSG', to: target, body: [body] }) }); - openDM(target); - } catch (err) { - addSystemMessage('Server', `DM failed: ${err.data?.error || 'error'}`); - } - return; - } - if (cmd === '/nick' && parts[1]) { - try { - await api('/messages', { method: 'POST', body: JSON.stringify({ command: 'NICK', body: [parts[1]] }) }); - } catch (err) { - addSystemMessage('Server', `Nick change failed: ${err.data?.error || 'error'}`); - } - return; - } - if (cmd === '/topic' && tab.type === 'channel') { - const topicText = parts.slice(1).join(' '); - try { - await api('/messages', { method: 'POST', body: JSON.stringify({ command: 'TOPIC', to: tab.name, body: [topicText] }) }); - } catch (err) { - addSystemMessage('Server', `Topic failed: ${err.data?.error || 'error'}`); - } - return; - } - addSystemMessage('Server', `Unknown command: ${cmd}`); + await handleCommand(text); + return; + } + + if (!tab || tab.type === 'server') { + addSystemMessage( + 'Server', + 'Cannot send messages to the server tab. Join a channel with /join #channel', + ); return; } try { - await api('/messages', { method: 'POST', body: JSON.stringify({ command: 'PRIVMSG', to: tab.name, body: [text] }) }); + await api('/messages', { + method: 'POST', + body: JSON.stringify({ + command: 'PRIVMSG', + to: tab.name, + body: [text], + }), + }); } catch (err) { - addSystemMessage(tab.name, `Send failed: ${err.data?.error || 'error'}`); + addSystemMessage( + tab.name, + `Send failed: ${err.data?.error || 'error'}`, + ); + } + }; + + const handleInputKeyDown = (e) => { + if (e.key === 'Enter') { + sendMessage(); + } else if (e.key === 'ArrowUp') { + e.preventDefault(); + if (cmdHistory.length > 0) { + const nextIdx = Math.min(historyIdx + 1, cmdHistory.length - 1); + setHistoryIdx(nextIdx); + setInput(cmdHistory[nextIdx]); + } + } else if (e.key === 'ArrowDown') { + e.preventDefault(); + if (historyIdx > 0) { + const nextIdx = historyIdx - 1; + setHistoryIdx(nextIdx); + setInput(cmdHistory[nextIdx]); + } else { + setHistoryIdx(-1); + setInput(''); + } } }; @@ -446,72 +839,87 @@ function App() { const currentTab = tabs[activeTab] || tabs[0]; const currentMessages = messages[currentTab.name] || []; const currentMembers = members[currentTab.name] || []; + const currentUserModes = userModes[currentTab.name] || {}; const currentTopic = topics[currentTab.name] || ''; return (
- {!connected &&
⚠ Reconnecting...
} + {!connected && ( +
⚠ Reconnecting...
+ )} {tabs.map((tab, i) => (
setActiveTab(i)} > - {tab.type === 'dm' ? `→${tab.name}` : tab.name} + + {tab.type === 'dm' ? `→${tab.name}` : tab.name} + {unread[tab.name] > 0 && i !== activeTab && ( {unread[tab.name]} )} {tab.type !== 'server' && ( - { e.stopPropagation(); closeTab(i); }}>× + { + e.stopPropagation(); + closeTab(i); + }} + > + × + )}
))} -
- setJoinInput(e.target.value)} - onKeyDown={e => e.key === 'Enter' && joinChannel(joinInput)} - /> - -
- {currentTab.type === 'channel' && currentTopic && ( -
{currentTopic}
+ {currentTab.type === 'channel' && ( +
+ Topic:{' '} + {currentTopic || '(no topic set)'} +
)}
-
- {currentMessages.map(m => )} +
+ {currentMessages.map((m) => ( + + ))}
- {currentTab.type !== 'server' && ( -
- setInput(e.target.value)} - onKeyDown={e => e.key === 'Enter' && sendMessage()} - /> - -
- )}
{currentTab.type === 'channel' && ( -
-

Users ({currentMembers.length})

- {currentMembers.map(u => ( -
openDM(u.nick)} style={{ color: nickColor(u.nick) }}> - {u.nick} -
- ))} -
+ )}
+ +
+ {nick} + setInput(e.target.value)} + onKeyDown={handleInputKeyDown} + /> +
); } diff --git a/web/src/style.css b/web/src/style.css index ecf3ebb..9514429 100644 --- a/web/src/style.css +++ b/web/src/style.css @@ -1,28 +1,40 @@ -* { margin: 0; padding: 0; box-sizing: border-box; } - -:root { - --bg: #1a1a2e; - --bg-secondary: #16213e; - --bg-input: #0f3460; - --text: #e0e0e0; - --text-muted: #888; - --accent: #e94560; - --accent2: #0f3460; - --border: #2a2a4a; - --nick: #53a8b6; - --timestamp: #666; - --tab-active: #e94560; - --tab-bg: #16213e; - --tab-hover: #1a1a3e; - --topic-bg: #121a30; - --unread-bg: #e94560; - --warn: #f0ad4e; +* { + margin: 0; + padding: 0; + box-sizing: border-box; } -html, body, #root { +:root { + --bg: #0a0e14; + --bg-secondary: #0d1117; + --bg-input: #161b22; + --bg-highlight: #1a2030; + --text: #c9d1d9; + --text-muted: #6e7681; + --accent: #58a6ff; + --accent-dim: #1f6feb; + --border: #21262d; + --nick: #79c0ff; + --timestamp: #484f58; + --tab-active: #58a6ff; + --tab-bg: #0d1117; + --tab-hover: #161b22; + --topic-bg: #0d1117; + --unread-bg: #da3633; + --warn: #d29922; + --op-color: #f0883e; + --voice-color: #3fb950; + --action-color: #bc8cff; + --system-color: #484f58; +} + +html, +body, +#root { height: 100%; - font-family: 'Courier New', Courier, monospace; - font-size: 14px; + font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', + Courier, monospace; + font-size: 13px; background: var(--bg); color: var(--text); } @@ -57,15 +69,19 @@ html, body, #root { padding: 10px 24px; font-size: 16px; font-family: inherit; - background: var(--accent); + background: var(--accent-dim); border: none; color: white; border-radius: 4px; cursor: pointer; } +.login-screen button:hover { + background: var(--accent); +} + .login-screen .error { - color: var(--accent); + color: var(--unread-bg); } .login-screen .motd { @@ -89,36 +105,63 @@ html, body, #root { border-bottom: 1px solid var(--border); overflow-x: auto; flex-shrink: 0; - align-items: center; + align-items: stretch; + min-height: 32px; +} + +.tab-bar::-webkit-scrollbar { + height: 2px; +} + +.tab-bar::-webkit-scrollbar-thumb { + background: var(--border); } .tab { - padding: 8px 16px; + display: flex; + align-items: center; + padding: 6px 12px; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; color: var(--text-muted); user-select: none; - position: relative; + font-size: 12px; + gap: 6px; + transition: + background 0.1s, + color 0.1s; } .tab:hover { background: var(--tab-hover); + color: var(--text); } .tab.active { color: var(--text); border-bottom-color: var(--tab-active); + background: var(--bg-highlight); +} + +.tab.server { + font-weight: bold; +} + +.tab .tab-name { + overflow: hidden; + text-overflow: ellipsis; } .tab .close-btn { - margin-left: 8px; color: var(--text-muted); - font-size: 12px; + font-size: 14px; + line-height: 1; + flex-shrink: 0; } .tab .close-btn:hover { - color: var(--accent); + color: var(--unread-bg); } .tab .unread-badge { @@ -127,19 +170,22 @@ html, body, #root { color: white; font-size: 10px; font-weight: bold; - padding: 1px 5px; + padding: 0 5px; border-radius: 8px; - margin-left: 6px; min-width: 16px; text-align: center; + line-height: 16px; + flex-shrink: 0; } /* Connection status */ .connection-status { - padding: 4px 12px; + display: flex; + align-items: center; + padding: 0 12px; background: var(--warn); - color: #1a1a2e; - font-size: 12px; + color: var(--bg); + font-size: 11px; font-weight: bold; white-space: nowrap; flex-shrink: 0; @@ -147,7 +193,7 @@ html, body, #root { /* Topic bar */ .topic-bar { - padding: 6px 12px; + padding: 4px 12px; background: var(--topic-bg); border-bottom: 1px solid var(--border); color: var(--text-muted); @@ -158,6 +204,11 @@ html, body, #root { flex-shrink: 0; } +.topic-bar .topic-label { + color: var(--accent); + font-weight: bold; +} + /* Content area */ .content { display: flex; @@ -171,147 +222,210 @@ html, body, #root { display: flex; flex-direction: column; overflow: hidden; + min-width: 0; } .messages { flex: 1; overflow-y: auto; - padding: 8px 12px; + padding: 4px 0; +} + +.messages::-webkit-scrollbar { + width: 6px; +} + +.messages::-webkit-scrollbar-thumb { + background: var(--border); + border-radius: 3px; } .message { - padding: 2px 0; - line-height: 1.4; + padding: 1px 12px; + line-height: 1.5; word-wrap: break-word; } +.message:hover { + background: var(--bg-highlight); +} + .message .timestamp { color: var(--timestamp); - font-size: 12px; - margin-right: 8px; + font-size: 11px; + margin-right: 6px; } .message .nick { - color: var(--nick); font-weight: bold; - margin-right: 8px; + margin-right: 6px; } -.message .nick::before { content: '<'; } -.message .nick::after { content: '>'; } +.message .nick::before { + content: '<'; + color: var(--text-muted); +} + +.message .nick::after { + content: '>'; + color: var(--text-muted); +} .message.system { - color: var(--text-muted); + color: var(--system-color); font-style: italic; } -.message.system .nick { - color: var(--text-muted); +.message.system .timestamp { + color: var(--timestamp); } -.message.system .nick::before, -.message.system .nick::after { content: ''; } +.message.system .content::before { + content: '*** '; +} -/* Input */ +.message.action { + color: var(--action-color); +} + +.message.action .timestamp { + color: var(--timestamp); +} + +.message.action .action-nick { + font-weight: bold; +} + +/* Input bar — full width at bottom */ .input-bar { display: flex; + align-items: center; border-top: 1px solid var(--border); background: var(--bg-secondary); flex-shrink: 0; } +.input-bar .input-nick { + padding: 0 8px 0 12px; + color: var(--accent); + font-weight: bold; + white-space: nowrap; + flex-shrink: 0; + font-size: 13px; +} + +.input-bar .input-nick::after { + content: '>'; + color: var(--text-muted); + margin-left: 1px; +} + .input-bar input { flex: 1; - padding: 10px 12px; + padding: 8px 8px; font-family: inherit; - font-size: 14px; - background: var(--bg-input); + font-size: 13px; + background: transparent; border: none; color: var(--text); outline: none; } -.input-bar button { - padding: 10px 16px; - font-family: inherit; - background: var(--accent); - border: none; - color: white; - cursor: pointer; +.input-bar input::placeholder { + color: var(--text-muted); } /* User list */ .user-list { - width: 160px; + width: 170px; background: var(--bg-secondary); border-left: 1px solid var(--border); - overflow-y: auto; - padding: 8px; + display: flex; + flex-direction: column; flex-shrink: 0; } -.user-list h3 { +.user-list-header { + padding: 6px 10px; color: var(--text-muted); font-size: 11px; text-transform: uppercase; - margin-bottom: 8px; - letter-spacing: 1px; + letter-spacing: 0.5px; + border-bottom: 1px solid var(--border); + font-weight: bold; + flex-shrink: 0; +} + +.user-list-entries { + overflow-y: auto; + flex: 1; + padding: 4px 0; +} + +.user-list-entries::-webkit-scrollbar { + width: 4px; +} + +.user-list-entries::-webkit-scrollbar-thumb { + background: var(--border); } .user-list .user { - padding: 3px 4px; - color: var(--nick); - font-size: 13px; + padding: 2px 10px; + font-size: 12px; cursor: pointer; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + color: var(--text); } .user-list .user:hover { background: var(--tab-hover); } -/* Server tab */ +.user-list .user.op { + color: var(--op-color); +} + +.user-list .user.voice { + color: var(--voice-color); +} + +/* Server tab messages */ .server-messages { color: var(--text-muted); - padding: 12px; + padding: 8px 12px; white-space: pre-wrap; overflow-y: auto; flex: 1; } -/* Channel join dialog */ -.join-dialog { - padding: 12px; - display: flex; - gap: 8px; - background: var(--bg-secondary); - border-bottom: 1px solid var(--border); - margin-left: auto; +.server-messages .message { + padding: 1px 0; } -.join-dialog input { - padding: 6px 10px; - font-family: inherit; - font-size: 13px; - background: var(--bg-input); - border: 1px solid var(--border); - color: var(--text); - border-radius: 3px; - width: 200px; -} - -.join-dialog button { - padding: 6px 14px; - font-family: inherit; - font-size: 13px; - background: var(--accent2); - border: none; - color: var(--text); - border-radius: 3px; - cursor: pointer; +.server-messages .message:hover { + background: var(--bg-highlight); } /* Responsive */ @media (max-width: 600px) { - .user-list { display: none; } - .tab { padding: 6px 10px; font-size: 13px; } + .user-list { + display: none; + } + + .tab { + padding: 5px 8px; + font-size: 11px; + } + + .input-bar .input-nick { + padding-left: 8px; + font-size: 12px; + } + + .input-bar input { + font-size: 12px; + } }